メソッドを js でカプセル化する - モジュール化-jsチュートリアル-php.cn

メソッドを js でカプセル化する - モジュール化

零下一度

リリース： 2017-06-25 09:20:56

オリジナル

2944 人が閲覧しました

モジュール化とは、各jsにメソッドをカプセル化することです。exportsを使用して出力し、次のjsがrequireメソッドを使用してjsをロードするときにメソッドが出力されます。次に、メインページに require.js を導入します。

モジュール化の基本的な記述方法:

define(function(require,exports,module){


})

ログイン後にコピー

require: モジュールをロードし、その後に js ファイル名を付けます

エクスポート: 出力

モジュール: モジュール

を与えます例：

1つ目の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];
		}
	}
})

ログイン後にコピー

2つ目のファイル: 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)
				}
	
	
})

ログイン後にコピー

3つ目の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});
                    }
                }
                }
    
})

ログイン後にコピー

4つ目jsファイルの初期化.js

require([&#39;slider&#39;],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 中国語 Web サイトの他の関連記事を参照してください。