當前位置:首頁 » 網頁前端 » 前端協作規范
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

前端協作規范

發布時間: 2022-09-11 08:27:23

A. 怎樣提高前端工程師開發效率,都在這里

前端工程師其實是一個工作很雜的職位,除了要負責切圖、寫html/css/js外,還要解決一系列的瀏覽器兼容性、網頁性能優化等問題,所以提高前端工程師的開發效率是勢在必行的,也是前端工程化的體現。

對於開發效率,我個人理解是

開發效率 = 新增代碼的效率 + 修改代碼的效率 + 維護代碼的效率

那麼如何提高前端開發效率便可以按照前端工程化的理念來進行劃分。下面我就介紹下7個提高前端開發效率的方法。

1.切圖

切圖是一個前端最基礎的技能,一般我們使用Photoshop或者FireWorks基本都能搞定設計師交付給我們的設計圖,但是要提高切圖效率的話就得使用一些訣竅了,比如利用PS里的動作來實現「一鍵切圖」功能,這里除了切圖外還介紹了其他的實用方法和工具。

2.編碼

對於編寫代碼部分我們首先要找到一款合適自己的IDE工具,建議不要使用Notepad++或者Dreamweaver,這些工具已經不符合前端潮流了,無法讓自己優雅地敲代碼。這里我主要推薦Sublime Text、Atom或者Webstrom,因為它們除了人性化的界面和支持大多數語法的高亮外,還可以安裝各種各樣的插件來拓展你的IDE工具,下面我主要介紹幾款Sublime Text提高開發效率的插件:

其中Element是用於快速編寫html/CSS的,比如輸入 ul>li 後按下tab鍵便可以生成一個ul標簽裡麵包含一個li標簽

JSFormat用於格式化JS;CSScomb用於對樣式屬性進行一鍵排序;HTML-CSS-JS Prettify可以一鍵規范我們的HTML/CSS/JS,甚至JSON格式;SublimeTmpl可以快速新建HTML/CSS/JS文件; ColorPicker用於調用本地調色板功能。這些工具都非常實用,一定程度上可以提高我們的編碼效率。

3.自動化

說到提高開發效率,這里不得不提一些前端的自動化工具,畢竟前端自動化是目前及未來的趨勢,能夠很大程度上縮減前端不必要的工作量,使我們能夠專注前端本身。

這里我們可以使用NPM來管理我們的項目包文件;利用webpack來打包壓縮我們的代碼;利用Node.js來實現構建本地伺服器;利用Karma、Jasmine來測試我們的前端代碼。

用好前端自動化工具可以幫助我們處理很多瑣碎的事情,比如一鍵壓縮代碼、圖片,一鍵合並JS,檢測文件更新等。

4.模塊化

隨著web2.0時代的到來,Ajax技術得到廣泛應用,前端代碼日益膨脹,而前端模塊化能夠方便我們對項目代碼的維護,進行按需載入,從長遠角度來看對我們提高項目的開發效率同樣大有益處。

在ES6出來之前應該說前端代碼本身不具備實現模塊的功能,我們必須要使用一些模塊化載入器來實現,比如RequireJS、SeaJs等。而隨著ES6的普及,目前像RequireJS、SeaJs這樣的工具已經沒有存在的必要了。所以在基於ES6的開發環境下我建議使用ES6的模塊化功能來實現我們的前端模塊化。

5.組件化

前端組件化的概念也是由來已久,我們可以通過將我們的代碼劃分成不同組件來實現功能公用,一個同樣的功能我們可能不用再次編寫相同的代碼,同時也可以提高前端代碼的可維護性和清晰度。以下是目前流行的前端框架Vue的單文件組件的概念圖:

我們可以將公用的組件抽離,將大組件拆分成小組件的形式實現前端組件化,組件與組件之間可以存在父子關系,也可以存在兄弟關系。在Vue的單文件組件中,一個組件包含了其HTML、CSS、JS的代碼片段。

6.前後端分離

前後端分離的項目對提升前端開發效率非常有幫助,因為前端不再需要後台配置路由、搭建伺服器環境、編寫模板等,這樣一來前端的生產力就會得到很大程度的解放,但是前後端分離的項目有利也有弊,如下圖所示:


