javascript模块化编程

Posted 2020-08-27 熊猫哥哥

一个函数可以看成是一个行为或者方法，下面两个就是两个方法————两个模块，但是这样会污染全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。

function m1(){
　　　　//...
　　}

function m2(){
　　　　//...
}

为了解决上面的方法，可以把模块写成一个对象，所有的模块成员都放到这个对象里面。

　　var module1 = new Object({

　　　　_count : 0,

　　　　m1 : function (){
　　　　　　//...
　　　　},

　　　　m2 : function (){
　　　　　　//...
　　　　}

　　});

那这里调用m1就直接可以module1.m1()；就可以了，但是这样的话，代码可以被改写。

这里要是不让代码被改写

　　var module1 = (function(){

　　　　var _count = 0;

　　　　var m1 = function(){
　　　　　　//...
　　　　};

　　　　var m2 = function(){
　　　　　　//...
　　　　};

　　　　return {
　　　　　　m1 : m1,
　　　　　　m2 : m2
　　　　};

　　})();

用闭包的写法，这样外部没有办法读取里面的代码，

console.info(module1._count); //undefined

如果一个模块很大，必须分成几个部分，或者一个模块需要继承另一个模块，这时就有必要采用"放大模式"（augmentation）。

　　var module1 = (function (mod){

　　　　mod.m3 = function () {
　　　　　　//...
　　　　};

　　　　return mod;

　　})(module1);

上面的代码为module1模块添加了一个新方法m3()，然后返回新的module1模块。

在浏览器环境中，模块的各个部分通常都是从网上获取的，有时无法知道哪个部分会先加载。如果采用上一节的写法，第一个执行的部分有可能加载一个不存在空对象，这时就要采用"宽放大模式"。

　　var module1 = ( function (mod){

　　　　//...

　　　　return mod;

　　})(window.module1 || {});

这样，传进去的可以是一个空对象。