無廢話網頁重構系列——（2）來套Web重構裝備

時間 2019-11-16

標籤廢話網頁系列 web 裝備欄目 HTML 简体版

原文原文鏈接

本篇主要從語言入門、規範、工具、構建、庫、框架、版本控制等各方面展開，篇幅會有點長，涉及到的工具類，會另開博文詳細介紹。css

另外說明Web重構是Web前端的開始，主要側重Web頁面，如實現佈局與兼容，符合W3C標準規範，組件化框架化，實現頁面視覺效果，提高代碼的可維護性、可讀性和性能優化。html

三生萬物

HTML、CSS、JavaScript 是爲Web開發三基石。前端

人類社會的工做，各方面各環節都是林林總總，Web開發亦是如此，具體的能夠查閱Web Developer Roadmap、Frontend Knowledge Structure，看看Web開發技能樹。各「分支」涉及知識點很是廣，對於Web重構工做，最初、最終、最重要的仍是三基石。vue

打好基礎是持久戰，要理論和實踐結合，不能急於求成。不建議看「七天入門/學會」、「從入門到精通」之類視頻、帖子和書籍做爲教程，甚至都不建議將其做爲輔助指導！前期不建議報培訓班。html5

一門學科和技術，仍是須要一個系統的學習過程，這也是本系列文章沒有相關基礎知識的緣由。java

入門學習路線：HTML → CSS → JavaScriptnode

HTML，不少時候僅僅是做爲標籤標記使用，但它不只僅就是十幾個標籤，像Local Storage、SVG、Canvas、Web Workers等部分，必需要結合JavaScript、幾何學、線程等知識才能講解的下去，無法單純的獨立的全面展開，這已經不是一本書就能解釋清楚的了。目前已有的書籍，像Mark Pilgrim的《HTML5揭祕》，知識點如走馬觀花，留下太多擴展閱讀連接；而像Adam Freeman的《HTML5權威指南》，太臃腫了，某些章節寫了進來，但又不夠全面和詳細，如第四、5章及第16章節以後的樣式與腳本部分。即便它第三、6-15章對了解基本的HTML有幫助，但被翻譯弄得比較尷尬，如’Void Elements’翻譯爲’虛元素’。所以，HTML這塊我不推薦閱讀書籍，建議先閱讀MDN「開始 HTML」，以後在RUNOOB: HTML教程系統學習，而後再閱讀MDN「元素參考、屬性參考、行內元素、塊級元素、元素內容模型」等內容，做爲總結和回顧。python

不少Web開發初學者可能是去www.w3school.com.cn，我不建議參考這個網站的內容，其部份內容過期和有問題。能夠閱讀www.w3schools.com。react

CSS學習推薦Lea Verou的《CSS揭祕》和Eric A. Meyer的《CSS權威指南》，順序是：《CSS權威指南》第1-4章先看幾遍，再跟着《CSS揭祕》全書動手作，再回到《CSS權威指南》剩下章節。熟悉以後能夠去W3Help查看一些兼容性問題，。jquery

JavaScript學習推薦Nicholas C.Zakas的《JavaScript高級程序設計(第3版)》，學習路線：先A部分(第1-7章)必知必會；深刻了解B部分(第10-14章)；接着深刻了解C部分(第20、21章)；再接着深刻D部分(第八、23章)；再瞭解E部分(第九、1七、2二、24章，附錄A)；最後讀一下F部分(第1八、1九、1五、1六、25章，附錄B、C、D)。其中B、C、D部分實際工做中會運用到第三方庫。F部分附錄章節，因爲第3版成書年代較早，許多新技術未收錄，這裏瞭解一下便可，第4版今年(2018年)7月底才發售，裏面會有ES6以後的相關技術介紹；David Flanagan的《JavaScript 權威指南》適合作字典。

通過上面的語言學習，或多或少知道一個HTML文檔是怎麼個狀況了，源代碼直接到瀏覽器運行，很方便。這時應該思考它確定不會這麼簡單，拋出各類問題，如：多重樣式權重優先級是怎樣的呢？!important爲何要少用不用？ HTML、CSS、JavaScript能夠寫在一個文檔中實現效果，可爲何要採用外部樣式、腳本引入呢？爲何要合理運用h1~h6之類的HTML標籤，爲何要合理命名CSS類？樣式面向設計稿書寫，連簡單的調整顏色和字體都是體力活替換，有沒有什麼方法讓它具有可編程性？多個頁面模塊相同怎麼處理？腳本全局變量衝突很差控制，業務繁多功能複雜代碼愈來愈臃腫？團隊和技術現狀如何選擇一個合適的庫/框架呢？大公司裏怎樣開發和部署前端代碼？太多太多問題…打好語言基礎，而後多去發掘問題關注問題分析問題，釋然解決問題。

入門鞏固學習推薦張容銘的《JavaScript 設計模式》、Douglas Crockford的《JavaScript 語言精粹》

JavaScript部分不在本系列中討論，已經有《JavaScript高級程序設計》、《ES6 標準入門》、《JavaScript 設計模式》、JavaScript模塊化之旅等資源，能夠輔助深刻學習和應用。

規因此正圓，矩因此正方