最終我們需要根據項目需求衡量利弊來決定是否使用前後端分離的模式。

7.規范與模式

團隊協作離不開編碼規范和開發模式的幫助。遵循編碼規範文檔可以幫助我們在團隊開發時提高合作開發的效率。一個團隊遵循一套編碼規范可以使每個人的代碼寫出一個人的風格,這樣團隊間相互審查、測試、完善功能時會非常高效。下方是一些開源的前端編碼規範文檔:

  • 網頁鏈接

  • 首頁-TGuide

  • 網頁鏈接

  • 網頁鏈接

  • 除了編碼規范我們在開發時經常會沿襲了一些已經存在的模式來解決問題,比如當用JS編寫彈框時我們往往會用到單例模式,用CSS編寫動畫時直接套用動畫的常用屬性等,我們不再需要從頭開始思考某一個功能的實現,這就是模式帶來的意義。

    結語

    當然除了以上7點,對於前端來說需要提高開發效率的地方還有很多,可謂任重而道遠。只有將前端無序、繁雜的操作組織起來,利用工具簡化、規范前端流程,才能實現項目構建、開發、維護的一體化。希望本文能夠給初識前端的同學帶來啟發並付諸實踐。

B. UI設計師和前端怎麼合作

前端工程師需要和美工和後台開發人員進行合作。
1、和美工合作。
美工講設計好的效果圖,一般是一些psd文件給前端工程師,前端工程師根據效果如開始構思如何實現,並且開始使用Photoshop進行切圖,切出需要的圖片。如果圖片有問題或者不好操作的地方還需要美工給出修改。
2、和後台開發人員:
前端使用html、css、js等技術開始實現效果圖的頁面,同時需要和後台人員交流為後台數據留下借口和數據填充的區域等,或者獲取後台數據等,這需要和後台人員合作好。
3、完成項目
最終前端完成頁面交給後台,由後台人員填充後台數據,一個完整的工程完成。此時還需要前端和後台人員一起測試,完成數據和前端的良好交互。

C. 前端工作流程是什麼

公司性質決定流程,不過一般大體都是需求--設計--頁面製作--效果製作--添加程序。

假設 sys 級的規范和標准模塊已經完成(包括全局樣式、布局規范、標准盒模型等),這時需要開發一個項目,假設為淘江湖 SNS 項目。理想中的開發流程為:
a). PD 產出 PRD.
b). 交互統攬全局,將 PRD 中的可復用部分,拎取出來,產出 base-prototype.
c-1). 視覺根據 base-prototype,產出 base-mockup.
c-2). 前端根據 base-prototype 和 base-mockup 產出 app-dpl(該項目的 DPL)。
c-3). 交互繼續具體頁面的 page-prototype 產出工作。
以上三步是並行和迭代進行的。
d-1). 視覺根據 page-prototype 產出 page-mockup.
d-2). 前端根據 page-mockup 產出 page-demo.
以上兩步迭代進行。
流程的核心是迭代、是敏捷、是短周期。
最重要的一步是 base-prototype 的產出。交互要避免一個頁面一個頁面的產出順序,而應該先有一個統攬全局、拎取通用部分的步驟。
以上流程可以簡述為:sys -> app -> page. app 層的抽取很重要,可以提高團隊的開發效率和協作程度,讓團隊更融合、更高效。
感覺 LSM 強調的是前端工程師實現 demo 時的微流程。告訴我們做一個頁面時,需要 html 整體 -> 局部模塊的 css/js, 逐層開發,先整體後局部,先框架後細節。這是非常好的最佳實踐。

D. 前端與後端的含義和區別是什麼

前端和後端是從開發者的角度來講的
前端就是用戶可見部分的優化、交互功能開發,隨著軟體WEB化,Html5前端開發技術的發展,前端的技術方向越來越多,可開發解決的功能很多。

