JS 跑馬燈抽獎活動程式碼解析與優化（2）

既然是要編寫外掛。那麼叫做“外掛”的東西肯定是具有的某些特徵能夠滿足我們平時開發的需求或者是提高我們的開發效率。那麼叫做外掛的東西應該具有哪些基本特徵呢？讓我們來總結一下：

1.JavaScript 外掛一些基本特徵：

1. 配置一定要簡單
2. 外掛中定義的變數不汙染全域性變數；
3. 同一段程式碼可以在不同的地方複用；
4. 使用者可以自定義自己功能引數；
5. 具有銷燬變數和引數的功能；

如果按照以上的幾個特徵來寫外掛的話，我們可以總結出一個基本的程式碼結構，我們一個一個的來看：

1.外掛配置要儘可能的簡單

html中配置容器節點

DOM載入完成以後初始化外掛

2.外掛中定義的變數不汙染全域性變數

JavaScript 具有塊級作用域的識別符號就是function了。那我們怎麼宣告我們的變數才可以使它不汙染全域性變數呢？
這裡我們需要用到的一個 JavaScript 函式的自執行的知識點。程式碼如下：

3.在不同的地方複用功能程式碼

這就要用到我們物件導向的知識點，把我們的功能程式碼抽象成物件，在我們需要使用的時候，例項化物件就可以了。那我們接著第二部的程式碼繼續寫，

4.使用者可以自定義功能引數

首先我們應該有預設的引數設定，比如下面這樣

其實這樣寫的話，使用者已經可以修改我們的 JavaScript 檔案來完成自定義了。但是為了能夠讓我們的差價足夠的好用，比如說，我們的使用者一點兒都不懂 js 呢？該怎麼辦？
這樣我們可以把這些引數用自定義屬性配置在 html中,如下：

這樣使用者只需要在 html的節點中就可以配置當前容器執行的引數。這樣的好處還可以使同一頁面上的不同容器，可以單獨的配置引數，減少耦合。

那麼在 js 中我們該怎麼獲取這些引數呢？在上面的程式碼中，已經有了功能物件函式。那麼我們想擴充套件物件方法來獲取使用者的自定義引數，怎麼辦呢？我們一般使用prototype的東西來擴充套件我們已有物件的方法，程式碼如下：

5.銷燬變數和引數的功能；

最後一個就是我們的外掛應該具有銷燬自身變數和引數的功能。我們該怎麼寫呢？還是在上面的程式碼基礎上繼續擴充套件功能物件的可呼叫方法，程式碼如下：

由以上我們的內容我們可以大概瞭解了一個成熟的外掛應該具有的基本功能。

2.外掛開發和優化示例

剛好這個專案是在春節放假前的一個緊急的專案，當時為了趕進度就沒有詳細思考自己的程式碼結構，這樣野味自己的後續優化提供了機會。

由上一節介紹的定時器的內容可以知道 JavaScript 是單執行緒的。所以

如果一段程式碼執行效率很低，就會影響後續程式碼的執行。所以對於 JavaScript ，程式碼優化是必須的。

先來看看我們的“跑馬燈”外掛應該具有哪些功能：

1. 能夠控制燈是否自動播放；
2. 燈的旋轉方向可以控制；
3. 燈的旋轉速度可以控制；
4. 獎品的旋轉速度可以控制；

這裡就不詳細的介紹這些功能點的開發過程，僅僅介紹優化過程。如果有興趣可以看我文章最後附上的原始碼地址，進行下載閱讀。

1.“順序”獲取旋轉燈程式碼的優化

因為周圍的燈我是使用絕對定位來做的，所以我需要“順序”的獲取他們的列表，然後操作。

首先獲取 DOM節點。

然後就應該“順序”的獲取“燈”節點的 DOM 元素列表。

我的第一版是這樣做的：

因為“下”和“左”方向的燈是需要倒序的，所以我使用了兩個倒序的 for迴圈，其實當迴圈出現的時候，我們都應該思考我們的程式碼是否有可優化的空間。

優化後的程式碼是這樣子的，在這裡我減少了4次迴圈的使用

列表倒序我使用了原生 Array物件的reverse方法。

2.使用“閉包”優化順序迴圈播放

為了能夠使我們的“燈”順序的跑起來，第一版的思路是：

給每一個“燈”（注意，這裡是每一個，罪過…罪過…）定義一個setTimeout()，執行時間就是數序的加入 js 執行佇列中去。

程式碼是下面這樣子的：

這樣子寫的缺點很明顯：如果我有100個“燈”那麼就會在當前的 js 執行佇列中加入100個setTimeout()，再次強調的是我這裡又使用了for迴圈，在時間複雜度上又增加了。程式碼的執行效率又下降了。

後來思考了下，JavaScript 中“閉包”符合我當前的使用場景，就想著用閉包優化一下，優化後程式碼如下：

由以上的程式碼可以很明顯的發現兩個優點：第一，就是減少了 for迴圈的使用，降低了程式碼的時間複雜度，第二就是，每次我僅僅在當前程式碼執行的佇列中建立一個setInterval()。減小了執行佇列的複雜度。

到這裡關於“跑馬燈”外掛的程式碼解析詳和優化就已經完了。詳細的程式碼和使用文件請點選連結。如果有什麼問題可以隨時在 github 上反饋給我。

打賞支援我寫出更多好文章，謝謝！

打賞作者