異步加載之seajs,同樣值得擁有

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 的區別。

發佈了60 篇原創文章 · 獲贊 22 · 訪問量 7萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章