javasript模块化

模块概述

随着一个网站越来越大，html页面文件越来越多，由<script src='xxx.js'></script>引入的js文件越来越多，我们的单个js文件很大，上几万行时，我们就需要按照功能拆分成多个单一通用的文件，我们称之为模块。

模块的演变过程

最原始写法:

简单又粗暴，一些变量，一些方法，解决一些功能，就是一个模块文件

     var v1=1;
     var v2=2;
     function fun1(){
        return ;
     }

     function fun2(){
        return ;
     }

如此可以直接用，比如在控制台中缺点："污染"了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系

对象写法:

var module=new Object({
    v1:1,
    v2:2,
    fun1:function(){
        return v1;
    },
    fun2:function(){
        return v2;
    }
})

将功能模块的变量，方法写到对象里,解决模块独立，单一问题,，通过对象调用建立方法属于模块的联系

缺点：这样的写法会暴露所有模块成员，内部状态（变量，方法）可以被外部改写 ，外部代码可以直接改变内部变量的值，甚至重定义方法，比如哪天一个邪恶分子这样：

module.v1="i am you baba";
module.fun1=function(){
delete module.v2;
}

这就很恐怖了，自己写的模块，肯定不希望别人更改,是吧 *.*

立即执行函数写法：(闭包)

针对以上的问题，聪明的童鞋，会马上想到，闭包！！！ 使用"（立即执行的）函数表达式"（Immediately-Invoked Function Expression，IIFE），可以达到不暴露私有成员的目的，于是便有了以下常用的模块方法，相当于类

var module2=(function(){
    var v1=1;
    var fun1=function(){
        console.log("fun1:"+v1);
    };
    var fun2=function(){
        alert("fun2:");
    };
    var fun3=function(arg){
        v1=arg;
    }
    return {write:fun1,show:fun2,setV1:fun3}
})();

这样，我们便可以控制模块接口的暴露,结合function 对象原型链(prototype)模式，可以构建很强大的模块到此处，开发一般公司的项目，基本也够用了

本文由 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: 2019/02/28 21:02