myslide 插件开辟学问点总结和 css3 动画机能题目的研讨
这篇文章主假如总结近来开辟过程当中碰到的题目。有几个题目又是不轻易发明缘由的题目,然则末了的结果又是很简单的。
1.手机端的 slider 插件是不是有必要集成点按操纵
关于我本身开辟的版本来讲照样集成了这个操纵的。然则参考了京东,天猫,淘宝电商网站首页的 slider 图片轮播插件都没有支撑点按操纵。那末是为何呢?
我想到的答案可以以下:
关于挪动端来讲,屏幕太小,轮播图上的显现当前图片状况的圆点,人的手指不轻易选中。
2.this究竟指向谁,转变 this 的指向
JavaScript 中this
在运用过程当中比较轻易失足的。那末this
究竟是指向谁呢?我看到最多的一句话是:
this的指向在函数定义的时刻是肯定不了的,只要函数实行的时刻才肯定this究竟指向谁,实际上this的终究指向的是谁人挪用它的对象;
来看两段代码:
var a = {
m: 12,
b: {
m: 13,
func: function() {
console.log(this.m); //result: 13
}
}
};
a.b.func();
经由过程输出的结果,我们这个晓得,当挪用this
的时刻,this
指向的是对象b
;
var a = {
m: 12,
b: {
m: 13,
func: function() {
console.log(this.m); //undefined
console.log(this); //window
}
}
};
var cc=a.b.func;
cc(); //相当于 window.cc();
由以上代码的输出结果是当this
被挪用的时刻 this
指向的是当前的 window 相当于window.cc()
,这个时刻实际上是 window
挪用了 this
;
上面的代码也印证了小结开首提到的那句话。然则许多时刻依据实际情况我们须要转变this
的指向,那我们该怎样做呢?
比以下面如许,我有一个大众的 js 对象来保留一些公用的 DOM 操纵的要领,比方:
var Doing.prototype={
likeSport:function(){
//这里运用原型的体式格局定义对象,就是想要这里的 this 一直指向送的都是 Doing
console.log(this.test2()'like speak');
},
getName:function(){
// console.log('zhiqiang');
return 'zhiqiang'
}
}
我的运用场景以下,当我单击 test 节点的时刻,打印出我喜好的活动。
<div class="father">
<div class="test">我喜好的活动是什么?</div>
</div>
new Dong();
var Dong = function(){
var _this = this;
$('.father').on('click','.test',function(){
console.log(this); //this 指向的是 test 节点对象
_this.likeSport(); //这时候 likeSport要领中的 this 指向的是 .test 节点对象
});
};
依据以上的代码,虽然我运用了 _this
缓存了 this
的只想,以使在单击函数的回掉中可以运用,然则如许直接挪用 Dong 对象的要领,会转变 likeSport
中 this
的指向。
那末我们怎样让我们在单击函数的回掉中挪用 likeSport
的要领时,likeSport
的要领中的this
依然指向的是Dong
呢?
这个时刻就要用到 call
或许 apply
来解决题目了。
call 和 apply 都是可以指定 function函数运行时,this 的值。二者唯一的区分就是 call 第二个参数接收的是参数列表,而 apply 接收的是一个参数数组。
fun.call(this,tp1,tp2);
fun.apply(this,[tp1,tp2]);
根据以上的学问点来修正我们的代码
$('.father').on('click','.test',function(){
console.log(this); //this 指向的是 test 节点对象
_this.likeSport().call(_this); //这时候 likeSport要领中的 this 指向的是 Dong
});
3.运用CSS3 动画机能的题目
为何运用 css3属性来做动画?运用 css 3做动画有什么优点呢?
我们先借助 chrome 开辟者东西对动画衬着做一个检测,先来看运用margin-left
来做动画发作了什么
再来看运用 translate3d
做动画发作了什么
我们可以很明显的看到,在运用 margin-left
做动画的过程当中,浏览器时时刻刻都在发作衬着操纵,而运用 translate3d
只是在最先和完毕的时刻发作衬着操纵。
来看看 csstrigger 网站上对 margin-left 和 transform 的区分:
由上面可以晓得,我们在运用 margin-left 如许的属性的时刻,会触发页面的重排和重绘,而运用 transform 的时刻,可以挪用 gpu 对衬着举行协助。
轻易疏忽的题目:
1. 在运用 jQuery 或许 Zepto 的 animate 要领做动画的时刻,我的代码多是如许的
test.animate({left:'15px'},1000);
test.animate({transform:'translate3d(0,15px,0)'},1000);
然则依据 API 文档,我们可以直接如许写
test.animate({translate3d:'0,15px,0'},1000);
这类写法比上面的写法简约一些。
2. 在运用 CSS3 属性做动画的时刻,数值要加单元,不然会没有结果,比以下面的代码
var size = 150;
test.animate({'translate3d': '-' + size + ',0,0'},1000)
如许写是准确的:
var size = 150;
test.animate({'translate3d': '-' + size + 'px,0,0'},1000)
4.scroll 转动动画的题目
我们会有如许的营业场景,须要从页面的最低部返回页面的头部,或许是返回到页面的某个部份。
可以想到的解决方案有两种:
运用锚点;
运用 js 来转动页面
运用锚点没有什么可以多说的,也很简单,然则转动结果比较僵硬。运用 js 来转动页面的话,可以设置转动动画,来使页面的转动的结果越发友爱。
在网上假如搜刮scroll
动画最多的答案就是运用下面如许的代码:
$('.body1').animate({scrollTop:200},2000);
然则我在运用如许代码的时刻,却没有涌现我想要的结果,末了经由过程种种尝试照样找到缘由的。就是的父级元素没有设置overflow:auto
overflow 这个属性照样很有效的。比方:触发盒子的 BFC
另有就是制止元素在程度或许竖直方向转动。
注重:jQuery
支撑如许的转动动画,然则 Zepto
不支撑这个操纵转动动画;