摘要：插件開發(fā)知識(shí)點(diǎn)總結(jié)和動(dòng)畫性能問(wèn)題的研究這篇文章主要是總結(jié)最近開發(fā)過(guò)程中遇到的問(wèn)題。有幾個(gè)問(wèn)題又是不容易發(fā)現(xiàn)原因的問(wèn)題，但是最后的結(jié)果又是很簡(jiǎn)單的。和都是可以指定函數(shù)運(yùn)行時(shí)，的值。比如觸發(fā)盒子的還有就是禁止元素在水平或者豎直方向滾動(dòng)。

這篇文章主要是總結(jié)最近開發(fā)過(guò)程中遇到的問(wèn)題。有幾個(gè)問(wèn)題又是不容易發(fā)現(xiàn)原因的問(wèn)題，但是最后的結(jié)果又是很簡(jiǎn)單的。

對(duì)于我自己開發(fā)的版本來(lái)說(shuō)還是集成了這個(gè)操作的。但是參考了京東，天貓，淘寶電商網(wǎng)站首頁(yè)的 slider 圖片輪播插件都沒(méi)有支持點(diǎn)按操作。那么是為什么呢？

我想到的答案可能如下：

對(duì)于移動(dòng)端來(lái)說(shuō)，屏幕太小，輪播圖上的顯示當(dāng)前圖片狀態(tài)的圓點(diǎn),人的手指不容易選中。

JavaScript 中this在使用過(guò)程中比較容易出錯(cuò)的。那么this到底是指向誰(shuí)呢？我看到最多的一句話是：

this的指向在函數(shù)定義的時(shí)候是確定不了的，只有函數(shù)執(zhí)行的時(shí)候才能確定this到底指向誰(shuí)，實(shí)際上this的最終指向的是那個(gè)調(diào)用它的對(duì)象;

來(lái)看兩段代碼：

var a = {
    m: 12,
    b: {
        m: 13,
        func: function() {
            console.log(this.m);   //result: 13
        }
    }
};
a.b.func();

通過(guò)輸出的結(jié)果，我們這個(gè)知道，當(dāng)調(diào)用this的時(shí)候，this指向的是對(duì)象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();     //相當(dāng)于 window.cc();

由以上代碼的輸出結(jié)果是當(dāng)this被調(diào)用的時(shí)候 this 指向的是當(dāng)前的 window 相當(dāng)于window.cc()，這個(gè)時(shí)候?qū)嶋H上是 window 調(diào)用了 this；

上面的代碼也印證了小結(jié)開頭提到的那句話。但是很多時(shí)候根據(jù)實(shí)際情況我們需要改變this的指向，那我們?cè)撛趺醋瞿兀?/p>

比如下面這樣,我有一個(gè)公共的 js 對(duì)象來(lái)保存一些公用的 DOM 操作的方法，比如：

var Doing.prototype={
    likeSport:function(){
        //這里使用原型的方式定義對(duì)象，就是想要這里的 this  始終指向送的都是 Doing
        console.log(this.test2()"like speak");
    },
    getName:function(){
        // console.log("zhiqiang");
        return "zhiqiang"
    }
}

我的應(yīng)用場(chǎng)景如下，當(dāng)我單擊 test 節(jié)點(diǎn)的時(shí)候，打印出我喜歡的運(yùn)動(dòng)。

    
我喜歡的運(yùn)動(dòng)是什么？

new Dong();

var Dong = function(){
    var _this = this;
    $(".father").on("click",".test",function(){
        console.log(this);   //this  指向的是 test 節(jié)點(diǎn)對(duì)象
        _this.likeSport();   //這時(shí) likeSport方法中的 this 指向的是 .test 節(jié)點(diǎn)對(duì)象  
     });
};

根據(jù)以上的代碼，雖然我使用了 _this 緩存了 this 的只想，以使在單擊函數(shù)的回掉中可以使用，但是這樣直接調(diào)用 Dong 對(duì)象的方法，會(huì)改變 likeSport 中 this 的指向。

那么我們?cè)趺醋屛覀冊(cè)趩螕艉瘮?shù)的回掉中調(diào)用 likeSport的方法時(shí)，likeSport 的方法中的this仍然指向的是Dong呢？

