一喘蟆、seajs.config配置說明:
1.base說明:
base是字符串類型,表示基礎(chǔ)或叫做根路徑(最好絕對地址)
備注:
(1)base如果不寫的話是根據(jù)你引用sea.js的地址目錄
(2)base如果寫了’.’或者 ‘/’或者’ ’這些页衙,會默認從服務(wù)根目錄開始
(3)base如果寫了’js/’之類的相對路徑,會默認根據(jù)你引用sea.js的地址目錄
例如:
seajs.config({
base: 'http://example.com/path/to/base/'
});
2.alias說明
例如:
seajs.config({
base: 'http://example.com/path/to/base/',
// 別名配置
alias: {
'es5-safe': 'gallery/es5-safe/0.9.3/es5-safe',
'jquery': 'jquery/jquery/1.10.1/jquery'
}
});
引入的時候:加載模塊(seajs.use("es5-safe"))? 引入模塊 :(require("jquery"));
3.paths說明:
當(dāng)目錄比較深火窒,或需要跨目錄調(diào)用模塊時甚垦,可以使用paths來簡化書寫届垫。
例如:
seajs.config({
base:'http://example.com/path/to/base/',
//表示路徑配置
paths:{
'cwd':'static/common/js'
},
alias: {
'es5-safe': 'gallery/es5-safe/0.9.3/es5-safe',
'jquery': 'jquery/jquery/1.10.1/jquery',
'jquery':'cwd/common/jquery-1.11.3'//alias中使用 static/common/js/common/jquery-1.11.3
}
})
seajs.use('cwd/project/AA');//static/common/js/project/AA
var index = require(cwd/index)//? static/common/js/index.js
4.map說明:
map是Array類型释液,表示配置可對模塊路徑進行映射修改,可用于路徑轉(zhuǎn)換装处、在線調(diào)試等误债。
例如:
seajs.config({
map: [
//[ '.js' ,? '-debug.js' ]
['.js' , '.js?_t='+(new Date).getTime()]
]
});
define(function(require, exports, module) {
var a = require('./a');
//=> 加載的是 path/to/a-debug.js
});
5.preload說明:(備注該屬性在V2.3版本時候去除了)
preload是Array或String類型,表示預(yù)加載項妄迁,可以在普通模塊加載前寝蹈,提前加載并初始化好指定模塊。
備注:preload中的空字符串會被忽略掉登淘。使用時需要等到 use 才加載
例如:
seajs.config({
preload: ["jquery"]
});
6.debugBoolean 調(diào)試使用
值為 true 時箫老,加載器不會刪除動態(tài)插入的 script 標簽。插件也可以根據(jù) debug 配置黔州,來決策 log 等信息的輸出耍鬓。
seajs.config({
debug:true
});
7.vars變量配置
有些場景下,模塊路徑在運行時才能確定流妻,這時可以使用vars變量來配置牲蜀。
seajs.config({
vars: {
'locale': 'zh-cn'
}
});
define(function(require, exports, module) {
var lang = require('./i18n/{locale}.js');
//=> 加載的是 path/to/i18n/zh-cn.js
});
vars配置的是模塊標識中的變量值,在模塊標識中用{key}來表示變量绅这。
二涣达、 define
1.所有模塊都通過 define 來定義
define(function(require, exports, module) {
(1). // 通過require.async引入依賴(引入模塊);
require.async是異步加載的在引入后,的回調(diào)函數(shù)中才能使用证薇,函數(shù)返回值就是require對象
require.async("jquery",fun) 異步加載模塊? jquery(別名)? fun回調(diào)函數(shù)(可選參數(shù))
require.async(['lib/common/common.js','lib/common/index.js'],function(){
Echo.init({
offset: 150,? //離可視區(qū)域多少像素的圖片可以被加載
throttle: 10? //圖片延遲多少毫秒加載
});
});? //調(diào)用多個模塊? ? fun回調(diào)函數(shù)可選()
(2).require引入依賴(引入模塊);
Require引入就可以使用
var Spinning = require('lib/common/common.js');? 基礎(chǔ)地址/lib/common/common.js
Spinning.tostring();? ? ? 調(diào)用Spinning里面的tostring方法
require直接引入整個文件
require.async(["swiper"], function() {
require('module/Mycenter/mycenter');
})
2.對外暴露接口
// 通過exports對外提供接口
exports.tonumber = function(){ var? a = 0;}
// 或者通過module.exports提供整個接口? (推薦使用)
module.exports.tonumber = function(){ var? a = 0;}
});
三 度苔、use()
seajs.use 用來在頁面中加載模塊。通過 use 方法浑度,可以在頁面中加載任意模塊寇窑。use 的模塊路徑相對于當(dāng)前頁面
語法:seajs.use(id, callback?)
// 加載模塊 main,并在加載完成時箩张,執(zhí)行指定回調(diào)
seajs.use(‘./main’)加載模塊
seajs.use(‘./main’, function(main) {
main.init();
});
use 方法還可以一次加載多個模塊:
// 并發(fā)加載模塊 a 和模塊 b疗认,并在都加載完成時,執(zhí)行指定回調(diào)
seajs.use(['./a', './b'], function(a, b) {? ? ? ? 加載多個模塊? fun回調(diào)函數(shù)(可選參數(shù));
a.init();
b.init();
});
四伏钠、注意
引入 sea.js 時,可以把 sea.js 與其他文件打包在一起谨设,可提前合并好熟掂,或利用 combo 服務(wù)動態(tài)合并。無論哪一種方式扎拣,為了讓 sea.js內(nèi)部能快速獲取到自身路徑赴肚,推薦手動加上 id 屬性: