[程設雜筆] 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裡:

[code language=”javascript”]
(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;//多久更新畫面一次
.
.
.
[/code]

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

[code language=”javascript”]
(function(collection){
.
.
.
})(window.collection);
[/code]

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

參考資料:

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

關於我:

我是沒一村,專長和興趣是程式、主動投資、科技商業模式。可以參考我的書單和比較熱門的文章:

分享:

Leave a Reply