資訊專欄INFORMATION COLUMN
摘要：為什么會出現(xiàn)前端工程化這個概念當前端業(yè)務日益復雜化和多元化，就會出現(xiàn)許多問題。這時候就出現(xiàn)了前端工程化的概念，從軟件工程的角度來解決問題。
為什么會出現(xiàn)前端工程化這個概念？
當前端業(yè)務日益復雜化和多元化，就會出現(xiàn)許多問題。
比如說：
如何提高開發(fā)效率？
如何保證項目的可維護性？
如何提高項目的開發(fā)質量？
多人合作，架構分層，模塊設計，解耦，抽象，復用，mock，聯(lián)調，部署等等。。
這時候就出現(xiàn)了前端工程化的概念，從軟件工程的角度來解決問題。比如軟件工程中的分治和關注點分離思想。
前端工程化可以分為4個方面：規(guī)范化，自動化，模塊化，組件化
一：規(guī)范化
目錄結構，
js代碼風格強約束，eslint自動fix
css代碼風格（bem風格）
協(xié)作工具，開發(fā)工具等
二：自動化
自動圖標合并，涉及到css sprite，svg sprite，圖標字體
自動編寫可視化文檔，技術選型：postmark+jsdoc
自動化測試，技術選型：Karma + Mocha + Expect.js
自動化部署，技術選型：docker
自動化問題反饋
三：模塊化
這個es6規(guī)范已經(jīng)出來了，想要了解查看阮老師的博客
四：組件化：
著重講一下組件化的概念和組件劃分
首先摘抄總結了大佬們對組件化的概念：
組件化是基于模塊化的，在設計層面上，對UI（用戶界面）的拆分。每個包含模板(HTML)+樣式(CSS)+邏輯(JS)功能完備的結構單元，我們稱之為組件。組件化除了要處理組件這種本身的封裝，還要處理組件之間的邏輯(JS)繼承，樣式(CSS)擴展和模板(HTML)嵌套等關系。廣義的組件化包括對數(shù)據(jù)邏輯層業(yè)務梳理，形成不同層級的能力封裝。
自己對于組件化的通俗理解就是每個應用界面都可以抽象成一個個獨立的，可復用的，自包含的，可復用的組件。組件化的本質目的并不一定是要為了可復用，而是提升可維護性。
接下來談組件化的優(yōu)點，我覺得獨立這個詞可以很好的概括組價的優(yōu)點，當獨立了之后，組件之間可以隔離，可以很好的降低復雜度，隱藏性更好，妥妥的高內聚，低耦合。
后面來談下組件該如何劃分，組件劃分的粒度，數(shù)據(jù)和方法的歸屬。
在查了資料和看了大佬們的項目結構之后，發(fā)現(xiàn)他們通常會把組件分為通用組件（木偶組件）和業(yè)務組件（智能組件）。
木偶組件應該是和業(yè)務無關的，是有簡單狀態(tài)或者無狀態(tài)的，數(shù)據(jù)幾乎全部依賴于輸入，它只負責渲染給入的數(shù)據(jù)。比如按鈕是一個組件，可能有一個參數(shù)決定了它的尺寸，一個參數(shù)決定了它是否可以點擊，但是點擊這個按鈕之后會發(fā)生什么，就不是按鈕這個組件需要知道的事情了。
智能組件可以由多個木偶組件組成和其他的智能組件組成，會擁有一些方法，用來修改持有的數(shù)據(jù)，對內來看，它自己持有一些數(shù)據(jù)和方法，用來決定內容的渲染，對外又是一個簡單的props接受數(shù)據(jù)?？梢岳斫鉃榻M件樹的非葉子節(jié)點，通過自身數(shù)據(jù)變化，進而操縱子組件的內容。
前端工程化的思想就先概括到這里了~把大佬們的想法總結了一下，還有很多地方?jīng)]有理解到位，先記錄一下現(xiàn)在的感受，后期有了新的認識再來補充或者修改。
參考文章：
https://mp.weixin.qq.com/s?__...
https://lluvio.github.io/blog...
http://www.jointforce.com/jfp...
https://www.zhihu.com/questio...
http://www.jianshu.com/p/67a6...
https://cn.vuejs.org/v2/guide...
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/83488.html
摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 本以為自己收藏的站點多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業(yè)務工作時也會不定期更...
摘要：如何去解決這些問題前后端分離大部分的互聯(lián)網(wǎng)公司都分成了前端團隊和后端團隊。方案一采用架構業(yè)界很多公司會采用，單頁應用的架構，這種架構是天然的前后端分離的。方案二淘寶的大前端方案中途島上圖是淘寶基于的前后端分離分層，以及的職責范圍。 我們遇到了什么問題？ 1.前端無法調試后端未完成的 API：如果后端同學還沒有完成 API 開發(fā)，那么前端同學就不能對這個 API 進行開發(fā)。之前我們都是在...
摘要：代表公司去參加今年的第二屆前端開發(fā)者年度大會，散會的時候，技術老大問我，今天感覺怎么樣，有什么收獲，當時就零零碎碎的回答了一些，不算完美趁著還記得點什么，在這里做個自我回顧總結，謹代表個人見解，有不當之處，或若涉及圖片隱私或者其它問題，煩請 代表公司去參加今年的 第二屆前端開發(fā)者年度大會，散會的時候，Team 技術老大問我，今天感覺怎么樣，有什么收獲，當時就零零碎碎的回答了一些，不算完...
閱讀 1423·2021-09-23 11:21
閱讀 3119·2019-08-30 14:14
閱讀 3205·2019-08-30 13:56
閱讀 4156·2019-08-30 11:20
閱讀 1961·2019-08-29 17:23
閱讀 2778·2019-08-29 16:14
閱讀 1708·2019-08-28 18:18
閱讀 1499·2019-08-26 12:14
