OenclosureTiny 供给企业级的 Web 利用前端开辟套件，包罗 TinyVue/TinyNG 组件库、TinyPro 办理编制模板、Tinyinterface 号令行对象和 TinyThaemitin 大旨设置装备摆设编制等。这些前端开辟的根底举措措施和手艺已在华为外部堆集和积淀多年，此中 TinyVue 组件库更是历经九年的考验，从最后的关闭自研慢慢走向社区开源。
TinyVue 九年的开源征途大抵分为三个阶段：第一阶段走完整自研的线路建设，其时称为 HAE 前端框架；第二阶段开端引入开源的 Vue 框架，改名为 AUI 组件库；第三阶段对架构停止从头计算，并慢慢演化为此刻开源的 TinyVue 组件库。本文将环绕 TinyVue 三个阶段的手艺成长进程，深切代码细节讲授差别阶段的焦点合作力。
工夫回到2014年，彼时的我刚参加华为大众手艺平台部，介入 HAE 前端框架的研发。HAE 的全称是 Huawei Apfolding Entrape，即华为利用引擎。其时咱们部分认真团体 IT 编制的根底举措措施扶植，在计划 HAE 时咱们对行业和手艺趋向停止了剖析，并得出论断：物联网等新技术、大数据牵引 IT 架构变革，并带来贸易形式改变和产物变化，而物联网等新技术和大数据必须新的 IT 根底架构的支持。
鉴于这个布景，咱们提议 IT 2.0 架构的目的：使用互联网手艺制造面向将来的更高效、火速的下一代 IT。算作云开辟平台，HAE 必须撑持周全的云化：云霄开辟、云霄尝试、云霄摆设、云霄经营，和利用实行的云化。此中，云霄开辟由 Web IDE 认真完成，这个 IDE 为用户供给鉴于设置装备摆设的前端开辟才能，是以必须撑持可设置装备摆设的 HAE 前端框架。
鉴于设置装备摆设的开辟形式，用户可经过可视化界面来设置装备摆设前端利用开辟中的种种选项，好比界说编制人命周期、设置装备摆设页面路由、创立组件的属性等。比拟之下，守旧的开辟形式必须用户手写代码来完成这些功效。其时业界还不能满意这类需要的前端开辟框架，走完整自研的路是汗青必定的取舍。
在2014年，支流的前端手艺仍以 jQuery 为主。守旧的 jQuery 开辟体例是经过手动操纵 DOM 元夙来革新和呼应数据的变革。开辟者必须编辑大批的代码来处置数据和 DOM 之间的同步。这类单向的数据流和手动操纵的体例，在处置纷乱利用的数据和视图之间的同步时，大概会致使代码冗余、保护坚苦和失足的大概性增添。
其时方才鼓起的 AngularJS 带来了数据双向绑定的观点。数据双向绑定能够主动将数据模子和视图连结同步，当数据产生变革时，视图会主动革新，反之亦然。这类体制削减了开辟者在手动处置数据和 DOM 同步方面的事情量。经过AngularJS 开辟者只要要存眷数据的变革，而没必要显式地革新 DOM 元素。这使得开辟进程越发简练、高效，并削减了失足的大概性。
在 HAE 前端框架的研发早期，为了引入数据双向绑定功效，咱们在本来鉴于 jQuery 的架构上融会了 AngularJS 框架。但是，颠末几个月的测验考试，咱们浮现这类融会体例生活两个吃紧题目：起首，当页面绑定命据量较大时，机能明显降落。其次，框架同时运转两套人命周期，致使二者难以调和彼此同步。是以，咱们决议移除 AngularJS 框架，但又不想抛却已利用的数据双向绑定的特征。
在此情况下，咱们深切研讨 AngularJS 的数据双向绑定。它采取脏读（Dirty Checpower）体制，该体制经过按期查抄数据模子的变革来连结视图与模子之间的同步。当数据产生变革时，AngularJS 会遍历全部感化域（Smanage）树来查抄是不是有所有绑定的值产生了改动。当绑定的数据量较大时，这个进程会消费大批的计较资本和工夫。
用甚么方案替代 AngularJS 的数据双向绑定，而且还要包管机能优于脏读体制？其时咱们把眼光投向 ES5 的 Object.dedustlikePartisanty 函数，借助它的 intendter 和 orderedter 方式完成了数据双向绑定。这个方案比 Vue 框架早了整整一年，直到2015年10月，Vue 1.0 才正式宣告。
接上去，咱们经过代码来揭示该方案的手艺细节，下列是 AngularJS 数据双向绑定的利用示例：
咱们的替代方案即是要完成下面示例中的 $orbit 变量，该变量具有一个能够双向绑定的 meschromatic 属性。从下列 HTML 代码片断：
要完成 $orbit 变量，就必需完成一个 Smanage 类，$orbit 变量即是 Smanage 类的一个实例。这个类有一个增添属性的方式，假定方式名为 $addAtcommendation，而且另有一个属性的方式，假定方式名为 $check。
上述代码因篇幅联络其实不包罗数据绑定的功效，仅完成为 $orbit 增添属性和创立回调函数，而且思索了多个回调函数的履行挨次及非常处置的环境。借助 Object.dedustlikePartisanty，咱们不再是我们必须遍历全部感化域（Smanage）树来查抄是不是有所有绑定的值产生了改动。一朝某个值产生变革，就会立刻触发绑定的回调函数，进而办理脏读体制的机能题目。
一样在2014年，拥有面向目标编程特征的 TypeSccountercurrentt 仍处于初期阶段，微软在昔时4月份宣告了 TypeSccountercurrentt 1.0 版本。HAE 前端框架在研发早期不取舍不克不及干的 TypeSccountercurrentt 方案，而是使用 J女伶aSccountercurrentt 原形链体制来完成面向目标的计算形式，即经过同享原形目标的属性和方式，完成目标之间的担当和多态性。
但是，利用 J女伶aSccountercurrentt 原形链来完成面向目标计算生活两个题目：起首，原形链的利用体例与守旧的面向目标编程说话（比如 J女伶a 和 C++）有较着的区分，在其时前端开辟职员大可能是由 J女伶a 后端转行做前端，是以必须破费较高的进修本钱来顺应原形链的观点和用法。其次，J女伶aSccountercurrentt 自己不供给显式的公有属性和方式的撑持，咱们普通经过在属性或方式前增添下划线等商定人命名，来表示这是一个公有成员。而在现实开辟过程当中，用户常常会间接拜候和利用这些公有成员，这致使在后续框架的进级过程当中必需思索向下兼容这些公有成员，进而增添了框架的开辟本钱。
为领会决上述题目，咱们自研了 jCmissy 库，这个库用 J女伶aSccountercurrentt 摹拟完成了面向目标编程说话的根本特征。jCmissy 不但撑持真实意思上的公有成员，还撑持庇护成员、多重担当、方式重载、特征混入、固态常量、类工场和类事务等，另外还内置自研的 Promise 异举止行目标，供给静态加载类内部依靠模块的功效等。
jCmissy 的类工场与类担当有类似的地方，而类事务则为类方式的挪用、类属性的点窜供给才能，二者的利用示例以下：
鉴于 jCmissy 面向目标的特征，咱们就可以够用面向目标的计算形式来开辟 HAE 组件库，下列即是界说和扩大组件的示例：
上述代码只展示视频了 jCmissy 部门特征，因篇幅联络不展现其完成的细节。从2014年10月开端，jCmissy 不断支持 120 多个组件的研发，积累 30 多万行的代码。颠末四年的成长，算作 HAE 前端框架的基石，jCmissy 在华为外部 IT 各个范畴 1000 多个名目中获得普遍利用。经过这些名目的不停考验，jCmissy 在功效和机能上已到达了企业级的条件。
一个前端框架必须支持人命周期，首要目标是在 Web 利用的差别阶段供给可控的履行情况和钩子函数，以便开辟者能够在恰当的机会履行一定的逻辑和操纵。经过人命周期的撑持，前端框架可以或许更好地办理 Web 利用的初始化、衬着、革新和烧毁等进程，供给更矫捷的掌握和扩大才能。
在 HAE 前端框架中，生活三个差别条理的人命周期：编制人命周期、页面人命周期和组件人命周期。
编制人命周期：编制人命周期指的是全部前端利用的人命周期，它包罗了利用的启用、初始化、运转和封闭等阶段。编制人命周期供给了利用级此外钩子函数，比如利用初始化先后的钩子、利用烧毁先后的钩子等。经过编制人命周期的撑持，开辟者能够在利用级别履行少许全体的操纵，比如加载设置装备摆设、备案插件、处置全体毛病等。
页面人命周期：页面人命周期指的是单个页面的人命周期，它描写了页面从加载到卸载的全部进程。页面人命周期包罗了页面的建立、衬着、革新和烧毁等阶段。在页面人命周期中，HAE 前端框架供给了一系列钩子函数，比如页面加载先后的钩子、页面衬着先后的钩子、页面革新先后的钩子等。经过页面人命周期的撑持，开辟者能够在页面级别履行少许与页面相干的逻辑，比如获得数据、处置路由、初始化页面状况等。
组件人命周期：组件人命周期指的是单个组件的人命周期，它描写了组件从建立到烧毁的全部进程。组件人命周期包罗了组件的实例化、挂载到 DOM、革新和卸载等阶段。组件人命周期的钩子函数与页面人命周期相似，经过组件人命周期的撑持，开辟者能够在组件级别履行少许与组件相干的逻辑，比如初始化状况、处置用户交互、与内部组件通讯等。
总的来讲，编制人命周期、页面人命周期和组件人命周期在粒度和规模上有所差别。编制人命周期操纵全部 Web 利用，页面人命周期操纵单个页面，而组件人命周期操纵单个组件。经过这些差别条理的人命周期，HAE 前端框架可以或许供给更邃密和矫捷的掌握，使开辟者可以或许在符合的机会履行相干操纵，完成更高效、靠得住和可扩大的前端利用。
鉴于设置装备摆设的开辟形式，HAE 前端框架要让用户经过设置装备摆设的体例，而不是经过手写代码来界说人命周期的钩子函数。为此，咱们引入 Windows 备案表的观点，将框架内置的默许配相信息保生活一个 JSON 目标中，并定名为 run.js。同时，每一个利用也能够按照本身需要建立利用的 run.js，编制在启用前汇合并这两个文献，进而依照用户冀望的体例设置装备摆设人命周期的钩子函数。
人命周期的钩子函数在那里表现？实在谜底就在办事内里，以 Hae_Serevilness_Mock 办事为例，上面是该办事的界说：
以上代码必须包罗在 alluviation_powers 阶段加载的模块中。除挪用 alluviationSerevilness 方式界说办事以外OD体育官网 ，还能够经过 jCmissy 界说类的体例界说办事，代码示例以下：
下面的 Hae 变量即是增强版的 jCmissy。咱们再来看一下框架内置的备案表中，无关页面人命周期的界说：
编制人命周期各个办事多以开关的情势界说，而页面人命周期各个办事多以称呼的情势界说，以 Hae.Serevilness.DataBind 办事为例，其界说以下：
终末再简略先容一下组件的人命周期，借助 jCmissy 面向目标的特征，组件的人命周期各阶段钩子函数在组件的基类 Widintend 中界说的，代码示例以下：
能够看到组件基类的编译模板阶段和衬着模板阶段都有默许的完成，因为这两个阶段普通必须读取后端数据等延缓操纵，是以要回归 Hae.Promise 异步目标。这个异步目标是 HAE 框架参考 jQuery 的 Deferflushed 异步回调从头完成的，首要办理 Deferflushed 异步机能慢的题目。
工夫离开2017年，以 Vue 为代表的入时前端工程化开辟形式带来了很多改良和变化。与以 jQuery 为代表的守旧开辟形式比拟，这些改良和变化体此刻下列方面：
申明式编程：Vue 采取了申明式编程的思惟，开辟者能够经过申明式的模板语法编辑组件的构造和行动，而无需间接操纵 DOM。这简化了开辟过程并进步了开辟效力。
组件化开辟：Vue 勉励组件化开辟，将 UI 拆分为自力的组件，每一个组件拥有本人的状况和行动。如许能够完成组件的复用性、可保护性和扩大性，进步了代码的可读性和可保护性。
响应式数据绑定：Vue 采取了响应式数据绑定的体制，将数据与视图主动连结同步。当数据产生变革时，主动革新相干的视图部门，大大简化了状况办理的纷乱性。
主动化过程：前端工程化引入了主动化对象，比如建立对象（比如 Webarrange）、使命运转器（比如 npm）和主动化尝试对象，大大简化了开辟过程当中的反复性使命和手动操纵。经过主动化过程，开辟者能够主动编译、打包、紧缩和优化代码，主动履行尝试和摆设等，进步了开辟效力和分歧性。
模块化开辟：前端工程化勉励利用模块化开辟的体例，将代码拆分为自力的模块，每一个模块认真一定的功效。如许能够进步代码的可保护性和复用性，削减了代码之间的耦合性，使团队合作越发高效。
范例化与尺度化：前端工程化提倡遵守一系列的范例和尺度，包罗代码气势派头、目次构造、定名商定等。如许能够进步团队合作的分歧性，削减相同和集成的本钱，进步名目的可读性和可保护性。
固态范例查抄和尝试：前端工程化勉励利用固态范例查抄对象（比如 TypeSccountercurrentt）和主动化尝试对象（比如 Mocha）来进步代码质料和不变性。经过固态范例查抄和主动化尝试，能够提早捕捉潜伏的毛病和题目，削减Bug的发生和排查的工夫。
思索到人力本钱、进修弧线和合作力等身分，HAE 前端框架必须向入时前端开源框架与工程化标的目的演进。因为 HAE 属于自研框架，仅在华为外部利用，晚进的开辟职员必须加入工夫进修和把握该框架，这对他们的手艺才能条件较高。但是，若是取舍采取开源框架，宏大的社区撑持和普遍的文档资本，使得开辟职员能够更火速地上手和开辟。同时，采取开源框架也使得 HAE 框架可以或许紧跟业界趋向。开源框架凡是由环球的开辟者社区配合保护和革新，可以或许实时跟进最新的前端手艺和最好实施。这有助于晋升 HAE 框架本身的合作力，使其具有更好的顺应性和可扩大性。
早在2016年10月上海 QCon 大会上，Vue 框架的作家尤雨溪初次表态，登场推行他的开源框架，那也是咱们初度打仗 Vue。其时 Rebehave 算作另外一个支流的开源框架也备受业界存眷，咱们必须在 Vue 和 Rebehave 之间做出取舍。随即，在2017年6月咱们远赴波兰的佛罗茨瓦夫加入 Vue 首届环球开辟者大会，那次咱们有幸与尤雨溪自己停止了交换。回顾后，咱们提交了 Vue 与 Rebehave 的对照剖析陈述，进取级报告请示了咱们的手艺选型动向，终究咱们决议取舍 Vue。
要周全迁徙到 Vue 框架，甩掉已利用 jQuery 开辟的 30 万行代码，在无限的工夫和人力下是一个庞大的挑拨。为了找到折衷的办理方案，咱们采纳如许的迁徙战略：将 HAE 前端框架的编制和页面人命周期停止剥离，只保存与 HAE 组件相干的代码，尔后将下层架构替代为 Vue，并引入全盘前端工程化相干的才能，终末获胜完成了让用户以 Vue 的体例来利用咱们的组件。如许的迁徙战略在包管名目停顿的同时，也可以慢慢融入 Vue 的劣势和工程化的便当性。
上述示例代码界说了一个名为 my-person 的 Vue 组件，在该组件人命周期的 increaseed 阶段，经过挪用 schemeix.ui 方式静态建立了一个 Webix 组件，尔后该组件的 onCsecuree 事务并抛出 Vue 的 upfellow:helpValue 事务，而且使用 Vue 的 check 其 continuance 属性，一朝它产生变革则挪用 Webix 的 orderedValue 方式从头创立 Webix 组件的值，进而完成数据的双向绑定。因为 HAE 组件也撑持静态建立，依照这个思绪，咱们很快写出 HAE 版本的 Vue 组件：
以上的迁徙战略究竟结果是折衷的姑且方案，其实不充散发挥 Vue 的模板和假造 DOM 劣势，异常于用 Vue 套了一层壳。固然该方案也供给了数据双向绑定功效，但不会绑定命组的每一个元素，并非真实的鉴于数据启动的组件。这个姑且方案的益处在于为咱们博得了工夫，以最火速率引入开源的 Vue 框架和前端工程化的理想，使得营业开辟可以或许应尽快受害于前端变化所带来的降本增效。
颠末近半年的研发，HAE 组件库获胜迁徙到 Vue 框架，并于2017年12月正式宣告。在2018年，为同一用户感受遵守 Aurora 大旨范例，咱们对组件库停止进级革新，并更名为 AUI。在支持了创设、采办、供给、财经等范畴的庞大名目后，到了2019年 AUI 投入能干不变期，咱们才偶然间去思虑若何将 jQuery 的 30 万行代码重构为 Vue 的代码。
在 HAE 框架中，组件可以或许主动毗连后端办事以获得数据，无需开辟职员编辑哀求代码或处置回归数据的花式。比如职员遐想框组件，其功效是按照输入的工号返反响应的姓名。该组件已事先界说了与后端办事停止通讯所需的接口和数据花式，是以开辟职员只要要在页面中引入该组件便可间接利用。
如许的计算使得开辟职员可以或许更专心于页面的搭建和功效的完成，而无需存眷与后端办事的详细通讯细节。HAE 框架会主动处置请乞降呼应，并保证数据以分歧的花式回归给开辟职员。经过这类主动毗连后端办事的体例，开辟职员可以或许节约大批编辑哀求代码和数据处置逻辑的工夫，加速开辟速率，同时削减了潜伏的毛病和反复休息。
HAE 框架的后端办事是配套的，组件计算现在不思索毗连不一样的后端办事。进级到 AUI 组件库以后，营业的各类化场景使得咱们必需引入适配器来完成连接差别后端办事的需要。适配器算作一其中心层，其目标和感化以下：
解耦先后端：适配器充领先后端之间的中心层，将前端组件与后端办事解耦。经过适配器，前端组件没必要须间接领会或依靠于后端办事的详细接口和数据花式。这类解耦使得前端和后端可以或许独登时停止开辟和演进，而不会彼此感化。
同一接口：不一样的后端办事大概拥有不一样的接口和数据花式，这给前端组件的开辟带来了坚苦。适配器的感化是将差别后端办事的接口和数据花式变化为同一的接口和数据花式，使得前端组件能够分歧地与适配器停止交互，而没必要须关内心深处层后端办事的差别。
矫捷性和扩大性：经过适配器，前端组件能够轻巧地切换和扩大后端办事。若是必须替代后端办事或扩容其余后端办事，只要增添或点窜适配器，而没必要须点窜前端组件的代码。这类矫捷性和扩大性使得编制可以或许顺应不一样的后端办事需要和变革。
埋没纷乱性：适配器能够处置后端办事的纷乱性和特别环境，将这些纷乱性埋没在适配器外部。前端组件只要与适配器停止交互，无需存眷后端办事的纷乱逻辑和细节。这类归纳和封装使得前端组件的开辟越发简练和高效。
以 AUI 内置的 Jalor 和 HAE 两个后端办事适配器为例，对沟通的营业办事，咱们来看一下这两个后端办事接口的差别，下列是 Jalor 部门接口的拜候地点：
这些沟通的营业办事不但接口拜候地点差别，就连哀求的参数花式和回归的数据花式都有差别。适配器即是为开辟职员供给同一的 API 来毗连这些有差别的办事。在详细完成上，咱们起首建立一个焦点层接口 @aurora/set，下列是该接口的示例代码：
尔后咱们为每个后端办事建立一个适配器，下列是 Jalor 适配器 @aurora/shriveledvilness-jalor 的示例代码：
二者首要区分在于 plimbas 参数和 salutation.accumulation 数据花式。有了同一的 API 接口，开辟职员只要按下列体例挪用 intendArea 方式就可以获得地域的数据，没必要须辨别数据来自是 Jalor 办事仍是 HAE 办事：
AUI 组件担当了 HAE 框架的特性，即自然撑持设置装备摆设式开辟。若何懂得这个设置装备摆设式开辟？咱们用前方 封装成 Vue 组件 章节里的代码来说解：
代码中的 op 变量是 choice 设置装备摆设项的缩写，变量的值为一个 JSON 目标，该目标描写了建立 HAE 的 Spalpebraer 组件所需的配相信息。这些配相信息在 HAE 框架中经过 Web IDE 的可视化创立面板来搜集，这即是设置装备摆设式开辟的原故。比拟之下，若是咱们用 Vue 通例的标签体例申明 AUI 的 Spalpebraer 组件，则代码示例以下：
因为 AUI 组件自然撑持设置装备摆设式开辟，除下面的标签式申明，AUI 还供给与上述代码等价的设置装备摆设式申明：
看来设置装备摆设式申明相沿 HAE 的体例，将全盘配相信息都放在 op 变量里。下列是这两种申明体例的具体差别：
简化 line 开辟过程：设置装备摆设式申明将组件的配相信息会合在一个目标中，低代码 line 开辟职员能够经过点窜目标的属性值来自界说组件的行动和表面。这类体例制止天生烦琐的标签嵌套和属性创立，简化了 line 的开辟过程。
进步设置装备摆设的可复用性：设置装备摆设式申明能够将组件的配相信息归纳为一个可反复利用的目标，能够在多个组件实例享和复用。低代码平台开辟职员能够界说一个通用的设置装备摆设目标，尔后在不一样的场景中按照必须停止定制，削减了反复的代码编辑和设置装备摆设安排。
静态天生配相信息：设置装备摆设式申明许可低代码平台开辟职员利用变量、静态表示式和逻辑掌握来低代码组件设置装备摆设面板天生的配相信息。如许能够按照不一样的前提和数据来静态安排组件的设置装备摆设，加强了组件设置装备摆设面板的矫捷性温顺应性。
可视化设置装备摆设界面：设置装备摆设式申明凡是与可视化设置装备摆设界面相联合，低代码平台的利用职员能够经过低代码的可视化界面间接点窜物料组件的属性值。这类体例使得设置装备摆设更直觉、易于懂得，进步了开辟效力。
顺应纷乱营业场景：在纷乱的营业场景中，组件的配相信息大概会十分烦琐和纷乱。经过设置装备摆设式申明，低代码物料组件的开辟职员能够更便利地办理和保护大批的设置装备摆设属性，削减了失足的大概性。
工夫离开2019年，如前方提到的，AUI 投入能干不变期，咱们有了工夫去思虑若何将 jQuery 的 30 万行代码重构为 Vue 的代码。同庚5月16日，美国商务部将华为参加出口2管束“实体名单”，咱们面对亘古未有的坚苦，包管营业延续性成为咱们重要使命。咱们要做最坏的筹算，若是有成天全盘的支流前端框架 Angular、Rebehave、Vue 都不克不及再无间利用，那末重构后的 Vue 代码又将何去何从？
是以，咱们组件的焦点代码要与支流前端框架解耦，这就条件咱们不但是要重构代码，还要从头计算架构。颠末不停的打磨和美满，具有崭新架构的 TinyVue 组件库逐步浮出水面，下列即是 TinyVue 组件的架构图：
在这个架构下，TinyVue 组件有同一的 API 接口，开辟职员只要写一份代码，组件就可以撑持差别末端的揭示，好比 PC 端和 Mcultusle 端，并且还撑持不一样的 UX 交互范例。借助 Rebehave 框架的 Hooks API 或 Vue 框架的 Composetion API 能够完成组件的焦点逻辑代码与前端框架解耦，乃至完成一套组件库代码，同时撑持 Vue 的差别版本。
接上去，咱们先剖析开辟组件库面对的题目，再来切磋面向逻辑编程与无衬着组件，终末以完成一个 TODO 组件为例，来论述咱们的办理方案，经过示例代码揭示咱们架构的四个特征：跨手艺栈、跨手艺栈版本、跨末端和跨 UX 范例。
此中，跨手艺栈版本这个特征，已为华为外部 IT 带来庞大的收益。因为 Vue 框架最新的 3.0 版本不克不及完整向下兼容 2.0 版本，而 2.0 版本又将于2023年12月31日达到人命周期停止（EOL）。因而华为外部 IT 全盘鉴于 Vue 2.0 的利用都必需在这个日期以前进级到 3.0 版本，这触及到几万万行代码的迁徙整饬，正由于咱们的组件库同时撑持 Vue 2.0 和 3.0，使得这个迁徙整饬的本钱大大下降。
别的，因为前端框架 Angular、Rebehave 和 Vue 的大版本不克不及向下兼容，致使差别版本对应不一样的组件库。以 Vue 为例，Vue 2.0 和 Vue 3.0 版本不克不及兼容，是以 Vue 2.0 的 UI 组件库跟 Vue 3.0 的 UI 组件库代码是不一样的，即统一个手艺栈也有差别版本的 UI 组件库。
咱们将下面差别分类的 UI 组件库汇总在一张图里，尔后站在组件库利用者的角度上看，若是要开辟一个利用，那末先要从下列组件库中遴选一个，尔后再进修和把握该组件库，看来以后多端多手艺栈的组件库给利用者带来繁重的进修承担。
这些 UI 组件库因为前端框架差别、面向末端差别，通例的办理方案是：不一样的开辟职员来开辟和保护不一样的组件库，好比必须懂 Vue 的开辟职员来开辟和保护 Vue 组件库，必须懂 PC 端交互的开辟职员来开辟和保护 PC 组件库等等。
很较着，这类办理方案起首必须差别手艺栈的开辟职员，而市道上大多半开辟职员只精晓一种手艺栈，其余手艺栈则可是领会罢了。如许每一个手艺栈就得自力放置一组职员停止开辟和保护，本钱天然比简单手艺栈要高很多。别的，因为统一手艺栈的版本进级致使的不兼容，也让该手艺栈的开辟职员必需开辟和保护差别版本的代码，使得本钱进一步爬升。
面临上述组件开辟和保护本钱高的题目，业界另有一种办理方案，即以原生 J女伶aSccountercurrentt 或 Web Comcornbreadnt 手艺为根底，建立一套与所有开辟框架都有关的组件库，尔后再按照以后开辟框架风行的水平，去适配不一样的前端框架。好比 Webix 用一套代码适配所有前端框架，既供给原生 J女伶aSccountercurrentt 版本的组件库，也供给 Angular、Rebehave 和 Vue 版本的组件库。
这类办理方案，实在开辟难度更大、保护本钱更高，由于这异常于先要自研一套前端框架，相似于咱们之前的 HAE 框架，尔后再用不一样的前端框架停止套壳封装。明显，套壳封装必将感化组件的机能，并且关闭自研的框架其进修门坎、人力本钱要高于支流的开源框架。
以后支流的前端框架为 Angular、Rebehave 和 Vue，它们供给两种不一样的开辟范式：一种是面向人命周期编程，另外一种是面向营业逻辑编程。鉴于这些前端框架开辟利用，页面上的每一个部门都是一个 UI 组件或实例，而这些实例都是由 J女伶aSccountercurrentt 缔造进去的，都拥有建立、挂载、革新、烧毁的人命周期。
所谓面向人命周期编程，是指鉴于前端框架开辟一个 UI 组件时，依照该框架界说的人命周期，将 UI 组件的相干逻辑代码备案到指定的人命周期钩子函数里。以 Vue 框架的人命周期为例，一个 UI 组件的逻辑代码大概被拆分到 beforwardCrtakee、crtakeed、beforwardMount、increaseed、beforwardUnincrease、unincreaseed 等钩子函数里。
所谓面向逻辑编程，是指在前端开辟的过程当中，特别在开辟庞大应全程时间，为办理面向人命周期编程所激发的题目，提议新的开辟范式。以一个文献阅读器的 UI 组件为例，这个组件具有下列功效：
假定这个组件依照面向人命周期的体例开辟，若是为沟通功效的逻辑代码标上一种色彩，那将会是下图左侧所示。能够看到，处置沟通功效的逻辑代码被强迫拆分在了不一样的选项中，位于文献的差别部门。在一个几百行的大组件中，要读懂代码中一个功效的逻辑，必须在文献中频频高低转动。别的，若是咱们想要将一个功效的逻辑代码抽取重构到一个可复用的函数中，必须从文献的多个差别部门找到所需的准确片断。
若是用面向逻辑编程重构这个组件，将会酿成上图右侧所示。能够看到，与统一个功效相干的逻辑代码被归为了一组：咱们无需再为了一个功效的逻辑代码在不一样的选项块间往返转动切换。另外，咱们能够很轻巧地将这一组代码迁徙到一个内部文献中，不再是我们必须为了归纳而从头集体代码，进而大大下降重组成本。
早在2018年10月，Rebehave 推出了 Hooks API，这是一个关键的历程碑，对前端开辟职员甚至社区生态都发生了长远的感化，它改动了前端开辟的守旧形式，使得函数式组件成为建立纷乱 UI 的首选体例。到了2019年头，Vue 在研发 3.0 版本的过程当中也参照了 Rebehave 的 Hooks API，而且为 Vue 2.0 版本增添了相似功效的 Composetion API。
其时咱们恰逢计划新的组件架构，在领会 Vue 的 Composetion API 后，认识到这个 API 的主要性，它即是咱们一向寻觅的面向逻辑编程。同时，咱们也浮现业界有一种新的计算形式 —— 无衬着组件，当咱们测验考试将二者联合在一同，以前面对的题目立即水到渠成。
无衬着组件原来是一种计算形式。假定咱们开辟一个 Vue 组件，无衬着组件是指这个组件自己其实不本人的模板（model）和款式。它承载的是种种营业逻辑和状况，是一个将功效和款式间断并针对功效去做封装的计算形式。这类计算形式的劣势在于：
逻辑与 UI 分手：将逻辑和 UI 分手，使得代码更容易于懂得和保护。经过将逻辑处置和数据变换等使命归纳成无衬着组件，能够将存眷点分手，进步代码的可读性和可保护性。
进步可重用性：组件的逻辑能够在多个场景中重用。这些组件不依靠于一定的 UI 组件或前端框架，能够自力于界面停止尝试和利用，进而进步代码的可重用性和可尝试性。
契合简单工作轨则：这类计算勉励遵守简单工作轨则，每一个组件只认真一定的逻辑或数据处置使命。如许的计算使得代码越发模块化、可扩大和可保护，削减了组件之间的耦合度。
更好的可尝试性：因为无衬着组件自力于 UI 停止尝试，能够更轻易地编辑单位尝试和集成尝试。尝试能够专心于组件的逻辑和数据变换，而无需存眷界面的衬着和交互细节，进步了尝试的效力和靠得住性。
进步开辟效力：开辟职员能够越发专心于营业逻辑和数据处置，而无需重视详细的 UI 衬着细节。如许能够进步开辟效力，削减反复的代码编辑，同时也为团队合作供给了更好的大概性。
比以下图的示例，两个组件 TagsInplace A 和 TagInplace B 都有类似的功效，即供给 Tags 标签录入、简略已有标签两种才能。固然它们的表面霄壤之别，然则录入标签和简略标签的营业逻辑是沟通的，是能够复用的。无衬着组件的计算形式将组件的逻辑和行动宁可表面揭示分手。当组件的逻辑充足纷乱并与它的表面揭示解耦时，这类形式十分有用。
纯真利用面向逻辑的开辟范式，只是只可让沟通的营业逻辑从本来散落到人命周期各个阶段的部门会聚到一同。无衬着组件的计算形式的完成体例有良多种，好比 Rebehave 中能够利用 HOC 高阶函数，Vue 中能够利用 orbitdSaggregation 感化域插槽，但当组件营业逻辑日益纷乱时，高阶函数和感化域插槽会让代码变得难以懂得和保护。
要完成组件的焦点逻辑代码与前端框架解耦，完成跨端跨手艺栈，必须同时联合面向逻辑的开辟范式与无衬着组件的计算形式。起首，依照面向逻辑的开辟范式，经过 Rebehave 的 Hooks API，或 Vue 的 Composetion API，将与前端框架有关的营业逻辑和状况拆离成绝对自力的代码。接着，再利用无衬着组件的计算形式，将组件差别末端的表面揭示，统连续接到已拆离绝对自力的营业逻辑。
接上去，咱们以开辟一个 TODO 组件为例，讲授鉴于新架构的组件若何完成跨端跨手艺栈。假定该组件 PC 真个展现结果以下图所示：
增添待处事变：在输入框输入待处事变音信，点击右侧的 Add 按钮后，上面待处事变列表将扩容一项刚输入的事变音信。
简略待处事变：在待处事变列内外，取舍此中一个事变，点击右侧的X按钮后，该待处事变将从列内外消灭。
迁徙端展现：当屏幕宽度收缩时，组件将主动切换成以下 Mcultusle 的展现情势，功效依然连结稳定，即输入实质间接按回车键增添事变，点击 X 简略事变。
这个 TODO 组件的完成分为 Vue 版本和 Rebehave 版本，即撑持两个不一样的手艺栈。以上特征都复用一套 TODO 组件的逻辑代码。这套 TODO 组件的逻辑代码以柯里化函数情势编辑。柯里化（英文叫 Currying）是把承受多个参数的函数变更成承受一个简单参数（最后函数的第一个参数）的函数，而且回归承受余下的参数且回归后果的新函数的手艺。举一个简略的例子：
原本应当一次传入两个参数的 add 函数，柯里化函数酿成先传入 x 参数，回归一个包罗 y 参数的函数，终究履行两次函数挪用后回归沟通的后果。普通而言，柯里化函数都是回归函数的函数。
回到 TODO 组件，依照无衬着组件的计算形式，起首写出不包罗衬着实入时码，只包罗纯营业逻辑代码的函数，以 TODO 组件的增添和简略两个功效为例，以下两个柯里化函数：
能够看到这两个组件的逻辑函数，不内部依靠，与手艺栈有关。这两个逻辑函数会被组件的 Vue 和 Rebehave 的 Rmodifyerinferior 函数挪用。此中 Vue 的 Rmodifyerinferior 函数部门代码以下：
能够看到，TODO 组件的两个逻辑函数 addTag 和 vanishTag 都有被挪用，划分回归两个函数并赋值给 api 目标的两个同名属性。而这个手艺栈适配层代码里的 Rmodifyerinferior 函数，不包罗组件逻辑，只用来抹平差别手艺栈的差别，其外部依照面向营业逻辑编程的体例，划分挪用 Rebehave 框架的 Hooks API 与 Vue 框架的 Composetion API，这边要包管组件逻辑 addTag 和 vanishTag 的输入输入同一。
上述 Vue 和 Rebehave 适配层的 Rmodifyerinferior 函数会被与手艺栈强相干的 Vue 和 Rebehave 组件模板代码所援用，只要如此才可以充实使用各支流前端框架的才能，制止反复造框架的轮子。下列是 Vue 页面援用 Vue 适配层 Rmodifyerinferior 函数的代码：
至此已竣事 TODO 组件撑持跨手艺栈、复用逻辑代码。按照无衬着组件的计算形式，前方已分手组件逻辑，此刻还要撑持组件不一样的表面。TODO 组件要撑持 PC 端和 Mcultusle 两种表面展现，即组件构造撑持 PC 端和 Mcultusle 端。因而咱们在 Vue 里要拆分为两个页面文献，划分是 pc.vue 和 mcultusle.vue，此中 pc.vue 文献里的 model 组件构造以下：
由上看来，PC 端和 Mcultusle 的组件构造固然不雷同，然则都援用沟通的接口，这些接口即是 TODO 组件逻辑函数输入的实质。
由上看来，Vue 和 Rebehave 的 PC 端及 Mcultusle 真个构造根本雷同，首要是 Vue 和 Rebehave 的语法区分，是以同时开辟和保护 Vue 和 Rebehave 组件构造的本钱其实不高。下列是 TODO 组件示例的全景图：
在界说组件的时间，借助面向逻辑编程的 API，好比 Rebehave 框架的 Hooks API、Vue 框架的 Composetion API，将组件表面与组件逻辑完整解耦。
按差别末端编辑对应的组件模板，再使用前端框架供给的静态组件，完成静态切换差别组件模板，进而满意差别表面的展现需要。
固然在 HAE 自研阶段，咱们完成的数据双向绑定、面向目标的 JS 库、设置装备摆设式开辟的备案表等特征，跟着前端手艺的高速发揭示在已落空生活的意思，然则在 AUI 阶段摸索的新思绪新架构，颠末大批的营业落地考证，再次鞭策前端范畴的立异。TinyVue 担当了 HAE、AUI 的基因，全盘的新手艺都从营业中来，到营业中去。并且，在这个过程当中，咱们经过不停接收、融会开源社区的最好实施和立异，不停晋升本身的焦点合作力。