【转】组件化的Web王国

本文由 埃姆杰 翻译。未经许可,禁止转载! 英文出处:Future Insights

内容提要

使用过多独立组件营造应用程序的想法并不例外。Web
Component的出现,是双重回忆基于组件的应用程序开发格局的好机遇。大家得以从这几个历程中收益,精通怎么利用现有技术成功目的,并且在今后做出自个儿的前端Web应用。

怎么是组件?

软件开发是1个语义丰富(术语日常持续贰个意思)的园地。很鲜明,那里的“组件”是1个很泛的称呼,所以有必不可少指明大家想要表达的,在前端Web应用的语言环境中的意思。

前者Web应用中的组件,是指部分规划为通用性的,用来创设较大型应用程序的软件,那一个零部件有二种表现情势。它能够是有UI(用户界面)的,也能够是当做
“服务”的纯逻辑代码。

因为有视觉上的表现格局,UI组件更便于领悟。UI组件简单的事例包罗按钮、输入框和文本域。不论是开普敦包状的菜谱按钮(无论你是还是不是喜欢)、标签页、日历、选项菜单只怕所见即所得的富文本编辑器则是部分更为高档的事例。

提供服务类型的零件或者会让人为难通晓,那类别型的例证包蕴跨浏览器的AJAX支持,日志记录只怕提供某种数据持久化的效益。

遵照组件开发,最要紧的正是组件能够用来组成任何零件,而富文本编辑器就是个很好的例子。它是由按钮、下拉菜单和一些可视化组件等整合。另1个例证是HTML5上的video成分。它同样带有按钮,也同时富含1个能从录制数据流渲染内容的成分。

干什么要营造组件?

既是以往早已通晓组件的意味,就看看使用组件的章程创设前端选拔的功利。

模块

您大概听闻过 “组件是天然模块”的说法。可以吗,感激它,我们又要解释这里的术语!

你只怕会觉得“组件”的传教更为吻合用来叙述UI,而“模块”更切合描述提供服务的效应逻辑。而对此笔者的话,模块和组件意思相近,都提供协会、聚焦和包裹,是与有个别成效单位相关的。

高内聚

又是3个软件工程的高频词! 大家将有关的一部分效应集团在同步,把全部封装起来,而在组件的事例中,就大概是不无关系的功力逻辑和静态能源:JavaScript、HTML、CSS以及图像等。那便是大家所说的内聚。

那种做法将让组件更便于保证,并且这么做之后,组件的可信赖性也将抓牢。同时,它也能让组件的机能肯定,增大组件重用的恐怕性。

可重用

您见到的示范组件,尤其是Web
Component,更关切可选取的题材。成效显然,达成清晰,API易于精晓。自然就能促进组件复用。通过创设可选取组件,大家不光保持了 D昂科雷Y(不要再一次造轮子)原则,还拿走了对应的补益。

此间要提示: 不要过度尝试创设可采用组件。你更应有关爱应用程序上所要求的那多少个特定部分。假诺之后相应必要应运而生,也许零部件的确到了可选拔的境界,就花一点附加时间让组件重用。事实上,开发者都喜欢去创立可选取功用块(库、组件、模块、插件等),做得太早将会让你后来伤心不堪。所以,吸取基于组件开发的别样利益,并且接受不是装有组件都能重用的真情。

可互换

3个意义肯定好组件的API能令人随意地转移其里面包车型大巴职能达成。假设程序内部的零件是松耦合的,那实在能够用3个零件轻易地更迭另3个零件,只要根据平等的 API/接口/约定

比方你使用GoInstant提供的实时效益劳动组件,那她们下一周闭馆服务诸如此类的新闻会影响到您。但是,只要提供了一如既往的数据同步API,你也能够自动塑造利用三个 FirebaseComponent 组件或许 PubNubComponent 组件。

可组合

前边也探究过,基于组件的架构让组件组合成新组件越发便于。那样的安插性让组件尤其小心,也让其它零件中创设和暴光的效应更好使用。

任凭是给程序添加效果,如故用来制作完整的程序,特别扑朔迷离的功能也能照猫画虎。那就是那种艺术的要紧利益。

是或不是有须要把具备的东西转换来组件,事实上取决于你协调。没有任何理由让你的程序由 你自己 的机件组合成你最惊叹的功能 ,乃至 最花哨的功能。而这一个零部件又扭曲构成任何零件。如若您从这些艺术中拿走了便宜,就想尽地去坚持不渝它。不过要小心的是,不要用相同的方法把工作变得复杂,你并不必要过分关切怎么样让组件重用。而是要尊崇突显程序的成效。

今昔就从头构建组件

在 Caplin
Systems
 创设基于组件的自有应用程序时,笔者动用了几条原则和履行。这么些规范由 BladeRunnerJS(BRJS) 开源工具集支撑。它被称作”BladeRunnerJS”
