DIV CSS 佈局教程網

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 不支持這個操作滾動動畫；