AngularJS 樣式指南介紹

2016-05-19    分類：WEB開發、推薦閱讀、程式設計開發、首頁精華0人評論發表於2016-05-19
原文網址 : http://www.codeceo.com/article/angularjs-style-guides.html
AngularJS

本文由碼農網 – 唐李川原創翻譯，轉載請看清文末的轉載要求，歡迎參與我們的付費投稿計劃！

什麼是一個樣式指南?AngularJS工程需要一個樣式指南嗎？如果需要為什麼需要？最流行的AngularJS樣式指南是哪一個？在一個開發者團隊裡你如何使用一個樣式指南？本文接下來會為你回答這些問題。在我們學習AngularJS 樣式指南之前，讓我們看看一個樣式指南是什麼，並且為什麼我們開發者需要一個樣式指南。

為什麼需要樣式指南？

Wikipedia提供了一份很好的綜合定義，這份定義可以有助於你理解為什麼樣式指南很重要，而且在我們把目光聚焦在AngularJS樣式指南之前，這份定義有助於你瞭解整體的情況。

“一份樣式指南(或者樣式手冊)無論是對一般用途還是對一個具體的出版物，公司組織，還是某個領域來說，它是寫作和設計文件標準的一個集合。一份樣式指南通過確立和執行樣式來提高相互之間的交流溝通。使用一份樣式指南，它能確保在一份文件和很多交叉的文件裡內容具有相容性，並且在使用上和在語言作品，視覺作品，文字和字型上能使它們堅持最佳的實踐。在學術文件和技術文件上，一份指南在倫理學(例如作者身份,研究倫理學,和公開研究)，在教育學(例如闡述和明晰)，和在承諾(技術和管理)上都能使它們堅持最佳實踐。”

編碼樣式指南堅持最佳實踐涉及到一個獨特的語言和涉及到你公司的需要。

專案樣式指南

