① 怎麼讓sea.js自身非同步載入
為了極限性能,也為了做一些封裝,我需要對seajs自身進行非同步載入,通過以下代碼載入seajs發現config與use都未執行。
<script>
// 其他代碼
// sea.js 的非同步載入代碼:
;(function(m, o, d, u, l, a, r) {
if(m[o]) return
function f(n) { return function() { r.push(n, arguments); return a } }
m[o] = a = { args: (r = []), config: f(1), use: f(2), on: f(3) }
m.define = f(0)
u = d.createElement("script")
u.id = o + "node"
u.async = true
u.src = "path/to/sea.js"
l = d.getElementsByTagName("head")[0]
l.appendChild(u)
})(window, "seajs", document);
// 立刻就可以調用 seajs 的方法了:
seajs.config({
alias: {
'jquery': 'path/to/jquery-1.9.1.min.js'
}
});
seajs.use('./main', function(main) {
// do some cool things.
});
</script>
然後在網上查了以下,發現玉伯去除 sea.js 自身的非同步載入內置支持,
https://github.com/seajs/seajs/issues/733
木有辦法,只能自己改一改了,我當前使用的版本是2.1.1,為了兼容以後新的版本就不動他的源代碼,只在sea.js 底部加上一段:
G = this;
var k = G.PagurianObjectName;
var Pagurian = function(a) {
this.push = function(a) {
if (a[0] === 'config') {
seajs[a[0]](a[1]);
}
if (a[0] === "use") {
seajs[a[0]](a[1], a[2]);
}
}
if (a && a.length) {
for (var b = 0; b < a.length; b++) this.push(a[b])
}
};
G[k] = new Pagurian(G[k].q);
然後在用的時候,這樣用:
(function(i, d, o, u, p) {
if (i[u]) return;
i['PagurianObjectName'] = p;
i[p] = i[p] || function() {
return (i[p].q = i[p].q || []).push(arguments)
};
s = d.createElement(o);
s.src = "src/core/sea.ext.js";
s.charset = "utf-8";
s.async = true;
s.id = u + "node";
f = d.getElementsByTagName(o)[0];
f.parentNode.insertBefore(s, f);
})(window, document, 'script', "seajs", "pagurian");
pagurian("config", {
base:"src",
alias: {
"jquery": "plugins/jquery/1.11.1/jquery.js"
},
preload: ["jquery"],
charset: 'utf-8',
timeout: 20000,
debug: false
});
pagurian("use", "presenter/standard/standard.app", function(app) {
app.page.message();
});
② 如何正確理解javascript的模塊化的 優就業
如今backbone、emberjs、spinejs、batmanjs
等MVC框架侵襲而來。CommonJS、AMD、NodeJS、RequireJS、SeaJS、curljs等模塊化的JavaScript撲面而
來。web前端已經演變成大前端,web前端的發展速度之快。
1)我們來看看什麼是模塊化?
模塊化是一種將系統分離成獨立功能部分的方法,可將系統分割成獨立的功能部分,嚴格定義模塊介面、模塊間具有透明性。javascript中的模塊在一些C、PHP、java中比較常見:
c中使用include 包含.h文件;php中使用require_once包含.php文件
java使用import導入包
此中都有模塊化的思想。
2)模塊化的優缺點:
a>優點:
可維護性
1.靈活架構,焦點分離
2.方便模塊間組合、分解
3.方便單個模塊功能調試、升級
4.多人協作互不幹擾
可測試性
1.可分單元測試
b>缺點:
性能損耗
1.系統分層,調用鏈會很長
2.模塊間通信,模塊間發送消息會很耗性能
3)最近的項目中也有用到模塊化,
使用的是seajs,但是當引用到jquery,jquery easyui/或者jquery
UI組件時,有可能會用到很多jquery插件,那這樣要是實現一個很復雜的交互時,模塊間的依賴會很多,使用define()方法引入模塊會很多,不知
有么有什麼好的方法?
4)附:
內聚度
內聚度指模塊內部實現,它是信息隱藏和局部化概念的自然擴展,它標志著一個模塊內部各成分彼此結合的緊密程度。好處也很明顯,當把相關的任務分組後去閱讀就容易多了。 設計時應該盡可能的提高模塊內聚度,從而獲得較高的模塊獨立性。
耦合度
耦合度則是指模塊之間的關聯程度的度量。耦合度取決於模塊之間介面的復雜性,進入或調用模塊的位置等。與內聚度相反,在設計時應盡量追求鬆散耦合的系統
③ Seajs的使用
seajs.config
alias
別名配置,配置之後可在模塊中使用require調用 require('jquery');
paths
設置路徑,方便跨目錄調用。通過靈活的設置path可以在不影響base的情況下指定到某個目錄。
vars
變數配置。有些場景下,模塊路徑在運行時才能確定,這時可以使用 vars變數來配置。
vars 配置的是模塊標識中的變數值,在模塊標識中用 {key}來表示變數。
map
該配置可對模塊路徑進行映射修改,可用於路徑轉換、在線調試等。
preload
使用preload配置項,可以在普通模塊載入前,提前載入並初始化好指定模塊。
註:preload中的空字元串會被忽略掉。
註:preload中的配置,需要等到 use 時才載入。比如:
註:preload 配置不能放在模塊文件裡面:
debug
值為true時,載入器不會刪除動態插入的 script 標簽。插件也可以根據debug配置,來決策 log 等信息的輸出。
base
Sea.js 在解析頂級標識時,會相對 base 路徑來解析。
charset
獲取模塊文件時,<script> 或 <link> 標簽的charset屬性。 默認是utf-8
charset還可以是一個函數:
seajs.use
用來在頁面中載入一個或多個模塊。seajs.use(id, callback?)
注意:seajs.use 與 DOM ready 事件沒有任何關系。如果某些操作要確保在 DOM ready 後執行,需要使用 jquery 等類庫來保證。比如
注意:use方法第一個參數一定要有,但是可以是null,也可以是一個變數
seajs.cache
通過 seajs.cache,可以查閱當前模塊系統中的所有模塊信息。
比如,打開 seajs.org,然後在 WebKit Developer Tools 的 Console 面板中輸入 seajs.cache,可以看到:
seajs.reslove
類似require.resolve,會利用模塊系統的內部機制對傳入的字元串參數進行路徑解析。
seajs.data
通過 seajs.data,可以查看 seajs 所有配置以及一些內部變數的值,可用於插件開發。當載入遇到問題時,也可用於調試。
④ seajs怎麼調用jquery的插件
方法一,將js插件cmd模塊化(define封裝成seajs模塊,返回匿名函數,包含插件的源碼)。
/**
* Created with JetBrains PhpStorm.
* User: ph
* Date: 13-3-11
* Time: 上午9:24
* To change this template use File | Settings | File Templates.
*/
define(function(require,exports,moudles){
return function(jquery){
(function($) {
$.fn.pri= function() {
alert($("a").attr("href"))
// 代碼區域。
};
})(jquery);
}
})
jquery庫在總js文件(調用該插件的文件)中載入。通過require("t1/jquery_pligun")()來傳遞jquery變數(參數) ,保證了jquery在調用js插件模塊之前載入
/**
* Created with JetBrains PhpStorm.
* User: ph
* Date: 13-3-11
* Time: 上午9:40
* To change this template use File | Settings | File Templates.
*/
define(function (require, exports, moudles) {
var $=require("jquery")
require("t1/jquery_pligun")($)
$(document).ready(function () {
$("a").pri()
})
})
補充:SeaJS是一個遵循CommonJS規范的JavaScript模塊載入框架,可以實現JavaScript的模塊化開發及載入機制。與jQuery等JavaScript框架不同,SeaJS不會擴展封裝語言特性,而只是實現JavaScript的模塊化及按模塊載入。SeaJS的主要目的是令JavaScript開發模塊化並可以輕松愉悅進行載入,將前端工程師從繁重的JavaScript文件及對象依賴處理中解放出來,可以專注於代碼本身的邏輯。SeaJS可以與jQuery這類框架完美集成。使用SeaJS可以提高JavaScript代碼的可讀性和清晰度,解決目前JavaScript編程中普遍存在的依賴關系混亂和代碼糾纏等問題,方便代碼的編寫和維護。
⑤ seajs怎樣先載入jquery再載入Bootstrap
seajs載入不符合AMD規范的,要在源代碼里加define(function() {//源代碼 })
⑥ jquery.1.12.3怎樣cmd,讓seajs模塊化載入呢
直接require引入就可以了。
//別名
alias:{
'jquery':'路徑xxx/jquery.1.12.3.min'
},
//需要預載入的js
preload:['jquery']
在seajs的config中增加這個。
⑦ seajs問題載入jquery失敗的問題
seajs需要改造jquery,因為原生的jquery沒有提供介面給它。建議使用AMD的requireJS。