我寫JavaScript程式碼已經很久了，我都記不起是什麼年代開始的了。對於JavaScript這種語言近幾年所取得的成就，我感到非常的興奮；我很幸運也是這些成就的受益者。我寫了不少的文章，章節，還有一本專門討論它的書，然而，我現在依然能發現一些關於這種語言的新知識。下面的描述的就是過去讓我不由得發出「啊！」的感嘆的程式技巧，這些技巧你應該現在就試試，而不是等著未來的某個時候偶然的發現它們。
代碼如下: var direction = x 條件為true 時取問號後面的值，否則取冒號後面的值。
用 JSON 形式儲存資料
在我發現JSON之前，我使用各種瘋狂的方法把資料存貯在JavaScript固有的資料類型裡面，例如：數組，字串，中間夾雜著容易進行拆分的標誌符號以及其它的令人討厭的東西。 Douglas Crockford 發明了JSON 之後，一切都變了。使用JSON，你可以使用JavaScript自有功能把資料存貯成複雜的格式，而且不需要再做其它的額外轉換，直接可以存取使用。 JSON 是 “JavaScript Object Notation” 的縮寫，它用到了上面提到的兩種簡寫方法。於是，如果你想描述一個樂隊，你可能會像這樣寫：
var band = {
var band = {
"members":[
{
"name":"Anthony Kiedis",
"role":"Anthony Kiedis",
{
"name":"Michael 'Flea' Balzary",
"role":"bass guitar, trumpet, backing vocals" "role":"drums,percussion"
},
{
"name":"John Frusciante",
"name":"John Frusciante",
"name":"John Frusciante" }
],
"year":"2009"
}
你可以在JavaScript裡直接使用JSON，可以把它封裝在函數裡，甚至作為一個API的回傳值形式。我們把這稱為 JSON-P ，很多的API都使用這種形式。
你可以調用一個數據提供源，在script代碼裡直接返回JSON-P 數據：
<script><BR> function delicious(o){<BR> var out = '<ul>';<BR> for(var i=0;i<o.length;i ){<BR> out = '<li><a href="' o[i].u '">' <BR> o[i] .d '';<BR> }<BR> out = '';<BR> document.getElementById('delicious').innerHTML = out document.getElementById('delicious').innerHTML = out document.getElementById('delicious').innerHTML = out document.get 🎜> </script>
這是呼叫Delicious 網站提供的Web service 功能，取得JSON格式的最近的無序書籤清單。
基本上，JSON是最輕的描述複雜資料結構的方法，而且它能在瀏覽器裡運作。你甚至可以在PHP裡用 json_decode() 函數來運行它。 JavaScript的自帶函數(Math, Array 和 String)讓我感到驚訝的一個事情是，當我研究了JavaScript裡的math和String函數後，發現它們能極大的簡化我的程式設計勞動。使用它們，你可以省去複雜的循環處理和條件判斷。例如，當我需要實作一個功能，找出數字數組裡最大的一個數字時，我過去是這樣寫出這個循環的，就像下面：
var numbers = [3,342,23,22,124];
forvar max = 0 var max = 00( ;i if(numbers[i] > max){
max = numbers[i];
} numbers[i];
} ); 🎜>
我們不用循環也能實現：
複製程式碼
複製程式碼
複製程式碼複製程式碼 程式碼 var numbers = [3,342,23,22,124]; numbers.sort(function(a,b){return b - a}); );
要注意的是，你不能對一個數字字元陣列進行 sort() ，因為這種情況下它只會按照字母順序進行排序。如果你想知道更多的用法，可以閱讀 這篇不錯的關於 sort() 的文章。
再有一個有趣的函數就是 Math.max()。這個函數返回參數里的數字裡最大的一個數字：
Math.max(12,123,3,2,433,4); // returns 433
因為這個函數能夠校驗數字，並且回傳其中最大的一個，所以你可以用它來測試瀏覽器對某一特性的支援：
Math.max(
doc.documentElement.scrollTop,
doc.body.scrollTop
);
這個是用來解決問題的。你可以得到目前頁面的scrollTop 值，但根據頁面上DOCTYPE的不同，上面這兩個屬性中只有一個會存放這個值，而另一個屬性會是undefined，所以你可以透過使用Math.max() 得到這個數。閱讀這篇文章你會得到更多的關於使用數學函數來簡化JavaScript的知識。
另外有一對非常有用的操作字串的函數是 split() 和 join()。我想最具代表性的例子應該是，寫一個功能，用來給頁面元素附加CSS樣式。
是這樣的，當你給頁面元素附加一個CSS class時，要么它是這個元素的第一個CSS class，或者是它已經有了一些class, 需要在已有的class後加上一個空格，然後追加上這個class。而當你要去掉這個class時，你也需要去掉這個class前面的空格(這個在過去非常重要，因為有些老的瀏覽器不認識後面跟著空格的class)。
於是，原始的寫法會是這樣：
程式碼如下:
程式碼如下: function addclass(elm,newclass){
var c = elm.className;
elm.className = (c === '') ? newclass : c ' ' newclass; 使用split() 和join() 函數自動完成這個任務：
function addclass(elm,newclass){
var classes = elm.className.split(' ');
classes.push(newclass);
o. ); }
這會確保所有的class都被空格分隔，而且你要追加的class正好放在最後。
事件委派
Web應用都是由事件驅動運轉的。我喜歡事件處理，尤其喜歡自己定義事件。它能使你的產品可擴展，而不用改動核心程式碼。有一個很大的問題（也可以說是功能強大的表現），是關於頁面上事件的移除問題。你可以對某個元素安裝一個事件監聽器，事件監聽器就開始運作工作。但頁面上沒有任何指示說明這有個監聽器。因為這種不可表現的問題(這尤其讓一些新手頭疼) ，以及像IE6這樣的”瀏覽器“在太多的使用事件監聽時會出現各種的內存問題，你不得不承認盡量少使用事件編程是個明智的做法。
於是 事件委託 就出現了。
複製程式碼 程式碼如下:
常見的做法是透過循環這些鏈接，將每個連結上附加一個事件處理器：
// 典型的事件處理範例
(){
var resources = document.getElementById('resources');
var links = resources.getElementsByTagName('a');
=0;i
// Attach a listener to each link
links[i].addEventListener('click ); (e){
var x = e.target; // Get the link that was clicked
alert(x);
);
我們用一個事件處理器也能完成這項任務：
複製程式碼
複製程式碼
複製程式碼
程式碼如下:
(function(){
var resources = document.getElementById('resources');
resources。 > function handler(e){
var x = e.target; // get the link tha
if(x.nodeName.toLowerCase() === 'a'){ e.preventDefault(); }
};
})();
免責聲明：上面說的這兩個關於事件的例子，在所有瀏覽器裡都能運行，除了IE6，在IE6上你需要使用一個事件模型，而不是簡單的W3C的標準實現。這也就是我們推薦使用一些工具包的原因。
這種方法的好處並不是只限於把多個事件處理器縮減為一個。你想想，舉個例子，你需要動態的往這個連結表裡追加更多的連結。使用事件委託後，你就不需要做其它修改了；否則的話，你需要重新循環這個連結表，重新給每個連結安裝事件處理器。
匿名函數與模組化
在JavaScript裡最令人懊惱的事情是變數沒有使用範圍。任何變量，函數，數組，對象，只要不在函數內部，都被認為是全局的，這就是說，這個頁面上的其它腳本也可以訪問它，而且可以覆蓋重寫它。
解決方法是，把你的變數放在一個匿名函數內部，定義完之後立即呼叫它。例如，以下的寫法將會產生三個全域變數和兩個全域函數：複製程式碼
程式碼如下:
var name = 'Chris';
var age = '34';
var status = 'single';
function createMember(){ ]
}
function getMemberDetails(){
// [...]
}
如果這個頁面上的其它腳本裡也存在一個叫 status 的變量，麻煩就會出現。如果我們把它們封裝在一個myApplication 裡，這個問題就迎刃而解了：
程式碼如下:
程式碼如下:
var myApplication = function(){
var name = 'Chris';
var age = '34';
var status = 'singleingle';
🎜> // [...]
}
function getMemberDetails(){
// [...] >但是，這樣一來，在函數外面就沒有什麼功能了。如果這是你需要的，那就好了。你也可以省去函數的名稱：
(function( ){
var name = 'Chris';
var age = '34';
var status = 'single';
function crevar status = 'single';
function createMember(){
}
function getMemberDetails(){
// [...]
}
能使用裡面的東西，那就做些修改。為了能存取createMember() 或getMemberDetails(),你需要把它們變成myApplication的屬性，從而把它們暴露於外部的世界:
複製程式碼
程式碼如下: var myApplication = function(){
var name = 'Chris';
d = 'single';
return{
createMember:function(){
/// [...]
// [. ..]
}
}
}();
//myApplication.createMember() 及
cation.getMember/mytail.getMember 就可以使用了。
[code]
這被稱為 module 模式或 singleton。 Douglas Crockford 多次談到這些，Yahoo User Interface Library YUI 裡對此有大量的使用。但這樣一來讓我感到不便的是，我需要改變句式來讓函數和變數能被外界存取。更甚者，呼叫時我還需要加上myApplication 這個前綴。所以，我不喜歡這樣做，我更願意簡單的把需要能被外界訪問的元素的指針導出。這樣做後，反倒就簡化了外在召喚的寫法：
[code]
var myApplication = function(){
var name = 'Chris';
var age = '34';
var status = 'single';
function createMember(){
// [...]
} }
return{
create:createMember,
get:getMemberDetails
可設定化
一旦我把所寫的JavaScript程式碼發佈到這個世界上，就有人想改動它，通常是人們想讓它完成一些它本身完成不了的任務—但通常也是我寫的程式不夠靈活，沒有提供使用者可自訂的功能。解決辦法是為你的腳本增加一個配置項物件。我曾經寫過一篇深入介紹JavaScript設定項物件的文章，以下是其中的重點：
在你的腳本了新增一個叫做configuration的物件。
這個物件裡面，存放所有人們在使用這個腳本時經常要改動的東西：
CSS ID 和類別名稱;
按鈕的名稱，標籤字等;
諸如」每頁顯示圖片數”的值， “圖像的顯示的尺寸”的值;
地點，位置，以及語言設定。
將這個物件作為一個公用屬性傳回給用戶，這樣用戶可以修改覆寫它。
通常情況下這是你程式設計過程中的最後一步要做的事情。我把這些集中表現在了一個例子裡： “Five things to do to a script before handing it over to the next developer.”
實際上，你也希望你的程式碼能讓人們很方面的使用，並且根據他們各自的需要進行一些改動。如果你實現了這個功能，你會少收到一些抱怨你的腳本的人發送給你的讓你困惑的郵件，這些信件會告訴你，有人修改了你的腳本，而且很好用。
與後台互動
在這麼多年的程式設計經驗中，我所領悟到的一個重要的事情就是，JavaScript是一個很優秀的開發介面互動的語言，但如果用來處理數位或存取資料來源，那就有點使不上勁了。
最初，我學習JavaScript，是用來取代Perl的，因為我很討厭非要把程式碼拷貝到 cgi-bin 資料夾下才能讓Perl運作。後來，我明白了應該使用一種後台工作的語言來處理主要的數據，而不能什麼事情都讓JavaScript去做。更重要的是我們要考慮安全性和語言特徵。
如果我訪問一個Web service, 我可以獲取到JSON-P 格式的數據，在客戶端瀏覽器裡我把它做各種各樣的數據轉換，但當我有了伺服器時，我有了更多的方法來轉換數據，我可以在Server端產生JSON或HTML格式的數據回傳給客戶端，以及快取資料等操作。如果你事先了解了並準備了這些，你會長期收益，省去了很多頭痛的時間。編寫適用各種瀏覽器的程式是種浪費時間，使用工具包吧！
在我最初開始搞Web開發時，在訪問頁面時，究竟是使用 document.all 還是使用 document.layers 的問題上痛苦的掙扎了很久。我選擇了 document.layers，因為我喜歡任何層都是自己的document的思想 (而且我寫了太多的 document.write 來產生元素)。層模式最終失敗了，於是我開始使用 document.all。當Netscape 6 公佈只支援 W3C DOM 模型時，我很高興，但其實使用者並不關心這些。使用者只是看見這種瀏覽器不能顯示大多數瀏覽器都能正常顯示的東西—這是我們編碼的問題。我們寫了短視的程式碼，只能運行在目前的環境下，但不幸的是，我們的運行環境卻在不停的改變。
我已經浪費了太多的時間來處理對各種瀏覽器各種版本相容的問題。善於處理這類問題提供了我一個好的工作機會。但現在我們不必在忍受這種痛苦了。
一些工具包，例如 YUI, jQuery 以及Dojo 都能夠幫我們處理這類問題。它們透過抽象化各種介面實作來處理瀏覽器的各種問題，像是版本不相容，設計缺陷等，把我們從痛苦中解救出來。除非你要測試某個Beta版的瀏覽器，千萬不要在自己的程式裡加入修正瀏覽器的缺陷的程式碼，因為你很有可能當瀏覽器已經修改了這個問題時，你卻忘了刪除你的代碼。
另一方面，完全依賴工具包也是個短視的行為。工具包可以幫你快速的開發，但如果你不深入理解JavaScript，你也會做錯事。