這個(gè)時(shí)候就要用到 call或者 apply 來(lái)解決問(wèn)題了。

call 和 apply 都是可以指定 function函數(shù)運(yùn)行時(shí)，this 的值。兩者唯一的區(qū)別就是 call 第二個(gè)參數(shù)接受的是參數(shù)列表，而 apply 接受的是一個(gè)參數(shù)數(shù)組。

fun.call(this,tp1,tp2);
fun.apply(this,[tp1,tp2]);

按照以上的知識(shí)點(diǎn)來(lái)修改我們的代碼

$(".father").on("click",".test",function(){
    console.log(this);   //this  指向的是 test 節(jié)點(diǎn)對(duì)象
    _this.likeSport().call(_this);   //這時(shí) likeSport方法中的 this 指向的是 Dong
 });

為什么使用 css3屬性來(lái)做動(dòng)畫？使用 css 3做動(dòng)畫有什么好處呢？

我們先借助 chrome 開發(fā)者工具對(duì)動(dòng)畫渲染做一個(gè)檢測(cè)，先來(lái)看使用margin-left來(lái)做動(dòng)畫發(fā)生了什么

再來(lái)看使用 translate3d 做動(dòng)畫發(fā)生了什么

我們可以很明顯的看到，在使用 margin-left做動(dòng)畫的過(guò)程中，瀏覽器每時(shí)每刻都在發(fā)生渲染操作，而使用 translate3d 只是在開始和結(jié)束的時(shí)候發(fā)生渲染操作。

來(lái)看看 csstrigger 網(wǎng)站上對(duì) margin-left 和 transform 的區(qū)別：

由上面可以知道，我們?cè)谑褂?margin-left 這樣的屬性的時(shí)候，會(huì)觸發(fā)頁(yè)面的重排和重繪，而使用 transform 的時(shí)候，可以調(diào)用 gpu 對(duì)渲染進(jìn)行幫助。

1. 在使用 jQuery 或者 Zepto 的 animate 方法做動(dòng)畫的時(shí)候，我的代碼可能是這樣的

test.animate({left:"15px"},1000);
test.animate({transform:"translate3d(0,15px,0)"},1000);

但是根據(jù) API 文檔，我們可以直接這樣寫

test.animate({translate3d:"0,15px,0"},1000);

這種寫法比上面的寫法簡(jiǎn)潔一些。

2. 在使用 CSS3 屬性做動(dòng)畫的時(shí)候，數(shù)值要加單位，不然會(huì)沒(méi)有效果，比如下面的代碼

var size = 150;
test.animate({"translate3d": "-" + size + ",0,0"},1000)

這樣寫是正確的：

var size = 150;
test.animate({"translate3d": "-" + size + "px,0,0"},1000)

我們會(huì)有這樣的業(yè)務(wù)場(chǎng)景，需要從頁(yè)面的最低部返回頁(yè)面的頭部，或者是返回到頁(yè)面的某個(gè)部分。
能夠想到的解決方案有兩種：

使用錨點(diǎn)；

使用 js 來(lái)滾動(dòng)頁(yè)面

使用錨點(diǎn)沒(méi)有什么可以多說(shuō)的，也很簡(jiǎn)單，但是滾動(dòng)效果比較生硬。使用 js 來(lái)滾動(dòng)頁(yè)面的話，可以設(shè)置滾動(dòng)動(dòng)畫，來(lái)使頁(yè)面的滾動(dòng)的效果更加友好。

在網(wǎng)上如果搜索scroll 動(dòng)畫最多的答案就是使用下面這樣的代碼：

    $(".body1").animate({scrollTop:200},2000);

但是我在使用這樣代碼的時(shí)候，卻沒(méi)有出現(xiàn)我想要的效果，最后通過(guò)各種嘗試還是找到原因的。就是的父級(jí)元素沒(méi)有設(shè)置overflow:auto

overflow 這個(gè)屬性還是很有用的。比如：觸發(fā)盒子的 BFC 還有就是禁止元素在水平或者豎直方向滾動(dòng)。

注意：
jQuery 支持這樣的滾動(dòng)動(dòng)畫，但是 Zepto 不支持這個(gè)操作滾動(dòng)動(dòng)畫；