js模块化写法

什么是模块化

模块化是一种将系统分离成独立功能部分的方法，可将系统分割成独立的功能部分，严格定义模块接口、模块间具有透明性。

以Java为例，在Java中有一个重要带概念——package，逻辑上相关的代码组织到同一个包内，包内是一个相对独立的王国，不用担心命名冲突什么的，那么外部如果使用呢？直接import对应的package即可

import java.util.ArrayList;

遗憾的是JavaScript在设计时定位原因，没有提供类似的功能，开发者需要模拟出类似的功能，来隔离、组织复杂的JavaScript代码，我们称为模块化。

模块化写法

简单的函数封装

function fn1(){
    statement
}

function fn2(){
    statement
}

这样在需要函数的地方，调用函数就可以了

这种做法的缺点很明显：污染了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间没什么关系。

对象

对象的写法就是将所有的模块成员封装在一个对象中，如下：

var obj = {
    p1 : 1,
    p2 : 'test p2',
    fn1 : function() {

    },
    fn2: function() {

    }
}

那么此时调用的方式就为：

obj.p1;
obj.fn1();

这样虽然达到了防止变量污染的目的，但是也引入了的问题，就是在外部可以随意修改内部的成员：

obj.p1 = 10;

所以就会产生意外的安全性问题。

立即执行函数

可以通过立即执行函数，来达到隐藏细节的目的。如：

/*new modules(param1,param2,param3)*/
(function (exports, $) {

//constructor
    function modules(param1, param2) {
        this.param1 = param1
        this.param2 = param2
        this.init()
    }

    modules.prototype = {
        init: function () {
            //do something init
            console.log("something init")
            this._handle()
        },
        _handle: function () {
            // core handle function
            console.log("something handle")
            $("body").css("backgroundColor", "green")
        }
    }
    exports.modules = modules
})(window, jQuery)

这样在模块外部无法修改我们没有暴露出来的变量、函数，同时可以在外部调用暴漏出来的函数以及变量。