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

モジュール化とは、各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('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)
				}
	
	
})

3つ目の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;i8f939e1f91628d3feed88da14663b8e1
100db36a723c770d327fc0aef2ce13b1
    93f0f5c25f18dab9d176bd4f6de5d30e
        a80eb7cbb6fff8b0ff70bae37074b813
        b2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f
        46d5fe1c7617e3914f214aaf043f4ccf
        *{
            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;
            }531ac245ce3e4fe3d50054a55f265927
        2d46cbd0572ad077d226cb3447cd58cf2cacc6d41bbb37262a98f745aa00fbf0
        
    9c3bca370b5104690d9ef395f2c5f8d1
    6c04bd5ca3fcae76e30b72ad730ca86d
        084a736976a20b0b691668e1e3f81543
            ff6d136ddc5fdfeffaf53ff6ee95f185
                25edfb22a4f469ecb59f1190150159c60b0a14ce934bb093897ac4c304620c82bed06894275b65c1ab86501b08a632eb
                25edfb22a4f469ecb59f1190150159c60cf8b26dfaaf112a96a97acfd5eeb92abed06894275b65c1ab86501b08a632eb
                25edfb22a4f469ecb59f1190150159c6f474136c8aa2f8765ab508c32f7a00bbbed06894275b65c1ab86501b08a632eb
            929d1f5ca49e04fdcb27f9465b944689
            e388a4556c0f65e1904146cc1a846bee
                b963d423c868b9b59c8db9aa2fe1951454bdf357c58b8a65c66d7c19c8e4d114
                45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114
                45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114
            94b3e26ee717c64999d7867364b1b4a3
        16b28748ea4df4d9c2150843fecfba68
    36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

は、モジュール的にカプセル化されたカルーセルを完成させます:

requireの使い方に注意してください

以上がメソッドを js でカプセル化する - モジュール化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。