JavaScript “跑馬燈”抽獎(jiǎng)活動(dòng)代碼解析與優(yōu)化（一）

MRZYD 發(fā)布于2019-08-30 12:45 / 606人閱讀

摘要：最近的項(xiàng)目中做了一個(gè)跑馬燈的抽獎(jiǎng)特效插件。這里主要是來寫寫自己的優(yōu)化過程。所以寫代碼的時(shí)候一定要注意一些小細(xì)節(jié)哈。。。在以后，其返回的元素順序等同于在中出現(xiàn)的先后順序。盡管是一個(gè)數(shù)組。這時(shí)從加入執(zhí)行隊(duì)列到加入執(zhí)行隊(duì)列中間時(shí)間間隔是。

最近的項(xiàng)目中做了一個(gè)“跑馬燈”的抽獎(jiǎng)特效插件。上篇文章已經(jīng)分享過html和css 的相關(guān)知識(shí)。這篇文章主要分享一些 JavaScript 相關(guān)的知識(shí)。這幾天在寫這篇文章的時(shí)候，也順便把自己的代碼重構(gòu)了一下。
這里主要是來寫寫自己的優(yōu)化過程。俗話說：

一個(gè)程序猿的進(jìn)步是從對(duì)自己的代碼不滿意開始的。

開始之前先來看上篇文章遺漏的兩個(gè)問題和幾個(gè)知識(shí)點(diǎn)，是自己重構(gòu)的過程中需要用到的：

1.移動(dòng)端1px像素線的問題

對(duì)于設(shè)計(jì)師給我的手機(jī)端網(wǎng)頁的設(shè)計(jì)稿都是2倍圖。按照道理來說，在寫網(wǎng)頁的時(shí)候，所有對(duì)象的實(shí)際尺寸都是會(huì)除2。但是對(duì)于1像素的線呢？
先來看兩張圖，設(shè)計(jì)稿的效果：

在三星 S4下的實(shí)際顯示效果：

可以看到這個(gè)時(shí)候1px的線竟然顯示不出來了。這個(gè)問題是跟 S4手機(jī)的屏幕像素密度有關(guān)。關(guān)于屏幕像素密度和1px 線的關(guān)系有很多文章介紹，可以自行搜索了解。我這里的解決方案是，對(duì)1px 的線不做處理。是多少就寫多少。就算我的基礎(chǔ)單位是rem，也不是其它單位。

{
    position: absolute;
    width: 13rem;
    height: 9.2rem;
    border:1px solid #000;
}

2.pc 端瀏覽器和移動(dòng)端瀏覽器容錯(cuò)率的差異

先來看一段代碼：

$("[node-type=row-a").find("div");

很明顯可以發(fā)現(xiàn)，我使用的選擇器是有語法錯(cuò)誤的。但是在瀏覽器中運(yùn)行會(huì)有什么結(jié)果呢？看下圖：

很明顯可以看出對(duì)于屬性選擇器，就算我有語法錯(cuò)誤，PC 端瀏覽器也是可以正確解析的。但是在手機(jī)端，這種寫法是不能夠正確解析，代碼不能夠運(yùn)行。

所以寫代碼的時(shí)候一定要注意一些小細(xì)節(jié)哈。。。

3.jQuery中選擇器的使用

在使用 jQuery 或者是 Zepto 的過程中最經(jīng)常使用的選擇器的寫法就是下面這樣吧，

    $("div.testClass")

只是在$() 中寫上自己需要的 Dom 節(jié)點(diǎn)的 class或者 ID 或者使用屬性選擇器。
在查看 jQuery的文檔，對(duì)于$()會(huì)有這樣的描述：

jQuery([selector,[context]])

最重要的是看看對(duì) context (它也是我們平時(shí)使用中最容易忽略，但是卻非常有用的一個(gè)參數(shù))的描述：

