剖析JS模块化

2024年3月29日 192次阅读 来源: CxinR文艺

一开始本身一个人写代码，完成一个点击隐蔽和显现事宜

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();

如许处理了复用的题目，然则全局污染的题目照旧存在。只能经由过程工资来防止了。

    原文作者：CxinR文艺
    原文地址: https://segmentfault.com/a/1190000009493410
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