軟體主廚的程式料理廚房

過去我們收集了很多 JavaScript 或是 jQuery 很好用的第三方元件，而用了 AngularJS 之後，這些第三方元件就廢掉了？ - 非也。

AngularJS 是用 JavaScript 寫成的框架，並沒有限制與其他用 JavaScript 預先寫好的程式碼做結合，只是我們必須要 follow AngularJS 框架本身的 rule 而已。

我們可以將這些很好用的第三方元件做成 Directive 繼續延用，我就以一個別人寫好的 iScroll Directive 來做為範例，說明一下怎樣把第三方元件做成 Directive。

在[食譜好菜] AngularJS 基本術語及生命週期裡面有介紹到 Directive 主要分成兩種類型：行為的修飾詞（Modifier）、可重用的元件（Component），目的是給我們產生有意義的宣告，簡單來講就是實現抽象化，Directive 的使用者不需要也不必了解項目的運作方式，只要關注最終的結果就行了，我們來看一下如何建立 Directive？以及它有哪些基本的屬性？

這篇講的是 AngularJS 1.x，寫文章的當下 AngularJS 2.0 已經 RC5 了，已知 AngularJS 2.0 是不會向下相容 1.x 的。

那我為什麼還要寫 AngularJS 1.x 的文章呢？ - 用來幫助我回憶的！

以前花時間閱讀跟學習的技術，隨著時間以及很少用到，記憶會慚慚淡化，趁現在還記得幾分趕快做個筆記，尤其是技術背後本身的概念及限制，這些都會影響到我們掌握一門技術的程度。

如果我們是真的用物件導向在設計程式，那麼一定會用到抽象類的型別（Abstract Class、Interface），在現今當下的資料交換格式中，JSON 算是大家首選的格式，可是當我們的設計相依於抽象之後，序列化及反序列化就變成一個我們必須特別要處理的點，序列化倒是還好，反序列化就比較頭痛了。

JSLint 是用來驗證 JavaScript 語法的工具，JSLint 官網也提供一個編輯器讓我們線上驗證 JavaScript 語法，偵測到語法有問題的時候可以透過 JSLint Error Explanations 網站去查詢原因及解決方法。