AngularJS_AngularJS に関連するいくつかのプログラミングのアイデアを簡単に説明します

ここ数か月間、私は Angular の世界を旅してきました。今振り返ると、Angular.js、Backbone.js、およびそれらのコンパニオンである Underscore.js などのデータ バインディング フレームワークなしで、毎日どうやって大規模なフロントエンド アプリケーションを作成するか想像するのは困難です。彼らと一緒にその仕事をしたことが信じられない。

私が少し偏見を持っているかもしれませんが、私が取り組んできたアプリケーションがブラウザーの Photoshop タイプのエディターであることを考えると、同じデータがいくつかの完全に異なる方法で表示されます。

• レイヤーはグラフィカルに表示され、画面の大部分を占めます。これらはパネルにリストされており、削除することができます。
• レイヤーを選択すると、その端が点線で囲まれ、リスト内で強調表示されます。
• 同様に、パネル内のレイヤーの寸法とそのサイズプロパティはキャンバスによって異なります。
• 上で説明したパネルは、ドラッグしたり、折りたたんだり、閉じることができます。

Augular のようなフレームワークがなければ、この種の対話、データ接続、ビューの同期は簡単に悪夢のような作業になってしまう可能性があります。 Augular でローカル モデルを修正し、関連するすべてのビューを修正できるというのは、ほとんど嘘のように思えます。レベルの追加、削除、または変更は、単にオブジェクトを変更するだけです。レベル、x =10、完了。ビューを手動で無効にしたり、DOM 階層内のすべてのインスタンスを手動で変更したり、さらに言えば DOM と対話したりする必要もありません。

Augular を使用すると、既存の環境でアプリケーションを作成できる一連のキーボード ショートカットを設定するなど、想像もできなかった場所に行くことができます。たとえば、ファイル編集ショートカット (太字の切り替えの ?B: など) を使用すると、単純にファイル レベルを編集できます。

同様に、これらのショートカット (作成したサービスを通じて登録) に説明を添付すると、ショートカットのリストとその説明をコンビニエンス バーに表示できます。さらに、個々の DOM 要素をそのショートカット キーにバインドできるようにするコマンドを作成しました。マウスを要素上にしばらく置くと、その時点で使用可能なショートカット キーを知らせるプロンプトが表示されます。

• Angular を使用すると、夢にも思わなかったことを行うことができます。

正直に言うと、私たちはもう Web アプリケーションを書いていないようなものです。ウェブは単なる媒体です。 Angular についての理解が深まるにつれて、コードはよりモジュール化され、より自己完結型になり、より接続性が高くインタラクティブになります。自然と角張っていきます。

そして、Augular とは、Augular の背後にある高度にインタラクティブでリッチなアプリケーション開発哲学を意味します。 JavaScript も同様のもので、少し前までは不可能だと思われていたソフトウェアの一部を開発できるようになります。

私たちは、DOM を履歴内で現在選択されているポイントに変更するための本格的な履歴コントロール パネルを開発し、それを非常にうまく機能させる能力さえ持っています。履歴ダッシュボードに戻って、ビューの作業のあらゆる細部を更新する Augular の機能に関連するデータを表示するのは、控えめに言っても刺激的です。

それは必ずしも簡単なわけではありません。基本コードは常に制御不能な混乱に変わります。

実際、過去数週間にわたって、私たちはフロントエンド アーキテクチャ全体を更新し、書き直してきました。書き換えを始める前に、0.10.6 以降の Angular を有利に更新するプロセスを見てみましょう。変更ログを読むと、これが非常に長いプロセスであることがわかります。

このリファクタリングの過程で、私たちは Angular を間違った方法で扱うことから、Angular を Angular の方法で扱うことに変更しました。

私たちの場合、間違ったアプローチには、コードベースを良好な状態にする前に、この時点で解決しなければならない多くの問題が含まれていました。

グローバル スコープでコントローラーを宣言します

これは、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'];

このコードはクロージャに含まれていません。つまり、すべての宣言はルート スコープ、グローバル ウィンドウ オブジェクト内にあります、この野郎。本格的な Angular の方法で記述するには、Angular が提供するモジュール API を使用します。ただし、ご覧のとおり、グローバル スコープの使用を推奨するドキュメントと推奨手順さえもまだ古いままです。

これを実行すると、素晴らしいことが起こるでしょう。

  // 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 类命名规则：

• 用两个字符来描述组件名：.ly-、.dd-、.dg-等等
• 采用 .ly-foo-barname 来代替嵌套命名 .ly-foo .bar
• 避免内联样式，总是使用 CSS 类名。这能够减少不界面的一致性，提高语义解释能力
• 不要在 CSS 中使用 ID 来赋值

在实现了这套面向组件的 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"
)

ここでは、cv-layer クラスを使用します。これは、この要素が Canvas コンポーネントの一部であることを意味します (Canvas は、レイヤーを描画する場所を指します。HTML5 Canvas と混同しないでください)。次に、foreach のようなループで ngRepeat タグを使用して、各レイヤーに同様の要素を作成します。そして、私たちが作成した逆フィルターを通過するため、最後のレイヤーが一番上に表示され、ユーザーに表示されます。 apLayer タグは、実際には、画像、テキスト、HTML などのレイヤーを描画するタスクに使用されます。イベント タグ (ng-mousedown、ng-mouseup、ng-dblclick) は、レイヤー選択サービスによって処理されるイベントのプロキシとして単に使用されます。最後に、ngHide タグについてはこれ以上説明する必要はないと思います。

非常に多くの機能がありますが (訳者注: 少し大げさです)、Angular は読みやすい HTML を使用して機能をある程度伝えることで、機能を非常にシンプルに見せることに成功しました。さらに重要なのは、検討すべきさまざまな問題を細分化できるため、すべてを一度に検討する必要がなく、簡潔なコードを作成できることです。つまり、複雑さを軽減し (翻訳者注: Angular 自体は実際には非常に複雑です、笑)、複雑さをシンプルにします。そして「簡単に測定するのが難しい問題」を可能にします。

近いうちに Angular コーディングに関する記事をさらにアップすることを楽しみにしています。特に、コードをアップグレードするときに遭遇するいくつかのエッジケースと、コードの残りの部分を同じように動作させながらそれらを修正する方法を探索するのが楽しいです。