最近學習了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){
})