前端工程化的思考

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在移動時代到來之前，前端一直是作爲項目的附屬存在，並沒有被當作一個真正的系統對待。但是在Mobile First和微服務化時代的到來，整個系統的開發越來越複雜，尤其是前後端分離理念的提出，使得前端變得越來越重要，前端的規模也急劇膨脹，前端已經不是簡單的寫幾個頁面或者開發幾個JQ插件就能搞定的。當工程變得越來越複雜以後，一些問題就會隨之出現，比如：如何進行高效的多人協作？如何保證項目的可維護性？如何提高項目投產部署的便捷性？如何提高項目的開發質量？如何降低項目生產的風險？這些問題都需要通過工程化的思維和方法去解決。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/17/17bd184644637fb6e9f06d850460f77b.jpeg","alt":"圖片","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"前端工程化是使用軟件工程的技術和方法來進行前端的開發流程、技術、工具、經驗等規範化、標準化，其主要目的爲了提高效率和降低成本，即提高開發過程中的開發效率，減少不必要的重複工作時間，而前端工程本質上是軟件工程的一種，因此我們應該從軟件工程的角度來研究前端工程。在QCon全球軟件開發大會北京站上，與會嘉賓針對自己的前端工程化做了細緻的介紹，結合建信金科的具體情況，個人認爲前端工程化就是爲了讓前端開發能夠“自成體系”，主要應該從","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"模塊化、組件化、規範化、自動化","attrs":{}},{"type":"text","text":"四個方面思考。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"模塊化","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"模塊化就是將一個大文件拆分成相互依賴的小文件，再進行統一的拼裝和加載。工程的模塊化主要是根據工程的業務邏輯和組件特點，將工程拆分成不同的子工程，每個子工程可以單獨編譯打包發佈，降低各自之間的耦合度。js的模塊化主要是利用打包工具比如webpack+babel的模式將所有模塊系統進行打包，同步加載，也可以搭乘多個chunk異步加載。CSS的模塊化主要是利用css modules對css進行模塊化拆分，即將所有的css交給文件由js來管理，這種技術最大程度利用了css的生態和模塊化的原則，其中vue框架中的scoped 就是這種技術的體現。資源的模塊化也是利用webpack等對資源進行分類管理，避免重複資源的出現。","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/5f/5fa1c8090ad64b7eb175c0fae34f9232.jpeg","alt":"圖片","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"組件化","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"組件化是指將UI頁面拆分成有“模板+樣式+邏輯”組成的功能單元，稱爲","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"組件","attrs":{}},{"type":"text","text":"。組件化不等於模塊化，模塊化是在資源和代碼方面對文件的拆分，而組件化是在UI層面進行的拆分。傳統前端框架的思想是以dom優先，先操作dom，再寫出可複用的邏輯單元來操作dom，而組件化框架是組件優先，將dom和與之一起的邏輯組成一個組件，再進行引用。我們封裝了組件後，還需要對組件間的關係進行判定，例如繼承、擴展、嵌套、包含等，這些關係統稱爲","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"依賴","attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"規範化","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"規範化是前端工程化很重要的一部分，項目前期規範制定的好壞，直接決定後期的開發質量，分爲項目目錄規範化，編碼規範化，前後端接口規範化，git分支管理，commit描述規範，組件管理等編碼規範化分爲htmlcss js img 命名規範這幾類 接口規範，目的是規則先行，確保項目質量。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"自動化","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"自動化是指利用各種持續集成手段，將簡單重複的工作交給機器完成，例如自動化測試，自動化部署，自動化構建，持續繼承等。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/f3/f3badc23087a60f83a4e8b542da74d4e.jpeg","alt":"圖片","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"目前美團、頭條、阿里等互聯網公司在前端工程化方面已經有比較深入的研究，並提供了相關的解決方案，我們可以在前人的基礎上，從上述四個角度對前端進行工程化改造，提升前端開發質量和效率。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"原文鏈接：","attrs":{}},{"type":"link","attrs":{"href":"https://mp.weixin.qq.com/s/EKSSUjfXC_ZVNDl3wSW8Ag","title":"","type":null},"content":[{"type":"text","text":"前端工程化的思考","attrs":{}}]}]}]}