JavaScript專案需要使用一份樣式指南的原因有很多。我不準備在本文詳細羅列所有的原因,但是它們通常通過下面傳統的主題來闡述該語言的樣式指南:

  • 1.模組化:單功能性，立即呼叫函式表示式，模組相關性。
  • 2.應用程式結構：建築模式，資料夾結構。
  • 3.命名規則：為模組，控制器，配置檔案和說明檔案。
  • 4.聆聽：JavaScript程式碼檢查者。(JavaScript Linting介紹連結地址:http://www.cnblogs.com/agile30353/articles/3377740.html)
  • 5.測試：在編寫說明書裡的方法。
  • 6.註解：用來產生文件。
  • 7.啟動邏輯：配置，啟動邏輯。
  • 8.路由：導航流程，檢視構成。
  • 9.異常處理：裝飾模式，異常捕獲，路由錯誤。
  • 10.效能和安全：優化，程式碼混淆。

現存的JavaScript樣式指南

對於JavaScript來說，它有很多常規的和專案特有的樣式指南:

儘管它們是名人，但是上面提到的樣式指南沒有一個是完全是綜合性的。我認為，Airbnb樣式指南在所有的指南里是最新的而且是最完整的,它提供了eslint配置檔案，有了這個檔案，它就可以自動幫你檢查你的程式碼樣式。Eslint配置檔案可以被擴充套件，當我構建我自己的網站時我就是這麼做的。

Eslint介紹連結地址: http://www.jianshu.com/p/2bcdce1dc8d4

AngularJS專案需要一個樣式指南原因幾乎和所有JavaScript專案需要一個樣式指南的原因相同，但是這裡有一些Angular具體的專案需要被提及。

讓我們思考一下下面AngularJS具體的示例:

如何使用ng標籤：AngularJS 的ng指令可以通過不同的方式來使用，並且該指令有不同的語法，例如為了符合W3C標準，當使用ng指令作為一個HTML屬性時，應使用data-ng而不是ng。在一份程式碼樣式指南里說明如何編寫ng指令有助於在HTML檔案裡提高程式的一致性。

AngularJS的ng指令介紹連結地址: http://www.cnblogs.com/937522zy/p/4987463.html

實現元件的不同方式。AngularJS使用定製的指令來實現web元件。定製指令可以基於HTML元素名,屬性,class名和註解。例如在一個專案裡,一個樣式指南應該確保僅僅只有一種型別的指令被使用。

採用哪一種架構模式。AngularJS為MV*(或者MVW)架構模式留了後路。它把選擇權交給JavaScript開發者,讓開發者來決定他們的應用是否基於MVC或者MVVM架構來開發。在開發項中選擇哪種模式的指導方針是,該模式能使整個團隊保持步調一致。

MV*模式介紹連結地址: http://www.kancloud.cn/kancloud/learn-js-design-patterns/56454

現在我們有了樣式指南是幹什麼的概念了,我們現在把目光聚焦在存在的AngularJS樣式指南上。

AngularJS樣式指南

Google提供了官方的樣式指南和最佳實踐,但是最流行的和綜合性最好的指南是來自AngularJS社群:

很難說上面哪個最好,因為它們都是很好的樣式指南。John Papa的指南全面的而且不斷改善,Todd Motto的指南簡潔而容易上手,而Minko Gechev的指南被翻譯成了不同語言的版本。但是似乎John Papa的樣式指南作為最流行的和最詳細的AngularJS樣式指南而被官方正式推薦給了開發者。

當開始一個全新的AngularJS專案時,我認為在Jonh Papa樣式指南里下面這些AngularJS的具體點是最重要的,而且需要考慮的:

  • LIFT原則
  • 控制器語法
  • 檔案模板和程式碼片段
  • 種子應用

LIFT原則

LIFT原則涉及到app結構和如下明確的指導方針:

LIFT原則連結地址: https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#application-structure-lift-principle

1.快速定位你的程式碼

2.快速識別程式碼

3.儘可能保持最淺的結構

4.試著保留DRY程式設計方式(DRY程式設計介紹連結地址: http://www.51edu.com/it/bckf/261481.html)

這使得應用架構更加具有可擴充套件性和使得開發者開發更加有效率,因為能更加快速地找到程式碼。使用一個資料夾功能結構也有助於遵循這個原則。

Folders-by-feature structure連結地址: https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#folders-by-feature-structure

ControllerAs

使用controllerAS語法而不是’$scope經典的控制器’語法,在檢視中這種做法使得程式碼更加容易閱讀:

controllerAS連結地址: https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#controlleras-controller-syntax

<!-- avoid -->
<div ng-controller="CustomerController">
    {{ name }}
</div>

<!-- recommended -->
<div ng-controller="CustomerController as customer">
    {{ customer.name }}
</div>

而在控制器裡:

/* avoid */
function CustomerController($scope) {
    $scope.name = {};
    $scope.sendMessage = function() { };
}

/* better */
function CustomerController() {
    this.name = {};
    this.sendMessage = function() { };
}

更進一步的，通常是建議把this分配給一個變數，這樣做你就可以在你的控制器方法裡很容易地訪問到它:

/* recommended */
function CustomerController() {
    var customerVM = this;
    customerVM.name = {};
    customerVM.sendMessage = function() {
        // we can access the controller's scope as customerVM
    };
}

檔案模板和程式碼片段

在John Papa的指南里，為不同的編輯器和整合開發環境列出了很多的檔案模板和程式碼片段。使用檔案模板和程式碼片段可以保證在不同的檔案，不同的模組，和不同的子系統之間相協調，而且特別是如果你在一個團隊裡工作,在你程式碼重構或者當新的開發者加入你的團隊時，這樣做可以省很多時間。這樣做，也可以使得程式碼更加整潔和可重複使用。

File templates and snippets連結地址: https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#file-templates-and-snippets

種子應用

當你開始著手一個新的AngularJS專案時，如果你時間緊急，或者你想短時間內通過一個完整地示例來學習，HotTowel是一個值得考慮的選擇。Yeoman創始者開發了一款app，用來作為你遵循John Papa樣式指南來開始開發你的AngularJS應用的開始點。開發的應用被使用一個npm包，一個gulpfile，JavaScript指令碼和LESS提示配置好了，所以，如果你沒有特別的需要，所有你需要做的是實現新功能!你可以在GitHub上我的AngularJS頁面裡瀏覽和執行一個用HotTowel生成的AngularJS應用。

HotTowel連結地址: https://github.com/johnpapa/generator-hottowel

HotTowel介紹連結地址: https://segmentfault.com/a/1190000003858219

Yeoman連結地址: http://yeoman.io/

Yeoman介紹連結地址: http://www.cnblogs.com/dreamFromHere/p/3511319.html

Npm介紹連結地址: http://my.oschina.net/fzxgg/blog/610094

Gulpfile介紹連結地址: http://blog.csdn.net/qq_27080247/article/details/50773592

LESS介紹連結地址: http://blog.csdn.net/turingty/article/details/49851543

一個現實生活中的例子

在實際的專案中使用樣式指南的例子是GoCardless AngularJS Styleguide，在Gocardless AngularJS Styleguide裡你可以找到更多具體的和不斷改善的程式碼片段。它在HTML裡推動了使用指令而不是使用控制器。看看這個例子裡關於指令名的指南:

GoCardless AngularJS Styleguide連結地址: https://github.com/gocardless/angularjs-style-guide

“指令名必須僅包含a-z字母和至少一個連線號(-)。原因是:通常使用的元素必須有一個連線號(名稱空間)來把它們和本地元素區分開來,同時預防在以後出現元件衝突的情況。”

<!-- Recommended -->
<dialog-box></dialog-box>
<button click-toggle="isActive"></button>

<!-- Avoid -->
<dialog></dialog>
<button toggle="isActive"></button>

GoCardless樣式指南是基於你的團隊和專案需要從上述提到的自定義和通用的樣式指南中得到啟發的最好的開始點。

在一個團隊裡使用樣式指南

程式碼樣式指南應該是大多數AngularJS專案所需的輸入，特別是當希望專案能被快速開發完成或者團隊是新組建的時候。當然,在一個專案開發進行期間，程式碼樣式指南需要一直存在，而且每當有新的需求或者新的探索要求提出的時候，程式碼樣式指南應該隨著新的需求和提出的新的探索要求而來做出改變或者擴充套件。

未來:2016年和以後

在不久的將來，一切事情變化的飛快。接下來的挑戰是為AngularJS2更新樣式指南，特別是關於web元件的事態發展,ECMAScript2015(ES6)的發展，和ECMAScript2016的發展，以及之後ECMAScript的發展。

我想聽到其他人關於樣式指南的經歷，可以是Angular，也可是是JavaScript的。我錯過了某些非常好的指南嗎，或者任何你知道的特別有爭議的指南嗎？請讓我在評論區看到你的評論!

譯文連結：http://www.codeceo.com/article/angularjs-style-guides.html
英文原文：An Introduction to AngularJS Style Guides
翻譯作者：碼農網 – 唐李川
[ 轉載必須在正文中標註並保留原文連結、譯文連結和譯者等資訊。]

相關文章