简述AngularJS相关的一些编程思想

在过去的几个月里,我一直遨游于Angular的世界。如今回想起来,很难想象在没有类似于Angular.js, Backbone.js以及其伙伴Underscore.js这些数据绑定框架下我每天如何去编写一个大型前端应用。我不敢相信我已经用它们完成了那件工作。

可能我有点小偏见,但考虑到我一直在做的应用是在浏览器中实现Photoshop类型的编辑器,它呈现相同的数据有几种完全不一样的方式。

    图层以图形化的形式呈现,占据了屏幕的大部份。它们列于一个面板内,你可以删除它们。

    当你选中一个图层时,它的边缘会被虚线包围,同时会高亮显示于列表中。

    类似地,图层在面板中的尺寸和它们的大小这些属性取决于画布。

    我上面提到过的面板是可以拖拽,折叠,关闭的。


如果不是一个像Augular的框架,这一种类的互动、数据连接和视图同步很容易变成一个持续的噩梦。有能力修正一个地方的模型和用Augular修正所有相关的视图听起来几乎像在骗人。添加、消除或者改动一个层次只是一个改变对象的问题。层次,x+=10,完成。并没有地方需要手动作废视图、手工地修改在DOM的层次中的每一个实例,甚至是因为这个问题而去与DOM互动。

Augular使我们可以去到我们从未想过的地方,像设置一串使我们能够在现有的环境下做出申请的键盘捷径。举个例子,文件编辑捷径(像?B:用于切换黑体文本)只是使我们能够编辑一个文件层面。

201562395829701.png (151×117)

同样地,我们为这些快捷键附加了一个描述(通过一个我们创建的服务进行注册),然后我们可以显示一个快捷键的列表,同时还有它们的描述,在一个便利条上。此外,我们写了一个指令使得我们可以将单独的DOM元素与它们的快捷键绑定在一起,当你的鼠标在元素上停留一会,会出现一个提示,让你知道此时可用的快捷键。

    Angular可以使我们做到我们做梦也想不到的事情。

老实说,这就好像我们已经不是在编写一个web应用。web只是媒介。当我们增进了我们对Angular的理解后,代码变得更加模块化,更加独立,并且更加连接交互。它很自然地变得更加Angular了。


然后通过Augular,我的意思是在Augular背后的那些高度互动的丰富的应用开发哲学。javascript,一个让我们能够开发那些一段时间前我们还觉得不可能的一部分软件的相似的东西。

201562395953032.png (816×304)

我们甚至有能力去开发一个成熟的用于修改DOM变成历史中现在选中的点的历史控制板,并让它工作得很好。至少可以这么说,当你兴奋的返回历史控制板查看那些与Augular能力相关的数据在你的视图工作中完美的更新每一个微小的细节。

那并不总是容易的,基本代码总是变成一场无可控制的混乱。
 

的确,在过去几周里我们一直在更新并且将我们的前端整个架构重写。在我们开始重新编写以前,看一下自从0.10.6以来,将Angular更新得有优势的过程。如果看了变更日志,你就知道这是一个相当长的过程。

在这个重构的过程里,我们从以错误的方法对待Angular,转变为以Angular的方式对待Angular。

在我们的案例中,错误的方法包含了许多的问题,我们不得不在此时,在使我们的代码基础到达可爱状态之前,解决它们。

在全局作用域声明控制器(Controllers)

这是一个 Angular 初学者容易做的例子。如果你熟悉 Angular,你也会熟悉这种模式。
 

// winds up on window.LoginCtrl ... var LoginCtrl = function ($scope, dep1, dep2) { // scope defaults }; LoginCtrl.prototype.resetPassword = function () { // reset password button click handler }; // more on this one later LoginCtrl.$inject = ['$scope', dep1', 'dep2'];

这段代码没有包含在闭包中,或者说,所有的声明都在根作用域,全局的 window 对象上,混蛋啊。用正宗的 Angular 方式来写的话是使用它提供的模块 api ( module API)。但是如你所见,即使是文档和建议步骤任然过时地建议你使用全局作用域:

这样做,极棒的事情将出现。
 

// A Controller for your app var XmplController = function($scope, greeter, user) { $scope.greeting = greeter.greet(user.name); }

-- Angular.js文档

使用模块(modules)允许我们以下面的方式重写控制器(controllers):
 

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgdfjy.html