从自研走向开源的 TinyVue 组件库
OpenTiny 供应企业级的 Web 操纵前端斥地套件，网罗 TinyVue/TinyNG 组件库、TinyPro 料理体系模板、TinyCLI 下令行东西以及 TinyTheme 主旨修设体系等。这些前端斥地的本原举措和技能已正在华为内部蕴蓄聚积和浸淀众年，个中 TinyVue 组件库更是历经九年的检验，从最初的关闭自研慢慢走向社区开源。
TinyVue 九年的开源征程大致分为三个阶段：第一阶段走一律自研的线道，当时称为 HAE 前端框架；第二阶段初步引入开源的 Vue 框架，改名为 AUI 组件库；第三阶段对架构举行从新计划，并慢慢演变为现正在开源的 TinyVue 组件库。本文将缠绕 TinyVue 三个阶段的技能生长过程，长远代码细节疏解差别阶段的主旨逐鹿力。
时光回到2014年，彼时的我刚参加华为群众技能平台部，插足 HAE 前端框架的研发。HAE 的全称是 Huawei Application Engine，即华为操纵引擎。当时咱们部分担负集团 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 Checking）机制，该机制通过按期反省数据模子的转折来仍旧视图与模子之间的同步。当数据发作转折时，AngularJS 会遍历全豹感化域（Scope）树来反省是否有任何绑定的值发作了改造。当绑定的数据量较大时，这个流程会破费豪爽的打算资源和时光。
用什么计划更换 AngularJS 的数据双向绑定，而且还要保障功能优于脏读机制？当时咱们把眼光投向 ES5 的 Object。defineProperty 函数，借助它的 getter 和 setter 方式竣工了数据双向绑定。这个计划比 Vue 框架早了整整一年，直到2015年10月，Vue 1。0 才正式宣布。
接下来，咱们通过代码来出现该计划的技能细节，以下是 AngularJS 数据双向绑定的操纵示例：
咱们的更换计划便是要竣工上面示例中的 $scope 变量，该变量具有一个能够双向绑定的 message 属性。从以下 HTML 代码片断：
能够得知 input 输入框的值绑定了 message 属性，而另一段代码：
要竣工 $scope 变量，就务必竣工一个 Scope 类，$scope 变量便是 Scope 类的一个实例。这个类有一个增添属性的方式，假设方式名为 $addAttribute，而且另有一个监听属性的方式，假设方式名为 $watch。
上述代码因篇幅相闭并不包罗数据绑定的功效，仅竣工为 $scope 增添属性以及修立监听回调函数，而且探究了众个监听回调函数的实行挨次及十分管制的情形。借助 Object。defineProperty，咱们不再须要遍历全豹感化域（Scope）树来反省是否有任何绑定的值发作了改造。一朝某个值发作转折，就会马上触发绑定的监听回调函数，从而处理脏读机制的功能题目。
同样正在2014年，具有面向对象编程特征的 TypeScript 仍处于早期阶段，微软正在当年4月份宣布了 TypeScript 1。0 版本。HAE 前端框架正在研发初期没有拣选不可熟的 TypeScript 计划，而是诈欺 JavaScript 原型链机制来竣工面向对象的计划形式，即通过共享原型对象的属性和方式，竣工对象之间的承袭和众态性。
然而，操纵 JavaScript 原型链来竣工面向对象计划存正在两个题目：最先，原型链的操纵体例与古代的面向对象编程道话（比如 Java 和 C++）有显然的区别，正在当时前端斥地职员群众是由 Java 后端转行做前端，所以须要花费较高的研习本钱来适宜原型链的观念和用法。其次，JavaScript 自身没有供应显式的私有属性和方式的援手，咱们通常通过正在属性或方式前增添下划线等商定生定名，来暗意这是一个私有成员。而正在本质斥地流程中，用户往往会直接拜访和操纵这些私有成员，这导致正在后续框架的升级流程中务必探究向下兼容这些私有成员，从而扩展了框架的斥地本钱。
为分处理上述题目，咱们自研了 jClass 库，这个库用 JavaScript 模仿竣工了面向对象编程道话的基础特征。jClass 不单援手真正旨趣上的私有成员，还援手袒护成员、众重承袭、方式重载、特征混入、静态常量、类工场和类事项等，别的还内置自研的 Promise 异步实行对象，供应动态加载类外部依赖模块的功效等。
接下来，咱们通过代码来出现 jClass 面向对象的特征，以下是基础操纵示例：
咱们再来看 jClass 若何承袭众个父类，正在上述代码后面增添如下代码：
jClass 的类工场与类承袭有宛如之处，而类事项则为类方式的挪用、类属性的修正供应监听本事，两者的操纵示比如下：
基于 jClass 面向对象的特征，咱们就能够用面向对象的计划形式来斥地 HAE 组件库，以下便是界说和扩展组件的示例：
上述代码只演示了 jClass 个别特征，因篇幅相闭没有浮现其竣工的细节。从2014年10月初步，jClass 一连撑持 120 众个组件的研发，累积 30 众万行的代码。颠末四年的生长，行为 HAE 前端框架的基石，jClass 正在华为内部 IT 各个规模 1000 众个项目中获得通俗操纵。通过这些项方针不竭检验，jClass 正在功效和功能上仍旧到达了企业级的请求。
一个前端框架须要撑持人命周期，要紧方针是正在 Web 操纵的差别阶段供应可控的实行境况和钩子函数，以便斥地者能够正在合意的机会实行特定的逻辑和操作。通过人命周期的援手，前端框架也许更好地料理 Web 操纵的初始化、陪衬、更新和毁灭等流程，供应更天真的统制和扩展本事。
正在 HAE 前端框架中，存正在三个差别方针的人命周期：体系人命周期、页面人命周期和组件人命周期。
体系人命周期：体系人命周期指的是全豹前端操纵的人命周期，它包罗了操纵的启动、初始化、运转和合上等阶段。体系人命周期供应了操纵级其余钩子函数，比如操纵初始化前后的钩子、操纵毁灭前后的钩子等。通过体系人命周期的援手，斥地者能够正在操纵级别实行极少整体的操作，比如加载修设、注册插件、管制整体差池等。
页面人命周期：页面人命周期指的是单个页面的人命周期，它刻画了页面从加载到卸载的全豹流程。页面人命周期包罗了页面的创修、陪衬、更新和毁灭等阶段。正在页面人命周期中，HAE 前端框架供应了一系列钩子函数，比如页面加载前后的钩子、页面陪衬前后的钩子、页面更新前后的钩子等。通过页面人命周期的援手，斥地者能够正在页面级别实行极少与页面闭连的逻辑，比如获取数据、管制道由、初始化页面状况等。
组件人命周期：组件人命周期指的是单个组件的人命周期，它刻画了组件从创修到毁灭的全豹流程。组件人命周期包罗了组件的实例化、挂载到 DOM、更新和卸载等阶段。组件人命周期的钩子函数与页面人命周期好似，通过组件人命周期的援手，斥地者能够正在组件级别实行极少与组件闭连的逻辑，比如初始化状况、管制用户交互、与外部组件通讯等。
总的来说，体系人命周期、页面人命周期和组件人命周期正在粒度和规模上有所差别。体系人命周期操作全豹 Web 操纵，页面人命周期操作单个页面，而组件人命周期操作单个组件。通过这些差别方针的人命周期，HAE 前端框架也许供应更邃密和天真的统制，使斥地者也许正在适合的机会实行闭连操作，竣工更高效、牢靠和可扩展的前端操纵。
基于修设的斥地形式，HAE 前端框架要让用户通过修设的体例，而不是通过手写代码来界说人命周期的钩子函数。为此，咱们引入 Windows 注册外的观念，将框架内置的默认修设新闻存在正在一个 JSON 对象中，并定名为 register。js。同时，每个操纵也能够依据自己需求创修操纵的 register。js，体系正在启动前齐集并这两个文献，从而根据用户希望的体例修设人命周期的钩子函数。
人命周期的钩子函数正在哪里显示？原来谜底就正在任事内里，以 Hae_Service_Mock 任事为例，下面是该任事的界说：
以上代码须要包罗正在 load_modules 阶段加载的模块中。除了挪用 loadService 方式界说任事除外，还能够通过 jClass 界说类的体例界说任事，代码示比如下：
上面的 Hae 变量便是增强版的 jClass。咱们再来看一下框架内置的注册外中，相闭页面人命周期的界说：
体系人命周期各个任事众以开闭的景象界说，而页面人命周期各个任事众以名称的景象界说，以 Hae。Service。DataBind 任事为例，其界说如下：
终末再纯洁先容一下组件的人命周期，借助 jClass 面向对象的特征，组件的人命周期各阶段钩子函数正在组件的基类 Widget 中界说的，代码示比如下：
能够看到组件基类的编译模板阶段和陪衬模板阶段都有默认的竣工，因为这两个阶段通常须要读取后端数据等延迟操作，所以要返回 Hae。Promise 异步对象。这个异步对象是 HAE 框架参照 jQuery 的 Deferred 异步回调从新竣工的，要紧处理 Deferred 异步功能慢的题目。
时光来到2017年，以 Vue 为代外的摩登前端工程化斥地形式带来了很众矫正和改革。与以 jQuery 为代外的古代斥地形式比拟，这些矫正和改革显示正在以下方面：
声明式编程：Vue 采用了声明式编程的思思，斥地者能够通过声明式的模板语法编写组件的布局和举止，而无需直接操作 DOM。这简化了斥地流程并抬高了斥地效劳。
组件化斥地：Vue 荧惑组件化斥地，将 UI 拆分为独立的组件，每个组件具有己方的状况和举止。如此能够竣工组件的复用性、可维持性和扩展性，抬高了代码的可读性和可维持性。
反映式数据绑定：Vue 采用了反映式数据绑定的机制，将数据与视图主动仍旧同步。当数据发作转折时，主动更新闭连的视图个别，大大简化了状况料理的繁复性。
主动化流程：前端工程化引入了主动化东西，比如构修东西（比如 Webpack）、义务运转器（比如 npm）和主动化测试东西，大大简化了斥地流程中的反复性义务和手动操作。通过主动化流程，斥地者能够主动编译、打包、压缩和优化代码，主动实行测试和安放等，抬高了斥地效劳和相仿性。
模块化斥地：前端工程化荧惑操纵模块化斥地的体例，将代码拆分为独立的模块，每个模块担负特定的功效。如此能够抬高代码的可维持性和复用性，节减了代码之间的耦合性，使团队合营越发高效。
标准化与模范化：前端工程化首倡效力一系列的标准和模范，网罗代码气魄、目次布局、定名商定等。如此能够抬高团队合营的相仿性，节减疏导和集成的本钱，抬高项方针可读性和可维持性。
静态类型反省和测试：前端工程化荧惑操纵静态类型反省东西（比如 TypeScript）和主动化测试东西（比如 Mocha）来抬高代码质料和牢固性。通过静态类型反省和主动化测试，能够提前缉捕潜正在的差池和题目，节减Bug的爆发和排查的时光。
探究到人力本钱、研习弧线和逐鹿力等身分，HAE 前端框架须要向摩登前端开源框架与工程化对象演进。因为 HAE 属于自研框架，仅正在华为内部操纵，新进的斥地职员须要加入时光研习和职掌该框架，这对他们的技能本事请求较高。然而，倘使拣选采用开源框架，强大的社区援手和通俗的文档资源，使得斥地职员能够更敏捷地上手和斥地。同时，采用开源框架也使得 HAE 框架也许紧跟业界趋向。开源框架大凡由环球的斥地者社区合伙维持和更新，也许实时跟进最新的前端技能和最佳执行。这有助于提拔 HAE 框架自己的逐鹿力，使其具备更好的适宜性和可扩展性。
早正在2016年10月上海 QCon 大会上，Vue 框架的作家尤雨溪初次亮相，登台扩充他的开源框架，那也是咱们首次接触 Vue。当时 React 行为另一个主流的开源框架也备受业界闭切，咱们须要正在 Vue 和 React 之间做出拣选。随后，正在2017年6月咱们远赴波兰的佛罗茨瓦夫出席 Vue 首届环球斥地者大会，那次咱们有幸与尤雨溪自己举行了相易。回来后，咱们提交了 Vue 与 React 的比拟判辨呈文，向上司请示了咱们的技能选型意向，最终咱们决断拣选 Vue。
要完全转移到 Vue 框架，扔掉已操纵 jQuery 斥地的 30 万行代码，正在有限的时光和人力下是一个宏壮的挑拨。为了找到折中的处理计划，咱们选取如此的转移政策：将 HAE 前端框架的体系和页面人命周期举行剥离，只保存与 HAE 组件闭连的代码，然后将底层架构更换为 Vue，并引入一切前端工程化闭连的本事，终末告成竣工了让用户以 Vue 的体例来操纵咱们的组件。如此的转移政策正在保障项目发扬的同时，也也许慢慢融入 Vue 的上风和工程化的容易性。
上述示例代码界说了一个名为 my-slider 的 Vue 组件，正在该组件人命周期的 mounted 阶段，通过挪用 webix。ui 方式动态创修了一个 Webix 组件，然后监听该组件的 onChange 事项并掷出 Vue 的 update！modelValue 事项，而且诈欺 Vue 的 watch 监听其 value 属性，一朝它发作转折则挪用 Webix 的 setValue 方式从新修立 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/core，以下是该接口的示例代码：
然后咱们为每一个后端任事创修一个适配器，以下是 Jalor 适配器 @aurora/service-jalor 的示例代码：
以上面的 fetchArea 方式为例，Jalor 任事的实摩登码如下：
两者要紧区别正在于 parmas 参数以及 response。data 数据样子。有了联合的 API 接口，斥地职员只需按以例挪用 getArea 方式就能获取区域的数据，不须要区别数据来自是 Jalor 任事依旧 HAE 任事：
AUI 组件承袭了 HAE 框架的特质，即自然援手修设式斥地。若何会意这个修设式斥地？咱们用前面 封装成 Vue 组件 章节里的代码来疏解：
代码中的 op 变量是 option 修设项的缩写，变量的值为一个 JSON 对象，该对象刻画了创修 HAE 的 Slider 组件所需的修设新闻。这些修设新闻正在 HAE 框架中通过 Web IDE 的可视化修立面板来汇集，这便是修设式斥地的由来。比拟之下，倘使咱们用 Vue 常例的标签体例声明 AUI 的 Slider 组件，则代码示比如下：
因为 AUI 组件自然援手修设式斥地，除了上面的标签式声明，AUI 还供应与上述代码等价的修设式声明：
可睹修设式声明沿用 HAE 的体例，将一切修设新闻都放正在 op 变量里。以下是这两种声明体例的详尽区别：
倘使将两者放正在特定的生意规模斗劲，例如低代码平台，则修设式声明的上风越发显然，来由如下：
简化 DSL 斥地流程：修设式声明将组件的修设新闻凑集正在一个对象中，低代码 DSL 斥地职员能够通过修正对象的属性值来自界说组件的举止和外观。这种体例避免天生繁琐的标签嵌套和属性修立，简化了 DSL 的斥地流程。
抬高修设的可复用性：修设式声明能够将组件的修设新闻笼统为一个可反复操纵的对象，能够正在众个组件实例享和复用。低代码平台斥地职员能够界说一个通用的修设对象，然后正在差其余场景中依据须要举行定制，节减了反复的代码编写和修设调治。
动态天生修设新闻：修设式声明应许低代码平台斥地职员操纵变量、动态外达式和逻辑统制来低代码组件修设面板天生的修设新闻。如此能够依据差其余条目和数据来动态调治组件的修设，巩固了组件修设面板的天真性和适宜性。
可视化修设界面：修设式声明大凡与可视化修设界面相贯串，低代码平台的操纵职员能够通过低代码的可视化界面直接修正物料组件的属性值。这种体例使得修设更直观、易于会意，抬高了斥地效劳。
适宜繁复生意场景：正在繁复的生意场景中，组件的修设新闻能够会特别繁琐和繁复。通过修设式声明，低代码物料组件的斥地职员能够更便本地料理和维持豪爽的修设属性，节减了堕落的能够性。
时光来到2019年，如前面提到的，AUI 进入成熟牢固期，咱们有了时光去斟酌若何将 jQuery 的 30 万行代码重构为 Vue 的代码。同年5月16日，美邦商务部将华为列入出口管制“实体名单”，咱们面对亘古未有的困苦，保障生意连接性成为咱们首要义务。咱们要做最坏的希图，倘使有一天一切的主流前端框架 Angular、React、Vue 都不行再不停操纵，那么重构后的 Vue 代码又将何去何从？
所以，咱们组件的主旨代码要与主流前端框架解耦，这就请求咱们不单仅要重构代码，还要从新计划架构。颠末不竭的打磨和完备，具有全新架构的 TinyVue 组件库逐步浮出水面，以下便是 TinyVue 组件的架构图：
正在这个架构下，TinyVue 组件有联合的 API 接口，斥地职员只需写一份代码，组件就能援手差别终端的出现，例如 PC 端和 Mobile 端，并且还援手差其余 UX 交互标准。借助 React 框架的 Hooks API 或者 Vue 框架的 Composition 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、React 和 Vue 的大版本不行向下兼容，导致差别版本对应差其余组件库。以 Vue 为例，Vue 2。0 和 Vue 3。0 版本不行兼容，所以 Vue 2。0 的 UI 组件库跟 Vue 3。0 的 UI 组件库代码是差其余，即统一个技能栈也有差别版本的 UI 组件库。
咱们将上面差别分类的 UI 组件库汇总正在一张图里，然后站正在组件库操纵者的角度上看，倘使要斥地一个操纵，那么先要从以下组件库中挑选一个，然后再研习和职掌该组件库，可睹暂时众端众技能栈的组件库给操纵者带来深重的研习职掌。
这些 UI 组件库因为前端框架差别、面向终端差别，常例的处理计划是：差其余斥地职员来斥地和维持差其余组件库，例如须要懂 Vue 的斥地职员来斥地和维持 Vue 组件库，须要懂 PC 端交互的斥地职员来斥地和维持 PC 组件库等等。
很显然，这种处理计划最先须要差别技能栈的斥地职员，而市道上大大批斥地职员只能干一种技能栈，其他技能栈则只是分解云尔。如此每个技能栈就得独立就寝一组职员举行斥地和维持，本钱自然比简单技能栈要高得众。其它，因为统一技能栈的版本升级导致的不兼容，也让该技能栈的斥地职员务必斥地和维持差别版本的代码，使得本钱进一步攀升。
面临上述组件斥地和维持本钱高的题目，业界另有一种处理计划，即以原生 JavaScript 或 Web Component 技能为本原，构修一套与任何斥地框架都无闭的组件库，然后再依据暂时斥地框架风行的水平，去适配差其余前端框架。例如 Webix 用一套代码适配任何前端框架，既供应原生 JavaScript 版本的组件库，也供应 Angular、React 和 Vue 版本的组件库。
这种处理计划，原来斥地难度更大、维持本钱更高，由于这相当于先要自研一套前端框架，好似于咱们以前的 HAE 框架，然后再用差其余前端框架举行套壳封装。较着，套壳封装势必影响组件的功能，并且关闭自研的框架其研习门槛、人力本钱要高于主流的开源框架。
暂时主流的前端框架为 Angular、React 和 Vue，它们供应两种差其余斥地范式：一种是面向人命周期编程，另一种是面向生意逻辑编程。基于这些前端框架斥地操纵，页面上的每个个别都是一个 UI 组件或者实例，而这些实例都是由 JavaScript 成立出来的，都具有创修、挂载、更新、毁灭的人命周期。
所谓面向人命周期编程，是指基于前端框架斥地一个 UI 组件时，根据该框架界说的人命周期，将 UI 组件的闭连逻辑代码注册到指定的人命周期钩子函数里。以 Vue 框架的人命周期为例，一个 UI 组件的逻辑代码能够被拆分到 beforeCreate、created、beforeMount、mounted、beforeUnmount、unmounted 等钩子函数里。
所谓面向逻辑编程，是指正在前端斥地的流程中，特别正在斥地大型操纵时，为处理面向人命周期编程所激励的题目，提出新的斥地范式。以一个文献浏览器的 UI 组件为例，这个组件具备以下功效：
假设这个组件根据面向人命周期的体例斥地，倘使为相仿功效的逻辑代码标上一种颜色，那将会是下图左边所示。能够看到，管制相仿功效的逻辑代码被强制拆分正在了差其余选项中，位于文献的差别个别。正在一个几百行的大组件中，要读懂代码中一个功效的逻辑，须要正在文献中屡屡上下滚动。其它，倘使咱们思要将一个功效的逻辑代码抽取重构到一个可复用的函数中，须要从文献的众个差别个别找到所需的准确片断。
倘使用面向逻辑编程重构这个组件，将会造成上图右边所示。能够看到，与统一个功效闭连的逻辑代码被归为了一组：咱们无需再为了一个功效的逻辑代码正在差其余选项块间来回滚动切换。别的，咱们能够很轻松地将这一组代码挪动到一个外部文献中，不再须要为了笼统而从新构制代码，从而大大低深重组本钱。
早正在2018年10月，React 推出了 Hooks API，这是一个紧张的里程碑，对前端斥地职员以至社区生态都爆发了深远的影响，它改造了前端斥地的古代形式，使得函数式组件成为构修繁复 UI 的首选体例。到了2019年头，Vue 正在研发 3。0 版本的流程中也参考了 React 的 Hooks API，而且为 Vue 2。0 版本增添了好似功效的 Composition API。
当时咱们正正在经营新的组件架构，正在分解 Vue 的 Composition API 后，认识到这个 API 的紧张性，它便是咱们平素寻找的面向逻辑编程。同时，咱们也展现业界有一种新的计划形式 —— 无陪衬组件，当咱们实验将两者贯串正在一同，之前面对的题目随即迎刃而解。
无陪衬组件原来是一种计划形式。假设咱们斥地一个 Vue 组件，无陪衬组件是指这个组件自身并没有己方的模板（template）以及样式。它装载的是百般生意逻辑和状况，是一个将功效和样式拆开并针对功效去做封装的计划形式。这种计划形式的上风正在于：
逻辑与 UI 涣散：将逻辑和 UI 涣散，使得代码更易于会意和维持。通过将逻辑管制和数据转换等义务笼统成无陪衬组件，能够将闭切点涣散，抬高代码的可读性和可维持性。
抬高可重用性：组件的逻辑能够正在众个场景中重用。这些组件不依赖于特定的 UI 组件或前端框架，能够独立于界面举行测试和操纵，从而抬高代码的可重用性和可测试性。
吻合简单职责规则：这种计划荧惑效力简单职责规则，每个组件只担负特定的逻辑或数据管制义务。如此的计划使得代码越发模块化、可扩展和可维持，节减了组件之间的耦合度。
更好的可测试性：因为无陪衬组件独立于 UI 举行测试，能够更容易地编写单位测试和集成测试。测试能够静心于组件的逻辑和数据转换，而无需闭切界面的陪衬和交互细节，抬高了测试的效劳和牢靠性。
抬高斥地效劳：斥地职员能够越发静心于生意逻辑和数据管制，而无需闭注全体的 UI 陪衬细节。如此能够抬高斥地效劳，节减反复的代码编写，同时也为团队合营供应了更好的能够性。
例如下图的示例，两个组件 TagsInput A 和 TagInput B 都有宛如的功效，即供应 Tags 标签录入、删除已有标签两种本事。固然它们的外观大相径庭，然而录入标签和删除标签的生意逻辑是相仿的，是能够复用的。无陪衬组件的计划形式将组件的逻辑和举止与其外观出现涣散。当组件的逻辑足够繁复并与它的外观出现解耦时，这种形式特别有用。
纯朴操纵面向逻辑的斥地范式，仅仅只可让相仿的生意逻辑从本来散落到人命周期各个阶段的个别会聚到一同。无陪衬组件的计划形式的竣工体例有良众种，例如 React 中能够操纵 HOC 高阶函数，Vue 中能够操纵 scopedSlot 感化域插槽，但当组件生意逻辑日趋繁复时，高阶函数和感化域插槽会让代码变得难以会意和维持。
要竣工组件的主旨逻辑代码与前端框架解耦，竣工跨端跨技能栈，须要同时贯串面向逻辑的斥地范式与无陪衬组件的计划形式。最先，根据面向逻辑的斥地范式，通过 React 的 Hooks API，或者 Vue 的 Composition API，将与前端框架无闭的生意逻辑和状况拆离成相对独立的代码。接着，再操纵无陪衬组件的计划形式，将组件差别终端的外观出现，统陆续接到仍旧拆离相对独立的生意逻辑。
接下来，咱们以斥地一个 TODO 组件为例，疏解基于新架构的组件若何竣工跨端跨技能栈。假设该组件 PC 端的浮现效益如下图所示：
增添待任事项：正在输入框输入待任事项新闻，点击右边的 Add 按钮后，下面待任事项列外将新增一项刚输入的事项新闻。
删除待任事项：正在待任事项列内外，拣选个中一个事项，点击右边的X按钮后，该待任事项将从列内外清扫。
挪动端浮现：当屏幕宽度缩小时，组件将主动切换成如下 Mobile 的浮现景象，功效照旧仍旧稳定，即输入实质直接按回车键增添事项，点击 X 删除事项。
这个 TODO 组件的竣工分为 Vue 版本和 React 版本，即援手两个差其余技能栈。以上特征都复用一套 TODO 组件的逻辑代码。这套 TODO 组件的逻辑代码以柯里化函数景象编写。柯里化（英文叫 Currying）是把接纳众个参数的函数变换成接纳一个简单参数（最初函数的第一个参数）的函数，而且返回接纳余下的参数且返回结果的新函数的技能。举一个纯洁的例子：
素来应当一次传入两个参数的 add 函数，柯里化函数造成先传入 x 参数，返回一个包罗 y 参数的函数，最终实行两次函数挪用后返回相仿的结果。通常而言，柯里化函数都是返回函数的函数。
回到 TODO 组件，根据无陪衬组件的计划形式，最先写出不包罗陪衬实摩登码，只包罗纯生意逻辑代码的函数，以 TODO 组件的增添和删除两个功效为例，如下两个柯里化函数：
能够看到这两个组件的逻辑函数，没有外部依赖，与技能栈无闭。这两个逻辑函数会被组件的 Vue 和 React 的 Renderless 函数挪用。个中 Vue 的 Renderless 函数个别代码如下：
能够看到，TODO 组件的两个逻辑函数 addTag 和 removeTag 都有被挪用，分散返回两个函数并赋值给 api 对象的两个同名属性。而这个技能栈适配层代码里的 Renderless 函数，不包罗组件逻辑，只用来抹平差别技能栈的区别，其内部根据面向生意逻辑编程的体例，分散挪用 React 框架的 Hooks API 与 Vue 框架的 Composition API，这里要保障组件逻辑 addTag 和 removeTag 的输入输出联合。
上述 Vue 和 React 适配层的 Renderless 函数会被与技能栈强闭连的 Vue 和 React 组件模板代码所援用，惟有如此才智填塞诈欺各主流前端框架的本事，避免反复制框架的轮子。以下是 Vue 页面援用 Vue 适配层 Renderless 函数的代码：
至此已告竣 TODO 组件援手跨技能栈、复用逻辑代码。依据无陪衬组件的计划形式，前面仍旧涣散组件逻辑，现正在还要援手组件差其余外观。TODO 组件要援手 PC 端和 Mobile 两种外观浮现，即组件布局援手 PC 端和 Mobile 端。于是咱们正在 Vue 里要拆分为两个页面文献，分散是 pc。vue 和 mobile。vue，个中 pc。vue 文献里的 template 组件布局如下：
由上可睹，PC 端和 Mobile 的组件布局固然不相似，然而都援用相仿的接口，这些接口便是 TODO 组件逻辑函数输出的实质。
由上可睹，Vue 和 React 的 PC 端及 Mobile 端的布局基础相似，要紧是 Vue 和 React 的语法区别，所以同时斥地和维持 Vue 和 React 组件布局的本钱并不高。以下是 TODO 组件示例的全景图：
按无陪衬组件的计划形式，最先要将组件的逻辑涣散成与技能栈无闭的柯里化函数。
正在界说组件的时分，借助面向逻辑编程的 API，例如 React 框架的 Hooks API、Vue 框架的 Composition API，将组件外观与组件逻辑一律解耦。
按差别终端编写对应的组件模板，再诈欺前端框架供应的动态组件，竣工动态切换差别组件模板，从而满意差别外观的浮现需求。
固然正在 HAE 自研阶段，咱们竣工的数据双向绑定、面向对象的 JS 库、修设式斥地的注册外等特征，跟着前端技能的高速发出现正在仍旧遗失存正在的旨趣，然而正在 AUI 阶段研究的新思绪新架构，颠末豪爽的生意落地验证，再次饱吹前端规模的更始。TinyVue 承袭了 HAE、AUI 的基因，一切的新技能都从生意中来，到生意中去。并且，正在这个流程中，咱们通过不竭摄取、交融开源社区的最佳执行和更始，不竭提拔自己的主旨逐鹿力。