xufei
xufei
## Angular中的模块机制 ### module 在AngularJS中，有module的概念，但是它这个module，跟我们通常在AMD里面看到的module是完全不同的两种东西，大致可以相当于是一个namespace，或者package，表示的是一堆功能单元的集合。 一个比较正式的Angular应用，需要声明一个module，供初始化之用。比如说： ``` JavaScript angular.module("test", []) .controller("TestCtrl", ["$scope", function($scope) { $scope.a = 1; }]); ``` 随后，可以在HTML中指定这个module： ``` HTML {{a}} ``` 这样，就是以这个div为基准容器，实例化了刚才定义的module。 或者，也可以等价地这样，在这里，我们很清楚地看到，module的意义是用于标识在一个页面中可能包含的多个Angular应用。 ``` JavaScript angular.element(document).ready(function() {...
Web应用组件化的权衡
## 1. 基本概念 ### 什么是Web应用？ 所谓Web应用，指的是那些虽然用Web技术构建，但是展现形式却跟桌面程序或者移动端原生应用类似的产品。这类产品的特点是逻辑较重，交互复杂，通常也是单页式的。 主要包括： - 交互占比较高的页面体系 - 以各种Hybrid技术构建的应用，其中的Web部分 大部分可以等同于所谓的“单页面应用”，可以参见之前写的这篇：[构建单页Web应用](https://github.com/xufei/blog/issues/5) ### 组件化开发的优势是什么？ 组件化的最重要作用就是提升开发和维护的效率。 最原始的组件，其功能可以单独开发测试，然后逐级拼装成更复杂的组件，直到整个应用。每一级都是易装配，可追踪，可管控的。 ### 在Web应用中，组件化一般指什么？ 在开发Web应用的时候，无论技术选型，工程方案，还是对人员的技能需求都是有一些特点的，最重要的特点莫过于组件化。 组件化这个词，在UI这一层通常指“标签化”，也就是把大块的业务界面，拆分成若干小块，然后进行组装。 狭义的组件化一般是指标签化，也就是以自定义标签（自定义属性）为核心的机制。 广义的组件化包括对数据逻辑层业务梳理，形成不同层级的能力封装。 ### 在Web应用中，组件化的主要目标是什么？ 很多人会把复用作为组件化的第一需求，但实际上，在UI层，复用的价值远远比不上分治。 分治带来的是可管理性，相比一大团HTML和JavaScript的混杂，组件化之后，整个应用成为了一个很清晰的树，一眼就能看清包含关系，也能够很容易理清数据的传递方向。而且，整个应用可以从叶子节点，逐步向上测试，哪一级出了问题，可以很容易发现。 但是复用就很麻烦了，因为组件的内部实现与外部接口都很难取舍。很可能我们在设计之初，都是把组件设想成一个单一的东西，然后在实际项目中，发现最后都面目全非了。 所以，复用的工程成本很高，在使用的时候需要权衡，除了最常用了基础控件，其他的不要刻意追求。 ## 2....
# 优化Angular应用的性能 MVVM框架的性能，其实就取决于几个因素： - 监控的个数 - 数据变更检测与绑定的方式 - 索引的性能 - 数据的大小 - 数据的结构 我们要优化Angular项目的性能，也需要从这几个方面入手。 ## 1. 减少监控值的个数 监控值的个数怎么减少呢？ 考虑极端情况，在不引入Angular的时候，监控的个数是为0的，每当我们有需要绑定的数据项，就产生了监控值。 我们注意到，Angular里面使用了一种HTML模板语法来做绑定，开发业务项目非常方便，但考虑一下，这种所谓的“模板”，其实与我们常见的那种模板是不同的。 传统的模板，是静态模板，将数据代入模板之后生成界面，之后数据再有变化，界面也不会变。但Angular的这种“模板”是动态的，当界面生成完毕，数据产生变更的时候，界面还是会更新。 这是Angular的优势，但我们有时候也会因为使用不当，反而增加困扰。因为Angular采用了变动检测的方式来跟踪数据的变化，这些事情都是有负担的，很多时候，有些数据在初始化之后就不再会变化，但因为我们没有把它们区分出来，Angular还是要生成一个监听器来跟踪这部分数据的变化，性能也就受到牵累。 在这种情况下，可以采用单次绑定，仅在初始化的时候把这些数据绑定，语法如下： ``` HTML {{::item}} ``` ``` HTML {{item}}...
## ［翻译］Angular的问题 [原文地址](http://www.quirksmode.org/blog/archives/2015/01/the_problem_wit.html) **在过去半年里，我跟一些潜在客户进行了交谈，他们在寻找前端顾问来帮助开发团队控制Angular项目的时候，遇到了麻烦。** 尽管有一些对Angular很热情的前端人员，我有种感觉，对于一个主流框架来说，他们的数量还是太少了。我期望Angular能比之前受到更多关注。 Angular更多地是面向企业的IT部门，而不是前端人员。它独特的编码风格，它那种更倾向服务端而不是浏览器侧的对HTML模板系统的封装形式，以及严重而基础的性能问题吓跑了不少人。 我曾经说过，Angular更多的用户是有Java背景的人员，因为它的编码风格是面向他们的。不幸的是，他们没有被培训以认识到Angular的性能问题。 对于Angular 1.x是否适合现代web开发，我表示怀疑。如果有人持有不太客气的倾向，他会把它描述成一个：非前端人员做给非前端人员用的前端框架。 Angular 2.0被提出了激进的改写，意图使它更符合前端人员的口味，但我怀疑他们所感兴趣的是另外一个MVC框架了。此外，重写有可能会疏远Angular的当前目标受众。 如果你想要知道为什么我有这些想法，恐怕要把这篇长文章看完了。 ### Angular 服务页面 我感觉到Angular的基本理念在前后端之间模糊不清。看一看这个示例代码吧，这是我拉过来的[真实的东西](https://angularjs.org/): ``` HTML Todo {{remaining()}} of {{todos.length}} remaining [ archive ] {{todo.text}} ``` 这代码让我想起了一个简单的服务端脚本语言，比如JSP或者ASP，它们使用数据库的内容来填充HTML模板。这些语言在web开发栈中有一席之地——但是在服务端，而不是浏览器端。 上个月，我在一个大型的荷兰公司参与了项目，它们庞大的网站使用了各种小部件和设计模式，做相同的事情，但不是来源于通用的代码库，整个网站间充斥复制／粘贴。这显然是个不受欢迎的状况。...
如何增强单页应用的体验
## 什么是单页应用 所谓单页应用，指的是在一个页面上集成多种功能，甚至整个系统就只有一个页面，所有的业务功能都是它的子模块，通过特定的方式挂接到主界面上。它是AJAX技术的进一步升华，把AJAX的无刷新机制发挥到极致，因此能造就与桌面程序媲美的流畅用户体验。 ## 单页应用的优势 操作体验流畅，媲美本地应用的感觉，切换过程中不会频繁有被“打断”的感觉。 因为界面框架都在本地，与服务端的通讯基本只有数据，所以便于迁移，可以用比较小的代价，迁移成桌面产品，或者各种移动端Hybrid产品。 ## 单页应用的弱点 - 对搜索引擎不友好 - 开发难度相对较高 如何尽可能增强单页应用的操作体验？ － 路由的规划 － 推送的使用 － 断线重连机制 － 操作补偿机制 － 本地缓存 － 热更新 － 良好的内存管理 － 服务端预渲染...
## 数据绑定与监控 在业务开发的过程中，我们可能会大量使用DOM操作，这个过程很繁琐，但是有了AngularJS，基本上就可以解脱了，做到这一点的关键是数据绑定。那什么是数据绑定，怎样绑定呢？本节将从多种角度，选取业务开发过程中的各种场景来举例说明。 ### 基于单一模型的界面同步 有时候，我们会有这样的需求，界面上有个输入框，然后有另外一个地方，要把这个文本原样显示出来，如果没有数据绑定，这个代码可能很麻烦了，比如说，我们要监听输入框的各种事件，键盘按键、复制粘贴等等，然后再把取得的值写入对应位置。但是如果有数据绑定，这个事情就非常简单。 ``` HTML {{a}} ``` 这么小小一段代码，就实现了我们想要的功能，是不是很可爱？这中间的关键是什么呢，就是变量a，在这里，变量a充当了数据模型的角色，输入框的数据变更会同步到模型上，然后再分发给绑定到这个模型的其他UI元素。 注意，任意绑定到数据模型的输入元素，它的数据变更都会导致模型变更，比如说，我们有另外一个需求，两个输入框，我们想要在任意一个中输入的时候，另外一个的值始终跟它保持同步。如果用传统的方式，需要在两个输入框上都添加事件，但是有了数据绑定之后，这一切都很简单： ``` HTML ``` 这样的代码就可以了，核心要素还是这个数据模型b。 到目前为止的两个例子都很简单，但可能有人有问题要问，因为我们什么js都没有写，这个a跟b是哪里来的，为什么就能起作用呢？对于这个问题，我来作个类比。 比如大家写js，都知道变量可以不声明就使用： ``` JavaScript a = 1; ``` 这时候a被赋值到哪里了呢，到了全局的window对象上，也就是说其实相当于： ``` JavaScript window.a = 1;...
# ［翻译］有关Angular 2.0的一切 原文在[此](http://eisenbergeffect.bluespire.com/all-about-angular-2-0/) 是不是对Angular的战略有疑问？来这里就对了。在接下来的这篇文章里，我会解释Angular 2.0的主要特性区域，以及每个变化背后的动机。每个部分之后，我将提供自己在设计过程中的意见和见解，包括我认为仍然需要改进设计的重要部分。 > 注意：本文所反映是2014年11月6日的状态记录。如果你在较长时间之后读到此文，请检查一下我设计上是否有所变更。 ## AngularJS 1.3 在开始讨论Angular的未来之前，我们先花点时间看看当前的版本。AngularJS 1.3是迄今为止最优的Angular版本，它是几周之前发布的。它提供了大量的bug修复，功能增强和性能提升。如果你正在使用Angular，会有升级的愿望。如果将要开始用Angular做新的项目，这也会是你想要使用的版本。这是一个强大而成熟的框架，已经摆在我们面前了。 #### 评注 可能你现在会对AngularJS的未来有很多疑问。什么时候2.0会出来？1.x怎么办？会有从1.x到2.0的升级路径吗？AngularJS团队在回答这些问题上，可以做得更好一些，你应当鼓励他们这么做。我可以告诉你们的是，在Google内部，有1600个应用是基于Angular 1.2或者1.3构建的。所以，看起来Google对当前版本是会有很大兴趣的，也会需要支持它们一段时间。在[ngEurope的Q&A环节](https://www.youtube.com/watch?v=g-x1QKriY90&list=UUEGUP3TJJfMsEM_1y8iviSQ)中，Brad Green说在Angular 2.0的RTM版本发布之后，对Angular 1.3的支持会持续至少1.5-2年。我们也刚针对Angular 1.3的支持作了一些团队结构和领导的变更，即使是正在为Angular 2.0而努力，我们仍然保持了一个专有团队全职处理Angular 1.3。这个团队是由Pete Bacon Darwin领导的，我敢肯定你一定知道他在AngularJS上的丰富经验。我想要鼓励你们向Angular的引领者询问这些变化，并且一起设法完善官方的支持。 当2.0可用时，如果有人想要把Angular1.x的应用迁移到2.0，目前也没有什么可行的计划。我认为我们可以在这一块做些事。如果这对你来说也很重要，请大声说出来，当然要友善一点，但要让Angular团队知道这对你而言很重要，他们应当对此有所考虑，并且也有所规划。 ## Angular 2.0的动机 那么，你可能会想知道，为什么要做Angular...
数据的关联计算
## 数据的关联计算 在复杂的单页应用中，可能存在大量的关联计算。 什么是关联计算呢？比如说： - 定义变量a - 定义变量b，b始终等于a+1 这样，变量b就带来了一个需要重复的计算，我们需要借助不同的机制，当a变化的时候，去重新计算b的值。 对于这类东西，通常两种途径： - 在设置a的时候，通过一些机制去更新b - 在获取b的时候，重新根据a的值计算 通常，第一种方式会比较普遍使用。 在很多可编译到JS的语言中，都有setter和getter机制，ES的新版本也是有的，所以我们可以把这两种途径分别使用setter和getter去实现。 ``` JavaScript class A { private _a: number set a(val) { this._a = val...
# 后Angular时代二三事 JavaScript框架/库一直就是百花齐放，最近几年更是层出不穷。回顾这几年，有两个最引人注目的东西，一个是Angular，一个是React。其中，Angular最火的时间是2013年中到2014年末，React从2014年中开始升温，然后又由于ReactNative等周边项目，导致关注度很高。 2014年末，Angular官方宣布了一个大新闻，要完全重写Angular 2.0。这个事情让很多想要使用Angular的人止步不前，也给很多人带来了困惑。 随后，Angular 2.0的开发者之一创建了新的框架Aurelia，整体思路上与Angular相似，有一些细节的差异。那么，我们应当如何看待这些框架呢？ ## 为什么Angular 2重写 如果不是有重大原因，没有哪个开发者会做出彻底重写，产生很多不兼容变更的决定。对于Angular来说，它面临这么一些原因： - Web标准的升级，主要是Web Components相关标准和ECMAScript的后续版本 - 自身存在的一些问题：性能，模块，过于复杂的指令等等 ## 使用转译语言 也正是Angular 2.0那篇大新闻，使大家知道了AtScript这样的语言，它在TypeScript的基础上添加了注解等功能。 有很多语言可以转译成JavaScript，比如CoffeeScript，Dart，TypeScript等，从最近的一些事件来看，TypeScript可以算是JavaScript转译领域的最大赢家。 很多人可能会有这样的疑问：为什么我们要用这些东西，而不是直接编写原生的JavaScript？开发语言的选择，很大程度上反映了我们对JavaScript组件化方案抽象度的需求。 比如说，Angular中，可以使用TypeScript来写业务代码，React中，通过JSX来使用组件，这都是具有较高抽象度的方案，能够让业务代码变得更直观。 ### ES6 先不看这些转译语言，来看看ES6，它给我们带来了很多编程的便利，每一次这种语言细节的升级，都引入了一些好用的东西，所以我们当然是期望尽早使用它。但问题是，浏览器的支持程度总是落后的，如果用它写了，在很多浏览器上不支持，比如箭头函数： ``` JavaScript this.removeTodo =...
Angular的变革
作为Web前端，你幸福吗？ > 每隔18个月，前端都要难一倍。 每一年，前端都会冒出更多的概念，更多的框架/库，更多的实践。 2015年，前端有哪些东西转入流行？ - ES2015，Babel - 以React和Vue为代表的前端组件化框架 但是，在这关键的一年里，Angular社区相对来说，有些沉寂了，主要原因是Angular自身处于一个剧烈变革期，1.x已经趋向成熟，难有本质提升，而2.0尚未有正式发布的消息。 2015年被黑得最多的主流前端组件化框架是什么？Angular。 黑得最漂亮的一句： > 其实是 java 程序员把他们习惯的那一套『仪式感』带入了前端框架导致的。 > ——尤雨溪 Angular最近在搞的2.0版本，变更可谓剧烈，几乎完全是个新框架。但如果我们关注过1.x版本的演进，就会发现，它也曾经历过不少变革。我们所能看到的变化，其实都是有伏笔的，而Angular官方也在努力做一些事情，让这两代之间能尽量衔接起来。 每个框架在发展过程中，都经历过一次一次的自我革新，那么，Angular经历了什么？ - controllerAs （1.2） - One-time bindings （1.3） - new router...