当前位置:Gxlcms > JavaScript > js里封装一个方法--模块化

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

时间:2021-07-01 10:21:17 帮助过:222人阅读

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

人气教程排行