AngularJS HTML编译器介绍


Posted in Javascript onDecember 06, 2014

概览

AngularJS的HTML编译器能让浏览器识别新的HTML语法。它能让你将行为关联到HTML元素或者属性上,甚至能让你创造具有自定义行为的新元素。AngularJS称这种行为扩展为“指令”

HTML在编写静态页面时,有很多声明式的结构来控制格式。比如你要把某个内容居中,你不必告诉浏览器“去找到窗口的中点位置,然后跟内容的中间结合”。你只需要添加一个 align="center" 的属性给需要内容居中的元素就行了。这就是声明式语言的强大之处。

但是声明式语言也有力所不能及的地方,原因之一在于你不能用它来让浏览器识别新的语法。比如说,你不要内容居中,而是居左到1/3,这时它就做不到了。所以我们需要一个办法让浏览器能学会新的HTML语法。

AngularJS生来自带一些对创建APP非常有用的指令。我们也希望你能自己创造一些对你自己的应用有用的指令。这些扩展的指令就是你创建APP的 “特定领域语言(Domain Specific Language)”。

编译的过程都会在浏览器端发生;服务器端不会参与到其中的任何步骤,也不会做预编译。

编译器(complier)

编译器是AngularJS提供的一项服务,它通过遍历DOM来查找和它相关的属性。整个编译的过程分为两个阶段。

1.编译: 遍历DOM并且收集所有的相关指令,生成一个链接函数。

2.链接: 给指令绑定一个作用域,生成一个动态的视图。作用域模型的任何改变都会反映到视图上,并且视图上的任何用户操作也都会反映到作用域模型。这使得作用域模型成为你的业务逻辑里唯一要关心的东西。

有一些指令,比如ng-repeat会为数据集合里的每一项DOM元素都克隆一次。将整个编译过程分为编译和链接两个阶段的作法改善了整体的性能,因为克隆出来的模板总共只需要被编译一次,然后链接到各自的模型实例上就行了。

指令

指令指示的是“当关联的HTML结构进入编译阶段时应该执行的操作”。指令可以写在元素的名称里,属性里,css类名里,注释里。下面有几个功能相同的使用ng-bind指令的例子。

<span ng-bind="exp"></span>

<span class="ng-bind: exp;"></span>

<ng-bind></ng-bind>

<!-- directive: ng-bind exp -->

指令本质上只是一个当编译器编译到相关DOM时需要执行的函数。你可以在指令API文档中找到更详尽的关于指令的资料。

下面是一条能让元素变得可拖拽的指令。注意<span>元素里的那个draggable属性。

index.html:

<!doctype html>

<html ng-app="drag">

  <head>

    <script src="http://code.angularjs.org/angular-1.1.0.min.js"></script>

    <script src="script.js"></script>

  </head>

  <body>

    <span draggable>Drag ME</span>

  </body>

</html>

script.js:

angular.module('drag', []).

directive('draggable', function($document) {

    var startX=0, startY=0, x = 0, y = 0;

    return function(scope, element, attr) {

      element.css({

       position: 'relative',

       border: '1px solid red',

       backgroundColor: 'lightgrey',

       cursor: 'pointer'

      });

      element.bind('mousedown', function(event) {

        startX = event.screenX - x;

        startY = event.screenY - y;

        $document.bind('mousemove', mousemove);

        $document.bind('mouseup', mouseup);

      });
      function mousemove(event) {

        y = event.screenY - startY;

        x = event.screenX - startX;

        element.css({

          top: y + 'px',

          left:  x + 'px'

        });

      }
      function mouseup() {

        $document.unbind('mousemove', mousemove);

        $document.unbind('mouseup', mouseup);

      }

    }

 });

通过加入draggable属性可以让任何HTML元素都实现这个新的行为。我们这种改进的优美之处在于我们给了浏览器新能力。我们用了一种只要开发者熟悉HTML规则,就会举得很自然的方式扩展了浏览器理解新行为新语法的能力。

理解视图

网上有很多的模板系统。他们大多数都是“将静态的字符模板和数据绑定,生成新字符,然后通过innerHTML插入到页面元素中”。

