解析JS模塊化

xbynet 發(fā)布于2019-08-21 15:49 / 1478人閱讀

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

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

忽然某天一位項目加多了開發(fā)，他忽然寫了一個函數(shù):

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

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

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

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

這時候你又多了一位同事，你發(fā)現(xiàn)：
大家都寫了同一句代碼:

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

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

于是你又改進了代碼:

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

})(window,undefined);

$.a();

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

云服務(wù)器 GPU云服務(wù)器解析模塊 js模塊化 js模塊化視頻教程 js解析

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/88267.html

相關(guān)文章

精讀《V8 引擎 Lazy Parsing》

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

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

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

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

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

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

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

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

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

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

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

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