atitit.  web组件化原理和计划

 

 

 

1. Web Components提供了一如既往种植组件化的引进方法,具体来说,就是:1

2. 组件化的本质目的并不一定是如为可复用,而是提升可维护性。 不拥有复用性的组件”2

3. 函数逻辑来生成界面 的优缺点2

4.
咱们来看看哪些将一个政工界面切割成组件。通用性的物封装成组件,另外一种是总体应用还组件化。3

5. 高内聚5

6. 可组合5

7. Iframe  容器化6

8. 参考6

 

 

 

前景的WEB开发,将会学今天桌面软件之开路子,那就是“组件化”。

目前组件化最好之饶是React  angular了。。

React  的不过要命题材是以js为核心,嵌入html

儿anrular最老题目是啰嗦,繁琐。

 

 

 

1. Web Components提供了同等种植组件化的推介方式,具体来说,就是:

 

· 通过shadow DOM封装组件的内部结构

· 通过Custom Element对外提供组件的价签

· 通过Template Element定义组件的HTML模板

· 通过HTML imports控制组件的依赖性加载

眼看几乎栽东西,会针对现有的各种前端框架/库发生非常巨大的熏陶:

· 由于shadow DOM的面世,组件的内贯彻隐藏性更好了,每个组件更加独立,但是及时使得CSS变得要命烂,LESS和SASS这样的体框架面临重大挑战。

· 因为零部件的隔离,每个组件内部的DOM复杂度降低了,所以选择器大多数情下可限制于组件内部了,常规选择器的复杂度降低,这会促成人们对jQuery的依下降。

· 又以零部件的隔离性加强,致力为建前端组件化开发方式的各种框架/库(除Polymer外),在自己的机件实现方式和正式Web Components的组合,组件之间数据模型的一道等题材上,都碰到了特别的挑战。

· HTML
imports和新的组件封装方式的应用,会招前面常用的以JavaScript为重点的各类组件定义方式处境尴尬,它们的乘、加载,都面临了新的挑战,而出于全局作用域的削弱,请求的合并变得紧得差不多。

 

 

2. 组件化的真相目的并不一定是如为可复用,而是提升可维护性。 不富有复用性的机件”

恢宏之政工界面,这块东西坏引人注目复用价值十分没有,基本未存在复用性,但依然有许多方案遭管其“组件化”了,使得她成为了“不抱有复用性的零部件”。为什么会并发这种情景也?

组件化的真面目目的并不一定是使为可复用,而是提升可维护性。这一点比较面向对象语言,Java要比较C++纯粹,因为其不同意例外情况的产出,连main函数都须写及有类里,所以Java是彻头彻尾面向对象语言,而C++不是。

 

作者::  ★(attilax)>>>   绰号:老哇的爪子 ( 全名::Attilax Akbar Al Rapanui 阿提拉克斯 阿克巴 阿尔 拉帕努伊 ) 汉字名:艾龙,  EMAIL:1466519819@qq.com

转载请注明来源: http://www.cnblogs.com/attilax/

 

 

3. 函数逻辑来生成界面 的优缺点

另外有有框架/库偏爱用函数逻辑来生成界面,早期的ExtJS,现在的React(它里面还是可能使模板,而且对外提供的是组件创建接口的尤其封装——jsx)等,这种实现技术之优势是例外平台上编程体验一致,甚至好让每种平台封装相同之零部件,调用方轻松写一份代码,在Web和不同Native平台上可用。但这种艺术也来较辛苦的地方,那便是界面调整比较繁琐。

 

4. 咱来探视哪些将一个事务界面切割成组件。通用性的东西封装成组件,另外一栽是全部应用还组件化。

 

起如此一个简短场景:一个雇员列表界面包括个别个组成部分,雇员表格和用于填写雇员信息的表单。在这个场景下,存在哪些组件?

对此此问题,主要是个别栽支持,一种植是单纯把“控件”和比较起通用性的物封装成组件,另外一栽是合应用还组件化。

对前同一种办法吧,这个中只有设有数据表格这么一个零件。
对后同栽办法吧,这中间来或有:数据表格,雇员表单,甚至还连雇员列表界面这么一个双重可怜的机件。

当时片种植办法,就是咱前所说之“局部组件化”,“全组件化”。

 

 

比如Angular里面的这种:

<div
ng-include=”‘aaa/bbb/ccc.html'”></div>

就无让其什么名字,直接include进来,用文件路径来区分。这个片的用意可据此该目录结构描述,也就算是通过物理名而不逻辑名来标识,目录层次做了一个死好的命名空间。

 

尽管如刚之雇员表单,既然您不从标签的命名上去区分,那得会在组件上加配置。比如您原来想然:

