angularjs compiler编译器

最新推荐文章于 2021-06-20 00:39:24 发布

壹间show

最新推荐文章于 2021-06-20 00:39:24 发布

阅读量1.5k

点赞数

分类专栏： angularjs 前端杂文文章标签： angualrjs compiler 编译器 directive

本文链接：https://blog.csdn.net/xpf_show/article/details/38136093

版权

前端杂文同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

angularjs

8 篇文章 0 订阅

订阅专栏

　Angular的HTML compiler允许开发者自定义新的HTML语法。compiler允许我们对任意HTML元素或属性，甚至是新的HTML标签、属性（如<beautiful girl=”cf”></beautiful >）附加行为。Angular将这些附加行为称为directives。

HTML有很多专门格式化静态文档的预定义HTML样式结构【告诉浏览器如何显示标记的内容】，假设某标签内容部分需要进行居中处理，我们仅仅需要在标签中添加属性 align="center"便可，这也就是声明式语言了。

但声明式语言也有其局限的地方，比如无法处理预定义范围之外的语法。而angular预先绑定一些对构建应用有帮助的directives【属性】,当然也可以构建自己独特的directive，而这些创建的directive将成为我们自己“特定领域语言”

还有这里需要注意的是，这些编译都仅仅发生生浏览器端，无需服务器和预编译过程。

二、接下来我们来详细的介绍下compiler

首先compiler为作为angular的一个服务，负责遍历DOM结构，寻找属性，其编译过程分为两步：

1.编译（compiler)：遍历DOM节点树，返回一个链接函数

2.链接（link):将directives绑定到一个作用域中，创建一个实况视图（view),而作用域scope中只要发生一点点变化都会更新并显示与视图上，而任何用户对模版的改变都会体现在scope model（双向数据绑定），使得scope model可以反映正确的值

一些directives，诸如ng-repeat，会为每一个在集合（collection）中的元素复制一次特定的元素（组合）。编译和链接两个阶段，使性能得以提升。因为克隆出来的模版(template)只需要编译一次，然后为每一个集合中的元素进行一次链接（类似模版缓存）

三、directive

　Directive是一个行为，在编译过程中遇到特定的HTML结构时，它会被触发。Directives可以放置在元素的name、attribute、class甚至注释中。以下是几种引用ng-bind（一个内置directive）的方法：

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

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

<ng-bind></ng-bind>

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

　Directive只是一个当编译器在DOM中遇到时会执行的一个函数（function）。directive API文档中有详细讲解如何创建一个directive。

下面是一个样例，可以让一个元素跟你的鼠标玩躲猫猫……

<!DOCTYPE html>
<html lang="zh-cn" ng-app="HideAnkSeek">
<head>
    <meta charset="UTF-8">
    <title>躲猫猫</title>
    <style type="text/css">
        .ng-cloak {
            display: none;
        }
    </style>
</head>
<body>
<span class="ng-cloak" wildcat>一碰我就跑~~来点我啊~~</span>
<script src="../angular-1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">
    angular.module("HideAnkSeek", []).directive("wildcat", function ($document) {
        var maxLeft = 400,maxTop = 300;
        var msg = ["我闪~~", "抓我呀~~~", "雅蠛蝶~~", "噢耶~~", "你真逊~！","就差那么一点点了！","继续吧~~总有一天我会累的"];
        return function (scope, element, attr) {
            element.css({
                "position":"absolute",
                "border":"1px solid green"
            });
            element.bind("mouseenter", function (event) {
                element.css({
                    "left":parseInt(Math.random() * 10000 % maxLeft) + "px",
                    "top":parseInt(Math.random() * 10000 % maxTop) + "px"
                }).text(msg[parseInt(Math.random() * 10000 % msg.length)]);
            }).bind("click",function (event) {
                        element.text("噢My Lady Gaga。。。被你逮到了。。。");
                        element.unbind("mouseenter");
                    });
        };
    });
</script>
</body>
</html>

Angular 编译器（ compiler ）通过 directives 处理 DOM ，而不是通过处理字符串模版。处理结果是一个与 scope model 组合并生成实时模版的链接函数（ linking function ）。视图与 scope model 的绑定对我们来说是透明的。开发者无须为更新视图、 model 做任何动作。而且，因为没有使用 innerHTML 更新视图模版，所以用户输入不会被打断。此外， angular directives 不仅可以绑定文本值，而且还可以是拥有行为的结构