web前端有廣闊的發展空間,app、小程序、移動端、pc端等都是需要前端技術的開發支持才能夠完成,技術門檻相對較低、需求量較大,薪資待遇良好。只要是互聯網端的客戶界面,就需要前端來製作完成,前端開發的編程量不大,但是需要部分編程,入門簡單,但是要學的深入需要一個過程。
Web前端招聘崗位
• 前端開發工程師、Web開發工程師、網頁開發工程師、HTML開發工程師...
• H5開發工程師、移動應用開發工程師、App開發工程師、小程序開發工程師...
• JS開發工程師、Vue.js開發工程師、Node.js開發工程師、前端架構師...
• 小游戲開發工程師、數據可視化開發工程師、WebGL開發工程師、WebVR開 發工程師、Web安全工程師...
在互聯網行業,前端有WEB前端、HTML前端等,隨著互聯網技術發展,就業方向也有很多。web前端的就業方向有web架構師、web前端工程師、HTML前端開發工程師、網頁設計師等等。
HTML前端開發
與Web前端開發不同的是,使用HTML5不僅僅可以開發前端,還有網頁游戲,手機APP,使用瀏覽器進行3D渲染等一系列建立在HTML5標准與搭載其標准瀏覽器上的開發,而未來可能會有更多的功能分支並入HTML5標准。web前端工程師
這個方向是目前從事Web前端開發的主要就業方向
Web架構師
薪資普遍比較高,技術要求高,掌握多種技能,包括:後端技術、DBA、Platform等等,甚至包括網站優化SEO技術。
數據方向
數據研發這個是在Web開發的基礎上用數據附能,懂可視化的一定是有前端能力的,懂hadoop的一定java要熟悉,屬於Web開發的拓展方向。
大前端方向
比如阿里,在大量實踐rn和weex;由於公司內部安卓/ios式微,一定程度上,前端把ios和安卓收編了,統稱大前端。
圖形學方向
前端自然是與圖形學有千絲萬縷的聯系,除了上面提到了可視化,還有相關3d引擎的開發工作。做這一行要求也非常高了,圖形學相關的演算法,3d引擎的開發,這都需要圖形學相關知識。

E. 前端開發具體工作職責是什麼

入門級做頁面。就這么簡單。

把Designer出的各種設計圖轉化成html+css+js+image的靜態網頁,並把它們交給後端開發人員製作成頁面模板。這就是入門級的前端工程師所做的事情。

進階級還是做頁面。

不過稍微復雜一些,你需要開始注意一些更復雜的問題,首當其沖的就是瀏覽器兼容性問題。老實說瀏覽器兼容性問題真的不是那麼好搞定的,畢竟每個項目對瀏覽器版本的要求都不一樣,而且現在不光有PC瀏覽器還有各種移動設備上的瀏覽器,同時國內廠家的瀏覽器種類也越來越多,坑也是密密麻麻。除了兼容性,你可能還要關注一下性能問題,包括但不限於網路性能、渲染性能、js邏輯的性能等等,這個展開講可以寫本小冊子了。

中級帶團隊。

你可能會奇怪,一個中級工程師就能帶團隊了?可是真的很多公司就是這樣,尤其是小公司。當你了解了html、js、css以及各種瀏覽器的各種特性細節之後,你會被任命帶領一個小的開發團隊,當然是前端開發團隊。可能加你一共也就三四個人,甚至更少。這時候你的工作內容除了自己寫一點頁面以外,還會幫助組員解決各種各樣的細節問題,畢竟,組里,你是最懂技術細節的。這個時候,一部分人開始停步不前,而另一部分人開始關注另一個新的問題:工程化。前端代碼都是非常鬆散的,項目結構性差,一旦開發人員數量多起來,業務復雜起來,如何管理這么多人、這么多代碼是個非常大的問題。能否在這個問題上得到突破,決定了你能否邁向下一個級別。

高級架構設計。

此時你熟悉前端開發的各種技術細節(當然忘了一部分細節也沒事 ^_^),同時對各種前端框架、技術的特性聊熟於胸,你知道如何組織和管理項目讓大家能以最快的速度達到項目要求,你甚至了解手下每個人的所長所短。於是當新項目到來,你迅速根據自身過往的經驗選取若干種技術和工具,配上你認為最合適的人選組成項目團隊,披荊斬棘日夜兼程將產品汪的各種奇葩需求斬於馬下。這么做了一兩個項目之後,你可能又覺得空虛了,你要尋求新的目標。恰好,NodeJS打開了通往新世界的大門。

