requirejs和seajs使用感受

这几天看了下前端模块化的知识，主要是requirejs和seajs相关的知识，还未看es6的模块化知识。

由于目前项目组内的开始推广使用vue，并且开始简单的封装组件，但发现组件js的使用方式依然是原先的script标签引用方式，同时组件的template文件需作为字符串变量在组件js文件内封装，无法使用html标签的验证、补全、语法高亮等功能，此外多个小型组件组合成大型组件时，需要在每个使用到大型组件的html页面中把所有的小型组件js引入，代码重复并且容易出现遗漏情况。于是想到了前端模块化相关的知识，将组件封装为模块，使用前端模块化相关的工具，解决模块之间的依赖关系，只需引入单一的js文件即可，方便维护管理。

AMD和requirejs

AMD是Asynchronous Module Definition，异步模块定义。

AMD规范定义了一个define函数。AMD规范  https://github.com/amdjs/amdjs-api/wiki/AMD

define( id?, dependencies?, factory );

第一个参数，id 为字符串类型，为可选参数，为模块的标识。如果此标识不存在，模块的标识则为此脚本的文件名称，必要时还包含此文件的路径。
第二个参数，dependencies为字符串数组，为当前模块依赖的其他模块标识。
第三个参数，factory为function，其参数对应依赖模块，是一个需要进行实例化的函数或者一个对象。

requirejs是一个基于javascript语言的文件和模块加载器。

https://github.com/requirejs

其实用非常简单，官方资料也比较充分。模块体现在requirejs中，可如下所示：定义了一个名称为myModule的模块，它依赖于dep1和dep2两个模块，此模块返回了一个对象，此对象包含一个名称为name的属性。

define('myModule',['dep1','dep2'],function(dep1,dep2){
return {
    name:'hello world'
}})

模块可以使用依赖模块的文件路径，此时依赖模块的相对路径是相对当前模块所在的路径。

define('myModule',['./modules/dep1','dep2'],function(dep1,dep2){
return {
    name:'hello world'
}})

在requirejs中，可以直接将vue作为一个模块引入使用。

使用插件：当存在模板文件时，依赖的模块名称前面增加"text!"即表示此依赖为文本文件，这样即可将vue的模板文件异步加载进来，使用“css!”，css文件也可这样引用。

requirejs使用感受

requirejs可以说是一种先声明再使用的方式，所有依赖的模块加载完毕后，再执行此模块的内容。

唯一害怕的是，添加依赖模块时，需要同时修改两个地方，还要保证映射关系不错，当依赖的模块太多时，害怕。好在暂时没想到需要依赖很多模块的模块。

当然也有另一种方式使用依赖的模块，require是使用模块的函数定义，不用担心模块会被重复加载。仍需再define中定义依赖的模块，只不过在需要时使用require获取即可。

define(['a'], function () {
    var a = require('a');
});

CMD和seajs

玉伯写的seajs，使用方式如下所示

define(function(require,exports,module){
 //此处如果需要某XX模块，可以引入
 var xx=require('XX');
});

这样，代码在运行时遇到require时，才会同步加载所需的模块。

模块内容定义，需使用exports和module实现，可以同requirejs一样，返回对象即可。

https://github.com/seajs

通过使用seajs-text插件，可以将文本文件作为模块加载进来，完成vue组件的代码模板分开编写的目的。

seajs使用感受

抛除seajs和requirejs中的define的不同，二者在使用上没有什么区别。requirejs可以require一个依赖模块，只不过需先定义下。

seajs是执行时发现需要依赖模块再异步加载，requirejs异步加载定义依赖模块后再执行。

 

http://huangxuan.me/js-module-7day/这个PPT讲解清晰明了