Quantcast
Channel: 神魂顛倒論壇-Flash--Front-end網頁前端討論最新50篇論壇主題-全文
Viewing all articles
Browse latest Browse all 735

那些相見恨晚的JavaScript 技巧

$
0
0
那些相見恨晚的JavaScript 技巧

JavaScript 的成功讓人津津樂道,為Web 網頁編寫JavaScript 代碼已經是所有Web 設 計師的基本功,這門有趣的語言蘊藏著許多不為人熟知的東西,即使多年的JavaScript 程序員,也未能完全吃透。 本文 從7個方面講述JavaScript 中那些你不很熟知但非常實用的技巧。

簡略語句

JavaScript 可以使用簡略語句快速創建 對象和數組,比如下面的代碼:


可以使用簡略語句如下:

在新視窗檢視

對 象car 就此創建,不過需要特別注意,結束花括號前一定不要加";" 否 則在IE 會遇到很大麻煩。


創建數組的傳統方法是:


 

在新視窗檢視

使 用簡略語句則:


 

在新視窗檢視


另 一個可以使用簡略語句的地方是條件判斷語句:

在新視窗檢視

可 以簡略為:

在新視窗檢視

JSON 數 據格式

JSON "JavaScript Object Notation"的縮寫,由Douglas Crockford設計,JSON改變了JavaScript在緩存複雜數據格式方面的困境,如下例,假如你要描述一個樂隊,可以這樣寫:


在新視窗檢視


你可以在JavaScript中直接使用JSON,甚至作為某些API的返回數據對象,以下代碼調用著名書籤網站 delicious.com 的一個API,返回你在該網站的所有書籤,並顯示在你自己的網站:


在新視窗檢視

JavaScript 本地函數(Math, Array String)

JavaScript 有很多內置函數,有效的使用,可以避免很多不必要的代碼,比如,從 一個數組中找出最大值,傳統的方法是:

在新視窗檢視

使 用內置函數可以更容易實現:

在新視窗檢視

另 一個方法是使用Math.max() 方法:

在新視窗檢視

你 可以用這個方法幫助探測瀏覽器

在新視窗檢視

這 解決了IE 瀏覽器的一個問題,通過這種方法,你總是可以找到那個正確的值,因為瀏覽器不支持的那個值會返回undefined


還 可以使用JavaScript 內置的split() join() 函數處理HTML 對象的CSS 類名,如果HTML 對 象的類名是空格隔開的多個名字,你在為它追加或刪除一個CSS 類名的時候需要特別注意,如果該對像還沒有類名屬性,可以直接將新的類名賦予它,如果已經存在 類名,新增的類名前必須有一個空格,用傳統的JavaScript 方法是這樣實現的:


在新視窗檢視


使 用split join 方法則直觀優雅得多:


在新視窗檢視

事件代理

與 其在HTML 文檔中設計一堆事件,不如直接設計一個事件代理,舉例說明,假如你有一些鏈接,用戶點擊後不想打 開鏈接,而是執行某個事件,HTML 代碼如下:


在新視窗檢視


傳統的事件處理是遍歷各個鏈接,加上各自的事件處理:


在新視窗檢視


使用事件代理,可以直接處理,無需遍歷:

在新視窗檢視




Viewing all articles
Browse latest Browse all 735

Trending Articles