解析JS模塊化

xbynet 發布于2019-08-21 15:49 / 1473人閱讀

一開始自己一個人寫代碼，實現一個點擊隱藏和顯示事件

function a(){
    document.getElementById("xxx").click = function(){
    }
}
a();

忽然某天一位項目加多了開發，他忽然寫了一個函數:

function a(){
    alert("error");
}

問題發生了:
1.悲劇就發生了你寫的函數就say Goodbye了，你老板就找到你了,因為你的函數被覆蓋了，無模塊化時候全局內容很容易被污染
2.同樣，你同事也找到了你，因為他發現依賴于你事件失效了，同樣，無模塊化時候，代碼執行順序混亂會導致代碼失效

這時候要改進整體代碼了，于是你的函數代碼就寫成:

(function(window,undefined){
    document.getElementById("xxx").click = function(){}
})(window,undefined);

這時候你又多了一位同事，你發現：
大家都寫了同一句代碼:

    document.getElementById("xxx").click = function(){}

這樣匿名函數自執行，可以避免全局污染，但是帶來一個問題，代碼復用和代碼冗余

于是你又改進了代碼:

(function(window,undefined){
   var $ = function(){
   }
   $.prototype={
       a:function(){
           document.getElementById("xxx").click = function(){}
       }
   }
   window.$ = new $();

})(window,undefined);

$.a();

這樣解決了復用的問題，但是全局污染的問題依舊存在。只能通過人為來避免了。

云服務器 GPU云服務器解析模塊 js模塊化 js模塊化視頻教程 js解析

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88267.html

精讀《V8 引擎 Lazy Parsing》

摘要：在執行函數時，通過保存堆棧狀態，再保存堆棧跳出后返回位置的指針，最后對變量賦值。這看上去沒有問題，只要將值存在堆棧就搞定了。 1. 引言本周精讀的文章是 V8 引擎 Lazy Parsing，看看 V8 引擎為了優化性能，做了怎樣的嘗試吧！這篇文章介紹的優化技術叫 preparser，是通過跳過不必要函數編譯的方式優化性能。 2. 概述 & 精讀解析 Js 發生在網頁運行的關鍵路...

羅志環 2019-08-23 17:04 評論0 收藏0
最全的前端模塊化方案

摘要：模塊化主要是用來抽離公共代碼，隔離作用域，避免變量沖突等。將一個復雜的系統分解為多個模塊以方便編碼。順手寫一個省略省略實現此時的對應的形式解析省略執行兼容，模塊化語法。模塊化主要是用來抽離公共代碼，隔離作用域，避免變量沖突等。將一個復雜的系統分解為多個模塊以方便編碼。會講述以下內容 CommonJS AMD 及核心原理實現 CMD 及核心原理實現 UMD 及源碼解析 ES6...

antz 2019-08-23 17:07 評論0 收藏0
為何 ES Module 如此姍姍來遲

摘要：最大的好處是對用戶而言透明，可惜原因如前所述，此方案已否定。鑒于已經在正式提案中，倘若討論持續僵持不下，不出意外將會隨著時間推移而正式成為規范。月碰頭會的與會者紛紛表示這次會議進展令人愉快，會議內容匯總在此，以及一些補充。說明：本文發布之后，此問題的推進峰回路轉，不停有新內容。文末新增一節 Updates，跟進本文發布之后的 ES Module 標準化進展情況。瀏覽器大戰多年了熱度...

xuexiangjys 2019-08-19 18:06 評論0 收藏0
開始在web中使用JS Modules

摘要：在中，你可以使用關鍵字輸出任何東西等。新的和語法僅限于在模塊腳本中使用，不能用在常規腳本中。開發者工具的代碼覆蓋率檢查能幫助你檢測源碼中是否存在無用代碼。以達到無需加載其他無用函數的目的。本文由云+社區發表作者：原文：《Using JavaScript modules on the web》 https://developers.google.com... 譯者序 JS modu...

sf190404 2019-08-23 16:03 評論0 收藏0
minipack源碼解析以及擴展

摘要：的變化利用進行前后端通知。例如的副作用，資源只有資源等等，仔細剖析還有很多有趣的點擴展閱讀創建熱更新流程本文示例代碼聯系我前置知識首先可能你需要知道打包工具是什么存在基本的模塊化演變進程對模塊化bundle有一定了解了解babel的一些常識對node有一定常識常見的一些打包工具如今最常見的模塊化構建工具應該是webpack,rollup,fis,parcel等等各...

tangr206 2019-08-23 17:04 評論0 收藏0
webpack源碼分析之四：plugin

摘要：流程劃分縱觀整個打包過程，可以流程劃分為四塊。核心類關系圖功能實現模塊通過將源碼解析為樹并拆分，以及直至基礎模塊。通過的依賴和切割文件構建出含有和包含關系的對象。通過模版完成主入口文件的寫入，模版完成切割文件的寫入。前言插件plugin,webpack重要的組成部分。它以事件流的方式讓用戶可以直接接觸到webpack的整個編譯過程。plugin在編譯的關鍵地方觸發對應的事件，極大的...

yhaolpz 2019-08-23 10:34 評論0 收藏0