默認(rèn)情況下, 如果沒有指定context參數(shù)，$()將在當(dāng)前的 HTML document中查找 DOM 元素；如果指定了 context 參數(shù)，如一個(gè) DOM 元素集或 jQuery 對(duì)象，那就會(huì)在這個(gè) context 中查找。在jQuery 1.3.2以后，其返回的元素順序等同于在context中出現(xiàn)的先后順序。

剛開始學(xué)習(xí) JavaScript 那會(huì)兒，就聽說了操作 DOM 是很損耗瀏覽器性能，遍歷 DOM 也是很影響程序性能的。
如果我們?cè)谥付ǖ姆秶鷥?nèi)查找需要的 Dom 會(huì)不會(huì)比從整個(gè)document 中查找快很多。而且在我們寫 web 組件的過程中，一個(gè)頁面上組件可能出現(xiàn)很多次，那我們?cè)趺磁袛辔覀円僮髂膫€(gè)組件呢？這個(gè)context參數(shù)就會(huì)起到?jīng)Q定行的作用。具體請(qǐng)繼續(xù)看哇。。。

4.jQuery對(duì)象到數(shù)組的轉(zhuǎn)換

剛開始學(xué)習(xí) jQuery的時(shí)候在一本書上看到一句話：

jQuery對(duì)象就是一個(gè) JavaScript 數(shù)組。

而且在使用 jQuery的過程中，都會(huì)遇到，js對(duì)象轉(zhuǎn) jQuery對(duì)象，jQuery對(duì)象轉(zhuǎn) js對(duì)象。關(guān)于這些基礎(chǔ)不做過多介紹。
但是有時(shí)候我們會(huì)想在 jQuery對(duì)象上運(yùn)用一些原生Array對(duì)象的方法或者屬性。來看一個(gè)簡單的例子：

由圖中的代碼運(yùn)行結(jié)果，可以知道在 jQuery對(duì)象上是沒有我們要使用reverse方法的。盡管test是一個(gè)數(shù)組。
那么我們?cè)趺崔k才可以讓 jQuery對(duì)象使用原生的 Array對(duì)象的方法呢？

4.1使用原型鏈擴(kuò)展

比如下面的代碼：

jQuery.prototype.reverse=function(){
    //一些操作
}

使用prototype來擴(kuò)展方法的時(shí)候，大家一直比較認(rèn)為是缺點(diǎn)的就是可能會(huì)污染已經(jīng)存在的原型鏈上的方法。還有就是訪問方法的時(shí)候需要查找原型鏈。

4.2將 jQuery對(duì)象中的對(duì)象添加到數(shù)組中

看下面的代碼

var test = $("div.test");
var a=[];
$(test).each(function(){
    a.push($(this));
});

a.reverse();

這樣就可以將 jQuery對(duì)象翻轉(zhuǎn)。

4.3使用 Array對(duì)象的 from()方法

這種方法也是自己在編寫插件過程中使用的方法?？匆幌挛臋n描述：

Array.from() 方法可以將一個(gè)類數(shù)組對(duì)象或可迭代對(duì)象轉(zhuǎn)換成真實(shí)的數(shù)組。

個(gè)人感覺使用這個(gè)代碼比較簡潔。暫時(shí)還不知道有沒有性能的影響。繼續(xù)看下面的代碼：

var test = $("div.test");
var a= Array.from(test);
a.reverse();

5.setInterval()和setTimeout()對(duì)程序性能的影響

因?yàn)?b>setTimeout()和setInterval()這兩個(gè)函數(shù)在 JavaScript 中的實(shí)現(xiàn)機(jī)制完全一樣，這里只拿 setTimeout()驗(yàn)證

那么來看兩段代碼

var a ={
    test:function(){
        setTimeout(this.bbb,1000);
    },
    bbb:function(){
        console.log("----");
    }
};
a.test()

輸出結(jié)果如下：

看下面的代碼輸出是什么

