程式設計雜筆

[程設雜筆] Javascript self-executing anonymous function

剛仔細研究自己的rippledot.js的程式碼結構,我發現真的是慘不忍睹,所以我打算把它做個修改一下。不見得能修的很完美,但我想,把他弄的更有還輯性,更易讀是應該的。

 

這是修改前的程式碼:

https://github.com/i314i/RippleDot/blob/7c183cdeee40e3c226c925e642136d8449bb482b/js/RippleDot.js

修改後:

https://github.com/i314i/RippleDot/blob/gh-pages/js/RippleDot.js

本來我的程式碼是一塊一塊散落的,想到什麼就加什麼。譬如說現在我要個vector的物件好了,那我就宣告個vector的物件,那我還要什麼東西,我就再宣告個什麼東西。然後一直加到我的程式碼中,所以可讀性就變的很低,也不太好維護。

以變數來說,我也是想到什麼常數,就直接通通設到檔案的最上面,導致我的canvas和context等「真正是全域」的變數,反而和一些比較屬於ripple的各個小特性的常數混淆在一起。修改後,丟到anonymous function裡:

(function(collection){
        var RADIUSMAX=30;//max radius
        var RADIUSMIN=5;//min radius
        var colors=['#FF0000','#FF8000','#FFFF00','#00FF00','#0000FF','#8000FF'];//colors
        var GENERLOOPTIMES=20000;//迴圈跑20000次
        var STARTVELOCITY=0.2;//初速
        var RIPPLEWIDTH=40;//ripple 的寬度
        var RIPPLEINTERVAL=100;//水波的速度
        var UPDATEINTERVAL=20;//多久更新畫面一次
.
.
.

再者,把所有function物件(可能是寫java寫很久了,我很習慣用function來當我的物件宣告。不過事實上,在javascript裡,function和物件根本就是一體兩面的東西。)都丟到全域去宣告,除了可讀性低之外,也有一個不好,那就是你定義完的function會一直留在那邊(這個我真的不知道怎麼解釋。)如果把它放到anonymous function裡的話,就不會「汙染」到其它程式碼,也就是你的function物件的instance只有一個,也就是你的anonymous function self-executing的時候,你所丟進去的那個全域變數。

(function(collection){
.
.
.
 })(window.collection);

以上是我對我的程式碼所做的一些修改,也是我個人的一些理解,也不見得是正確的。雖然還不是最頂級最精簡的寫法,不過我想已經朝一個優秀的程式設計師邁進了XD

參考資料:

http://esbueno.noahstokes.com/post/77292606977/self-executing-anonymous-functions-or-how-to-write

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s