sea.js及三种加载方式的异同
一、前言
浏览器本身并不提供模块管理的机制，过去网页开发中，为了使用各种模块，不得不在加入一大堆script标签。这样就使得网页体积臃肿，难以维护，还产生大量的HTTP请求，拖慢显示速度，影响用户体验。为了解决这个问题，前端的模块管理器应运而生。它可以轻松管理各种JavaScript脚本的依赖关系，自动加载各个模块，使得网页结构清晰合理。
最早的模块管理器是RequireJs,可以实现异步加载模块，之后出现了Brower、component、seaJs，还有模块化组织工具webpack等，各种模块加载器都有着共同的目标。今天让我们讲讲seaJs，本人工作中，经常会使用到sea.js，发现这个加载器确实有好用之处。
sea.js是一个前端代码模块加载器，通过sea.js可以吧大量的js代码封装成一个一个小模块，实现模块的加载和依赖管理。有了sea.js，在前端开发过程中，开发人员可以分工书写各种模块，这种方法对协作开发、后续维护、性能调优都有很大的帮助。
”Sea.js初衷是帮助前端开发工程师将大文件拆分成小文件，能保持小颗粒度的模块化开发，同时不需要过多考虑依赖关系，让依赖管理轻松自如，让模块化开发变得更自然，就像浏览器原生提供的一样。Sea.js的本质意义是通过模块化开发，来提高代码的可维护性。对工程师而言，是关注度分离，更将更多精力聚焦在代码本身的逻辑上。”-----玉伯（前端模块化开发框架SeaJS的创始人）。
sea.js的核心设计思想：
除了保持简单，Sea.js的设计理念还有职责清晰、性能优先和适度完备。
二、开始使用
1、引入sea.js
<script type="text/javascript" src="./sea.min.js"></script>
2、定义模块
seajs.config({
alias: {
'plIndex' : 'js/poplayer/index.js?v=01190new012?v=19910',
'taskAnimate': 'js/poplayer/taskAnimate.js',
'a' : 'js/a.js'
}
})
3、编写对应小模块,比如编写taskAnimate.js
define(function(require, exports, module){
exports.initTaskAnimation = initTaskAnimation;//exports是暴露的接口
function initTaskAnimation(data){
/*逻辑代码*/
}
});
三、3种载入的方式
1、seajs.use
seajs.use('./a');
//回调模式
seajs.use('./a', function(a) {
a.run();
});
//多模块模式
seajs.use(['./a', './b'], function(a, b) {
a.run();
b.run();
});
注意这种写法，预加载a模块
define(['a'],function(require, exports, module){
//这个['a']是预加载这个模块，但是并不会执行里面的代码,只是引入
var _a = require('a'); //这个才会正在执行a里面的语句
});
2、require
函数用来访问其他模块提供的 API。
注意：只接受模块标识(如上面定义的模块)作为唯一参数，且参数是字符串。
define( function(require, exports, module) {
var a = require("./a");
a.dosomething();
//或者可以是完整的路径
var b = require("//static.XXXXXX");
});
3、require.async
该方法可用来异步加载模块，并在加载完成后执行回调函数。
define(function(require, exports, module) {
// 加载一个模块
require.async('./b', function(b) {
b.doSomething();
});
// 加载多个模块
require.async(['./c', './d'], function(c, d) {
// do something
});
});
4、require和require.async区别
a、require无法完成条件加载，
如下代码会同时加载a模块个b模块（底层是调用函数的toString()方法）
define(function(require){
if(false) {
require("./a);
} else {
require("./b");
}
});
b、require.async可以按条件加载,且参数可以加入一个callback,而require不行！
四、最后讲讲seaJs的特点
seaJs遵循的是CMD（通用模块定义）规范，而CMD有延迟执行，推崇就近依赖，职责单一等特点。关于AMD和CMD的区别，以及和node所遵循的commonJs规范区别，可看另一篇博文《commonJs 、AMD、 CMD》。
以上就是最简单的sea.js的使用，使用sea.js之后，可以把大的js文件，拆分为一个一个小的模块，大大提高开发效率。
