一、Angular 2.0的变革之路-组件化 Web Components

2022-01-23 20:41:45

Angular 2.0的变革之路

Angular 1.x从2009年到现在已经过了6个年头，虽然中间Angular1.x顺应前端思想加入了很多新的特性，例如在1.3版本加入的bindToController，在1.5版本加入的用于取代directive部分功能的component。然而从整体的设计思想来说，Web Components已经成为大势所趋，Angular的变革也就势在必行。

Angular 2.0 放弃了对1.x版本的兼容，这也就意味着2.0版本没有了1.x版本的历史包袱。Google在规划Angular2.0版本的时候吸收了很多语言的优点，例如设计灵感来自于Dart的Zone，接纳了微软的Typescript语言作为推荐编程语言，同时2.0版本还引入了相当多全新的技术和概念，例如ReactiveX响应式编程，更重要的是2.0版本简化了1.x时代繁杂的概念，像apply，digest，controller，scope这些概念在2.0版本全都不复存在。

Angular 2.0目前RC版本已经发布，Final版本也近在咫尺。总而言之，如果你还没有了解过1.x版本的Angular，不要觉得遗憾，让我们从全新的Angular2.0起步吧。

本系列文章分为以下几个部分：

第一节：组件化 Web Components

第二节：Typescript——Javascript的超集

第三节：Hello Angular2——实现一个简单Angular2.0 Demo

组件化 Web Components

Web Components是一个抽象的概念，本节并不会去深究它的原理或者核心概念，而是简单介绍Web Components带来的好处，与其解决的问题。

如果你想对Web Components有更多的了解，强烈推荐A Guide to Web Components，和What are web components and why are they important这两篇文章。

只要对前端稍有了解的人，都或多或少听说过bootstrap、jQuery UI、Kendo UI这些UI框架，专业的Web开发者们通过组件或者框架的方式在网上分享自己的代码，而其他开发者会在项目中为了实现某个功能，就会引入这些优秀的组件和框架，这样的故事每天都在不断的发生。

然而，当引入一个新的框架的时候，你必须万分小心，因为新引入的框架的CSS可能会摧毁你辛苦完成网站的样式。而它的js代码甚至可能摧毁你整个页面的逻辑。Web Components的出现完美的解决这个问题。

CSS污染与Shadow DOM

我们可以通过一个简单例子来演示一下CSS污染的情况，假如的项目中间有一个显示人员列表的页面

<div class="app"> 
  <div class="people-list"> 
    <div class="people selected"> 
    </div>
    <div class="people"> 
    </div> 
  </div>
</div>

如果想让被选中的人员的字体加粗，只需要定义这样的css就可以实现

.selected {
  font-weight: bold;
}

这个时候，再增加一个宠物列表页面

<div class="app"> 
  <div class="pet-list"> 
    <div class="pet selected"> 
    </div>
    <div class="pet"> 
    </div> 
  </div>
</div>

给被选中的宠物字体增加下划线效果

.selected {
    text-decoration: underline;
}

以上的代码放入一个项目中后，就会出现无论选中人员或者宠物的时候，字体都会被同时加粗和增加下划线，这就是典型的CSS污染。

尤其当多人协同开发一个网站时，CSS的相互污染会令人十分头疼。

Shadow DOM可以完美的解决CSS污染的问题，并且它的规范很早就被指定出来，但是浏览器对它的支持却十分可怜。

Angular 2.0支持原生的Shadow DOM，也可以通过模拟(emulated)的方式来支持它，通过设置每个component的encapsulation属性，可以决定每个组件的css的影响范围。这样，即使项目是由多人开发协作完成，或者引入了第三方的组件，开发者都不用担心自己网站样式受到意料之外的影响。

Angular2.0对Shadow DOM的实现会有后续文章介绍，如果你对这方面有兴趣，可以先阅读VIEW ENCAPSULATION IN ANGULAR 2这篇文章。

代码的复用与数据流

前端开发人员经常会陷入这种苦恼中，业务代码经常是高度定制的，而不同业务之间的功能虽然有重复，但是高度定制的代码很难重复使用。这种矛盾导致了大量代码的CTRL+C和CTRL+V。

代码难以复用的原因深究起来，其实是数据流走向的混乱，当千辛万苦开发完成一个网站的时候，我们很可能发现整个前端的数据流一坨乱麻，组件之间经常会发生跨层数据交互的情况。

像上图这种情况，单独将Person的组件在另外一个页面进行复用几乎是不可能完成的。

Web Components的思想提供了更好的可维护性，同样是上面的业务场景，假如我们能够将数据流进行规整，如下图所示

每个组件都有可维护的输入和输出接口，组件的维护和复用就会变得更加容易。而Angular 2在HTML层面表意了组件的输入和输出，我们仍然以宠物和人的网站做为例子，当我们实践Web Components思想进行开发后，得到的主页面的代码如下：

<app-one> 
  <people-list
    [input]="PeopleInput"  (output)="PeopleOutput">   </people-list> 
  <pet-list
    [input]="PetInput"  (output)="PetOutput">   </pet-list> 
</app-one>

注意people-list和pet-list都明确定义了输入和输出接口。

如果我们在另外一个产品中需要复用其中的people-list功能，只需要重新定义people-list的输入和输出接口就可以快速复用这个组件。

<app-two> 
  <people-list
    [input]="PeopleInput02"  (output)="PeopleOutput02">   
  </people-list> 
</app-two>

Web Components的思想为前端的开发提供了更好的可维护性，随着前端所面临的业务场景的越来越复杂，组件化可以显著的提升前端开发的效率。

不仅如此，组件化还为跨端的业务开发提供了可能性，正如Angular 2.0标榜的特性那样：One framework. Mobile and desktop.

Ionic2 作为基于Angular 2.0的移动端解决方案，虽然目前还在beta版本，提供的功能已经相当强大。笔者使用Ionic2的beta版本实现了一个简单版本的知乎日报，其客户端核心代码只有不到100行。

想象一下，以后桌面端和IOS，Android，WP只用维护一份核心代码，是不是真的要期待一下大前端时代的来临。

未完待续

PPT参考 http://slides.com/jimthedev/getting-started-with-angular-2-and-typescript

码农公寓

Angular 2.0的变革之路

组件化 Web Components

CSS污染与Shadow DOM

代码的复用与数据流

相关文章