In den letzten Monaten war ich in der Welt von Angular unterwegs. Wenn ich jetzt zurückblicke, kann ich mir kaum vorstellen, wie ich jeden Tag eine große Front-End-Anwendung ohne Datenbindungs-Frameworks wie Angular.js, Backbone.js und deren Begleiter Underscore.js schreiben würde. Ich kann nicht glauben, dass ich diesen Job mit ihnen gemacht habe.
Vielleicht bin ich etwas voreingenommen, aber wenn man bedenkt, dass es sich bei der Anwendung, an der ich gearbeitet habe, um einen Photoshop-ähnlichen Editor im Browser handelt, werden dieselben Daten auf völlig unterschiedliche Weise dargestellt.
Ohne ein Framework wie Augular könnte diese Art von Interaktion, Datenverbindungen und Ansichtssynchronisierung leicht zu einem ständigen Albtraum werden. Die Möglichkeit, mit Augular ein lokales Modell und alle zugehörigen Ansichten zu reparieren, klingt fast wie eine Lüge. Das Hinzufügen, Entfernen oder Ändern einer Ebene ist lediglich eine Frage der Änderung des Objekts. Level, x =10, abgeschlossen. Es besteht keine Notwendigkeit, Ansichten manuell zu entwerten, jede Instanz in der DOM-Hierarchie manuell zu ändern oder überhaupt mit dem DOM zu interagieren.
Augular ermöglicht es uns, an Orte zu gelangen, die wir uns nie hätten vorstellen können, wie zum Beispiel die Einrichtung einer Reihe von Tastaturkürzeln, die es uns ermöglichen, Anwendungen in bestehenden Umgebungen zu erstellen. Mit Verknüpfungen zur Dateibearbeitung (wie ?B: zum Umschalten von fettem Text) können wir beispielsweise einfach eine Dateiebene bearbeiten.
Ebenso fügen wir diesen Verknüpfungen eine Beschreibung hinzu (registriert über einen von uns erstellten Dienst) und können dann eine Liste der Verknüpfungen zusammen mit ihren Beschreibungen in einer Komfortleiste anzeigen. Darüber hinaus haben wir einen Befehl geschrieben, der es uns ermöglicht, einzelne DOM-Elemente an ihre Tastenkombinationen zu binden. Wenn Ihre Maus eine Weile auf dem Element bleibt, wird eine Eingabeaufforderung angezeigt, die Sie über die zu diesem Zeitpunkt verfügbaren Tastenkombinationen informiert.
Ehrlich gesagt ist es so, als würden wir keine Webanwendung mehr schreiben. Das Web ist nur ein Medium. Wenn wir unser Verständnis von Angular verbessern, wird der Code modularer, eigenständiger sowie vernetzter und interaktiver. Es wird natürlich kantiger.
Und mit Augular meine ich die hochgradig interaktiven, reichhaltigen Anwendungsentwicklungsphilosophien hinter Augular. JavaScript, eine ähnliche Sache, die es uns ermöglicht, Teile der Software zu entwickeln, die wir vor einiger Zeit für unmöglich hielten.
Wir haben sogar die Möglichkeit, ein vollwertiges Verlaufskontrollfeld zu entwickeln, um das DOM an den aktuell ausgewählten Punkt im Verlauf anzupassen und dafür zu sorgen, dass es sehr gut funktioniert. Es ist gelinde gesagt spannend, wenn Sie zum Verlaufs-Dashboard zurückkehren, um Daten anzuzeigen, die sich auf die Fähigkeit von Augular beziehen, jedes noch so kleine Detail der Arbeit Ihrer Ansicht zu aktualisieren.
Das ist nicht immer einfach, der Basiscode wird immer zu einem unkontrollierbaren Durcheinander.
Tatsächlich haben wir in den letzten Wochen unsere gesamte Frontend-Architektur aktualisiert und neu geschrieben. Bevor wir mit dem Umschreiben beginnen, werfen wir einen Blick auf den Prozess der Aktualisierung von Angular zu dessen Vorteilen seit 0.10.6. Wenn Sie das Änderungsprotokoll lesen, wissen Sie, dass dies ein ziemlich langer Prozess ist.
Im Verlauf dieses Refactorings haben wir von der falschen Behandlung von Angular zu einer Behandlung von Angular auf die richtige Art und Weise übergegangen.
In unserem Fall brachte der falsche Ansatz viele Probleme mit sich, die wir zu diesem Zeitpunkt lösen mussten, bevor wir unsere Codebasis in einen schönen Zustand bringen konnten.
Controller im globalen Bereich deklarieren
Dies ist ein einfaches Beispiel für Angular-Anfänger. Wenn Sie mit Angular vertraut sind, kennen Sie auch dieses Muster.
// 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'];
Dieser Code ist nicht im Abschluss enthalten, oder mit anderen Worten, alle Deklarationen befinden sich im Root-Bereich, dem globalen Fensterobjekt, du Bastard. Um auf authentische Angular-Art zu schreiben, verwenden Sie die von Angular bereitgestellte Modul-API. Aber wie Sie sehen, sind selbst die Dokumentation und die empfohlenen Schritte immer noch veraltet und empfehlen die Verwendung des globalen Bereichs:
Tun Sie dies und es werden großartige Dinge passieren.
// A Controller for your app
var XmplController = function($scope, greeter, user) {
$scope.greeting = greeter.greet(user.name);
}
-- Angular.js文档
使用模块(modules)允许我们以下面的方式重写控制器(controllers)：
angular.module('myApp').controller('loginCtrl', [
'$scope', 'dep1', 'dep2',
function ($scope, dep1, dep2) {
'use strict';
// scope defaults
$scope.resetPassword = function () {
// reset password button click handler
};
}
]);
我发现使用 Angular 控制器的漂亮做法是你必须在所有地方使用控制器方法(controller function)，因为你需要控器的依赖注入，而且控制器提供了新的作用域，绑定我们从需求到封装我们所有的脚本文件成为自调用函数表达式( self-invoking function expressions)，像这样 (function(){})()。
依赖$injection
在最早的例子中你可能已经注意到了, 依赖是使用$inject注入的. 另一方面，大部份的模块API, 允许你传入一个函数作为参数, 或者一个包含了依赖的数组作为参数, 其后面跟着一个依赖于这些依赖的函数. 这是在Angular中我不喜欢的一点 , 但这应该是它文档的过错. 在文档中的大部份例子认为你并不需要一个数组形式的参数; 但现实是，你是需要的。 如果你在使用一个压缩器压缩你的代码之前, 没有运行ngmin , 事情将会变得糟糕.
由于你没有使用数组格式['$scope',...]明确声明你的依赖包，你看上去简洁的方法参数将会被缩略成类似于b,c,d,e的样子，有效地扼杀了Angular的依赖注入能力。我认为他们构建框架的思路存在了重大的失误，这与我在非常不喜欢 Require.js 和他们麻烦的 AMD 模块最后的推论是相似的。
如果他不能在产品中使用，它还有什么用？
我的这种态度是因为你在产品中所使用的框架里，有一部分代码是已经写死了的。这对于开发中经常用到、产品中偶尔用到的实用工具，诸如控制台和错误报告，是很好的。如果语法上的甜头(可读性)只用在开发中，就会变得没有任何意义。
这些破事让我很愤怒, 现在发泄完了. 谈谈$符吧...
减少 jQuery扩散
深入的讲, 这个应用是 "类Angular程序", 也就是说它只是包裹于Angular之中, 大多数DOM 交互是经由jQuery处理的, 这给Angular带来相当多的争论。
如果今天我要从头开始写一款Angular.js应用，我不会立即包含进jQuery。我会强迫自己使用 angular.element 来代替。
如果jQuery存在的话，angular.element这个API将包装它，同时它给Angular团队实现 jQuery的API提供了可以替代的选择，名为jqLite。这并不是说 jQuery不好，或者说我们需要另一个某种实现，来映射它们的API。只是因为使用jQuery显得不是那么有Angular的思想。
让我们来看一个具体的,愚蠢的,例子。在controller被声明的地方，它使用jQuery来做元素之上的类操作。
div.foo(ng-controller='fooCtrl')
angular.module('foo').controller('fooCtrl', function ($scope) {
$('.foo').addClass('foo-init');
$scope.$watch('something', function () {
$('.foo').toggleClass('foo-something-else');
});
});
然而，我们可以用我们期望的方法来使用Angular，替代之。
angular.module('foo').controller('fooCtrl', function ($scope, $element) {
$element.addClass('foo-init');
$scope.$watch('something', function () {
$element.toggleClass('foo-something-else');
});
});
最后一行你不能直接，或者通过jQuery来操作DOM（改变属性，增添事件监听器）。你应该使用指令来替代。那篇文章很棒，去读读看。
如果你仍然jQuery化了，有许多文章可以一读，例如这篇迁移指南，还有我的关于怎样使用jQuery的批判性思考 这篇文章。
我不是要声明我们准备完全移除 jQuery 。我们有其他更重要的目标，例如，发布我们的产品。这个时候，删除 jQuery 的依赖还是很有意义的。这样做能够使我们的控制器得到简化，我们创建处理 DOM 的指令，使用 angular.element 即使它实际上映射着 jQuery 。
我们依赖着有点恶心的 jQuery UI，我们当然不只是为了它的对话框而使用它，它还有很多用途。例如，拖动一个列表项然后把它放到一个已排序的列表中，如果不使用 jQuery UI，这将牵涉到一大堆代码。因此，实际上，对于 jQuery UI 来说，并没有真正很好的替代品。拖拽的功能可以通过一个轻量级的拖拽库 angular-dragon-drop 来替代，但是，对于元素排序插件，还是得依赖 jQuery UI 。
管理代码库
还有一个我们在迁移中需要解决的问题是整个代码库都挤在一个单一的大文件中。这个文件包含了所有控制器、所有服务、所有指令以及每个控制器的特定代码。我指出一点使得我们可以准确地把每个文件只包含一个组件。目前，我们有很少的文件，却包含了不知一个组件。大多数是因为一个指令使用一个服务来与外界共享数据。
尽管和 Angular 无关，我们还是把我们的 CSS 样式表（stylesheet）模块化。我们为每个组件中使用的 CSS 类名前面都加上了两个字的前缀。例如， .pn- 作为前缀，代表面板（panel）； .ly- 前缀，代表着图层（layer）等等。这样做的直接好处就是，你不需要再费劲地想哪个组件的 CSS 类是怎样的了。因为你已经为它们设置了命名空间，你就很少会重复用到某一个 CSS 类名了。另一个好处就是减少了嵌套，我们以前曾经用 #layoutEditor div.layer .handle div 这样复杂的选择器表达式，而现在，我们只需要 .ly-handle-content 就可以了。深度的嵌套现在只发生在额外的选择器覆盖上，例如 .foobar[disabled]:hover，或者，最坏的情况下，像 .foo-bar .br-baz 。
下面是一些我们定下的 CSS 类命名规则：
在实现了这套面向组件的 CSS 声明方法后，我又想了很久“the class soup way”。
Angular 强制你写好的代码，但是更深一层说，它强制你去思考。一会儿后，它就像一个服务器端的实现，或者成为一个不堪忍受的“黑客大会”。这些都取决于你这么选择。
接近完美
让我们来解析一下我们应用程序的各部件的其中之一，层。
div.cv-layer( ng-repeat="layer in page.layers | reverse", ap-layer, ng-mousedown="selectLayer(layer.id)", ng-mouseup="selectLayer(layer.id)", ng-dblclick="doubleClickLayer(layer)", ng-hide="layer.invisible" )
Hier verwenden wir die Klasse cv-layer, was bedeutet, dass dieses Element Teil der Canvas-Komponente ist (Canvas bezieht sich auf den Ort, an dem wir die Ebene zeichnen, nicht zu verwechseln mit HTML5-Canvas). Anschließend verwenden wir das ngRepeat-Tag in einer foreach-ähnlichen Schleife, um für jede Ebene ein ähnliches Element zu erstellen. Und durch einen von uns geschriebenen Umkehrfilter geleitet, sodass die letzte Ebene oben liegt und für den Benutzer sichtbar ist. Das apLayer-Tag wird eigentlich zum Zeichnen einer Ebene verwendet, sei es ein Bild, Text, HTML oder etwas anderes. Die Ereignis-Tags (ng-mousedown, ng-mouseup, ng-dblclick) werden einfach als Proxys für Ereignisse verwendet, die von unserem Layer-Auswahldienst verarbeitet werden. Abschließend denke ich, dass es nicht nötig ist, mehr zum ngHide-Tag zu sagen.
Es gibt so viele Funktionen (Anmerkung des Übersetzers: Es ist etwas übertrieben), und Angular ist es gelungen, sie so einfach aussehen zu lassen, indem sie lesbares HTML verwenden, um Ihnen bis zu einem gewissen Grad zu sagen, worum es geht. Noch wichtiger ist, dass Sie damit verschiedene zu berücksichtigende Probleme aufschlüsseln können, sodass Sie prägnanten Code schreiben können, ohne alles auf einmal berücksichtigen zu müssen. Kurz gesagt, es reduziert die Komplexität (Anmerkung des Übersetzers: Angular selbst ist tatsächlich sehr komplex, haha) und vereinfacht die Komplexität. Und „Probleme, die schwer messbar sind“ möglich machen.
Ich freue mich auf bald weitere Artikel zum Thema Angular-Codierung. Besonders viel Spaß macht es mir, einige der Grenzfälle zu erkunden, auf die ich beim Aktualisieren meines Codes stoße, und wie ich sie beheben kann, während der Rest des Codes gleich funktioniert.
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
