㈠ Seajs優缺點 什麼是CMD 和AMD 如何使用
1.簡介
Seajs,一個Web模塊載入框架,追求簡單、自然的代碼書寫和組織方式,:Sea.js 遵循 CMD 規范,模塊化JS代碼。依賴的自動載入、配置的簡潔清晰,可以讓程序員更多地專注編碼。
2.優缺點
優點:
1).提高可維護性。
2).模塊化編程。
3).動態載入,前端性能優化
缺點:
1).學習文檔偏少且混亂,會更改團隊使用JS的編寫習慣,必須使用模塊化編程。
2).不太適合團隊目前的情況,多JS文件但少改動,動態載入優勢和模塊化優勢不明顯。
3). 需要配套使用SPM工具,JS的打包和管理工具。
2.什麼是CMD 和AMD ?
非同步模塊定義(AMD)是Asynchronous Mole Definition的縮寫,是 RequireJS 在推廣過程中對模塊定義的規范化產出。
通用模塊定義(CMD)是Common Mole Definition的縮寫,是SeaJS 在推廣過程中對模塊定義的規范化產出。
RequireJS 和 SeaJS 都是模塊化框架的代表,AMD和CMD,是他們各自定義模塊化的方式,大同小異,主要是代碼風格和API不同。
3.如何使用?
代碼如下:<script src="../js/examples-master/sea-moles/seajs/seajs/2.1.1/sea.js"></script>
<script>
//配置js路徑
seajs.config({
alias:{
"jquery":"../examples-master/sea-moles/jquery/jquery/1.10.1/jquery.js"
}
});
//載入模塊
seajs.use('../js/seajs/init',function($){
$("#test_div").click(function(){alert(1);});
});
</script>
代碼如下:
//init.js
define(function(require,exports,mole){
var $ = require('jquery');
return $;
});
㈡ labjs,requirejs,sea.js 哪個最好用為什麼
LABjs 的核心是 LAB(Loading and Blocking):Loading 指非同步並行載入,Blocking 是指同步等待執行。LABjs 通過優雅的語法(script 和 wait)實現了這兩大特性,核心價值是性能優化。LABjs 是一個文件載入器。
RequireJS 和 SeaJS 則是模塊載入器,倡導的是一種模塊化開發理念,核心價值是讓 JavaScript 的模塊化開發變得更簡單自然。
模塊載入器一般可降級為文件載入器用,因此使用 RequireJS 和 SeaJS,也可以達成 LABjs 的性能優化目的。
RequireJS 和 SeaJS 都是很不錯的模塊載入器,兩者區別如下:
1. 兩者定位有差異。RequireJS 想成為瀏覽器端的模塊載入器,同時也想成為 Rhino / Node 等環境的模塊載入器。SeaJS 則專注於 Web 瀏覽器端,同時通過 Node 擴展的方式可以很方便跑在 Node 伺服器端
2. 兩者遵循的標准有差異。RequireJS 遵循的是 AMD(非同步模塊定義)規范,SeaJS 遵循的是 CMD (通用模塊定義)規范。規范的不同,導致了兩者 API 的不同。SeaJS 更簡潔優雅,更貼近 CommonJS Moles/1.1 和 Node Moles 規范。
3. 兩者社區理念有差異。RequireJS 在嘗試讓第三方類庫修改自身來支持 RequireJS,目前只有少數社區採納。SeaJS 不強推,而採用自主封裝的方式來「海納百川」,目前已有較成熟的封裝策略。
4. 兩者代碼質量有差異。RequireJS 是沒有明顯的 bug,SeaJS 是明顯沒有 bug。
5. 兩者對調試等的支持有差異。SeaJS 通過插件,可以實現 Fiddler 中自動映射的功能,還可以實現自動 combo 等功能,非常方便便捷。RequireJS 無這方面的支持。
6. 兩者的插件機制有差異。RequireJS 採取的是在源碼中預留介面的形式,源碼中留有為插件而寫的代碼。SeaJS 採取的插件機制則與 Node 的方式一致:開放自身,讓插件開發者可直接訪問或修改,從而非常靈活,可以實現各種類型的插件。
還有不少細節差異就不多說了。
總之,SeaJS 從 API 到實現,都比 RequireJS 更簡潔優雅。如果說 RequireJS 是 Prototype 類庫的話,則 SeaJS 是 jQuery 類庫。
最後,向 RequireJS 致敬!RequireJS 和 SeaJS 是好兄弟,一起努力推廣模塊化開發思想,這才是最重要的。
㈢ seajs怎麼控制js的載入順序
舉個栗子:
require("zepto");
require("zepto.touch");
zepto.touch.js是依賴zepto的,而且,zepto尺寸要比zepto.touch大很多,所以上面代碼的情況通常版是zepto.touch已經載入權完並執行好,zepto才執行,導致touch模塊不能使用。
目前折中但不太完美的解決辦法是,在zepto.touch.js中加入zepto依賴的聲明:
define(function(require){
require("zepto");
// 原zepto.touch.js代碼
});
㈣ 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 所有配置以及一些內部變數的值,可用於插件開發。當載入遇到問題時,也可用於調試。