1. 怎樣提高前端工程師開發效率,都在這里
前端工程師其實是一個工作很雜的職位,除了要負責切圖、寫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點,對於前端來說需要提高開發效率的地方還有很多,可謂任重而道遠。只有將前端無序、繁雜的操作組織起來,利用工具簡化、規范前端流程,才能實現項目構建、開發、維護的一體化。希望本文能夠給初識前端的同學帶來啟發並付諸實踐。
2. 如何面試前端工程師
隨著時代的發展,很多新興的就業職位隨之產生。前端工程師將就是隨著互聯網的快速發展而產生的。其實在很多人的觀念里,前端工程師也就是一個切頁面的而已,他們也就是會html、css、javascript這些沒有任何技術含量的網頁製作而已。然而隨著技術飛速發展,人們對這些技術的要求也是越來越高,如果只憑著一個人來把所有的事情都解決是很困難的,所以這個時候前端工程師就開始發揮著他們很大的作用了。
那我們應該如何來面試前端工程師呢?
談吐要大方得體
在我們在面對面試官時我們千萬不要緊張。在進行自我介紹時我們要努力做到自信大方、吐字清晰。我們在自我介紹時要用簡明扼要的話語來介紹自己,突出自己的優點表明自己的求職意向。你要通過寥寥數語把自己的優勢都向面試官介紹清楚。記住不必要的話語要少說。
好了關於如何面試前端工程師這個話題我就聊到這了。希望我的回答能對你有所幫助。
3. 一個優秀的前端工程師應具備哪些技能
1、熟練而全面的掌握web前端技術
優秀的web前端開發工程師要在知識體繫上既要有廣度和深度。如果你的html、css(包括現在的HTML5+CSS3)基礎不會,或者不夠扎實,或者JS很好,但布局基礎不行……這些表現不僅和優秀的標准相差深遠,甚至連合格的web前端都談不上。一個優秀的web前端至少能實現視覺和交互功能,以及與後端伺服器通信,完成業務邏輯。我理解的前端工程師的核心價值就是對用戶體驗的極致追求。
2、具備快速學習的悟性及本能
web發展的很快,甚至可以說這些技術幾乎每天都在變化.如果沒有快速學習能力,就跟不上web發展的步伐。優秀的前端工程師必須不斷提升自己,不斷學習新技術、新模式;僅僅依靠今天的知識無法適應未來。web的明天與今天必將有天壤之別,而前端工程師的工作就是要搞清楚如何通過自己的web應用程序來體現這種翻天覆地的變化。
3、培養良好的代碼規范編寫習慣
一名優秀的web前端從程序設計風格,即在編製程序時所表現的特點和思維邏輯就能展現出來。這就要求我們在設計程序中要使用結構合理、清晰,形成良好編程習慣,對程序的要求不僅是可以在機器上執行,也要給出正確的結果,便於程序調試和維護。
4. Web前端工程師必備技能盤點
1、HTML5
HTML是超級文本標記語言,是為“網頁創建和其他可在網頁瀏覽器中看到的信息”設計的語言。HTML5是由萬維網發布的最新的語言規范,是開放的Web網路平台的奠基石,所以做Web前端,精通HTML5是必須要掌握的一項技能。
2、CSS3
CSS即層疊樣式表(Cascading StyleSheet)。在網頁製作時採用層疊樣式表技術,可以有效地對頁面的布局、字體、顏色、背景和其它效果實現更加精確的控制。只要對相應的代碼做一些簡單的修改,就可以改變同一頁面的不同部分,或者頁數不同的網頁的外觀和格式。
CSS3是CSS技術的升級版本,CSS3語言開發是朝著模塊化發展的。以前的規范作為一個模塊實在是太龐大而且比較復雜,所以,把它分解為一些小的模塊,更多新的模塊也被加入進來。這些模塊包括:盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框 、文字特效 、多欄布局等。CSS3對於Web前端整個頁面的設計是必備的技能。
3、JavaScript
JavaScript一種直譯式腳本語言,是一種動態類型、弱類型、基於原型的語言,內置支持類型。它的解釋器被稱為JavaScript引擎,為瀏覽器的一部分,廣泛用於客戶端的腳本語言,最早是在HTML(標准通用標記語言下的一個應用)網頁上使用,用來給HTML網頁增加動態功能,為用戶提供更流暢美觀的瀏覽效果。
4、jQuery
JQuery,顧名思義也就是JavaScript和查詢(Query),即是輔助JavaScript開發的庫。它是輕量級的JS庫 ,它兼容CSS3,還兼容各種瀏覽器(IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+),JQuery2.0及後續版本將不再支持IE6/7/8瀏覽器。
以上就是Web前端工程師必備技能,小編在這里建議,只要你打好基礎,並且一步一個腳印踏實完成學習和項目,成為一名Web前端開發工程師並不難。所以,小夥伴們,加油吧!
5. 前端工程師需要掌握哪些知識
前端工程師需要掌握的知識如下:
1、學習HTML,這是最簡單的,最基本的是掌握div、表格表、UL Li、p、跨度、字體這些標簽,這些都是最常用的,尤其是div和表,div,表也可以用於布局布局,但不靈活,基本是表處理數據。
2、嚴格模式與混雜模式:如何觸發這兩種模式,區分它們有何意義。
3、浮動元素:怎麼使用它們、它們有什麼問題以及怎麼解決這些問題。
4、JSON:作用、用途、設計結構。
5、DOM操作:如何添加、移除、移動、復制、創建和查找節點等。
6. 前端工程師需要擁有哪些技能
1.開發語言
HTML發展歷史有二十多年,歷經多次版本更新,HTML5和CSS3的出現又是一次革新。有些人認為前端開發要掌握的技能簡單,不就是製作網頁 嘛,其實不然,web前端需要掌握的核心語言xHTML+CSS+JavaScript,JavaScript作為最難的語言之一,許多編程高手也不敢妄 自菲薄自封精通。由於JavaScript與html的差異性,以及靜動態分開處理的一些好處。在大公司編寫靜態效果和動態效果往往是分開由不同的人完成的。小公司因為需要壓縮成本,就要求每個人會得越多越好,如果您想往項目經理發展,能懂一兩門後台語言,絕對是錦上添花!
2.瀏覽器兼容性
互聯網目前主流瀏覽器有IE6789,Firefox,Chrome,Opera,Safari,遨遊,包括國內主流的搜狗,騰訊 TT,360,the World等等;從內核上講主要有IE的,遨遊版IE,safari,firefox以及opera的,這些都是大家常見的,如果你身邊有老網蟲喜歡收藏 瀏覽器,你翻翻他的硬碟,相信幾十款肯定是有的。每種內核對代碼的解析是不完全一樣的,即使同樣內核也可能存在很大差異,如IE和遨遊版的IE。不說非主流的瀏覽器,就主流的瀏覽器要做到完全兼容,也並非易事,需要長時間的積累和測試,需要前端開發工程師對前端開發的熱愛和激情。
目前移動互聯網的發展趨勢也不容小覷,將慢慢占據互聯網的主要份額。移動互聯網最突出的好處是方便和及時,試想一下,走在某地風景很好,拍下來後自 動分享給各路好友,因此手機上的瀏覽器兼容也看刻不容緩,現在手機上的瀏覽器也是紛繁復雜,主流的UCWEB,safari,IE,3G門戶的,以及 symbian低端機的「殘缺兒童」,包括國外流行手機我們不知道的一些瀏覽器,更糟糕的是這些瀏覽器解析因為手機硬體的不同,每個瀏覽器得到的結果都是 完全不同的。
3.hack技術
由於不同的瀏覽器對CSS的解析認識不一樣,因此會導致生成的頁面效果不一樣,這個時候就需要針對不同的瀏覽器寫不同的CSS,這個過程叫CSS hack。雖然我們寫代碼都要求按照標准,不寫hack代碼,但實際工作中為了兼容主流瀏覽器,hack代碼是免不了的,所以這也應該是每個前端開發人員 必備的技能。
4.業內標准
目前Web前端開發中提到最多的就是W3C標准,這是一系列標準的集合,代表了互聯網發展的方向,也代表了前端開發的一種信仰。寫的代碼都要100%通過標准驗證,為通過標准驗證而感到自豪,會有效推動互聯網的快速發展。
5.開發工具
目前比較流行的是Dreamweaver, 其曾經風靡一時,到現在也沒有退出歷史舞台,證明DW還是有很大優勢的,尤其是針對初學者,其強大的提示功能可以幫助我們很快的熟悉並掌握網頁布局,但現 在更提倡的是純手寫代碼,既體現技能方面的卓越,也可有效避免使用DW等工具產生的冗餘代碼。此外再掌握一些photoshop技能,即使沒有美工,也能 簡單處理一些圖像。
小結,掌握以上技能,可以說你是一個合格的前端開發人員,能夠參與到一個大的項目中,或者自己獨立寫出一個網頁。雖然這看起來和網頁製作設計差不多,從效果上來看,都是製作網頁的,但實際上,技術上所超出的已經是好幾個檔次的東西了。
7. 前端開發需要掌握的技能知識
首先作為前端工程師,掌握前端基礎是最重要的,如果基礎不扎實,一切應用技能就都是「浮雲」。前端的基礎是什麼?HTML、CSS、JavaScript基本功,數學、演算法、數據結構、操作系統、編譯原理基本功。
另外必須要有自己擅長的領域,並且鑽研得足夠深入,同時要有眼界,能「跨界」。可以以前端作為職業,但千萬不要把自己的技能限制在前端領域,因為有很多東西,只有站在前端之外,才能看得更清晰更透徹。想要學習更多技能,建議選擇優就業,優就業的web前端課程有著優秀的講師,科學的課程,建議去實地考察一下,看看實際情況如何。
8. 前端工程師如何提升能力提高效率有哪些方法
1、使用正確的工具。正所謂「工欲善其事必先利其器」,如果你是一個網頁設計師,你可能需要Photoshop和Illustrator。如果你是一名開發人員,你需要一些優秀的Web開發應用程序。擁有一些優秀的、你知道如何更有效地使用的工具和裝備可以幫助你盡可能的高效完成工作。
2、善用Web開發框架。一個良好的Web開發框架,可以幫助你解決常見的Web開發問題,可以測試Web開發的bug、安全和性能,使代碼重用更容易等,藉助框架會節省你的時間以及提高項目的質量。
3、建立一個代碼片段庫。回收你的代碼,創建一個你最喜歡和經常使用的代碼片段集,並確保代碼組織良好,可以被輕易搜索到。你可以在硬碟中建立源代碼目錄,也可以使用允許保存代碼片段的源代碼編輯器或IDE,或者使用專門的片段工具,如Snippet或Snipplr。
4、沖刺式工作。不要連續工作幾個小時,這樣你的效率可能會下降,隨著時間的推移,你的工作品質也會下降。每次連續工作10-20分鍾,可以保持你大腦活躍,可以更好地產生新的想法。
5、不斷學習。通過在自我提高上投入時間,你可以在工作的其他方面節省時間,可以增加你的勞動成果並提高工作質量。要保持你的時間表靈活變化,超過規劃的工作,可能會一拖再拖。
6、做好工作規劃。當你開始一個項目的工作,確保知道你對這個項目的期望。做網頁設計項目時,需要了解客戶期望做的、首頁內容、顏色設置等工作。了解有關項目的某些內容,可能會使你工作在正確的方向,而不至於在黑暗中摸索。
掌握以上方法,可以大大簡化你的Web開發流程,使開發的每一個環節快速、流暢。
9. 淺談如何做一名優秀的WEB前端工程師
首先,優秀的Web前端開發工程師要在知識體繫上既要有廣度和深度!做到這兩點,其實很難。所以很多大公司即使出高薪也很難招聘到理想的前端開發工程師。技術非黑即白,只有對和錯,而技巧則見仁見智。
再者,優秀的前端工程師需要具備良好的溝通能力,因為前端工程師至少都要滿足四類客戶的需求。
1、會用PS來進行圖片的處理(比如切圖,微調等)
2、用HTML/CSS實現mockup(可能還有SASS/LESS等工具)
3、熟悉JavaScript(比如前端的MVVM框架,客戶端模板)
4、前端開發的工作流程(代碼檢查,精簡化,模塊化CSS,LiveReload,調試)
5、編寫測試(靜態檢查,單元測試)
6、跨瀏覽器、跨設備的解決方法(不同解析度,不同廠商)
7、會根據項目的特點選擇不同的前端技術棧(移動端,Web站點,響應式設計等)
在有了基礎的HTML/CSS/JS技能之後,你會嘗試做的更好:
1、如何更高效的操作DOM
2、如何將CSS寫的更加清晰易懂
3、如何編寫更加易於維護的代碼(更有意義的單元測試)
4、如何組織大型的項目結構,模塊化,組件化等等
這些要求事實上已經不那麼容易做到了。它可能會花費你2到3年時間來全掌握。但是2到3年之後,即便你已經成為了一個「合格的」前端工程師,這也還遠遠不夠。在現實世界中,一個軟體產品除了前端,還有非常廣闊的空間,還有很多有趣的東西值得學習:
1、HTTP協議本身(緩存,鑒權)
2、Web容器/HTTP伺服器如何工作
3、無狀態的Web應用的工作原理(如何讓網站正確地運行在集群上)
動態,靜態內容如何分離部署(反向代理配置)
4、安全機制如何配置
5、監控機制如何配置
有了這些,也算是有點端到端的意思了。這時你也已經不是一個「純前端」工程師了,系統中的大部分問題你都可以搞定,不過日常工作中可能更多的職責還是做前端的開發。但是這些還不夠,軟體除了交付之外,還有一些非功能性的需求:
1、端到端測試(UI測試,比如selenium server/web driver)
2、devops(比如資料庫環境,測試伺服器,CI伺服器的自動化provision)
3、基本的UI設計原則(在某些頁面確實的情況下,根據系統的已有UI做設計)
4、資料庫性能優化
5、性能測試
這時候,你才能算是一個嚴格意義上的「前端」工程師。可見要想成為一名優秀的Web前端工程師是需要經歷一番歷練的,有基礎的人可以自學,沒基礎的需要參加Web前端培訓課程,這樣學起來更方便。