是因为我们将顺序功效都封装在称作 Blades 的事物中。Blade是能够在有些应用中收音和录音的功效特色,可是不能在程序间重用。当功能真的
变得进一步通用的时候,大家将相应的定义移到库文件中,供各类程序间接选举拔。特定应用中的组件(blade)和大家先后间的通用组件能够使用,我们要是找到最佳满意供给的任何库和框架。

那么,现在哪些库和框架能够援助大家创设组件呢?

在控制营造利用时应使用何种技术时,只需求探视流行的 TodoMVC 网站就足以看到大量可供采取的前端库和框架。你恐怕会觉得任何一种方案都能用来塑造基于组件的应用程序。可是,他们个中的部分方案内置了对组件的支撑。在那之中相比较显赫的是AngularJS、Ember
和 React。

零件间是怎么着通信的?

在深远示例此前有需要不难地关系组件间通信的标题。如若组件之间是“独立”、“模块化”的,他们又是什么样互相通讯的啊?

最显眼的答案正是让组件间相互引用并经过他们中间的API交互。那样做的标题就在于,那种做法会让组件相互看重。长时间内或然辛亏,一段时间现在,你在修改程序的时候程序会失控,修改2个组件就会对另一个零部件发生巨大的震慑。决定移除3个无法推动预期价值组件大概会让您的应用程序甘休工作,因为它背后会有数个零件注重于它。

此时,化解方案是提供松耦合的,让组件之间很少依旧差不离不知晓相互的方案。组件并不直接开立别的零件,在她们供给通讯的时候,他们通过“接口/约定”也许经过 “服务”。大家在创设B途达JS程序时考虑了累累这么些方面包车型大巴事物,并且应用 ServiceRegistry 访问用于组件间通信的服务照旧是Web
API
这么的能源。Angular和Ember接纳了服务和借助注入消除那类难点。

以身作则组件my-avatar

为了显得大家什么样用这个库和框架创设最基本的机件,我们建立了三个包涵UI,用于取回和浮现用户头像的粗略示例。在大概的情景下,该器件会有 my-avatar 标签,会从以下七个属性中获取头像:

  • service 允许设置叁个劳务。例如 twitter 或者 facebook
  • username 用于取回该用户名相对应的头像

AngularJS

AngularJS 大概是明日用来营造程序最风靡的前端消除方案了。作为创作者的谷歌(Google),重新考虑HTML,考虑怎么样重新发明,满足近期Web开发的急需。

Angular中得以选取自定义指令概念组件。之后,你能够采用 HTML
标记注脚自定义组件。

查看代码演示: http://jsbin.com/lacog/2/edit

本条例子显示了采用Angular指令的简短程度。值scope 定义了从
 my-avatar 成分中赢得,并且之后用来塑造相应的img标签和渲染成用户头像的个性。

Ember

框架与库的争议旷日持久,总的来说框架是挟持你按某种格局做业务,所以它是狂暴的。很肯定,Angular是个框架,而Ember的笔者,Yehuda
Katz和TomDale也很乐意把Ember看作框架

Ember 有对它称作组件的内建援救。Ember
Components背后的见地是尽量的向Web
Components看齐,当浏览器援救允许时,就足以很有益地搬迁到Web
Components中。

翻看代码演示: http://jsbin.com/nawuwi/4/edit

地点的例证中动用了 handlebars 做模板,所以成分的定义不是一模一样种语法。

React

React 即使是个新人,但是却已经有那2个的帮助者。它由Twitter开发,并且一度到家用于推特(Twitter)的UI和有个别Instagram的UI。

应用React创设组件的引荐格局是应用叫做 JSX 的东西来定义它们。那是一种“推荐在React上选拔的JavaScript语法转换”。请不要就此分心。他们已经在文书档案中建议,这些想法正是用来帮助您在JavaScript中写出HTML标记的。

我不是说你并不能直接在HTML中添加标签,而必须运用JSX成立本人的零部件。不过,只要你定义了1个零部件,你就足以应用这几个组件创制别的零件。

翻看代码演示: http://jsbin.com/qigoz/5/edit

据此,组件使用的评释语法须要相应的HTML成分和对 React.RenderComponent 的调用。

未来:Web Component和其他

Web
Component才是前景!正如名字所表示的那样,他们承诺将拉动能够将作用封装成组件的浏览器原生补助。

本人将不难展现Web
Component并且演示我们今后能够怎么使用它。尤其浓厚的剧情请参考本文末尾的 “外部财富” 一节。

她们提供的效率包罗:

自定义成分

我们在上边关怀的是用Angular、Ember和React营造 my-avatar 的事例。或然的情事下,那样的措施将以页面上还是模板上加上的自定义成分表示。Web
Component蕴涵透过自定义成分取得的原生辅助– 相对是Web Component标准的着力组成都部队分。

