Ⅰ 用類似Requirejs和SeaJS非同步載入有什麼好處
定位有差異。RequireJS 想成為瀏覽器端的模塊載入器，同時也想成為 Rhino / Node 等環境的模塊載入器。SeaJS 則專注於 Web 瀏覽器端，同時通過 Node 擴展的方式可以很方便跑在 Node 伺服器端。
遵循的規范不同。RequireJS 遵循的是 AMD（非同步模塊定義）規范，SeaJS 遵循的是 CMD
（通用模塊定義）規范。規范的不同，導致了兩者 API 的不同。SeaJS 更簡潔優雅，更貼近 CommonJS Moles/1.1 和
Node Moles 規范。
社區理念有差異。RequireJS 在嘗試讓第三方類庫修改自身來支持 RequireJS，目前只有少數社區採納。SeaJS 不強推，採用自主封裝的方式來「海納百川」，目前已有較成熟的封裝策略。
代碼質量有差異。RequireJS 是沒有明顯的 bug，SeaJS 是明顯沒有 bug。
對調試等的支持有差異。SeaJS 通過插件，可以實現 Fiddler 中自動映射的功能，還可以實現自動 combo 等功能，非常方便。RequireJS 無這方面的支持。
Ⅱ 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 $;
});
Ⅲ 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的插件
Ⅳ sea.js快速上手
一、seajs.config配置說明：
1.base說明：
base是字元串類型，表示基礎或叫做根路徑（最好絕對地址）
備註：
（1）base如果不寫的話是根據你引用sea.js的地址目錄
（2）base如果寫了』.』或者 『/』或者』 』這些，會默認從服務根目錄開始
（3）base如果寫了』js/』之類的相對路徑，會默認根據你引用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說明：
當目錄比較深，或需要跨目錄調用模塊時，可以使用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類型，表示配置可對模塊路徑進行映射修改，可用於路徑轉換、在線調試等。
例如：
seajs.config({
map: [
//[ '.js' , '-debug.js' ]
['.js' , '.js?_t='+(new Date).getTime()]
]
});
define(function(require, exports, mole) {
var a = require('./a');
//=> 載入的是 path/to/a-debug.js
});
5.preload說明：（備注該屬性在V2.3版本時候去除了）
preload是Array或String類型，表示預載入項，可以在普通模塊載入前，提前載入並初始化好指定模塊。
備註：preload中的空字元串會被忽略掉。使用時需要等到 use 才載入
例如：
seajs.config({
preload: ["jquery"]
});
6.debugBoolean 調試使用
值為 true 時，載入器不會刪除動態插入的 script 標簽。插件也可以根據 debug 配置，來決策 log 等信息的輸出。
seajs.config({
debug:true
});
7.vars變數配置
有些場景下，模塊路徑在運行時才能確定，這時可以使用vars變數來配置。
seajs.config({
vars: {
'locale': 'zh-cn'
}
});
define(function(require, exports, mole) {
var lang = require('./i18n/{locale}.js');
//=> 載入的是 path/to/i18n/zh-cn.js
});
vars配置的是模塊標識中的變數值，在模塊標識中用{key}來表示變數。
二、 define
1.所有模塊都通過 define 來定義
define(function(require, exports, mole) {
(1). // 通過require.async引入依賴(引入模塊);
require.async是非同步載入的在引入後，的回調函數中才能使用，函數返回值就是require對象
require.async("jquery",fun) 非同步載入模塊 jquery(別名) fun回調函數(可選參數)
require.async(['lib/common/common.js','lib/common/index.js'],function(){
Echo.init({
offset: 150, //離可視區域多少像素的圖片可以被載入
throttle: 10 //圖片延遲多少毫秒載入
});
}); //調用多個模塊 fun回調函數可選()
(2).require引入依賴(引入模塊);
Require引入就可以使用
var Spinning = require('lib/common/common.js'); 基礎地址/lib/common/common.js
Spinning.tostring(); 調用Spinning裡面的tostring方法
require直接引入整個文件
require.async(["swiper"], function() {
require('mole/Mycenter/mycenter');
})
2.對外暴露介面
// 通過exports對外提供介面
exports.tonumber = function(){ var a = 0;}
// 或者通過mole.exports提供整個介面 (推薦使用)
mole.exports.tonumber = function(){ var a = 0;}
});
三 、use()
seajs.use 用來在頁面中載入模塊。通過 use 方法，可以在頁面中載入任意模塊。use 的模塊路徑相對於當前頁面
語法：seajs.use(id, callback?)
// 載入模塊 main，並在載入完成時，執行指定回調
seajs.use(『./main』)載入模塊
seajs.use(『./main』, function(main) {
main.init();
});
use 方法還可以一次載入多個模塊：
// 並發載入模塊 a 和模塊 b，並在都載入完成時，執行指定回調
seajs.use(['./a', './b'], function(a, b) { 載入多個模塊 fun回調函數(可選參數);
a.init();
b.init();
});
四、注意
引入 sea.js 時，可以把 sea.js 與其他文件打包在一起，可提前合並好，或利用 combo 服務動態合並。無論哪一種方式，為了讓 sea.js內部能快速獲取到自身路徑，推薦手動加上 id 屬性：
Ⅳ sea.js的用法
seajs的作用：
當你的網站開發越來越復雜的時候，會經常遇到這些問題嗎？
沖突回
性能
依賴
seajs如何解決?
①引答入sea.js的庫
②如何變成模塊？
define 在模塊grunt合並的時候 define裡面要多2個參數 一個id ，一個依賴模塊的數組
③如何調用模塊？
exports
seajs.use
④如何依賴模塊？
require https://github.com/seajs/seajs/issues/259 requie還是嚴格書寫約定不能被修改。 (但是自己在rrd上卻看到被修改了很疑惑)
深入學習seajs
define
require
seajs.use
seajs.config
alias
preload
debug
模塊化歷史
ECMAScrpt第六版將正式支持模塊語法
nodeJS
commonJS
AMD
requireJS
跟seajs一樣，web端模塊化
seajs採用cmd規范
Ⅵ angularJS關於依賴和模塊與amd/cmd的區別，分享下結合使用示例
雙向綁定，可測試性的代碼結構，模型視圖分離的一個前端MV*框架
其中angular也提供了模型的概念和依賴管理，不過這個依賴都是要在js對象都已經定義的前提下，沒有像amd/cmd提供按需載入。
我個人比較喜歡cmd(seajs)，它對頂級作用域window的使用約束較多，全局對象和方法少，缺點就是很多原生庫，都需要手工wrap下。
angular定義的controller一般都是全局的，我想用seajs來管理angular的代碼和依賴，下面是一起使用的示例，有類似需求的童鞋可以參考下：
//fileng_mole2.js
define(function(require){
varLog=require('log');
return{
init:function(){
Log.w('Loadangularmole:m2');
varag=window.angular;
if(!ag){
Log.w('Errorwhenloadangularmole:m2:noangular');
return;
}
varm2=ag.mole('m2',[]);
m2.filter('greet',function(){
returnfunction(name){
return'Hello,'+name+'!';
};
});
}
};
});
//fileng_mole1.js
define(function(require){
require('mole/demo/ng_mole2').init();
varLog=require('log');
return{
init:function(){
Log.w('Loadangularmole:m1');
varag=window.angular;
if(!ag){
Log.w('Errorwhenloadangularmole:m1:noangular');
return;
}
varm1=ag.mole('m1',['m2']);
m1.directive('testDateFormat',function(){
returnfunction(scope,el,attrs,ctrl){
varformat='yyyy-MM-dd';
varupdateTime=function(){
el.text(newDate().format(format));
};
//watchscope.formatinctrl
scope.$watch('format',function(value){
format=value;
updateTime();
});
updateTime();
}
});
}
};
});
//filedemo/ng1.js
//初始化頁面
define(function(require){
varLog=require('log');
require('mole/demo/ng_mole1').init();
varagAdaptor=require('x/x.ex.angular');
return{
initPage:function(from,pageInfo,params){
varTestCtrl=function($scope){
$scope.format='yyyy/MM/dd';
};
window.TestCtrl=TestCtrl;
agAdaptor.init(['m1'],'TestCtrl','ngContext');
},
mp:''
};
});
//filex/x.ex.angular.js
//angularbootstrap適配——在bootstrap之前動態修改下dom
define(function(require){
var$=require('jquery');
varLog=require('log');
return{
init:function(moles,ctrlName,contextId){
if(!window.angular){
Log.w('Noangluardefined!','WARN');
return;
}
var_context=$('#'+contextId);
this.initCtrl(_context,ctrlName);
this.initModel(_context);
this.bootstrapAngular(moles);
},
//把ng-controller補上
initCtrl:function(_context,ctrlName){
if(ctrlName)
_context.attr('ng-controller',ctrlName);
},
//根據name把ng-model補上
initModel:function(_context){
_context.find('[name^=f_]').each(function(){
var_el=$(this);
varname=_el.attr('name');
varmodelName=name.split('_').remove(0).join('.');
_el.attr('ng-model',modelName);
});
},
bootstrapAngular:function(moles){
window.angular.bootstrap(document,moles);
}
};
});
<divclass="m_10">
<h3>Angular——WorkwithSeaJS</h3>
<divid="ngContext">
Dateformat:<inputng-model="format">
<br/>
Currenttimeis:<spantest-date-format=""></span>
</div>
</div>
seajs.use('mole/demo/ng1',function(IPage){
IPage.initPage();
});
Ⅶ 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 所有配置以及一些內部變數的值，可用於插件開發。當載入遇到問題時，也可用於調試。
Ⅷ CommonJS AMD CMD KISSY SeaJs之間是什麼關系
CMD是國內玉伯大神在開發SeaJS的時候提出來的，屬於CommonJS的一種規范，此外還有內AMD，其對於的框架是RequireJS
1、二者都容是非同步模塊定義（Asynchronuous Mole Definition）的一個實現；
2、CMD和AMD都是CommonJS的一種規范的實現定義，RequireJS和SeaJS是對應的實踐；
3、CMD和AMD的區別:CMD相當於按需載入，定義一個模塊的時候不需要立即制定依賴模塊，在需要的時候require就可以了，比較方便；而AMD則相反，定義模塊的時候需要制定依賴模塊，並以形參的方式引入factory中。
Ⅸ jquery.1.12.3怎樣cmd，讓seajs模塊化載入呢
直接require引入就可以了。
//別名
alias:{
'jquery':'路徑xxx/jquery.1.12.3.min'
},
//需要預載入的js
preload:['jquery']
在seajs的config中增加這個。
Ⅹ seajs是什麼
js的一種框架
追求簡單、自然的代碼書寫和組織方式，具有以下核心特性：
簡單友好的模塊定義規范：Sea.js 遵循 CMD 規范，可以像 Node.js 一般書寫模塊代碼。
自然直觀的代碼組織方式：依賴的自動載入、配置的簡潔清晰，可以讓我們更多地享受編碼的樂趣。
Sea.js 還提供常用插件，非常有助於開發調試和性能優化，並具有豐富的可擴展介面。