非典型前端穿過NodeJS打開的大門,你進入了全新的世界——後端。

全新的世界,無限的可能。樓上寸老師說的「上天入地,無所不能」,我猜就是這個狀態。愛幹嘛幹嘛吧,這個時候,你應該不會再來問「後端程序員都在幹嘛」這種問題了。其實,要成為一名「非典型前端」並不一定非得經過1~4的步驟。只是現在已經上了年紀的前端大多是這樣過來的,畢竟,NodeJS出來的時間也並不算很久。

F. 前端項目的開發流程

前端開發流程概述

前端開發流程可分為需求分析、開發階段、測試階段、維護階段,下面分別進行敘述。

2.1 需求分析

這個環節中,首先是和客戶進行交流,了解客戶的需求,然後分析項目的可行性,撰寫項目需求文檔。如果項目可行,則起討論具體方案,分模塊分步驟進行規劃,分析項目進度安排、所需成本,進行原型設計(包括頁面布局圖,頁面邏輯流程圖,說明文檔等。通過原型設計,可以讓項目組和客戶都可以對項目有一個直觀感受,同時可以低成本高效率的復現業務場景和各模塊流程)。
可以說需求分析階段是整個前端項目的基礎,基礎不牢,地動山搖。可以試想,如果和客戶溝通不順暢,有的方面客戶沒搞清楚是什麼效果,開發完成後就可能與客戶發生糾紛;如果可行性有問題,有的模塊很難實現或成本超出預算,就很難處理。

2.2 開發階段

這個環節是前端工程師主要參與的部分,按照需求分析階段的規劃按步驟完成任務。

  • 根據產品需求分析文檔和原型圖進行UI設計,對產品的整體美術風格、交互設計、界面結構、操作流程等做出設計。負責項目中各種交互界面、圖標、LOGO、按鈕等相關元素的設計與製作。

  • 根據UI設計進行規劃,提取界面中可以復用的模塊方便重復利用,分析界面是否有實現難度比較困難的地方,進行溝通和功能排期,按功能大小以及難度進行功能時間的評估,和後端溝通好排期時間,保證大家能夠更有效地開發合作,針對功能復雜的地方要先理清思路。

  • 不要盲目開發前端搭建框架。根據設計圖進行前端界面開發,以及遇到的問題及時與產品、UI、後台人員溝通,保持大家信息一致,針對不清楚的地方也要及時溝通,以免做錯功能。

  • 根據後端介面進行欄位填充,以及部分功能開發。針對缺少的欄位或者數據結構進行提出,及時與後端反應,盡量讓大家都能以最小的改動完成後續開發工作。前後端都要按照規范進行開發,針對不規范的地方要給與提出、指正,營造出規范的工作模式,以後維護成本和溝通成本更低以及開發效率更高。如果前端的設計進度遠遠超前後端的介面和數據結構設計,也不必等後端,可以自行開發nodejs伺服器配合postman等介面軟體進行開發。

  • 前後端功能聯調、完成自測。檢查功能完成情況,看是否有遺漏,出現問題及時溝通解決。

  • 2.3 測試階段

    發布測試、修改bug、發布上線,自測完成後提交測試,測試根據提交的項目以及需求進行測試,提出bug給相關人員修改,開發人員周期性的配合修改bug,保證今天能夠修復昨天的bug。
    發布dev環境,配合測試,修復bug以及需求優化
    發布test環境,修復bug以及需求優化
    發布it環境,修復bug以及需求優化
    發布pre環境,修復bug以及需求優化
    pre驗收之後,發布線上環境,產品進行驗收

    2.4 維護階段

    如果客戶驗收通過,項目就進入了維護階段,程序的維護包括程序上線後後續bug的修復和程序版本的更新。

    3 個人經驗總結

    3.1 文檔很重要

    前端項目的文檔似乎已經作為前端工程化的標准流程之一了,文檔寫的好,可以便於同事快速了解你的代碼功能和需求,便於協作。可以想像,隨之項目復雜度增加,體量越來越龐大,開發團隊人數也越來越多。這種情況下,如果像變魔術一樣隱匿中間流程而直接得出結果,後果可想而知:項目復雜度越增加就越難以管理,開發效率低,合作混亂,結果甚至導致項目死亡。
    好的文檔看起來就像一個產品說明書,但作用卻遠遠超過了說明書,不僅僅告訴你如何使用,還應該告訴你項目的設計思路,用了哪些組件,哪些部分不完善,將來有什麼規劃等等。這是一份比較好的說明文檔。

    3.2 與客戶及時溝通很重要

    3.3 扎實的基本功很重要

    盡管當下框架、函數庫、工具包等更新迭代非常快,前端工程師有很多新的知識要學,但原生JS、HTML和CSS依然是重要的基本功,在學習前沿工具的同時不能放棄基本功的訓練。

