少写代码帮你模块化方法 & 运动框架 & 简化轮播图
2024-08-29 17:05:52
模块化就是通过每一个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')[];
var aLi = oUl.children; //三张图片所占的宽度,length返回的是字符串中的字符数
oUl.style.width = aLi.length*aLi[].offsetWidth+'px'; exports.slide = function(){
for(var i=;i<aBtn.length;i++){
aBtn[i].index = i;
aBtn[i].onclick = function(){
for(var i = ;i<aBtn.length;i++){
aBtn[i].className ='';
}
aBtn[this.index].className = 'on';
move.move(oUl,{left:-this.index*aLi[].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: ;
padding: ;
list-style: none;
}
#banner{
width: 830px;
height: 440px;
border: solid 1px;
margin: 50px auto;
position: relative;
overflow: hidden;
}
#banner ul{
position: absolute;
left: ;
top: ;
/*width: 2490px;
height: 440px;
overflow: hidden;*/
}
#banner ul li{
width: 830px;
height: 440px;
float: left;
}
#banner p{
position: absolute;
left: %;
bottom: 10px;
margin-left: -30px;
}
#banner p span{
display: block;
float: left;
width: 15px;
height: 15px;
margin-right: 6px;
background: #ccc;
border-radius: %;
}
#banner p .on{
background: red;
}
</style>
<script type="text/javascript" src="require.js"></script> </head>
<body>
<div id="banner">
<ul>
<li><img src="data:images/1.jpg"/></li>
<li><img src="data:images/2.jpg"/></li>
<li><img src="data:images/3.jpg"/></li>
</ul>
<p>
<span class="on"></span>
<span></span>
<span></span>
</p>
</div>
</body>
</html>
就会完成一个用模块化封装的轮播图:
要注意require的使用方法
最新文章
- 也谈微信小程序
- tornado中self.write() 写list
- Runtime初学习
- dbcp基本配置和重连配置 -- mysql 8小时自动断开连接的问题
- HDU 3709 Balanced Number (数位DP)
- JS 执行环境与作用域链
- iOS本机生成证书请求文件流程
- makefile懒人版(单个文件编译)
- cygwin设置中文
- 有关Transaction not successfully started问题解决的方法
- 【Android基础】点击Back键退出应用程序
- aspnetcore.webapi实践k8s健康探测机制 - kubernetes
- Python3 教程
- python默认编码设置
- Python量化交易
- CSS样式—— 字体、元素的垂直水平居中
- Java时间api
- NPOI生成excel并下载
- JS --- 本地保存localStorage、sessionStorage用法总结
- 音乐app各部分笔记(二)
热门文章
- linux docket
- sklearn解决过拟合的例子
- 《精通Spring4.X企业应用开发实战》读后感第五章(通过编码方式动态添加Bean)
- [Win10] 安装虚拟光驱 用于加载ISO等镜像文件
- -bash: ./bak_1.py: /usr/bin/python^M: bad interpreter: 没有那个文件或目录
- 洛谷P1164 小A点菜(01背包求方案数)
- LeetCode.11-装水最多的容器(Container With Most Water)
- 用户与授权:MySQL系列之六
- 响应式Web
- 008-数据类型(Dictionary)