seajs 是由玉伯开发的一个遵循 commonjs 规范的模块加载框架，可用来轻松愉悦地加载任意 javascript 模块和css模块样式。seajs非常小巧，小巧在于压缩和gzip后体积只有4k,而且接口和方法也非常少，seajs 就两个核心：模块定义和 模块的加载及依赖关系。seajs非常强大，seajs可以加载任意 javascript 模块和css模块样式，seajs会保证你在使用一个模块时,已经将所依赖的其他模块载入到脚本运行环境中。玉伯的说法，seajs可以让你享受写代码的乐趣，不用去管那些加载的问题。你是否厌倦了如此多的js和css引用,我数了一下我们公司网站的个人主页首页上有39个css和js引用，带来的影响可想而知：
1.不利于维护，前端后端都一样
2.http请求过多，当然这个可以通过合并解决，但是如果没有后端直接合并，人工成本非常大，就算后端合并，维护的时候，这么长的一个字符串，眼睛肯定看花
用seajs就能非常好的解决这些问题。
模块的定义define
定义一个模块比较简单，例如定义一个sayhello模块，建一个sayhello.js文档：
define(function(require,exports,module){
exports.sayhello = function(eleid,text) {
document.getelementbyid(eleid).innerhtml=text;
};
});
这里先看一下exports参数，exports参数是用来向外提供模块的 api.也就是通过这个exports其他的模块就能访问sayhello方法。
模块的加载use
例如我们页面上有一个id为“out”的元素，要输出“hello seajs!”,
那么我们可以先引入sea.js
然后使用sayhello模块：
seajs.use("sayhello/sayhello",function(say){
say.sayhello("out","hello seajs!");
});
这里的use就是使用模块的方法:
第一个参数就是模块表示，他是相对于sea.js的相对路径来表示，sayhello.js后面的“.js”后缀可以省略，当然这个模块标识还有很多方法，具体查看官方说明：http://seajs.com/docs/zh-cn/module-identifier.html
第一个参数是一个callback函数。say.sayhello()就是调用sayhello模块的exports.sayhello方法，当然这callback函数中有个say参数。
模块的依赖关系
模块的依赖其实在模块定义的时候就应该存在了。比如说把上面的sayhello模块改写一下，假设我们已经有了一个通用的dom模块，比如一些获取元素，设置样式等方法，例如这么一个dom模块，如下编写dom.js
define(function(require, exports, module) {
var dom = {
/**
* 通过元素的id属性获取dom对象,参数为字符串，或多个字符串
* @id getbyid
* @method getbyid
* @param {string} id the id attribute
* @return {htmlelement | object} the htmlelement with the id, or null if none found.
*/
getbyid: function() {
var els = [];
for (var i = 0; i < arguments.length; i++) {
var el = arguments[i];
if (typeof el == "string") {
el = document.getelementbyid(el);
}
if (arguments.length == 1) {
return el;
}
els.push(el);
}
return els;
},
/**
* get 获取对象，可以传入对象或字符串，如果传入字符串者以document.getelementbyid（）的方式获取对象
* @id get
* @param {string} el html element
* @return {object} htmlelement object.
*/
get: function(el) {
if (el & amp; amp; amp; & amp; amp; amp; (el.tagname || el.item)) {
return el;
}
return this.getbyid(el);
}
};
return dom;
});
那么sayhello模块可以这样编写，为了不影响原来的demo页面，所以我定一个新的sayhelloa模块，我们可以这样编写sayhelloa.js:
define(function(require, exports, module) {
var dom = require("dom/dom");
require("sayhelloa/sayhello.css");
exports.sayhello = function(eleid, text) {
dom.get(eleid).innerhtml = text;
};
});
require 函数就是用来建立模块的依赖关系，比如上面sayhelloa模块，就是依赖于dom模块，因为用到了dom模块的get方法。
注意这里的var dom=require("dom/dom")，这句是将应用进来的dom模块赋值给dom；require("sayhelloa/sayhello.css")是直接应用sayhello.css css模块或者说文件。这样页面上会引用这个css文件。
最近这几天一直捣腾seajs，越捣腾越喜欢，感谢玉伯！感谢seajs！当然你可能觉得这么简单的几个实例没必要这么做。确实如果js文件少的小项目感觉不错模块化的优势，但是，更多的在js文件多或着中型以上项目这个模块化的优势就体现出来了。
如对本文有疑问，
点击进行留言回复！！
我要评论
网友评论