資訊專欄INFORMATION COLUMN
摘要：一般也不需要傳入，需要用到的模塊用加載即可。根據(jù)應(yīng)用場景的不同，提供了三個載入模塊的，分別是和。主要用于載入入口模塊。入口模塊相當(dāng)于語言的函數(shù)，同時也是整個模塊依賴樹的根。表示下載文件的最大時長，以毫秒為單位。
如何使用SeaJS本文轉(zhuǎn)自張洋，因為SeaJS更新版本很快，所以原文中很多地方不太適用，在這里發(fā)布一個更新版。
下載及安裝在這里不贅述了，不了解的請查詢官網(wǎng)。
基本開發(fā)原則一切皆為模塊：SeaJS中的模塊概念有點類似于面向?qū)ο笾械念?-模塊可以擁有數(shù)據(jù)和方法，數(shù)據(jù)和方法可以定義為公共或私有，公共數(shù)據(jù)和方法可以供別的模塊調(diào)用。
每個模塊應(yīng)該都定義在一個多帶帶的js文件中，即一個對應(yīng)一個模塊。
模塊的定義和編寫 模塊定義函數(shù)defineSeaJS中使用define函數(shù)定義一個模塊。define可以接收三個參數(shù)：
/**
* Defines a module.
* @param {string=} id The module id.
* @param {Array.|string=} deps The module dependencies.
* @param {function()|Object} factory The module factory function.
*/
fn.define = function(id, deps, factory) {
//code of function…
}
define可以接收的參數(shù)分別是模塊ID，依賴模塊數(shù)組及工廠函數(shù)。
如果只有一個參數(shù)，則賦值給factory
如果有兩個參數(shù)，第二個賦值給factory，第一個如果是數(shù)組則賦值給deps，否則賦值給id
如果有三個參數(shù)，則分別賦值
但是，包括SeaJS官網(wǎng)示例在內(nèi)幾乎所有用到define的地方都只傳遞一個工廠函數(shù)進去，類似于如下代碼：
define(function(require,exports,module){
//code of the module
})
個人建議遵循SeaJS官方示例的標(biāo)準(zhǔn)，用一個參數(shù)的define定義模塊。那么id和deps會怎么處理呢？
??id是一個模塊的標(biāo)識字符串，define只有一個參數(shù)時，id會被默認(rèn)賦值為此js文件的絕對路徑。如example.com下的a.js文件中使用define定義模塊，則這個模塊的ID會賦值為 http://example.com/a.js ，沒有特別的必要建議不要傳入id。deps一般也不需要傳入，需要用到的模塊用require加載即可。
工廠函數(shù)factory解析??工廠函數(shù)是模塊的主體和重點。它的三個參數(shù)分別是：
require：模塊加載函數(shù)，用于記載依賴模塊
exports：接口點，將數(shù)據(jù)或方法定義在其上則將其暴露給外部調(diào)用
module：模塊的元數(shù)據(jù)
這三個參數(shù)可以根據(jù)需要選擇是否需要顯示指定。
module是一個對象，存儲了模塊的元信息，具體如下：
module.id：模塊的ID
module.dependencies：一個數(shù)組，存儲了此模塊依賴的所有模塊的ID列表。
module.exports：與exports指向同一個對象
三種編寫模塊的模式第一種是基于exports的模式：
define(function(require,exports,module){
var a=require("a");
var b=require("b"); //引入模塊
var data1=1; //私有數(shù)據(jù)
var fun1=function(){//私有方法
return a.run(data1);
}
exports.data2=2; //公有數(shù)據(jù)
exports.fun2=function(){
return "hello";
}
})
上面是一種比較“正宗”的模塊定義模式。除了講公共數(shù)據(jù)和方法附加在exports上，也可以直接返回一個對象表示模塊，如下面的代碼與上面的代碼功能相同：
define(function(require){
var a=require("a");
var b=require("b"); //引入模塊
var data1=1;
var fun1=function(){
return a.run(data1);
}
return{
data2:2,
fun2:function(){
return "hello";
}
}
})
如果模塊定義沒有其他代碼，只返回一個對象，還可以有如下簡化寫法：
define({
data2:2,
fun2:function(){
return "hello";
}
})
第三種寫法對于定義純JSON數(shù)據(jù)的模塊非常合適。
根據(jù)應(yīng)用場景的不同，SeaJS提供了三個載入模塊的API，分別是：seajs.use,require和require.async。
seajs.useseajs.use主要用于載入入口模塊。入口模塊相當(dāng)于C語言的main函數(shù)，同時也是整個模塊依賴樹的根。seajs.use
的用法如下：
//第一模式
seajs.use("./a");
//回調(diào)模式
seajs.use("./a",function(a){
a.run();
})
//多模塊模式
seajs.use(["./a","./b"],function(a,b){
a.run();
b.run();
})
其中多模塊的用法和KISSY中的模塊加載方法類似，不虧是一個人寫的?。?/b>
一般seajs.use只用在頁面載入入口模塊，SeaJS會順著入口模塊解析所有依賴模塊并將它們加載。如果入口模塊只有一個，也可以通過給引入seajs的script標(biāo)簽加入“data-main”屬性來省略seajs.use，例如一下寫法：
TinyApp
require
require是seajs主要的模塊加載方法，當(dāng)在一個模塊中需要用到其他模塊時一般用require加載：
var m=require("./a");
require.async
上文說過seajs會在html頁面打開時通過靜態(tài)分析一次性記載所有需要的js文件，如果想要某個js文件在用時才加載，可以使用require.async。
這樣只有在用到這個模塊時，對應(yīng)的js文件才會被下載，也就實現(xiàn)了JavaScript代碼的按需加載。
seajs提供了一個seaj.configd的方法可以設(shè)置全局配置，接收一個表示全局配置的配置對象，具體方法如下：
seajs.config({
base:"path",
alias:{
"app":"path/app/"
},
charset:"utf-8",
timeout:20000,
debug:false
})
其中，
base表示基址路徑
alias可以對較長的常用路徑設(shè)置縮寫
charset表示下載js時script標(biāo)簽的charset屬性。
timeout表示下載文件的最大時長，以毫秒為單位。
Seajs如何與現(xiàn)有的JS庫配合使用要將現(xiàn)有的JS庫與seajs一起使用，只需根據(jù)seajs的模塊定義規(guī)則對現(xiàn)有庫進行一個封裝。例如，下面是對jQuery的封裝方法：
define(function(){
/*
此處為jquery源碼
*/
})
一個完整的例子：
上文說了那么多，知識點比較分散，所以最后我打算用一個完整的SeaJS例子把這些知識點串起來，方便朋友們歸納回顧。這個例子包含如下文件：
index.html 主頁面
sea.js
jquery.js
init.js init模塊，入口模塊，依賴data、jquery、style三個模塊，又主頁面載入
data.js data模塊，純json數(shù)據(jù)模塊
style.css css樣式表
html：
Title
javascript:
//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;}
請注意：
1.請講jquery.js源碼文件包含在seajs模塊加載代碼中；
2.在Sea.js < 2.3.0版本之前是可以加載css文件的，新版本中此功能移除，為了兼容考慮，加載css功能將作為一個插件存在。
使用方法
可以在sea.js標(biāo)簽后引入這個插件使用
也可以將插件代碼混入sea.js當(dāng)中
和seajs-style的區(qū)別
seajs-css是使 Sea.js 能夠加載一個css文件，和link標(biāo)簽一樣
seajs-style是指提供一個seajs.importStyle方法用于加載一段 css 字符串
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/86280.html
摘要：模塊初始化時，會調(diào)用且僅調(diào)用一次該工廠函數(shù)。用來向外提供模塊的除了給對象增加成員，還可以使用直接向外提供可簡化為函數(shù)用來訪問其他模塊提供的異步加載模塊，并在加載完成后執(zhí)行回調(diào)函數(shù)使用的內(nèi)部機制來解析并返回模塊路徑。手冊的模塊化插件 seajs是我剛?cè)腴T前端就接觸到的一個javaScript模塊加載框架。使用seajs后javaScript代碼的可讀性和清晰度有了很大的提升，插件的使用和...
摘要：為對象字符串時，表示模塊的接口就是該對象字符串。我們來看一個實際的例子支付寶的登陸頁面。在網(wǎng)頁支付寶收銀臺中的運用很直觀的就能看到插模塊的合并，這個合并的工作就是構(gòu)建工具的功勞了。 前言 一月份的時候，臨近放假，拿到一個需求，新增一個產(chǎn)品，我一個前端對一個java后端，兩個星期的開發(fā)時間。 因為大部分功能在別的產(chǎn)品都已經(jīng)有了，基本都是簡單處理一下拿過來，再添加一下額外需要的功能，比如選...
摘要：未構(gòu)建之前，全部分開加載。的優(yōu)化，得再看下的示例，然后再寫篇筆記記錄下來。 想摸透javascript模塊化編程是怎么一回事，在seajs和requirejs之間兜兜轉(zhuǎn)轉(zhuǎn)，看了許多相關(guān)資料和文章，算是大致理清它們的異同，撇開requirejs加載方式的另類（其實目前我暫時還沒去感受），于寫法，比較喜歡requirejs的寫法，這個比較主觀，這也得益于阮一峰大大那篇Javascript模...
摘要：所有依賴這個模塊的語句，都定義在一個回調(diào)函數(shù)中，等到所有依賴加載完成之后前置依賴，這個回調(diào)函數(shù)才會運行。如果將前面的代碼改寫成形式，就是下面這樣定義了一個文件，該文件依賴模塊，當(dāng)模塊加載完畢之后執(zhí)行回調(diào)函數(shù)，這里并沒有暴露任何變量。 模塊化是我們?nèi)粘ｉ_發(fā)都要用到的基本技能，使用簡單且方便，但是很少人能說出來但是的原因及發(fā)展過程?，F(xiàn)在通過對比不同時期的js的發(fā)展，將JavaScript模...
摘要：規(guī)范則是非同步加載模塊，允許指定回調(diào)函數(shù)，可以實現(xiàn)異步加載依賴模塊，并且會提前加載由于主要用于服務(wù)器編程，模塊文件一般都已經(jīng)存在于本地硬盤，所以加載起來比較快，不用考慮非同步加載的方式，所以規(guī)范比較適用。 JS模塊化 模塊化的理解 什么是模塊？ 將一個復(fù)雜的程序依據(jù)一定的規(guī)則(規(guī)范)封裝成幾個塊(文件), 并進行組合在一起； 塊的內(nèi)部數(shù)據(jù)/實現(xiàn)是私有的, 只是向外部暴露一些接口(...
閱讀 3330·2021-11-23 09:51
閱讀 2459·2021-11-09 09:46
閱讀 1493·2019-08-30 15:54
閱讀 3140·2019-08-30 14:22
閱讀 2919·2019-08-29 12:40
閱讀 1644·2019-08-26 10:33
閱讀 1789·2019-08-23 17:09
閱讀 1565·2019-08-23 16:11
