初识前端模块化

好久没写博客了，人总是有那么一种惰性，不知不觉就影响了自己，在学习前端这条路上最大的障碍应该就是这个货了吧，差点被消磨了热情与热血，现在缓过神来还来的及，(*^__^*) 嘻嘻……

前端模块化这个名词之前听过但是一直没去了解过怎么个模块化，意思都没有什么理解，只知道有这么个东西，好像在今后的开发中很好用！

直到今日充满惰性的我，终于想起来要去了解下模块化真正的含义；对前端模块化的了解我市通过别人的博客学习，在这里贴下链接吧http://www.cnblogs.com/dolphinX/p/4381855.html 转自博客园！这篇文章讲的还是蛮容易懂得，下面就来总结下我对模块化的理解吧~

JavaScript是一门弱类型语言，所以它没有像Java那样有类，模块的概念，所以想要让JavaScript有模块化这个概念需要模拟出类似的功能，来隔离、组织复杂的JavaScript代码，我们称为模块化。

函数的封装

function fn1(){
    statement
}

function fn2(){
    statement
}

在函数封装之后 在其他项目中只需要引用就可以直接拿来用，但是这样的方法有一定的缺点：污染了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间没什么关系。

由于上述方法有一定的缺点，所以又引出了对象的写法

var myModule = {
    var1: 1,

    var2: 2,

    fn1: function(){

    },

    fn2: function(){

    }
}

这种写法可以通过

myModule.fn1()

直接调用，这样避免了变量污染，只要保证模块名唯一即可，同时同一模块内的成员也有了关系。

但是这类写法有安全问题，外部可以随意修改内部内容，即：

myModule.var1=3

立即执行函数

var myModule = (function(){
    var var1 = 1;
    var var2 = 2;

    function fn1(){

    }

    function fn2(){

    }

    return {
        fn1: fn1,
        fn2: fn2
    };
})();

以上为模块化的基础，目前JavaScript 的模块规范主要有两种 commonjs 和 AMD；

CommonJs

模块输出：module.exports把模块希望输出的内容放入该对象；

加载模块：require 方法

//模块定义 myModel.js

var name = 'geww';

function printName(){
    console.log(name);
}

function printFullName(firstName){
    console.log(firstName + name);
}

module.exports = {
    printName: printName,
    printFullName: printFullName
}

//加载模块

var nameModule = require('./myModel.js');

nameModule.printName();

AMD（Asynchronous Module Definition） 异步模块定义

采用RequireJs

定义模块myModule.js：

// 定义模块 myModule.js
define(['dependency'], function(){
    var name = 'Byron';
    function printName(){
        console.log(name);
    }

    return {
        printName: printName
    };
});

// 加载模块
require(['myModule'], function (my){
　 my.printName();
});

其中的define函数（全局变量，用来定义模块）

define(id?,dependdencies?,factory);

1.id:可选参数，用来定义模块的标识，如果没有改参数即脚本文件名（没有后缀）；

2.dependencies：是一个当前模块以来的模块名称数组

3.factory：工厂方法，模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次，如果是对象，此对象为模块的输出值。

require（）函数加载模块

require（[dependencies],function(){}）;

1.第一个参数是一个数组，表示所依赖的模块

2.第二个参数是一个回调函数，加载模块会以参数的形式传入该函数，从而在回调函数内部就可以使用这些模块。

require（）函数在加载时是异步加载的

CMD（Common Module Definition） 通用模块定义

采用seajs

语法：

define（id?,deps?,factory）

factory有三个参数：

function（require，exports，module）

require （id） 接受模块标识

exports 用来向外提供模块接口

module 存储了与当前模块相关联的一些属性和方法

demo：

// 定义模块  myModule.js
define(function(require, exports, module) {
  var $ = require('jquery.js')
  $('div').addClass('active');
});

// 加载模块
seajs.use(['myModule.js'], function(my){

});

浅谈AMD 与 CMD 的区别

在模块定义时对依赖的处理不同

1.AMD推崇依赖前置，在定义模块是就要声明其依赖的模块

2.CMD推崇就近依赖，只有在用到某个模块时再去require

AMD 与 CMD对依赖模块执行的时机不同~

转载于:https://my.oschina.net/u/3256201/blog/851841