Terangkan secara ringkas beberapa idea pengaturcaraan yang berkaitan dengan AngularJS_AngularJS

Dalam beberapa bulan yang lalu, saya telah mengembara dalam dunia Angular. Mengimbas kembali sekarang, sukar untuk membayangkan bagaimana saya akan menulis aplikasi bahagian hadapan yang besar setiap hari tanpa rangka kerja mengikat data seperti Angular.js, Backbone.js dan pasangannya Underscore.js. Saya tidak percaya saya telah melakukan kerja itu dengan mereka.

Mungkin saya agak berat sebelah, tetapi memandangkan aplikasi yang saya usahakan ialah editor jenis Photoshop dalam penyemak imbas, ia membentangkan data yang sama dalam beberapa cara yang berbeza.

• Lapisan dibentangkan secara grafik dan menduduki sebahagian besar skrin. Ia disenaraikan dalam panel dan anda boleh memadamkannya.
• Apabila anda memilih lapisan, tepinya akan dikelilingi oleh garis putus-putus dan akan diserlahkan dalam senarai.
• Begitu juga, dimensi lapisan dalam panel dan sifat saiznya bergantung pada kanvas.
• Panel yang saya nyatakan di atas boleh diseret, dilipat dan ditutup.

Tanpa rangka kerja seperti Augular, interaksi, sambungan data dan penyegerakan paparan ini dengan mudah boleh bertukar menjadi mimpi ngeri yang berterusan. Mempunyai keupayaan untuk membetulkan model tempatan dan membetulkan semua pandangan berkaitan dengan Augular bunyi hampir seperti pembohongan. Menambah, mengalih keluar atau mengubah tahap hanyalah masalah menukar objek. Aras, x =10, selesai. Tidak perlu untuk membatalkan paparan secara manual, mengubah suai secara manual setiap kejadian dalam hierarki DOM, atau berinteraksi dengan DOM dalam perkara itu.

Augular membolehkan kami pergi ke tempat yang tidak pernah kami bayangkan, seperti menyediakan satu siri pintasan papan kekunci yang membolehkan kami membuat aplikasi dalam persekitaran sedia ada. Contohnya, pintasan penyuntingan fail (seperti ?B: untuk togol teks tebal) hanya membolehkan kami mengedit tahap fail.

Begitu juga, kami melampirkan perihalan pada pintasan ini (didaftarkan melalui perkhidmatan yang kami buat), dan kemudian kami boleh memaparkan senarai pintasan, bersama dengan perihalannya, dalam bar kemudahan. Selain itu, kami menulis arahan yang membolehkan kami mengikat elemen DOM individu pada kekunci pintasan mereka Apabila tetikus anda kekal pada elemen itu untuk seketika, gesaan akan muncul untuk memberitahu anda kekunci pintasan yang tersedia pada masa itu.

• Sudut membolehkan kita melakukan perkara yang tidak pernah kita impikan.

Sejujurnya, kami seperti tidak menulis aplikasi web lagi. Web hanyalah medium. Apabila kami meningkatkan pemahaman kami tentang Angular, kod tersebut menjadi lebih modular, lebih serba lengkap dan lebih berhubung dan interaktif. Ia secara semula jadi menjadi lebih Sudut.

Dan kemudian dengan Augular, saya maksudkan falsafah pembangunan aplikasi kaya yang sangat interaktif di belakang Augular. JavaScript, perkara serupa yang membolehkan kami membangunkan bahagian perisian yang kami fikir mustahil suatu ketika dahulu.

Kami juga mempunyai keupayaan untuk membangunkan panel kawalan sejarah yang lengkap untuk mengubah suai DOM menjadi titik yang dipilih pada masa ini dalam sejarah dan menjadikannya berfungsi dengan baik. Sedikit sebanyak ia menarik apabila anda kembali ke Papan Pemuka Sejarah untuk melihat data yang berkaitan dengan keupayaan Augular untuk mengemas kini setiap butiran kecil kerja paparan anda.

Itu tidak selalunya mudah, kod asas sentiasa berubah menjadi kucar-kacir yang tidak terkawal.

Memang, sejak beberapa minggu lalu kami telah mengemas kini dan menulis semula keseluruhan seni bina bahagian hadapan kami. Sebelum kita mula menulis semula, mari kita lihat proses mengemas kini Angular untuk kelebihannya sejak 0.10.6. Jika anda membaca log perubahan, anda tahu ini adalah proses yang agak panjang.

Dalam proses pemfaktoran semula ini, kami menukar daripada merawat Angular dengan cara yang salah kepada merawat Angular dengan cara Angular.

Dalam kes kami, pendekatan yang salah melibatkan banyak masalah yang perlu kami selesaikan pada ketika ini sebelum mendapatkan asas kod kami kepada keadaan yang indah.

Isytiharkan pengawal dalam skop global

Ini adalah contoh mudah untuk dilakukan oleh pemula Angular. Jika anda biasa dengan Angular, anda juga akan biasa dengan corak ini.

// 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'];

Kod ini tidak termasuk dalam penutupan, atau dengan kata lain, semua pengisytiharan berada dalam skop akar, objek tetingkap global, keparat. Untuk menulis dengan cara Sudut yang tulen, gunakan API modul yang disediakan olehnya. Tetapi seperti yang anda lihat, walaupun dokumentasi dan langkah yang disyorkan masih lapuk dalam mengesyorkan agar anda menggunakan skop global:

Lakukan ini dan perkara hebat akan berlaku.

  // 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"
)

Di sini, kami menggunakan kelas lapisan cv, yang bermaksud bahawa elemen ini adalah sebahagian daripada komponen kanvas (kanvas merujuk kepada tempat kami melukis lapisan, tidak boleh dikelirukan dengan kanvas HTML5). Kemudian, kami menggunakan teg ngRepeat dalam gelung seperti foreach untuk mencipta elemen yang serupa untuk setiap lapisan. Dan melalui penapis terbalik yang kami tulis, jadi lapisan terakhir berada di atas dan boleh dilihat oleh pengguna. Teg apLayer sebenarnya digunakan untuk tugas melukis lapisan, sama ada gambar, beberapa teks, HTML atau sesuatu yang lain. Teg acara (ng-mousedown, ng-mouseup, ng-dblclick) hanya digunakan sebagai proksi untuk acara yang akan dikendalikan oleh perkhidmatan pemilihan lapisan kami. Akhir sekali, saya rasa tidak perlu mengatakan lebih lanjut tentang tag ngHide.

Terdapat begitu banyak fungsi (Nota Penterjemah: Ia agak dibesar-besarkan), dan Angular telah berjaya menjadikannya kelihatan begitu mudah, menggunakan HTML yang boleh dibaca untuk memberitahu anda tentang perkara itu pada tahap tertentu. Lebih penting lagi, ia membolehkan anda memecahkan isu yang berbeza untuk dipertimbangkan supaya anda boleh menulis kod ringkas tanpa perlu mempertimbangkan semuanya sekaligus. Pendek kata, ia mengurangkan kerumitan (Nota Penterjemah: Angular itu sendiri sebenarnya sangat kompleks, haha) dan menjadikan kerumitan mudah. Dan jadikan "masalah yang sukar diukur dengan mudah" mungkin.

Saya menantikan lebih banyak artikel tentang pengekodan Angular tidak lama lagi. Khususnya, saya seronok meneroka beberapa kes kelebihan yang saya hadapi semasa menaik taraf kod saya dan cara membetulkannya sambil membuat kod yang lain berfungsi sama.