概念新成分,蕴涵走访成分生命周期的一对事件例如曾几何时成立(createdCallback)、什么日期添加在DOM树上(attachedCallback)、曾几何时从DOM树上分离(detachedCallback),曾几何时成分属性改变(attributeChangedCallback(attrName, oldVal, newVal))。

自定义成分的2个关键的部分正是有能力从原本成分扩充,因而得到原有元素相应的功效。示例中大家扩展了 <img>元素 。

最终,大家所写的代码中,自定义成分正在并且倾向去做的便是将复杂的事物抽象化,让用户关怀于单个组件爆发的市场股票总值,从而用来营造特别充足的效益。

Shadow DOM

还记得iframe们吧?大家还在使用它们,是因为他们能确定保障组件和控件的JavaScript和CSS不会影响页面。 Shadow
DOM
 也能提供这么的维护,并且没有iframe带来的承负。正式的说法是:

Shadow
DOM的布置性是在shadow根下隐藏DOM子树从而提供包装机制。它提供了树立和保证DOM树之间的效应界限,以及给那几个树提供相互的效益,从而在DOM树上提供了更好的意义封装。

HTML导入

我们长日子在此以前就能够导入JavaScript和CSS了。 HTML导入功用提供了从别的HTML文书档案中导入和任用HTML文书档案的能力。那种不难性同时期表能够很有益于地用一些零部件创设另一些零件。

最终,那样的格式很理想,适合可采取组件,并且能够用你最欣赏的包管理消除方案宣布(例如: bower、 npm 或者 Component)。

模板

大家中的许多人曾经应用像handlebars、mustache也许underscore.js中的模板那样的消除方案(就如我们在地点的Ember示例中用的均等)。Web
Component通过 template元素 提供了模版的原生帮助

原生模板让您能够注明分类为“隐藏DOM”可是解析成HTML的号子片段。他们在页面加载风尚未用处,但是足以在运营时实例化。他们可以被寻找到 ,可是在插入活动的DOM树前不会加载任何相关财富。

Platform.js

唯独,就好像每便提到新特色一样,我们无法明确浏览器是还是不是支持那几个特色。

图片 1

停止二零一四年1月2十五日,Web Component 的浏览器援救境况

相同,咱们也能透过有个别神奇的杰出代码,初叶应用一些Web
Component所提供的法力。

图片 2

有了包容库的Web Component协理意况

好音讯是八个初阶进的浏览器厂商谷歌和Mozilla正在努力完善包容库
,扶助大家采纳Web Component。

以下示例显示使用platform.js后我们能够什么定义作为img成分扩充的my-avatar成分。最好的是它能用到原生img成分的全部功效。

查阅代码演示: http://jsbin.com/pihuz/4/edit

点击 HTML5 Rocks Custom Elements
tutorial
 以查看成立自定义成分的越来越多信息。

注:借使您对platform.js感兴趣,也得以看看 bosonic

原生技术的支撑目标正是给我们提供对应的营造基础。所以Web
Component并不是库和框架的末代信号。

Polymer

Polymer 是演示创设基于原生Web
Component成效的特等示例。它提供了增选的机制用来创设自定义的Polymer成分,并且提供了成都百货上千主干的UI组件,让您能够创建自身的应用程序。

图片 3

下边你能够见到 my-avatar 成分的简要创设进度,同时我们也赢得了想要的号子。

查看代码演示: http://jsbin.com/gukoku/2/edit

谷歌(Google)正在尽力推进Polymer。请查看 Polymer getting started
guide
 查看更多示例。

X-Tag和Brick

Mozilla开发了团结的自定义元素包容库,叫做 X-Tag。X-Tag是一个为启用Web
Component进行多项包容的库,并即将提供对Web Component的全部协理。

以下就是行使X-Tag的 my-avatar 自定义组件,与正规文书档案十三分近乎:

翻开代码演示:http://jsbin.com/wexiz/2/edit

Mozilla同时还创造了1个叫 Brick 的库,在那之中囊括X-Tag,提供“一组用来便宜高效营造Web应用程序的UI组件”,使用与谷歌的Polymer相似的办法。

总结

使用基于组件的架构创设应用程序有不少利益,你能从现有的框架中学到,也能在创设前端Web应用程序时从引进的Web
Component中上学到。

这场组件化Web王国的旅程,让我们在面临框架和工具的挑选时左顾右盼不决。可是,Web
Component会是最后的点灯!

Web
Component会提供创设应用程序的原生统一的法门
。现有的框架很有恐怕会转而选择Web
Component也许申明什么与它一同使用。Ember的策略是让迁移到Web
Component越发便利,而Instagram的React则是出现说法整合的好例子,已经有2个 ReactiveElements 演示它了。因为Angular和Polymer都是Google的花色,他们很有或许会走到一块。

表面能源(英文)

相关文章