js에서 메소드 캡슐화 - 모듈화-JS 튜토리얼-php.cn

js에서 메소드 캡슐화 - 모듈화

零下一度

풀어 주다： 2017-06-25 09:20:56

원래의

2922명이 탐색했습니다.

모듈화는 각 js에 메서드를 캡슐화하는 것입니다. 내보내기를 사용하여 출력하고, 다음 js가 require 메서드를 사용하여 js를 로드하면 해당 메서드가 출력됩니다. 그런 다음 메인 페이지에 require.js를 소개하세요.

모듈화의 기본 작성 방법:

define(function(require,exports,module){


})

로그인 후 복사

require: 모듈을 로드하고 그 뒤에 js 파일 이름이 옵니다.

내보내기: 출력

모듈: 모듈

예 ：

　첫 번째 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(&#39;get&#39;);
	//在输出一个方法封装的运动框架
	exports.move = function move(obj,json,complete){
                         //为了解决计时器多次调用出现的问题，在开始就清除它
					clearInterval(obj.timer);
					//判断有没有输入这个参数，如果没有进行默认
					var complete = complete || {};
					complete.dur = complete.dur || 1000;
					complete.easing = complete.easing || &#39;ease-out&#39;;
					
					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 &#39;linear&#39;:
						 var cur = start[name] + a*dis[name];
						 break;
						 case &#39;ease-in&#39;:
						 var cur = start[name] + Math.pow(a,3)*dis[name];
						 break;
						 case &#39;ease-out&#39;:
						 var a = 1-n/count;
						 var cur = start[name] + (1-Math.pow(a,3))*dis[name];
					        break;
					}
							
							
							
					if(name == &#39;opacity&#39;){
						obj.style[name] = cur;
						obj.style.filter = &#39;alpha(&#39;+cur*100+&#39;)&#39;;
						}else{
						 obj.style[name] = cur +&#39;px&#39;;
						 }
						}
										
					    if(n == count){
					   	   clearInterval(obj.timer)
					       complete.fn && complete.fn();
					     }
					
					},30)
				}
	
	
})

로그인 후 복사

세 번째 js 파일 Slide.js

define(function (require,exports,module){var move = require(&#39;StartMove&#39;);var aBtn = document.getElementById(&#39;banner&#39;).getElementsByTagName(&#39;span&#39;);var oUl = document.getElementById(&#39;banner&#39;).getElementsByTagName(&#39;ul&#39;)[0];var aLi = oUl.children;                //三张图片所占的宽度，length返回的是字符串中的字符数oUl.style.width = aLi.length*aLi[0].offsetWidth+&#39;px&#39;;
                
                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 =&#39;&#39;;
                        }
                        aBtn[this.index].className = &#39;on&#39;;
                        move.move(oUl,{left:-this.index*aLi[0].offsetWidth});
                    }
                }
                }
    
})

로그인 후 복사

네 번째 js 파일 초기화 .js

require([&#39;slider&#39;],function(mod){
    mod.slide()
})

로그인 후 복사

메인 페이지 배너.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 중국어 웹사이트의 기타 관련 기사를 참조하세요!