Front End Coding Style

前陣子收集整理了一些和前端相關的 Coding Style 和 Guideline,整理一下放上來。

首先是 Google 的JavaScript Coding Style,我很推薦這份規範,裡面的規範數量不少,我覺得其他幾份比較缺乏的變數命名原則在這份規範內就可以找到,更棒的是每條都有詳細的解釋,如果有想要訂規範又不想花太多時間人力來訂的話,我是建議可以直接拿 Google 的這份來用。

第二份是 jQuery 核心開發用的jQuery Core Style Guideline,因為已經有了 Google 的那份規範,這份我覺得就看過就好,其實 JavaScript 的一些開發準則都大同小異,這份規範涵蓋的內容比起 Google 的,要小上不少,比較特別的是有要求程式碼要能通過JSLint的檢查,JSLint 是我蠻喜歡的檢查工具,雖然檢查的項目很多很煩,不過所有的檢查項目都是有原因的。講到 jQuery 的 Core Style Guideline 就一定要提一下#8926這個 Issue,有人提報說 jQuery 送的活動紀念 T-shirt 上面印的程式碼沒有符合 Core Style Guideline,而且還是 blocker 等級的 issue :P。

接下來幾份規範文件就不是單純只針對 JavaScript 的了。首先是isobarCode Standard,這份文件其實很全面,不只是 HTML、JavaScript、CSS 而已,還有親和力、效率、SEO 等等的建議和規範,甚至還有推薦的工具,而且文件有持續在更新,內容相當充實,現在看到的版本就比我當初看到的時候多了不少內容。

然後是 Mozilla 的Frontend Code Standard, Mozilla 因為組織目標的關係,所以有些部分比較有趣,大方向就是朝著推廣和自由的方向前進,所以有規定像是不同 OS 不同瀏覽器的支援程度,所有專案的網站都要有多國語言支援,甚至是右到左書寫的文字也要顧到等等,有一些比較像是網站需求而不是規範性質的內容混在裡面,以前看的時候好像還有規定影音檔案也不能用商業的格式。除了這份文件外,Mozilla 另外還有一份Securing Code Guideline,整篇都是安全性相關的東西,有興趣的可以看看。

這些程式寫作規範除了有由公司或組織發表外,也是有以個人為單位發表的,Tait Brown最近就發表了一份Front End Development Guidelines,這份規範的內容就比較單純在 HTML、JavaScript、CSS 這三塊,內容我大概看過覺得還不錯,而且也不會太長,很適合新手使用。另外還有一份也很適合新手看的,也是放在Github上的教學文件,是由 Ivo Wetzel 和 Zhang Yi Jiang 做的JavaScript Garden,不過這份算是教學文件,而不是規範性質的文件。

其它的,還有一份是 Drupal 的JavaScript Coding Standards比較沒什麼特色就不另外介紹,Dojo 的則只能在 archive.org 裡面挖。國內的話相關資源就很少了,目前我只知道有 JosephJ 提供他在 D-Link 那邊建立的前端開發規範,如果還有其他人知道國內有哪裡有類似的資源有公開的話,還請不吝告知。

文章最後要介紹的是大師推薦的 Coding Style 參考資料,首先是gugod大師,據說他在今年 OSDC 推薦的是The Elements of Programming Style,是本 1978 年出版的書,當然內容應該就如書名一樣,不過我還沒時間看就是。另外一位大師就更厲害了,Douglas Crockford在他的The Elements of JavaScript Style(Part 2) 提到了The Element of Style這本 1918 年出版的英文寫作經典,要從文章寫作去連接到程式的編寫風格,我還真是到不了這層高度啊~~


jQuery 1.6.1

jQuery 1.6.1 釋出了,主要的修改就是讓我前一篇提到的 attr() 可以像下相容,如果本來因為 attr() 變動的關係不敢升上 1.6 的話,現在可以試試看 1.6.1 。


jQuery 1.6

jQuery 1.6前兩天剛出來,改變不少,其中我覺得影響最大的就是attr()prop()這兩個東西了,attr 變成完全是依照 HTML 原始碼的內容回傳東西,所以像是 checkbox 標籤的 checked 屬性:

<input type="checkbox" checked>

以前用 attr 會傳回 true,但是現在會傳回空字串,因為他沒有設定內容,如果要向以前一樣使用,變成要改用 prop 來純取屬性了,我用 jsFiddle 作了個簡單範例給大家看看:

順便趁機問問大家意見,attribute 和 properties 同時出現時,中文翻譯要怎樣區別呢?


➡ 前一個月的文章