解析JS模塊化

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

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

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

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

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

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

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

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

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

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

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

于是你又改進(jìn)了代碼:

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

})(window,undefined);

$.a();

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/88267.html

相關(guān)文章

精讀《V8 引擎 Lazy Parsing》

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

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

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

antz 2019-08-23 17:07 評(píng)論0 收藏0
為何 ES Module 如此姍姍來(lái)遲

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

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

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

sf190404 2019-08-23 16:03 評(píng)論0 收藏0
minipack源碼解析以及擴(kuò)展

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

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

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

yhaolpz 2019-08-23 10:34 評(píng)論0 收藏0