素材巴巴 > 程序开发 >

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

程序开发 2023-09-03 11:03:59

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污染的情况,假如的项目中间有一个显示人员列表的页面

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

.selected {font-weight: bold;
 }

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

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

.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。

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

_2016_05_19_8_23_26

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

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

_2016_05_19_8_23_34

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


  

  

 

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

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


  

 

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


标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。