G. 前端架構師是怎樣定義的在前端開發過程中,承擔怎樣的職能

前段構架師總體的定義是一個具有精通各種前端開發技術可以總體規劃處一個網站前台項目。
1、具體的說前端構架師是一個具有網站前端基礎知識如html、css、js等和一些前端框架如jQuery、angularjs等等前端技術,可以規劃處一個前端項目的實施、測試、優化等過程,並且熟悉後台語言可以和後台開發人員合作達成良好的交互和數據與表現的分離。另外還需要明確網站的定為,滿足客戶的需求,可以留住客戶,使用網站這種手段為公司提高效益,前端是直接和用戶交互的媒介。
2、職能:包括規劃和實施整個項目,制定項目中的一些規范,明確人員的分工,解決團隊中的協作問題以保證項目的按時完成。

H. 前端開發是做什麼的工作職責有哪些

前端開發是做PC端開發任務;而Android開發、iOS開發和各種小程序主要針對的是移動端開發工作的。

1、使用Vue/React開發,配合產品完成 Web/Electron項目迭代;

2、收集、分析項目需求並給出技術解決方案,完成高質量的編碼開發、調試和版本維護工作;

3、深入分析和解決前端遇到的各種技術、性能、跨終端兼容等問題,持續優化前端用戶體驗與框架;

4、協助前端開發工程體系建設與落地。

任職資格:

1、35周歲以下(含),211院校本科及以上學歷,計算機相關專業優先,具備3年以上前端開發經驗者優先;

2、掌握至少一種主流框架並深入了解其原理,熟悉前端研發生態圈,包括模塊化、前端編譯和構建工具;

3、熟悉主流瀏覽器的特點,對桌面跨平台有深入了解更佳;

4、有完整參與一個產品的設計、開發到上線過程,對前後端協作模式、產品和項目流程、網路和安全有深入理解,有大型項目前端架構部署和實踐經驗優先;

5、關注前沿技術,具備較強學習能力,在各大技術社區活躍者、有自己開源項目者優先;

6、具備良好服務意識、責任心以及團隊溝通與協作能力。

I. Web前端該如何與後端合作

今天小編要跟大家分享的文章是關於web前端該如何與後端合作?為了幫助web前端工程師更好的從事工作,提高工作效率,下面來和小編一起看一看吧!

1、前後端分離


前端與後端的分離,能使前端的開發脫離後端的開發模式,擁有更大的自由度,以此便可做前端工程化、組件化、單頁面應用等。


2、盡量避免後端模板渲染


web應用的渲染方式分為伺服器端渲染和客戶端渲染,當下比較推薦的方式是客戶端渲染,數據使用全ajax的方式進行交互。


除非在一些不得不使用伺服器端渲染的情況下(如門戶、電商等),應當盡量使用客戶端渲染,因為客戶端渲染更能使前後端分離(項目分離、代碼解耦、協作分離、職責分離等),也能更好的做本地介面模擬開發,提升開發效率。


即使用伺服器端渲染,在技術支持的條件下,可以使用node
中間層(由前端人員開發),代替傳統的後端模板渲染,這樣可以使後端與前端完全解耦,後端與前端只有數據上的往來。


