浏览端模块化开发

浏览端模块化开发
为什么要用模块呢？因为有了模块，我们可以很方便的使用别人的代码，使用什么功能就加载什么模块。而且很好的解决了命名空间冲突的问题。
模块系统需要具有的功能:
a)、可以创建封装的模块
b)、可以定义对其他模块的依赖
c)、可以导出功能,被其他模块使用
模块化要求开发者以相同的方式编写模块，然后以相同的方式调用模块。目前，JavaScript模块化有两个主流规范，分别是AMD规范与CMD规范。什么是规范？作为一个规范，只需定义其语法API，而不关心其实现。大家遵循这个规范编写模块，然后再用一定方式调用模块。

1、AMD规范
1.1、什么是AMD规范
AMD:Asynchronous Module Definition,即异步模块定义,通过异步方式加载模块,模块的加载不影响后续语句的执行,等依赖模块加载完成之后,就执行回调函数,而依赖模块以参数传入.
AMD规范简单到只有一个API，即define函数：
define([module-name?], [array-of-dependencies?], [module-factory-or-object]);
其中：
　　module-name: 模块标识，可以省略。
　　array-of-dependencies: 所依赖的模块，可以省略。
　　module-factory-or-object: 模块的实现，或者一个JavaScript对象。一个回调函数,在依赖的模块加载完毕之后执行这个函数,如果回调函数有返回值，则导出来(传入参数为依赖模块的顺序排列，例:define(‘runtime/client’,[‘base’,’mediator’,’runtime/runtime’], function( Base, Mediator, Runtime ) {})）。
从这个define函数AMD中的A：Asynchronous，我们也不难想到define函数具有的另外一个性质，异步性。当define函数执行时，它首先会异步的去调用第二个参数中列出的依赖模块，当所有的模块被载入完成之后，如果第三个参数是一个回调函数则执行，然后告诉系统模块可用，也就通知了依赖于自己的模块自己已经可用。
define 方法允许你省略第一个参数，这样就定义了一个匿名模块，这时候模块文件的文件名就是模块标识。如果这个模块文件放在a.js中，那么a就是模块名。可以在依赖项中用”a”来依赖于这个匿名模块。这带来一个好处，就是模块是高度可重用的。你拿来一个匿名模块，随便放在一个位置就可以使用它，模块名就是它的文件路径。
使用方法如下:
a)、

define('upload',['base','utils'],function(base,utils){
    return{
        uploadVideo:function(video){
            return video;
        }
    }
});

b)、匿名模块
rep.js

define(['base','utils'],function(base,utils){
    return{
        uploadVideo:function(video){
            return video;
        }
    }
});

那么这个模块被引用时,rep就是它的模块名
1.2、遵循AMD规范的例子
RequireJs遵循AMD规范，即RequireJs模块的定义是使用AMD规范，模块定义方法如上两种。

2、CMD规范
2.1、什么是CMD规范
CMD:Common Module Definition
是seaJs在推广中提出来的，是玉伯大神自己定义的。其起源于commonJs。
在CMD中,一个模块就是一个文件。
2.2、遵循CMD规范的例子
seaJs
使用方法如下:

define(function(require,exports,module){
    var http = require('http');
    upload.uploadVideo = function(){
        http('video');
    }
    upload.uploadImage = function(){
        http('image');
    }
    module.exports = upload;
})

参考文章:
（1）前端模块化开发的价值
（2）JavaSript模块规范 – AMD规范与CMD规范介绍