seajs開篇：我為什麼學習seajs，因為它的"預先下載,延遲執行"特性
阿新 • • 發佈：2019-01-10
之前參與的2個專案都用到了js模組化工具requireJS框架，工作之餘學習了這個框架，也熟悉了requireJS的基本用法以及AMD規範。本來對seaJS沒有太大的興趣，知道它實現了CMD規範，功能和requireJS類似僅此而已。最近在自己關注的微信訂閱號"前端大全"看到了一篇文章"js模組化歷程"，對seajs產生了極大的興趣，因為它有"預先下載，延遲執行"的特性。
首先需要從官網下載seajs，我使用的是當前的最新版本seajs-3.0.0.zip。解壓後得到如下結構，其中dist目錄下的sea.js就是我們需要的seajs庫。
我的例子程式碼目錄結構如下：
examples/ |-- lib 存放 seajs、jquery等第三方庫 |-- app 存放模組a和模組b | |-- a.js | |-- b.js | -- index.html 首頁 -- main.js js入口
首先利用seajs編寫模組a、模組b、模組main，原始碼如下：
//a.js
define(function(){
console.log('a.js');
return {
hello: function(){
console.log('hello, a.js');
}
}
});//a.js define(function(){ console.log('a.js'); return { hello: function(){ console.log('hello, a.js'); } } });
//main.js系統初始化入口
define(function(require, exports, module) {
console.log('main.js');
var a = require('a');
a.hello();
$('#b').click(function(){
var b = require('b');
b.hello();
});
});下面是index.html原始碼，主要就是引入seajs。這裡需要注意:seajs對jquery的支援不好，無法按照模組的方式載入jquery，所以我直接在頁面中引入jquery。
<html>
<head>
<script src="./libs/jquery-1.11.1.min.js"></script>
<script src="./libs/seajs-3.0.0/dist/sea.js"></script>
<script>
seajs.config({
base: ".",
alias: {
"a" : "app/a.js",
"b" : "app/b.js"
}
});
// 載入入口模組
seajs.use("main");
</script>
</head>
<body>
<button id="b">click me</button>
</body>
</html>執行index.html，執行結果如下:
可以看到：瀏覽器下載了a.js和b.js，控制檯列印了a.js卻沒有列印b.js。只有點選了"click me"按鈕的時候，才需要載入(初始化)b模組。對於b模組來說，瀏覽器的確提前下載了檔案，但是b模組的初始化是等到"click me"按鈕點選的時候才執行。這就是所謂的"預先下載，延遲執行"。
同樣的程式碼我用requireJS當前最新版本的2.1.20跑了一下，執行結果如下：
可以看到requireJS不僅下載了b.js檔案，而且還載入(初始化)了模組b，很明顯控制檯打印出了b.js。
正是seajs的這種特性，讓我產出了很大的興趣，後續再慢慢學習seajs。