<EmployeeForm
heading=”雇员表单”></EmployeeForm>

接下来于组件内部,判断出无发生安heading,如果没就非显得,如果来,就显得。过了点儿龙,产品问会免可知拿heading里面的某个几乎单字加粗或者换色,然后码农开始同意这个heading属性传入html。没多久后,你会惊讶地意识有人因此而的零部件,没与你说,就在heading里面传来了折按钮的html,并且因此选择器给折叠按钮加了风波,点一下后头还会折叠这个表单了……

下一场您同一想,这个很,我得吃他再也加个配置,让他会好

2015前端组件化框架的路(转) – GISER_U – 博客园.htm

 

此题材讨论结束了,我们来瞧另外一个题目:如果UI组件有工作逻辑,应该怎样处理。

像,性别选择的下拉框,它是一个不胜通用化的效力,照理说是杀吻合给当作组件来供的。但是究竟怎样封装它,我们就算有点艰难了。这个组件里除了界面,还起数据,这些数量应坐在组件里为?理论及起组件的封装性来说,是都应有以中的,于是就这样去了一个组件:

<GenderSelect></GenderSelect>

 

 

里的签,并无特是界面元素,甚至逻辑组件为堪这么,比如这个代码:

<my-panel>

    <core-ajax
id=”ajax” url=”http://url” params=”{{formdata}}”
method=”post”></core-ajax>

</my-panel>

只顾到这边的core-ajax标签,很显著这既是纯粹逻辑的了,在多数前端框架或仓库中,调用ajax肯定不是如此的,但在浏览器端这么干吧未是它们独创,比如flash里面的WebService,比如早期IE中冲htc实现之webservice.htc等等,都是如此干的。在Polymer中,这仿佛东西叫做非可见元素(non-visual-element)。

 

 

当Web Components与前者组件化框架的关系上,我当是这般个规范:

各种前端组件化框架应当尽可能为Web Components为基本,它从为组织这些Components与数据模型之间的涉,而不失关心有具体Component的中贯彻,比如说,一个列表组件,它到底内部以什么实现,组件化框架其实是无须关心的,它仅仅当关注这个组件的多寡存取接口。

下一场,这些组件化框架还错过因自己之观,进一步对这些专业Web Components进行包装。换句话说,业务开发人员使用某个组件的上,他是理所应当感知不顶之组件内部究竟以了Web Components,还是一直用传统方法。(这一点微理想化,可能并无是那爱得,因为我们还要管理像import之类的业务)。

 

 

5. 高内聚

又是一个软件工程的高频词! 咱们将有关的一对职能团体以合,把方方面面封装起来,而于组件的事例中,就可能是息息相关的功用逻辑与静态资源:JavaScript、HTML、CSS以及图像等。这就算是咱所说之内聚。

这种做法将被组件更易于保障,并且这么做下,组件的可靠性也用提高。同时,它为会为组件的效力肯定,增大组件重用的可能。

6. 可组合

之前也讨论过,基于组件的架让组件组合成新组件更加便于。这样的规划给组件更加在意,也吃其他零件中构建与暴露的机能又好利用。

任由是受程序上加效果,还是用来制造完的次第,更加复杂的职能为克使法炮制。这就是是这种措施的显要利益。

是否生必不可少将具备的物转换成为组件,事实上在你自己。没有任何理由让您的顺序由 你协调 的机件组合成你尽惊诧之意义 ,乃至 最花哨的法力。而这些组件又扭曲成任何零件。如果你从夫法中得到了补,就想法地去坚持它。然而要专注的是,不要就此同样的办法把工作变得复杂,你并不需要过分关注如何给组件重用。而是如体贴呈现程序的功效。

 

 

7. Iframe  容器化

还记得iframe们为?我们尚于用她,是坐他俩会担保组件和控件的JavaScript和CSS不会见潜移默化页面。 Shadow
DOM 也能够提供这么的保护,并且没有iframe带来的当。正式的说法是:

Shadow
DOM的设计是于shadow根下隐藏DOM子树从而提供包装机制。它提供了树和保全DOM树之间的功能界限,以及被这些造就提供相互的职能,从而以DOM树上提供了又好的效能封装。

 

 

7.1.1.1. HTML导入

咱们添加时先即便好导入JavaScript和CSS了。 HTML导入功能供了于其他HTML文档中导入和任用HTML文档的能力。这种简单性同时代表可以生有益地用有零部件构建另一些零部件。

最终,这样的格式很了不起,适合不过选用组件,并且可据此你太欣赏的保证管理解决方案发布(例如: bower、 npm 或者 Component)。

 

8. 参考

组件化的Web王国 – 博客 – 伯乐在线.htm

 

 

 

 

相关文章

网站地图xml地图