編程規範部分，像代碼命名風格、Tab/Space縮進之類，差很少是程序員的一種價值觀，算是編程領域的聖戰導火索。建議有了語言基礎以後，讀Nicholas Zakas的《編寫可維護的JavaScript》，而後編碼遵照HTML/CSS Style Guide、JavaScript Style Guide，不建議本身搞一套規範出來，建議接受大廠已有的成熟的「潛規則」；調教IDE/編輯器，使「格式化文檔」與編碼風格規則一致；瞭解變量名、方法名中UpperCamelCase、lowerCamelCase、lower_snake_case、UPPER_SNAKE_CASE、kebab-case、Camel_Snake_Case等命名風格，方便查閱和溝通。

代碼須要校驗，編輯器或構建工具中添加JSLint、JSHint、JSCS、ESLint、stylelint、HTMLHint這類工具，能夠在代碼編寫時候或構建命令中，進行代碼檢驗。

JavaScript 校驗工具這塊：

JSLint，古老，不可配置，不可擴展，不可禁用許多特性的校驗，Douglas Crockford之做
JSHint，可配置的JSLint版本
JSCS，代碼樣式檢查，只捕獲與代碼格式化相關的問題，而不是潛在的bug或錯誤。已經與 ESLint 合併
ESLint，易於擴展，可自定義規則，能夠插件形式安裝更多的規則，Nicholas C. Zakas之做

一個 linting 工具是解決問題的一個很好的步驟，可是它基於必定的規則發現錯誤，具備必定的侷限性。

工以利器爲助，人以賢友爲助

開發工具、構建工具依賴開發環境，建議根據操做系統安裝和配置好各環境平臺，如：.NET Framework、Microsoft Visual C++ Redistributable Package、Nodejs、JDK、Python、Ruby。

開發工具也是編程領域的聖戰導火索，如編輯器之神Vim和神的編輯器Emacs。

開發工具只要是緊貼當下技術更新的就能夠了，而後按預算、硬件和調教精力篩選，無所謂哪個IDE或編輯器。

預算足，微軟家的Visual Studio(沒有之一)，Jetbrain家的IDE，Adobe家的Dreamweaver最新版；預算很少能夠考慮Sublime Text，沒預算能夠考慮Visual Studio Code、Github Atom、Adobe Brackets。不建議使用Hbuilder。

構建工具一樣選擇緊貼當下技術更新的就能夠了，如當下結合使用Gulp、Webpack、Rollup、Babel；

調試工具推薦Chrome Developer Tools；

計算機硬件固態硬盤和8G以上內存。

槍，兵工廠

Web重構中，並不是是「九層之臺，起於壘土」。

Web重構，有舊項目的改造和完善，涉及到架構的變更、業務功能的增刪；也有新項目的建造，或大，或小；這裏不管新舊，可能是基於各類庫和框架，不多所有原生CSS、腳本一磚一瓦式建之築之。

庫的做用主要是提供API，便捷操做DOM、AJAX和兼容各宿主環境事件(Event)，如jQuery、Zepto、axios，以及實現函數式編程來處理數據和事件，如Underscore、Lodash。還有許多庫其功能僅僅專一某一事務，如Cookie操做、Local Storage、切換交互、視覺差交互、代碼着色、宿主環境偵測、延遲加載、圖表報表、遊戲引擎等。

MVC、MVP、MVVM等框架，加以數據接口規範，主要做用是提供一套完整的、規模化的、跨平臺的解決方案，複雜業務項目採用它的機制和工做流，可解耦數據、業務邏輯與視覺呈現，使項目得以按必定粒度拆分隔離，清晰化控制、調用、傳遞等關聯環節，下降耦合，減小冗餘混亂污染，減輕團隊協做任務依賴帶來的制約，統一實現風格，提升項目可伸縮性、可維護性，側重底層驅動。固然，也提升了Web開發難度和成本。這些框架主要有Angular、React、Vue、Backbone、Ember、Meteor、Knockout、Polymer。一部分框架，還提供了UI層，如YUI、ExtJS、Dojo。

另外一部分則是UI庫，提供了一整套豐富的客戶端組件和資源，UI庫有獨立設計不依賴其它庫和框架，或爲其它一種或多種庫和框架設計。無依賴項的有Semantic UI、Foundation、Pure、Bulma等；有依賴項的有Bootstrap、EasyUI、Ant Design、iView、Element、WeUI、Onsen UI等。

還有另外一類使用 JavaScript, HTML 和 CSS 等 Web 技術建立原生應用程序的軟件開發框架，如React Native、Electron、Weex、PhoneGap/Cordova、Titanium、NativeScript、Ionic。

各框架在模塊規範、加載器機制、應用性能、用戶體驗、技術門檻、開發部署等方面存在差別，至於選擇哪一種框架，一要看其功能、文檔、活躍度，二要結合項目實際狀況、團隊技術水準；沒有好很差，只有合不合適。

凡是過去，皆爲序曲

不管工程大小，不管我的仍是團隊，都須要採用版本控制系統，以便工程文件的協做、追蹤、維護、備份和版本存儲。

版本控制系統主要有如下幾類：

本地版本控制系統，如RCS；
集中式的版本控制系統，如CVS、SVN、TFS，工具主要有VisualSVN Server、TortoiseSVN、QSvn、RapidSVN、SmartSVN、Versions、Cornerstone；集中式版本系統能夠爲每一個開發者分配訪問權限；
分佈式版本控制系統，如Git、Mercurial、Bazaar，工具主要有GitLab、Gogs、Gitblit、Sourcetree、Git、Tower、TortoiseGit、TortoiseHg。