您的位置：首页 > Web前端 > JavaScript

异步加载之seajs,同样值得拥有

2016-05-18 15:49 381 查看

1、 seajs概述：

seajs是淘宝前端团队实现的基于commonjs规范的异步加载器，作者就是大名鼎鼎的玉伯。目标也是和requirejs一样，都是为了模块化和异步加载。

2 、资源

github: https://github.com/seajs/seajs/

doc: http://seajs.org/docs/#docs

玉伯的github：https://github.com/lifesinger

cmd规范：https://github.com/seajs/seajs/issues/242

3 、例子：

seajs也是通过define定义模块

define(function(require, exports, module) {

//code of the module…

});

require——模块加载函数，用于记载依赖模块。

exports——接口点，将数据或方法定义在其上则将其暴露给外部调用。

module——模块的元数据。

先来一个正宗的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';
}
};

});

如果没有依赖，只是返回一个简单的对象，该怎么实现呢，其实很简单，和requirejs的实现一样：

define({

data: 1,

func: function() {

return ‘hello’;

}

});

seajs.use：相当于java中的main方法，

//单一模式

seajs.use(‘./a’);

//回调模式

seajs.use(‘./a’, function(a) {

a.run();

});

//多模块模式

seajs.use([‘./a’, ‘./b’], function(a, b) {

a.run();

b.run();

});

4 、完整的例子(类库请自己下载)

html页面

<!DOCTYPE HTML>

<html lang=”zh-CN”>

<head>

<meta charset=”UTF-8”>

<title>SeaJS Demo</title>

</head>

<body>

<div id=”content”>

<p class=”author”></p>

<p class=”blog”></p>

</div>

<script src=”./sea.js” data-main=”./init”></script>

</body>

</html>

请注意，data-main中应用的js同样不需要加.js扩展名。

init.js 文件定义的内容：

define(function(require, exports, module) {

var $ = require(‘./jquery’);

var data = require(‘./data’);

$('.author').html(data.author);

});

data.js文件定义的内容：

define({

author: ‘Hcc0926’,

blog: ‘http://hcc0926.blog.51cto.com’

});

运行下代码看下效果。

下篇文章我们总结下amd 和cmd 的区别。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航