js里封装一个方法--模块化-js教程-PHP中文网

首页

web前端

js教程

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

零下一度

Jun 25, 2017 am 09:20 AM

代码方法模块化运动

模块化就是通过每一个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(&#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文件 init.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中文网其他相关文章！

本站声明

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

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7722

Java教程

1642

CakePHP 教程

1396

Laravel 教程

1289

PHP教程

1233

显示更多

Related knowledge

怎么在番茄免费小说app中写小说分享番茄小说写小说方法教程 Mar 28, 2024 pm 12:50 PM

　　番茄小说是一款非常热门的小说阅读软件，我们在番茄小说中经常会有新的小说和漫画可以去阅读，每一本小说和漫画都很有意思，很多小伙伴也想着要去写小说来赚取赚取零花钱，在把自己想要写的小说内容编辑成文字，那么我们要怎么样在这里面去写小说呢?小伙伴们都不知道，那就让我们一起到本站本站中花点时间来看写小说的方法介绍吧。分享番茄小说写小说方法教程　　1、首先在手机上打开番茄免费小说app，点击个人中心——作家中心　　2、跳转到番茄作家助手页面——点击创建新书在小说的结

七彩虹主板怎么进入bios？教你两种方法 Mar 13, 2024 pm 06:01 PM

　　七彩虹主板在中国国内市场享有较高的知名度和市场占有率，但是有些七彩虹主板的用户还不清楚怎么进入bios进行设置呢？针对这一情况，小编专门为大家带来了两种进入七彩虹主板bios的方法，快来试试吧！　　方法一：使用u盘启动快捷键直接进入u盘装系统　　七彩虹主板一键启动u盘的快捷键是ESC或F11，首先使用黑鲨装机大师制作一个黑鲨U盘启动盘，然后开启电脑，当看到开机画面的时候，连续按下键盘上的ESC或F11键以后将会进入到一个启动项顺序选择的窗口，将光标移动到显示“USB”的地方，然

微信删除的人如何找回（简单教程告诉你如何恢复被删除的联系人） May 01, 2024 pm 12:01 PM

而后悔莫及、人们常常会因为一些原因不小心将某些联系人删除、微信作为一款广泛使用的社交软件。帮助用户解决这一问题，本文将介绍如何通过简单的方法找回被删除的联系人。1.了解微信联系人删除机制这为我们找回被删除的联系人提供了可能性、微信中的联系人删除机制是将其从通讯录中移除，但并未完全删除。2.使用微信内置“通讯录恢复”功能微信提供了“通讯录恢复”节省时间和精力，用户可以通过该功能快速找回之前被删除的联系人，功能。3.进入微信设置页面点击右下角，打开微信应用“我”再点击右上角设置图标、进入设置页面，，

手机字体大小设置方法（轻松调整手机字体大小） May 07, 2024 pm 03:34 PM

字体大小的设置成为了一项重要的个性化需求，随着手机成为人们日常生活的重要工具。以满足不同用户的需求、本文将介绍如何通过简单的操作，提升手机使用体验，调整手机字体大小。为什么需要调整手机字体大小-调整字体大小可以使文字更清晰易读-适合不同年龄段用户的阅读需求-方便视力不佳的用户使用手机系统自带字体大小设置功能-如何进入系统设置界面-在设置界面中找到并进入"显示"选项-找到"字体大小"选项并进行调整第三方应用调整字体大小-下载并安装支持字体大小调整的应用程序-打开应用程序并进入相关设置界面-根据个人

手机版龙蛋孵化方法大揭秘（一步一步教你如何成功孵化手机版龙蛋） May 04, 2024 pm 06:01 PM

手机游戏成为了人们生活中不可或缺的一部分，随着科技的发展。它以其可爱的龙蛋形象和有趣的孵化过程吸引了众多玩家的关注，而其中一款备受瞩目的游戏就是手机版龙蛋。帮助玩家们在游戏中更好地培养和成长自己的小龙，本文将向大家介绍手机版龙蛋的孵化方法。1.选择合适的龙蛋种类玩家需要仔细选择自己喜欢并且适合自己的龙蛋种类，根据游戏中提供的不同种类的龙蛋属性和能力。2.提升孵化机的等级玩家需要通过完成任务和收集道具来提升孵化机的等级，孵化机的等级决定了孵化速度和孵化成功率。3.收集孵化所需的资源玩家需要在游戏中

快速掌握：华为手机开启两个微信账号方法大揭秘！ Mar 23, 2024 am 10:42 AM

在当今社会，手机已经成为我们生活中不可或缺的一部分。而微信作为我们日常沟通、工作、生活的重要工具，更是经常被使用。然而，在处理不同事务时可能需要分开两个微信账号，这就要求手机能够支持同时登录两个微信账号。华为手机作为国内知名品牌，很多人使用，那么华为手机开启两个微信账号的方法是怎样的呢？下面就来揭秘一下这个方法。首先，要在华为手机上同时使用两个微信账号，最简

如何使用Copilot生成代码 Mar 23, 2024 am 10:41 AM

作为一名程序员，对于能够简化编码体验的工具，我感到非常兴奋。借助人工智能工具的帮助，我们可以生成演示代码，并根据需求进行必要的修改。在VisualStudioCode中新引入的Copilot工具让我们能够创建具有自然语言聊天交互的AI生成代码。通过解释功能，我们可以更好地理解现有代码的含义。如何使用Copilot生成代码？要开始，我们首先需要获得最新的PowerPlatformTools扩展。要实现这一点，你需要进入扩展页面，搜索“PowerPlatformTool”，然后点击Install按钮