angularJS之站在jQuery的肩膀上

jQuery：用更少的代碼，實現更強悍的功能

託互聯網突飛猛進發展的福，瀏覽器變成了人們接入互聯網的入口，而JavaScript 這個曾經的小語種，終於成功地站到了舞臺的中央，喚起了開發者的興趣。

瀏覽器裏原生的JavaScript有點像彙編語言，不一樣的瀏覽器就像不一樣的CPU架構， 彙編語言各有千秋，這讓前端開發者很惱火。聰明人很快發現了這個痛點，因而， 抹平瀏覽器差別的jQuery庫出現了。

jQuery由一小撮對瀏覽器極其熟稔的極客負責抹平不一樣瀏覽器的差別，其餘開發 者只須要基於jQuery進行開發，能夠更好地關注業務實現，而不是把時間花在 適配不一樣的瀏覽器上。

這樣的分工符合經濟學原理，開啓了一個不可忽視的jQuery時代。

滿眼的全是DOM

jQuery使得開發無刷新動態頁面（AJAX）或者單頁應用（SAP）變得 至關簡單。

標準的HTML頁面是靜態的，被瀏覽器渲染後就產生了一個DOM樹：

jQuery讓靜態的文檔動起來，經過提供一系列的選擇符，jQuery使開發者可以 極其方便地選中一組DOM節點，對其進行操做。

這就是jQuery的開發範式。jQuery沒有引入什麼新的概念，只是樸素地，讓你可以更簡單 地、低成本地操做DOM：

1. 用選擇符選定一組DOM節點

2. 操做選中的DOM節點，好比：修改文本、改變屬性、掛接事件監聽函數、變換DOM等等。

3. 基本不用考慮跨瀏覽器的兼容性

jQuery的API符合大多數開發者的預期，所以，很容易上手。

用jQuery實現一個小時鐘

示例演示：http://www.hubwiz.com/course/54f3ba65e564e50cfccbad4b/

咱們試着用jQuery實現一個簡單的時鐘頁面，實現思路很簡單：

• 引入jquery庫

jquery庫將建立一個全局對象：$。開發者須要的API都掛接在這個對象上。 它實際上是一個類工廠，負責將指定的DOM對象轉化爲jquery對象。

• 在DOM文檔就緒後，啓動一個定時器

使用$(document).ready()能夠監聽DOM文檔就緒事件，一般簡寫成$(...)。

• 在定時器裏更新div#clock的文本

"div#clock"是一個選擇符，使用這個選擇符，jquery庫能夠找到那個 特定的DOM對象，並將其轉化爲jQuery對象。

jquery封裝後的DOM對象有一堆的方法供你調用，咱們使用text()方法更新其文本。

Query缺失的環節

jQuery有點像C語言，威力很大，不過要弄出點像樣的前端界面，還得花很多功夫 處理瑣碎的事情。

還能再簡單些嗎？Misko Hevery認爲在某些應用場景下能夠。因而，AngularJS誕生了：

AngularJS引入了三個主要的概念，指望讓前端開發更系統化一些：

1. 聲明式界面開發

2. 雙向數據綁定

3. 使用依賴注入解耦

不少人在初次接觸AngularJS時，都有些吃驚，由於它把前端開發搞的忽然嚴肅起來 了。考慮到Misko曾經是一個Java程序員，這一切就好理解了。

Java程序員擅長引入複雜的架構來解決簡單的問題，對吧？

庫 vs. 框架

和jQuery不一樣，AngularJS是一個框架。

jQuery是一個庫，庫老是被動的，就像工具，應用的開發邏輯是你的，在 某一點上須要用一下工具，就用好了。

框架則很是不一樣，這意味着AngularJS爲應用已經搭起了一個架子，約定了 一些組成部分，而且實現了這些部分的拼裝運行。換句話說， 應用的開發邏輯是AngularJS的，你得跟着它走。

因此，AngularJS難學一些，由於它有一個架子在那，你不瞭解這個架子， 基本無法下手。

jqLite：向jQuery致敬

在DOM操做方面，沒有人比jQuery作的更好。AngularJS以一種特殊的方式 向jQuery表達了敬意：內置精簡版的jQuery - jqLite。

和jQuery同樣，jqLite兼容多個瀏覽器。

jqLite以angular.element接口提供出來，兼容jQuery API的一個子集。 在AngularJS的全部API中的element對象，都不是純粹的DOM對象，而是通過jqLite 封裝過的。

• 選擇符的問題

從開發者的角度，jqLite最明顯的精簡是不支持選擇符。你只能向 angular.element傳入一個DOM對象。看起來AngularJS將這部分功能讓位給瀏覽器 原生的支持了，咱們能夠先使用瀏覽器的querySelector得到一個DOM對象：

1. var tpl = document.querySelector('#clock');

2. angular.element(tpl).text(...);

• jQuery庫的兼容性

若是某種緣由你不肯意使用jqLite，也能夠在AngularJS以前引入jQuery庫。 AngularJS自動地將jqLite升級成jQuery，angular.element等同於 $ 。 這樣又可使用熟悉的選擇符了。

• 擴展的方法

jqLite包括一些額外的方法以適應AngularJS框架：

• controller(name) - 得到元素對應的控制器對象

• injector() - 得到元素對應的注入器對象

• scope() - 得到元素對應的做用域對象

• isolateScope() - 得到元素對應的隔離做用域對象，若是有的話。

• inheritedData() - 和data()同樣，但若是當前元素沒有指定的數據，會向上級 節點繼續找。

• 擴展的事件

jqLite還提供一個$destroy事件，當DOM對象被從DOM樹刪除時，AngularJS將觸發 這個事件，以便指令進行一些善後清理工做。

 參考資料：http://www.hubwiz.com/course/54f3ba65e564e50cfccbad4b/