sea.js快速上手

一喘蟆、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 屬性:

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末素跺,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子誉券,更是在濱河造成了極大的恐慌指厌,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,123評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件踊跟,死亡現(xiàn)場離奇詭異踩验,居然都是意外死亡,警方通過查閱死者的電腦和手機商玫,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評論 2 384
  • 文/潘曉璐 我一進店門箕憾,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人拳昌,你說我怎么就攤上這事袭异。” “怎么了炬藤?”我有些...
    開封第一講書人閱讀 156,723評論 0 345
  • 文/不壞的土叔 我叫張陵御铃,是天一觀的道長。 經(jīng)常有香客問我沈矿,道長上真,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,357評論 1 283
  • 正文 為了忘掉前任细睡,我火速辦了婚禮谷羞,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘溜徙。我一直安慰自己湃缎,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,412評論 5 384
  • 文/花漫 我一把揭開白布蠢壹。 她就那樣靜靜地躺著嗓违,像睡著了一般。 火紅的嫁衣襯著肌膚如雪图贸。 梳的紋絲不亂的頭發(fā)上蹂季,一...
    開封第一講書人閱讀 49,760評論 1 289
  • 那天,我揣著相機與錄音疏日,去河邊找鬼偿洁。 笑死,一個胖子當(dāng)著我的面吹牛沟优,可吹牛的內(nèi)容都是我干的涕滋。 我是一名探鬼主播,決...
    沈念sama閱讀 38,904評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼挠阁,長吁一口氣:“原來是場噩夢啊……” “哼宾肺!你這毒婦竟也來了溯饵?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,672評論 0 266
  • 序言:老撾萬榮一對情侶失蹤锨用,失蹤者是張志新(化名)和其女友劉穎丰刊,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體增拥,經(jīng)...
    沈念sama閱讀 44,118評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡啄巧,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,456評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了跪者。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片棵帽。...
    茶點故事閱讀 38,599評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖渣玲,靈堂內(nèi)的尸體忽然破棺而出逗概,到底是詐尸還是另有隱情,我是刑警寧澤忘衍,帶...
    沈念sama閱讀 34,264評論 4 328
  • 正文 年R本政府宣布逾苫,位于F島的核電站,受9級特大地震影響枚钓,放射性物質(zhì)發(fā)生泄漏铅搓。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,857評論 3 312
  • 文/蒙蒙 一搀捷、第九天 我趴在偏房一處隱蔽的房頂上張望星掰。 院中可真熱鬧,春花似錦嫩舟、人聲如沸氢烘。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽播玖。三九已至,卻和暖如春饭于,著一層夾襖步出監(jiān)牢的瞬間蜀踏,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評論 1 264
  • 我被黑心中介騙來泰國打工掰吕, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留果覆,地道東北人。 一個月前我還...
    沈念sama閱讀 46,286評論 2 360
  • 正文 我出身青樓殖熟,卻偏偏與公主長得像随静,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,465評論 2 348

推薦閱讀更多精彩內(nèi)容