requireJS學習

最近學習了requireJS前段js模塊處理,寫個簡單的例子作爲requireJS入門。


爲什麼使用RequireJS
1.有效防止命名衝突
2.聲明不同js文件之間的依賴
3.可以讓代碼以模塊化的方式組織


RequireJS常用的方法
1.requirejs.config
2.requirejs
3.define


怎麼進行使用呢,首先編寫一個html,同時需要去官網下載requireJS的文件。http://requirejs.orh/

1.編寫一個index.html

<html>
<head></head>
<body>


<!--data-main主要是引入Js主入口-->
<script src="js/require.js" data-main="js/main"></script>
</body>
</html>

2.寫一個模塊validate.js 用來處理表單驗證,這裏用到define,然後要return出來,纔會得到。

define(['jquery'],function($){
	return {
		isEmpty:function(){},
		checkLength:function(){},
		isEqual:function(Str1,Str2){
			return str1===str2;
		}		
	};
});

3.寫一個main.js主要用來結合你調用模塊的js成爲自己要用的精簡模塊($符號是代表jquery),我這邊融合上了config.js,其實config可以獨立成獨立的一個文件,待會一下說明怎麼寫。

requirejs.config({
	paths:{
		jquery:'jquery-1.11.3.min'
	}

});

requirejs(['jquery','validate'],function($,validate){
	console.log(validate.isEqual(1,2));
});

4.如果config.js單獨成一個人文件就要return出去,以下文件方式把定義的東西曝露出去,如果曝露出去,在其他main.js裏requirejs要包含config這個模塊,也就是要引入。config.js文件如下:

define(function() {
	return {
		URL: {
			INDEX: ctx + '/index/banner',
		},
		PRODUCT: {
			TIME_DEPOSIT_RATE: 0.0175,    // 銀行定存利率
			TYPE_LIMITEDTIME: 7
		}
	};
});

==>引入的時候

requirejs(['jquery','validate','config'],function($,validate,config){
})





發佈了72 篇原創文章 · 獲贊 172 · 訪問量 16萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章