seajs依賴

① 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 $;
});

② angularJS關於依賴和模塊與amd/cmd的區別，分享下結合使用示例

雙向綁定，可測試性的代碼結構，模型視圖分離的一個前端MV*框架

其中angular也提供了模型的概念和依賴管理，不過這個依賴都是要在js對象都已經定義的前提下，沒有像amd/cmd提供按需載入。

我個人比較喜歡cmd(seajs)，它對頂級作用域window的使用約束較多，全局對象和方法少，缺點就是很多原生庫，都需要手工wrap下。

angular定義的controller一般都是全局的，我想用seajs來管理angular的代碼和依賴，下面是一起使用的示例，有類似需求的童鞋可以參考下：

java">//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();
});

③ 如何在一個js中調用另一個js,以及載入多個有依賴關系的js

方法：直接調用對方的函數就行。

步驟：

1、兩個或者多個js文件載入到同一版個頁面中

2、js文件中的方權法直接相互訪問。

示例：

a.js中定義一個方法
functiona(){
}

b.js中定義一個方法
functionb(){
}

在a.js中訪問b.js中方法
b();//就可以直接訪問b方法

④ 使用seajs後，jquery的擴展怎麼辦

將js插件cmd模塊化（define封裝成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代碼
});