js里封装一个方法--模块化

来源：动视网责编：小采时间：2020-11-27 20:20:29

js里封装一个方法--模块化

js里封装一个方法--模块化:模块化就是通过每一个js里封装一个方法：用exports将他输出，在下一个js用require的方法加载js时就会将方法输出。然后在主页面引入require.js; 模块化基本写法：define(function(require,exports,module){ }) require:加载一个模块

推荐度：

点击下载本文 文档为doc格式

导读js里封装一个方法--模块化:模块化就是通过每一个js里封装一个方法：用exports将他输出，在下一个js用require的方法加载js时就会将方法输出。然后在主页面引入require.js; 模块化基本写法：define(function(require,exports,module){ }) require:加载一个模块

模块化就是通过每一个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的使用方法

js里封装一个方法--模块化

推荐度：

点击下载本文 文档为doc格式

标签：方法 js 封装

热门焦点

js里封装一个方法--模块化

js里封装一个方法--模块化

js里封装一个方法--模块化

最新推荐

猜你喜欢

热门推荐