您好,登錄后才能下訂單哦!
使用seajs怎么開發(fā)一個JavaScript模塊?針對這個問題,這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答,希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
首先看看seajs是怎么進(jìn)行模塊開發(fā)的。使用seajs基本上只有一個函數(shù)“define”
fn.define = function(id, deps, factory) { //code of function… }
使用define函數(shù)來進(jìn)行定義一個模塊,根據(jù) CMD (Common Module Definition)模塊定義規(guī)范。一個文件就是一個模塊。所以一個js文件中只有一個define,即一個文件是一個模塊,SeaJS中模塊的概念有點(diǎn)類似于面向?qū)ο笾械念悺K可以擁有數(shù)據(jù)和方法,數(shù)據(jù)和方法可以定義為公共或私有,公共數(shù)據(jù)和方法可以供別的模塊調(diào)用。
官方實(shí)例中,define只傳入一個參數(shù): 一個工廠函數(shù)
define(function(require, exports, module) { //code of the module... });
在看參數(shù)之前,我們先看看define是如何處理參數(shù)的:
fn.define = function(id, deps, factory)
define可以接收的參數(shù)分別是模塊ID,依賴模塊數(shù)組及工廠函數(shù);
如果只有一個參數(shù),則賦值給factory。
如果有兩個參數(shù),第二個賦值給factory;第一個如果是array則賦值給deps,否則賦值給id。
如果有三個參數(shù),則分別賦值給id,deps和factory。
根據(jù)官方實(shí)例,建議還是根據(jù)官方的來就傳遞一個參數(shù),即只有factory參數(shù),這樣的話模塊id默認(rèn)為js文件路徑。
在來看看工廠函數(shù)的參數(shù):
require, exports, module
require——模塊加載函數(shù),用于記載依賴模塊。通過這個參數(shù)來進(jìn)行對其他模塊的加載。
exports——接口點(diǎn),將數(shù)據(jù)或方法定義在其上則將其暴露給外部調(diào)用。通過這個參數(shù),來將這個模塊的方法進(jìn)行暴露
module——模塊的元數(shù)據(jù)。其是一個對象,有屬性:
module.id——模塊的ID。
module.dependencies——一個數(shù)組,存儲了此模塊依賴的所有模塊的ID列表。
module.exports——與exports指向同一個對象。
使用factory的參數(shù)的使用:
define(function(require, exports, module) { var a = require('./a');//引入a模塊 exports.fun2= function(){ alert("fun2"); a.dosomething(); } }
使用require對象來進(jìn)行加載模塊,其實(shí)使用正則表達(dá)式進(jìn)行驗(yàn)證加載的,所以其參數(shù)必須是特定的字符串,不能是表達(dá)式。
seajs會自動在require的參數(shù)中加入".js"來進(jìn)行加載,即不需要寫上后綴名,但是在某些情況下,seajs不會為其添加“.js”:
1.載入css:
require("./module1-style.css");
2.路徑中含有“?”:
require(<a href="http://example/js/a.json?b=func" rel="external nofollow" >http://example/js/a.json?cb=func</a>);
3.路徑以“#”結(jié)尾:
require(http://example/js/a.json#);
使用exports來向外部暴露方法,或者屬性。暴露屬性有幾種方式,如上面中的例子是一種方式,另外還有:
使用return:
define(function(require) { var data1 = 1; //私有數(shù)據(jù) var func1 = function() { //私有方法 returna.run(data1); } //暴露 return{ data2: 2, func2:function() { return'hello'; } }; });
直接返回json對象:
define({ data: 1, func:function() { return'hello'; } });
頁面中調(diào)用seajs
前面說了seajs用來解決模塊開發(fā),和繁瑣的文件依賴問題,所以所有的文件依賴都是通過require對象進(jìn)行加載,或者可以使用require.async(“./a”)來進(jìn)行異步加載,即當(dāng)使用到的時候才進(jìn)行加載,
注:無論是require()還是require.async()都可以有第二個參數(shù)為回調(diào)函數(shù),當(dāng)文件加載成功時調(diào)用:
require.async('/path/to/module/file',function(m) { //code of callback... });
有了這個加載依賴的方式,我們無需再頁面上書寫大量的<script ></script>標(biāo)簽,而僅僅使用一個
<script src="./sea.js" data-main="./init"></script>
即可,其中data-main="./init" 為入口模塊,表示加載這個模塊,在進(jìn)行迭代加載其所依賴的模塊,使用這個屬性可以省略seajs.use。這個后面說。
使用seajs.config進(jìn)行全局配置:
seajs.config({ base:'path/to/jslib/', alias: { 'app':'path/to/app/' }, charset:'utf-8', timeout: 20000, debug:false });
這是對seajs進(jìn)行全局配置,
base表示基址尋址時的基址路徑
alias可以對較長的常用路徑設(shè)置縮寫。
charset表示下載js時script標(biāo)簽的charset屬性。
timeout表示下載文件的最大時長,以毫秒為單位。
debug表示是否工作在調(diào)試模式下。
使用seajs.use 載入入口模塊,相當(dāng)于java的main函數(shù),
//單模塊模式 seajs.use('./a'); //回調(diào)模式 seajs.use('./a',function(a) { a.dosomething(); }); //多模塊模式 seajs.use(['./a','./b'],function(a, b) { a.dosomething(); b.dosomething(); });
下面可以看其官方給的simple例子中的頁面怎么寫的,基本上就明白了sea.js 是怎么用的了:
<script src="../sea-modules/seajs/seajs/2.2.0/sea.js"></script> <script> // Set configuration seajs.config({ base: "../sea-modules/", alias: { "jquery": "jquery/jquery/1.10.1/jquery.js" } }); // For development if (location.href.indexOf("?dev") > 0) { seajs.use("../static/hello/src/main"); } // For production else { seajs.use("examples/hello/1.0.0/main"); } </script>
//mian.js
//hello/mian.js define(function(require) { var Spinning = require('./spinning'); var s = new Spinning('#container'); s.render(); });
關(guān)于使用seajs怎么開發(fā)一個JavaScript模塊問題的解答就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。