AngularJS应用开发思惟之1：声明式界面

时间 2019-11-08

标签 angularjs 应用开发思惟声明界面栏目 AngularJS 繁體版

原文原文链接

AngularJS最显著的特色是用静态的HTML文档，就能够生成具备动态行为的页面。前端

仍是前面的小时钟示例，咱们使用AngularJS模板来重写，示例已经嵌入→_→：web

HTML文件看起来像普通的HTML，只是其中多了一些特别的标记（好比：ng-app,ez-clock等等）。在Angular中，这个HTML文件被称为模板。app

ng-app这样的标记咱们称之为指令。模板经过指令指示AngularJS进行必要的操做。好比：ng-app指令用来通知AngularJS自动引导应用；ez-clock 指令用来通知AngularJS生成指定的时钟组件。框架

当AngularJS启动应用时，它会经过一个编译器解析处理这个模板文件，生成的结果就是：视图：函数

咱们定义了两个部件：模板（包含指令的HTML文件）和指令实现（JavaScript文件），AngularJS将这两部分拼装起来，生成了最终的视图。spa

有点理解框架的含义了吗？orm

咱们在模板中使用了一个自定义的标签ez-clock，而它变成了一个会动的时钟，这期间发生了什么事情?htm

确定不是浏览器干的，它不认识ez-clock是什么东西。

angular.min.js引入了基本的angularJS库，它会在浏览器载入HTML文档而且创建好DOM树后，执行如下操做：

根据咱们的定义，ez-clock的展开操做以下：

ez-clock这样的非HTML标准标签，在AngularJS中之因此称为指令/directive，就是指看到它时，基础框架须要对其进行解释，以便展开成浏览器能够理解的东西（HTML元素和脚本），而这个解释的过程被称为：编译。

可见，AngularJS框架要求将HTML文档和JavaScript代码分割的更清晰，一般混杂在 HTML文档中的JavaScript代码，须要以指令的形式进行封装，而模板、指令实现代码这两个部件，则由基础框架负责拼装运行。

将DOM操做封装成指令，更容易进行分工与代码复用。

因为AngularJS更清晰地界定了一个WEB应用的组成部分，这样，在一个团队中，能够有人负责实现指令，有人负责开发模板，各自干擅长的事情，效率更高，成本更低。

固然，从编写界面HTML模板的角度看，诸如ez-clock之类的指令比div更具备语义性，使模板更容易维护，使指令的实现升级不影响模板，这也是不小的好处了。

与咱们所熟悉的对象、函数这类接口彻底不一样，指令算是一种新型的API，它提供了在静态化的HTML文件中，植入动态行为的能力：

AngularJS内置的指令不能彻底知足实际开发的须要，一般咱们须要定义本身的指令：

好比，但愿一个DOM元素是可拖拽的，那么能够这样写：

经过ez-draggable指令，咱们赋予DOM元素可拖拽的能力。

好比，我但愿一个图片裁剪功能，那么能够这样写：

经过ez-photoshop指令，咱们定义了一个包含交互行为的web组件。

这不是AngularJS鼓励的方向，可是确实有强劲的需求。

基于前面的示例，咱们容易感觉到使用AngularJS进行应用开发的一个重要的思惟模式：从构造声明式界面入手。

事实上，我猜想这也是Misko开发AngularJS最初的动机。稍早一些的Flex、WPF和Firefox 的XUL，或多或少给了Misko启发。

在使用AngularJS进行前端开发时，始终应该从构造声明式界面模板开始，若是现成的指令不够用，那么就定义本身的指令、实现本身的指令。这是一个迭代的过程。

记住，指令是新型的API，用界面的声明化做为需求，来指导咱们的代码封装。