var a ={
    test:function(){
        setTimeout(function(){
            console.log(this);
            this.bbb();
        },1000);
    },
    bbb:function(){
        console.log("----");
    }
};
a.test();

運(yùn)行這段代碼的時(shí)候，代碼報(bào)錯(cuò)

由以上的結(jié)果可以知道，當(dāng)我們?cè)谑褂?b>setInterval()和setTimeout()的時(shí)候，在回掉中使用this的時(shí)候，this的作用域已經(jīng)發(fā)生了改變，并且指向了 window。

setTimeout(fn,0)的含義是，指定某個(gè)任務(wù)在主線程最早可得的空閑時(shí)間執(zhí)行，也就是說，盡可能早得執(zhí)行。它在"任務(wù)隊(duì)列"的尾部添加一個(gè)事件，因此要等到同步任務(wù)和"任務(wù)隊(duì)列"現(xiàn)有的事件都處理完，才會(huì)得到執(zhí)行。

意思就是說在我們?cè)O(shè)置 setTimeout()之后，也可能不是立即等待多少秒之后就立即執(zhí)行回掉，而是會(huì)等待主線程的任務(wù)都處理完后再執(zhí)行，所以存在 "等待"超過自己設(shè)置時(shí)間的現(xiàn)象。同時(shí)也會(huì)存在異步隊(duì)列中已經(jīng)存在了其它的 setTimeout() 也是會(huì)等待之前的都執(zhí)行完再執(zhí)行當(dāng)前的。

看一個(gè) Demo：

setTimeout(function bbb(){},4000);

function aaa(){
    setTimeout(function ccc(){},1000);
}

aaa();

如果運(yùn)行上面的代碼，當(dāng)執(zhí)行完 aaa() ，JavaScript 線程空閑，這時(shí)開始計(jì)時(shí)：等待1秒后將 ccc()加入執(zhí)行隊(duì)列,等待4s 將 bbb() 加入執(zhí)行隊(duì)列。這時(shí)從 ccc()加入執(zhí)行隊(duì)列到 bbb()加入執(zhí)行隊(duì)列中間時(shí)間間隔是3s。

執(zhí)行結(jié)果如下圖：

GPU云服務(wù)器云服務(wù)器 JavaScript代碼優(yōu)化代碼與Javascript 跑馬燈代碼抽獎(jiǎng)活動(dòng)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115040.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

MRZYD

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

[黑五]TmhHost充值送10%,日本CN2上線季付200元起,彈性云主機(jī)上線全場(chǎng)8折

閱讀 3131·2021-11-24 10:47
#萬圣節(jié)#SugarHosts：虛擬主機(jī)續(xù)費(fèi)送8折優(yōu)惠碼，云服務(wù)器每續(xù)費(fèi)一年送半年

閱讀 3888·2021-11-02 14:43
印象云：21.7元/月/1GB內(nèi)存/40GB SSD空間/800GB流量/50Mbps端口/KVM/

閱讀 2279·2021-09-26 10:15
超全的App 測(cè)試工具大全，收藏這篇就夠了【附帶官網(wǎng)|GitHub地址】

閱讀 2412·2021-09-08 09:35
JavaScript “跑馬燈”抽獎(jiǎng)活動(dòng)代碼解析與優(yōu)化（一）

閱讀 607·2019-08-30 12:45
原型模式故事鏈(2)--原型鏈的四大理論

閱讀 2812·2019-08-29 17:04
MVC/MVVM 是什么？

閱讀 3241·2019-08-26 14:05
選擇文本為其添加類名

閱讀 1296·2019-08-26 12:10

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

JavaScript “跑馬燈”抽獎(jiǎng)活動(dòng)代碼解析與優(yōu)化（一）

4.1使用原型鏈擴(kuò)展

4.2將 jQuery對(duì)象中的對(duì)象添加到數(shù)組中

4.3使用 Array對(duì)象的 from()方法

相關(guān)文章