jquery 模块化 javascript模块化

前言

现在网页的复杂度越来越高，js代码越来越庞大，早已不像原来那样实现一些特效即可。一个项目可能需要n个人来完成，分别负责不同的功能。这些不同的功能划分在我看来就是一个个模块，我们不需要了解模块内部逻辑，只关心模块的对外接口。我们需要什么功能时只需引入合适的模块即可极大的提高了多人开发时的效率。

正文

一、如何实现模块化

按照前言所说，模块有以下两个特征：可以实现特定的功能、可以提供对外接口。

var module1 = (function(){

    var f1 = function(){}
    var f2 = function(){}
    return {
        f1 : f1,
        f2 : f2
    }

})()

//采用自动执行函数可以有效的避免模块与模块之间的命名冲突

二、js模块化的由来

模块化这个概念最开始是出现在服务端的，随着nodejs在服务端的发展，一套适用于js的模块化规范（nodejs遵循CommonJS规范）就随之产生了。

var http = require（'http'）;

http.createServer();

三、客户端的模块化实现

我们广大的前端工作者看到模块化在服务器端这么好使，纷纷表示不服，必须要实现客户端模块化。由于require是异步操作，在服务器端按照CommonJS写是ok的，但是在客户端存在很大的问题，我们必须要依赖回调：

require('router',function(router){

    router.parse();

})

于是产生了AMD规范，即Asynchronous Module Definition（异步模块定义）。

四、RequireJS

RequireJS是一个很好的js模块化工具，遵循AMD规范。
1、requirejs的加载

<script src="js/require.js" data-main="js/main"></script>

//data-main属性可以指定主模块

2、定义主模块

require(['module1','module2'],function(m1,m2){

    //code....

})

//首先指明依赖模块，其是string或者arraystring
//如果没有配置项，默认依赖模块与主模块在同一目录下面

但实际开发时情况可能不同，做如下配置:

require.config({

    paths : {
        "module1" : "src/js/module1",
        "module2" : "src/js/module2"
    }   

})

我们在引入第三方库例如angular、jq时，这些库很多时候不是按照AMD规范编写的，做如下配置：

require.config({

    shim : {
        "jquery.min" : {
            exports : "$"
        },
        "angular.min" : {
            exports : "angular"
        }
    }

})

3、依赖模块的定义
模块的编写需要遵循AMD模块，即定义在define函数内

define(function(){

    var f1 = function(){}
    var f2 = function(){}

    return {
        f1 : f1,
        f2 : f2
    }

})

如果此模块依赖于其他模块，作如下处理：

define(['module1'],function(m1){

    //code...

    return {

    }

})

结语

模块化的思想很重要，使团队协作成为可能。另外还有一款很优秀的模块化工具seajs，国产的，遵循CommonJS规范，也值得学习。