模塊化就是通過每一個js里封裝一個方法：用exports將他輸出， 在下一個js用require的方法載入js時就會將方法輸出。然後在主頁面引入require.js; 模塊化基本寫法： require:載入一個模塊，後面跟的是一個js文件名 exports:輸出 module:模塊 舉一個例子： 第 ...
模塊化就是通過每一個js里封裝一個方法：用exports將他輸出， 在下一個js用require的方法載入js時就會將方法輸出。然後在主頁面引入require.js;
模塊化基本寫法：
define(function(require,exports,module){
})
require:載入一個模塊，後面跟的是一個js文件名
exports:輸出
module:模塊
舉一個例子：
第一個js文件 ,get.js:
define(function(require,exports,module){
//將封裝的這個函數，作為要輸出的一個方法：其封裝函數是用來返該元素所對應的屬性的值。
exports.getStyle = function (obj,name){
//if判斷考慮的是相容的問題
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
}
})
第二個文件：StarMove.js
define(function(require,exports,module){
//載入上一個模塊
var get = require('get');
//在輸出一個方法封裝的運動框架
exports.move = function move(obj,json,complete){
//為瞭解決計時器多次調用出現的問題，在開始就清除它
clearInterval(obj.timer);
//判斷有沒有輸入這個參數，如果沒有進行預設
var complete = complete || {};
complete.dur = complete.dur || 1000;
complete.easing = complete.easing || 'ease-out';
var count = parseInt(complete.dur/30);//總次數
//起始位置
var start = {};//{width:300,height:300}
var dis = {};
//{width:300,height:300}
for(var name in json){
start[name] = parseFloat(get.getStyle(obj,name));
dis[name] = json[name] - start[name];
}
var n = 0;//當前步數
obj.timer = setInterval(function(){
n++;
for(var name in json){
var a = n/count;
switch(complete.easing){
case 'linear':
var cur = start[name] + a*dis[name];
break;
case 'ease-in':
var cur = start[name] + Math.pow(a,3)*dis[name];
break;
case 'ease-out':
var a = 1-n/count;
var cur = start[name] + (1-Math.pow(a,3))*dis[name];
break;
}
if(name == 'opacity'){
obj.style[name] = cur;
obj.style.filter = 'alpha('+cur*100+')';
}else{
obj.style[name] = cur +'px';
}
}
if(n == count){
clearInterval(obj.timer)
complete.fn && complete.fn();
}
},30)
}
})
第三個js文件 slide.js
define(function (require,exports,module){ var move = require('StartMove'); var aBtn = document.getElementById('banner').getElementsByTagName('span'); var oUl = document.getElementById('banner').getElementsByTagName('ul')[0]; var aLi = oUl.children; //三張圖片所占的寬度，length返回的是字元串中的字元數 oUl.style.width = aLi.length*aLi[0].offsetWidth+'px'; exports.slide = function(){ for(var i=0;i<aBtn.length;i++){ aBtn[i].index = i; aBtn[i].onclick = function(){ for(var i = 0;i<aBtn.length;i++){ aBtn[i].className =''; } aBtn[this.index].className = 'on'; move.move(oUl,{left:-this.index*aLi[0].offsetWidth}); } } } })
第四個js文件 init.js
require(['slider'],function(mod){ mod.slide() })
主頁面 banner.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
#banner{
width: 830px;
height: 440px;
border: solid 1px;
margin: 50px auto;
position: relative;
overflow: hidden;
}
#banner ul{
position: absolute;
left: 0;
top: 0;
/*width: 2490px;
height: 440px;
overflow: hidden;*/
}
#banner ul li{
width: 830px;
height: 440px;
float: left;
}
#banner p{
position: absolute;
left: 50%;
bottom: 10px;
margin-left: -30px;
}
#banner p span{
display: block;
float: left;
width: 15px;
height: 15px;
margin-right: 6px;
background: #ccc;
border-radius: 50%;
}
#banner p .on{
background: red;
}
</style>
<script type="text/javascript" src="require.js"></script>
</head>
<body>
<div id="banner">
<ul>
<li><img src="images/1.jpg"/></li>
<li><img src="images/2.jpg"/></li>
<li><img src="images/3.jpg"/></li>
</ul>
<p>
<span class="on"></span>
<span></span>
<span></span>
</p>
</div>
</body>
</html>
就會完成一個用模塊化封裝的輪播圖：
要註意require的使用方法
