国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

iliyaku / 2637人閱讀

摘要：插件開發知識點總結和動畫性能問題的研究這篇文章主要是總結最近開發過程中遇到的問題。有幾個問題又是不容易發現原因的問題，但是最后的結果又是很簡單的。和都是可以指定函數運行時，的值。比如觸發盒子的還有就是禁止元素在水平或者豎直方向滾動。

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 節點的時候，打印出我喜歡的運動。


    
我喜歡的運動是什么？


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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/78972.html

相關文章

  • 前端資源系列（4）-前端學習資源分享&前端面試資源匯總

    摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

    princekin 評論0 收藏0

  • 個人分享--web前端學習資源分享

    摘要：前言月份開始出沒社區，現在差不多月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了一般來說，差不多到了轉正的時候，會進行總結或者分享會議那么今天我就把看過的一些學習資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區，現在差不多9月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了！一般來說，差不多到了轉正的時候，會進行總結或者分享會議！那么今天我就...

    sherlock221 評論0 收藏0

  • HTML-CSS-JS

    摘要：本周于上海閉幕，掘金和知乎上都有對應的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主，有業界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規范最佳實踐 本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范，可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...

    mikasa 評論0 收藏0

  • HTML-CSS-JS

    摘要：本周于上海閉幕，掘金和知乎上都有對應的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主，有業界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規范最佳實踐 本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范，可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...

    李世贊 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<