1. 程式人生 > >我理解的模組化與元件化

我理解的模組化與元件化

先天殘疾,後天畸形。

前言:一直以來,這塊總是模模糊糊,搞不懂到底是什麼,整理成文字,理下思路,想到哪裡寫到哪裡。

web之初:
誕生之處應用比較簡單,後端掌控一切,所以,直接後臺人員寫就好了。Html css js 沒有模組化這個概念。導致前端先天殘疾,後天畸形。

發展中
應用太大,出現專職的前端,導致程式碼分離。前端出現,
結構 樣式 行為 的分層。

大前端時代
應用越來越大,必須分層。出現mvvm的結構。amd的模組管理方案。沒有規劃的頁面開始混亂。

專案結構的思考:
專案由 模組 組成,模組由元件組成,有共用的有私有的。這是模組化你的業務,模組化你的程式碼。主要有html,css ,js 可以用 amd的方案來做。

html的思考:
缺陷:沒有嵌入功能。
需求:layout(佈局) partials(元件) module.html
css:
common.css module.css
用less 來管理更簡單,可以有嵌入功能。可以分細一點分成一個一個功能 or頁面來寫。
js: 按模組來寫。然後在頁面中引用這些模組。這是我的思路。

關於打包:它可以減少請求。但是size也變大了。這個看情況把,首次載入不要大於1m我感覺就還好。大了的化就切割吧,要不然影響體驗。我覺得按模組打包就可以。不要太大就好。css可能打包不了有衝突的,可以給模組加個字首來區分,最後可以打包成一個。

解決的方案。是 fis + require
這個是元件的概念比較弱。他是js html的混合物,html要插進去。js可以require進來。

現今的開發方式。mvvm: 他是什麼鬼呢?
和上面的差不多了。就是單頁的。用js來控制頁面而已。同時執行js ,切換出去,要銷燬。

一個應用的結構:
從一個應用中提取東西。方便管理。相當於公用模組了。
如 一些函式可以單獨拿出來。專案的配置資訊可以拿出來。
config factory 只是mvvm多了一些東西 路由 和模板的過濾器 指令
好吧 就這些,不知道說啥了。。