使用seajs进行模块化前端开发
之前有一篇文章介绍了requireJS进行模块化开发，今天来说高大上的国产SeaJS的吧，是的SeaJS遵循的是CMD规范。作者是淘宝前端工程师，名字叫玉伯。此解决方案的宗旨是使前端工程师从繁重的js文件及对象依赖处理中解救出来，从而可以专注代码的逻辑本身。
要使用SeaJs,只要下载sea.js文件，然后直接包含在html文件中就可以了，那么如何定义能被seajs加载的模块呢？请看下面的这段源码：
fn.define = function(id, deps, factory) {
//code of function…
}
define函数可以接受三个参数，但是你也可以只传一个参数，即factory。这也是官方推荐的做法。各参数的解释如下：
id:即模块id,如http://example/a,代表一个模块的绝对路径，a就是此模块文件名如a.js。
deps:表示需要此模块要用到的其他模块。
factory:表示工厂函数，这是模块的主体，也是最重要的部分。
下面来详细解释一下工厂函数：
define(function(require, exports, module) {
//code of the module...
});
这里只传了factory一个参数，factory其实是一个匿名函数，里面的几个参数表示如下：
require:此模块需要依赖的其他模块。
exports：模块对外提供接口。
module:模块元数据。
下面来介绍一下定义模块的几种方式：
.基于exports的模式：
define(function(require, exports, module) {
var a = require('a'); //引入a模块
var b = require('b'); //引入b模块
var data1 = 1; //私有数据
var func1 = function() { //私有方法
return a.run(data1);
}
exports.data2 = 2; //公共数据
exports.func2 = function() { //公共方法
return 'hello';
}
});这是比较常用的方式，还可以直接返回一个对象：如下：
define(function(require) {
var a = require('a'); //引入a模块
var b = require('b'); //引入b模块
var data1 = 1; //私有数据
var func1 = function() { //私有方法
return a.run(data1);
}
return {
data2: 2,
func2: function() {
return 'hello';
}
};
});如果模块中只有一个对象，可以简化这样：
define({
data: 1,
func: function() {
return 'hello';
}
});最后一种方法适合纯json数据的模块开发。
写好了模块，那么怎么来使用它们呢？
模块的载入和引用：
require("http://example/js/a");表示载入http://example/js/a.js这个文件。
也可以用相对地址：
require("./c");表示载入http://example/js/c.js这个文件。require("./module1-style.css");表示载入css文件。
seajs.use主要用于载入入口模块，就像c里面的main函数一样样，如下：
//单一模式
seajs.use('./a');
//回调模式
seajs.use('./a', function(a) {
a.run();
});
//多模块模式
seajs.use(['./a', './b'], function(a, b) {
a.run();
b.run();
});一般用于页面中载入入口文件。
也可以使用<script>标签中加入data-main属性来代替seajs.use如下：
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>TinyApp</title>
</head>
<body>
<p class="content"></p>
<script src="./sea.js" data-main="./init"></script>
</body>
</html>require.async：
require.async('/path/to/module/file', function(m) {
//code of callback...
});这种方法会异步加载模块，即需要使用摸个模块的时候再加载。
SeaJS的全局配置：
seajs.config({
base: 'path/to/jslib/',
alias: {
'app': 'path/to/app/'
},
charset: 'utf-8',
timeout: 20000,
debug: false
});base：表示基址路径，设置了它可以简化require的加载路径。
alias：别名，可以对较长的路径进行缩写。
剩下的没那么重要了，略过。
那么SeaJs如何与其他js框架配合使用呢？这也是大家最关心的问题了吧。
就拿jquery来吧，我们需要对jquery的源码进行封装，你也可以直接用npm来直接下载已经封装好的jquery，但是我试了下，好像淘宝的服务器抽风了，下下来的是损坏的文件。自己动手.....
define(function() {
//{{{jQuery原有代码开始
/*!
* jQuery JavaScript Library v1.6.1
* http://jquery.com/
*
* Copyright 2011, John Resig
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* Includes Sizzle.js
* http://sizzlejs.com/
* Copyright 2011, The Dojo Foundation
* Released under the MIT, BSD, and GPL Licenses.
*
* Date: Thu May 12 15:04:36 2011 -0400
*/
//...
//}}}jQuery原有代码结束
return $.noConflict();
});下面来介绍一个完整的例子吧：
- index.html——主页面。
- sea.js——SeaJS脚本。
- init.js——init模块，入口模块，依赖data、jquery、style三个模块。由主页面载入。
- data.js——data模块，纯json数据模块，由init载入。
- jquery.js——jquery模块，对 jQuery库的模块化封装，由init载入。
- style.css——CSS样式表，作为style模块由init载入。
- sea.js和jquery.js的代码属于库代码，就不赘述，这里只给出自己编写的文件的代码。
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="content">
<p class="author"></p>
<p class="blog"><a href="#">Blog</a></p>
</div>
<script src="./sea.js" data-main="./init"></script>
</body>
</html>js;
//init.js
define(function(require, exports, module) {
var $ = require('./jquery');
var data = require('./data');
var css = require('./style.css');
$('.author').html(data.author);
$('.blog').attr('href', data.blog);
});
//data.js
define({
author: 'ZhangYang',
blog: 'http://blog.codinglabs.org'
});css:
.author{color:red;font-size:10pt;}
.blog{font-size:10pt;}好的，今天就到这吧！
前端技术交流群：139761568
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