这意味着数据上的任何改变,都会导致数据要重新和模板结合生成新字符,再插入到DOM里。这其中会出现的问题有:需要读取用户输入并和模型的数据结合,需要覆写用户的输入,需要手动管理整个更新过程,缺少丰富的表现形式。

AngularJS则不同,AngularJS编译器使用的是带指令的DOM,而不是字符串模板。它返回的是一个链接函数,这个函数和作用域模型结合就会生成一个动态视图。这个视图和模型的绑定过程是“透明的”。开发者不需要做任何关于更新视图的工作。并且应用没有用到innerHTML,所以我们也不用覆写用户的输入。更特别的是,Angular的指令不仅仅能使用字符串形式的绑定,还可以使用一些指示行为的结构体。

AngularJS的编译会生成一个“稳定的DOM”。这意味绑定了数据模型的DOM元素的实例不会在绑定的生命周期中发生改变。这也意味着代码中可以获取到DOM元素的实例引用并注册事件,不用担心这用引用会在模板和数据的结合时丢失。

Javascript 相关文章推荐
Ubuntu 11.10 安装Node.js的方法
Nov 30 Javascript
通过js获取div的background-image属性
Oct 15 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
Nov 03 Javascript
Angularjs中controller的三种写法分享
Sep 21 Javascript
深入理解requireJS-实现一个简单的模块加载器
Jan 15 Javascript
Vue Prop属性功能与用法实例详解
Feb 23 Javascript
基于Fixed定位的框选功能的实现代码
May 13 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
May 28 Javascript
JavaScript定时器设置、使用与倒计时案例详解
Jul 08 Javascript
vue使用video.js进行视频播放功能
Jul 18 Javascript
Vue2.0 $set()的正确使用详解
Jul 28 Javascript
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
AngularJS初始化过程分析(引导程序)
Dec 06 #Javascript
什么是 AngularJS?AngularJS简介
Dec 06 #Javascript
AngularJS入门教程(二):AngularJS模板
Dec 06 #Javascript
AngularJS入门教程(一):静态模板
Dec 06 #Javascript
AngularJS入门教程(零):引导程序
Dec 06 #Javascript
AngularJS入门教程之学习环境搭建
Dec 06 #Javascript
AngularJS入门教程之Hello World!
Dec 06 #Javascript
You might like
PHP如何解决网站大流量与高并发的问题
2011/06/25 PHP
PHP中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
2011/11/10 PHP
php使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
PHP+ajax分页实例简析
2015/12/07 PHP
PHP实现活动人选抽奖功能
2017/04/19 PHP
利用javascript/jquery对上传文件格式过滤的方法
2009/07/25 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
2013/01/10 Javascript
Extjs优化(二)Form表单提交通用实现
2013/04/15 Javascript
node.js中的fs.writeSync方法使用说明
2014/12/15 Javascript
js简单抽奖代码
2015/01/16 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
自己动手制作基于jQuery的Web页面加载进度条插件
2016/06/03 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
2016/11/30 Javascript
React Native实现地址挑选器功能
2017/10/24 Javascript
JavaScript两种计时器的实例讲解
2019/01/31 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
JavaScript实现原型封装轮播图
2020/12/27 Javascript
python字符串替换示例
2014/04/24 Python
Python使用turtule画五角星的方法
2015/07/09 Python
Python中的数学运算操作符使用进阶
2016/06/20 Python
Python PyQt4实现QQ抽屉效果
2018/04/20 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
python+splinter自动刷新抢票功能
2018/09/25 Python
python+ffmpeg批量去视频开头的方法
2019/01/09 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
Django admin禁用编辑链接和添加删除操作详解
2019/11/15 Python
OpenCV 之按位运算举例解析
2020/06/19 Python
vue.js刷新当前页面的实例讲解
2020/12/29 Python
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
2013/07/04 HTML / CSS
【HTML5】Canvas绘制简单图片教程
2016/05/13 HTML / CSS
WiFi云数码相框:Nixplay
2018/07/05 全球购物
2014年扶贫工作总结
2014/11/18 职场文书
贪污受贿检讨书范文
2014/11/19 职场文书
Mysql 如何实现多张无关联表查询数据并分页
2021/06/05 MySQL
MySQL下载安装配置详细教程 附下载资源
2022/09/23 MySQL