3、盡量避免大量的線上調試


做好本地介面模擬開發(包括後端模板渲染),避免大量的線上調試,因為線上調試很不方便,也很費事,並且每次更新代碼,都需要重新構建,然後同步到伺服器。


所以做好本地介面模擬開發,只要程序在本地運行是沒問題的,一般線上就不會有太大的問題,這樣就能大幅降低調試工作量,提升開發效率。


4、本地介面模擬開發


本地介面模擬就是在本地模擬一個與伺服器差不多的環境,能夠提供數據所需的介面,進行錯誤模擬處理等等。


本地介面模擬開發的意義就在於能夠在本地完成幾乎所有的開發與調試,盡量減少線上的調試,提高開發效率。


一些常用庫:


§browser-sync:能讓瀏覽器實時、快速響應文件更改(html、js、css、sass、less
等)並自動刷新頁面,並且可以同時在PC、平板、手機等設備下進行調試。


§webpack-dev-middleware:。


§webpack-hot-middleware:熱更新本地開發瀏覽器服務。


另外,本地介面模擬開發需要後端開發人員有規范的介面文檔。


5、規范的介面文檔


前端與後端協作提升開發效率的一個很重要的方法就是減少溝通:能夠形成紙質的文檔就不要口頭溝通、能夠把介面文檔寫清楚也不要口頭溝通(參數、數據結構、欄位含義等),特別是線上協作的時候,面對面交流是很困難的。


一個良好的介面文檔應當有以下的幾點要求與信息:


1.格式簡潔清晰:推薦用APIBlueprint


2.分組:當介面很多的時候,分組就很必要了


3.介面名、介面描述、介面地址


4.http方法、參數、headers、是否序列化


5.http狀態碼、響應數據


介面文檔可以用一些文檔服務(如leanote)來管理文檔,也可以用git來管理;書寫方式可以用markdown,也可以YAML、JSON
等。


推薦使用markdown方式寫文檔,用git管理文檔。


6、去緩存


前端需要做好去客戶端緩存的功能,保證用戶始終都是使用的最新資源,不會因為因為緩存的問題而出現bug。


傳統的去緩存是在靜態資源url
上加上版本號或者時間戳,不過因為構建工具的出現以及一些瀏覽器已經不支持這種方式了的緣故,這種方式已經是過去時了。


現在去緩存是將文件hash化命名,只要文件變動,文件名就會不一樣,以此才能徹底的去緩存。如果使用webpack進行打包,會自動將所有文件進行
hash化命名。


7、做好錯誤處理


前端與後端都需要各自做好錯誤處理,以便發生錯誤能夠有友好的提示,也能在用戶反饋時快速准確定位錯誤來源和原因。


一般前端的錯誤分為:


§腳本運行錯誤:js腳本錯誤,找到堆棧信息,然後解決


§介面錯誤:伺服器報錯、數據返回不對、沒有響應數據、超時等


而介面錯誤分為:


§狀態碼錯誤(狀態碼非2XX):伺服器報錯、超時等


§數據錯誤:沒有響應數據、數據格式不對、數據內容不對


8、運行時捕捉js腳本錯誤


當用戶在用線上的程序時,怎麼知道有沒有出bug;如果出bug了,報的是什麼錯;如果是js報錯,怎麼知道是那一行運行出了錯?


所以,在程序運行時捕捉js腳本錯誤,並上報到伺服器,是非常有必要的。


這里就要用到window.onerror了:


1.window.onerror=(errorMessage,scriptURI,lineNumber,columnNumber,
errorObj)=>{


2.constdata={


3.title:document.getElementsByTagName('title')[0].innerText,


4.errorMessage,


5.scriptURI,


6.lineNumber,


7.columnNumber,


8.detailMessage:(errorObj&&errorObj.message)||'',


9.stack:(errorObj&&errorObj.stack)||'',


10.userAgent:window.navigator.userAgent,


11.locationHref:window.location.href,


12.cookie:window.document.cookie,


13.};


14.


15.post('url',data);//上報到伺服器


16.};


線上的js腳本都是壓縮過的,需要用sourcemap文件與source-map查看原始的報錯堆棧信息。


