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/