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

零下一度 原创: 2017-06-25 09:20:56 2446浏览

模块化就是通过每一个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里封装一个方法--模块化的详细内容，更多请关注php中文网其它相关文章！

模块化运动方法代码帮你 PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

上一条：Three.js之如何创建一个场景下一条：linux下安装nodejs及npm实例教程