JavaScript的模組載入可能有害
就像原文評論所指出,作者批評的是在前端領域過度使用非同步模組載入方式。通常的Web應用會對JavaScript檔案進行合併,壓縮(Minify)以減小連線數,和檔案體積,以更好的利用快取,提升使用者體驗。原先的JS原始檔最終會變化一個或兩個上線。這跟後端(NodeJS)分散的程式碼組織方式會有所不同。
簡介
我最近傾向一個觀點:JavaScript的模組載入是非常不好的,我認為從總體上來說,這不是一個好主意。其實也有適合他們應用的場合,最後我會提到。
現在,估計我是這裡的少數派。除了CommonJS和AMD模組載入方式, (參見:JavaScript模組化程式設計:AMD規範及require.js用法),其他載入系統像RequireJS或者(說實話我非常吃驚)Google Module Server,Node濃重的文化正在影響著Javascript世界,你很難去說JavaScript模組載入的不好。純指令碼太老了,太傻了,太不方便了。每個人都知道,所以他們不會指責自己喜歡的東西,對嗎?
我準備走出這個群體,並說:“JavaScript模組載入可能有害”,下面希望我能說服你認同我。
危害#1:混亂的除錯
模組載入機制在一些明顯和微妙的地方除錯困難。
壓縮,轉換還有其他的預處理都支援模組載入(有些其實並不是必須,僅是為了保持一致),從原檔案載入模組通常都是由瀏覽器來完成的。所以當你除錯程式碼時經瀏覽器載入的程式碼經常會與實際程式碼不匹配。Source Maps可以解決這個問題,但在高度其它瀏覽器時還是會有問題。(注*Source Maps為一種新的排程方法)
通常,在原始碼沒有改變或者source maps正常工作時,模組載入所產生的動態標籤會產生一些問題。偵錯程式可能無法區別在頁面載入時裝載的指令碼,例如,如果不寫成內聯的script標籤,你設定的斷點可能消失。
其實很難評價模組載入所帶來的便利和他們所引起的問題,總的來說他們應該幫助你組織結構和保持簡單,而不是增加工作量。
危害#2:模組載入順序
也許模組載入的最常見和折磨人的瓿就是指令碼的載入順序。跟在你的頁面按順序載入SCRIPT標籤相比,理解模組何時被執行是非常折騰的人的。
通常最先載入的模組會被執行,但內部模組依賴決定了他需要等依辣的模組載入完了才執行。
這有一個明顯的優點,可以幫助我們定義並理解依辣關係,這些引用可以通過require()呼叫清晰地表達出來,是非常令人欽佩的。
然後,實際情況裡,我們的專案通常沒有如此複雜的內部模組依賴。
危害#3:工作併發症
顯而易見,使用模組載入系統代替簡單的指令碼工作起來非常困難。
因為整合這個眾所周知的困難,很多第三方庫並不使用相似的模組載入系統。多個系統會讓他的工作更加複雜。這些庫的作者不得不新增將模組新增額外的封裝,以便不同的模組載入系統去呼叫,不管使用者是不是採用。
當你帶一位新的程式設計師到一個專案中,或者一個程式設計師找到一個有用庫,但這個庫使用模組載入(如RequireJS)組織,這就給他帶來了一些障礙,其實他只想新增一個簡單的script。這值得嗎?我擔心這樣會導致我們的系統碎片化。
結論
最後還是要看這種載入方式所帶來的便利性和成本的對比,如果載入方式帶來的便利性大於支出,說它有害是沒有道理的。比如你有一個非常龐大的程式碼庫,如果一開始就載入所有內容會影響效能,使用者體驗時,你可以採用。
相關文章
- JavaScript 模組載入特性JavaScript
- JavaScript 模組的迴圈載入JavaScript
- javascript模組化以及載入打包JavaScript
- 一個簡單的JavaScript模組載入器JavaScript
- javascript 非同步模組載入 簡易實現JavaScript非同步
- swoole 模組的載入
- JavaScript 模組化程式設計之載入器原理JavaScript程式設計
- 模組載入器
- swiper 模組載入
- Webpack模組載入器Web
- php載入memcache模組PHP
- js模組載入星號的作用JS
- Python 模組的載入順序Python
- javascript圖片懶載入與預載入的分析JavaScript
- ABP - 模組載入機制
- Helloworld 驅動模組載入
- 讀懂CommonJS的模組載入JS
- Android HAL模組的載入過程Android
- 淺析node.js的模組載入Node.js
- javascript載入順序JavaScript
- js模組化之自定義模組(頁面模組化載入)JS
- OrchardCore 如何動態載入模組?
- (十三)自動載入新模組
- 模組載入工具製造指南
- Python重新載入模組方法Python
- PHP無法載入MYSQL模組PHPMySql
- drozer模組的編寫及模組動態載入問題研究
- JavaScript中的模組匯入有一個缺點JavaScript
- require.js載入非規範的模組UIJS
- Angular入門到精通系列教程(11)- 模組(NgModule),延遲載入模組Angular
- JavaScript 檔案載入方式JavaScript
- JavaScript 函式惰性載入JavaScript函式
- Angular2+,路由預載入--預先載入延遲模組Angular路由
- 前端模組化之迴圈載入前端
- UEFI載入程式 & 驅動模組化
- nodejs模組載入分析(1).mdNodeJS
- Python實現模組熱載入Python
- node模組載入層級優化優化