9、移動端遠程調試、vConsole、TBSStudio


因為移動端的開發無法像pc端開發一樣使用Chrome的開發者調試工具,所以調試移動端需要一些額外的技巧。


移動端應用一般都運行在微信瀏覽器中、webview中、手機瀏覽器中。


遠程調試(RemoteDebugging)


遠程調試就是通過USB連接、埠轉發、搭建代理等方式,將一個設備的web頁面映射到另一個設備上,比如將手機的webview映射到pc
上,達到調試的目的。


移動端web應用調試難題從一開始就有,不過後來瀏覽器廠商基本都推出自己的遠程調試工具來解決這個問題,包括OperaMobile、
iOSSafari、ChromeforAndroid、UC瀏覽器等,另外還有一些第三方開發的遠程調試工具,比如weinre等。


以Android為例,可以將webview、ChromeforAndroid中的頁面映射到pc
端的ChromeDevTools,然後就可以在pc端調試移動端的頁面了。


vConsole


一個輕量、可拓展、針對手機網頁的前端開發者調試面板(chrome開發者工具的便利實現)。


TBSStudio


因為微信瀏覽器是定製的瀏覽器,一般的遠程調試方式都不可用,需要配合特定的工具,如微信開發者工具。


TBSStudio是另一個可以像Chrome一樣調試遠程微信瀏覽器頁面的強大工具。


10、前後端並行開發


正常情況下,前端的開發在完成UI或者組件開發之後,就需要等後端給出介面文檔才能繼續進行,如果能做到前後端並行開發,也能提升開發效率。


前後端並行開發,就是說前端的開發不需要等後端給出介面文檔就可以進行開發,等後端給出介面之後,再對接好後就基本上可以上線了。


在本地化介面模擬的實現下,就可以做到前後端並行開發,只是在代碼層面需要對ajax進行封裝。


11、友好的溝通


不管工具多麼厲害,很多時候都免不了要當面溝通,友好、心平氣和的溝通也是很重要的!


以上就是小編今天為大家分享的關於web前端該如何與後端合作的文章,希望本篇文章能夠對正在從事web前端工作的小夥伴們有所幫助。想要了解更多web前端知識記得關注北大青鳥web培訓官網。最後祝願小夥伴們工作順利!


作者:深予之(@senntyou)


#/a/1190000016852780


J. 一名合格的前端工程師的知識結構是怎樣的

第一,必須掌握基本的Web前端開發技術,其中包括:CSS、HTML、DOM、BOM、Ajax、Java等,在掌握這些技術的同時,還要清楚地了解它們在不同瀏覽器上的兼容情況、渲染原理和存在的Bug。
第二,在一名合格的前端工程師的知識結構中,網站性能優化、SEO和伺服器端的基礎知識也是必須掌握的。
第三,必須學會運用各種工具進行輔助開發。
第四,除了要掌握技術層面的知識,還要掌握理論層面的知識,包括代碼的可維護性、組件的易用性、分層語義模板和瀏覽器分級支持等等。
可見,看似簡單的網頁製作,如果要做得更好、更專業,真的是不簡單。這就是前端開發的特點,也是讓很多人困惑的原因。如此繁雜的知識體系讓新手學習起來無從下手,對於老手來說,也時常不知道下一步該學什麼,這里的關鍵影響因素就是代碼質量。CSS、HTML、Java這三種前端開發語言的特點是不同的,對代碼質量的要求也不同,但它們之間又有著千絲萬縷的聯系。
對於新手,在Web前端開發培訓班學習一定要給自己制定一系列的學習和成長計劃,制定的方法如下:
第一、梳理知識架構
梳理知識架構的目的在於,要了解清楚,哪些技術是前置、哪些技術是後繼,哪些技術是深度、哪些技術是廣度,按照這兩個維度梳理好知識架構之後,才能准確地制定清晰的成長目標、高效的成長計劃。
第二、分解目標
大抵可分解為三個階段,包括:起步階段、提升階段、成型階段。這三個階段分別對應著不同的目標:起步、提升、成型階段。
成為一名合格的前端開發工程師,學習是必不可少的。