myslide 插件開發知識點總結和 css3 動畫性能問題的研究

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 滾動動畫的問題

咱們會有這樣的業務場景，須要從頁面的最低部返回頁面的頭部，或者是返回到頁面的某個部分。
可以想到的解決方案有兩種：

1. 使用錨點；
2. 使用 js 來滾動頁面

使用錨點沒有什麼能夠多說的，也很簡單，可是滾動效果比較生硬。使用 js 來滾動頁面的話，能夠設置滾動動畫，來使頁面的滾動的效果更加友好。

在網上若是搜索scroll 動畫最多的答案就是使用下面這樣的代碼：

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

可是我在使用這樣代碼的時候，卻沒有出現我想要的效果，最後經過各類嘗試仍是找到緣由的。就是的父級元素沒有設置overflow:auto

overflow 這個屬性仍是頗有用的。好比：觸發盒子的 BFC 還有就是禁止元素在水平或者豎直方向滾動。

注意：
jQuery 支持這樣的滾動動畫，可是 Zepto 不支持這個操做滾動動畫；