# ○ 背景 > 知道的大佬请轻锤😂。 > > 这篇是作者在公司做了活动架构升级后，产出的主文的前导篇，考虑到本文相对独立，因此抽离出单独成文。题目为动态组件，但为了好理解可以叫做远程加载动态组件，后面统一简化称为“远程组件”。具体是怎么玩呢？别着急，听我慢慢道来，看完后会感慨Vue组件还能这么玩🐶，还会学会一个Stylelint插件，配有DEMO，以及隐藏在最后的彩蛋。作者曾所在我司广告事业部，广告承载方式是以刮刮卡、大转盘等活动页进行展示，然后用户参与出广告券弹层。旁白说：远程组件其实在可视化低代码平台也有类似应用，而我们这里也是利用了类似思路实现解耦了活动页和券弹层。继续主题... ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/027e0a1a8b6a40c4a3bdfb1b58e9bf56~tplv-k3u1fbpfcp-watermark.image) 遗留系统早先版本是一个活动就绑定一个弹层，1对1的绑定关系。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9c40376afc72487db2fb2b3d0e7319b2~tplv-k3u1fbpfcp-watermark.image) 现在的场景是一个活动可能出不同样式的弹层，这得把绑定关系解除。我们需要多对多，就是一个活动页面可以对应多个广告券弹层，也可以一个广告券弹层对应多个活动页面。我们可以在本地预先写好几个弹层，根据条件选择不同的弹层，可以满足一个活动对多个弹层。而我们的需求是让活动页面对应无数种弹层，而不是多种，所以不可能把所有弹层都写在本地。因此怎么办呢？ ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/14f13b819c904381972ec3fec01fae2e~tplv-k3u1fbpfcp-watermark.image) 因此我们要根据所需，然后通过判断所需的弹层，远端返回对应的代码。其实就是我们主题要讲到的**远程组件**。讲得容易，该怎么做呢？ # ○ 远程组件核心 ## Pure版本如果是Pure JS、CSS组成的弹层，很自然的我们想到，通过动态的插入JS脚本和CSS，就能组成一个弹层。因此把编译好的JS、CSS文件可以存放在远端CDN。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e1c890c6d88e4ac2af70f316caccb54e~tplv-k3u1fbpfcp-zoom-1.image) 看上图，我们可以看到弹窗出来之前，浏览器把CSS、JS下载下来了，然后根据既定代码拼装成一个弹层。 ```javascript // CSS插入 // JS的动态插入 ``` 通过上面可知，JS、CSS方式能实现Pure版本的远程组件，而在Vue环境下能实现吗。如果按照Pure JS、CSS动态插入到Vue活动下，也是可以很粗糙的实现的。但有没有更优雅的方式呢？ ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7d534e83694e481d912c7b5ad875f493~tplv-k3u1fbpfcp-watermark.image) ## Vue版本 > 选型这篇不细讨论了，后续的主篇会讲为什么选择Vue。上述是遗留系统的方式，如果我们要技术栈迁移到Vue，也需要对远程组件迁移，我们需要改造它。让我们来回顾下Vue的一些概念。 ### 组件形式「对象组件」一个弹窗，其实我们可以通过一个Vue组件表示，我们想把这个组件放到CDN，直接下载这个文件，然后在浏览器环境运行它可行吗？我们来尝试下。基于Vue官方文档，我们可以把如下的选项对象传入Vue，通过new Vue来创建一个组件。 ```javascript { mounted: () => { console.log('加载') }, template: "

Home component

" } ``` 借助于包含编译器的运行时版本，我们可以处理字符串形式的Template。 > -- [运行时-编译器-vs-只包含运行时](https://cn.vuejs.org/v2/guide/installation.html#%E8%BF%90%E8%A1%8C%E6%97%B6-%E7%BC%96%E8%AF%91%E5%99%A8-vs-%E5%8F%AA%E5%8C%85%E5%90%AB%E8%BF%90%E8%A1%8C%E6%97%B6) > > 如果你需要在客户端编译模板 (比如传入一个字符串给Template选项，或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板)，就将需要加上编译器，即完整版似乎找到了新世界的大门。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0c3d3a53a63845c7b067b1173bf5b5bf~tplv-k3u1fbpfcp-watermark.image) 我们确实是可以通过这种形式实现Template、Script、CSS了，但对于开发同学，字符串形式的Template、内嵌的CSS，开发体验不友好。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/997e8882549343e29cd188d8ec1b7bd2~tplv-k3u1fbpfcp-watermark.image) 「单文件组件」这个时候很自然地想到SFC - 单文件组件。 > 文件扩展名为.vue的**single-file components (单文件组件)**为以上所有问题提供了解决方法 -- Vue文档。 > ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bcef78a9afab4e488c029801393e72e1~tplv-k3u1fbpfcp-zoom-1.image) #### 但怎么样才能让一个.vue组件从远端下载下来，然后在当前活动Vue环境下运行呢？这是个问题，由于.vue文件浏览器是识别不了的，但.js文件是可以的。我们先想一下，.vue文件是最终被转换成了什么？ ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e2cce292d3f74009a92dd06c09c3cff7~tplv-k3u1fbpfcp-zoom-1.image) （图片来源：[1.03-vue文件的转换 - 简书](https://www.jianshu.com/p/40a315a6ffc3?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation)）通过转换，实际变成了一个JS对象。所以怎么才能把.vue转换成.js呢？有两种方式，一种通过运行时转换，我们找到了[http-vue-loader](https://github.com/FranckFreiburger/http-vue-loader/)。通过Ajax获取内容，解析Template、CSS、Script，输出一个JS对象。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2c2a8ef7b3954165a6176138f63945c2~tplv-k3u1fbpfcp-watermark.image) 而考虑到性能和兼容性，我们选择预编译，通过CSS预处理器、HTML模版预编译器。 Vue的官方提供了vue-loader，它会解析文件，提取每个语言块，如有必要会通过其它 loader 处理，最后将他们组装成一个 ES Module，它的默认导出是一个 Vue.js 组件选项的对象。这指的是什么意思呢？官方提供[选项对象形式的组件](https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-dynamic-components-with-binding)DEMO。有了理论支持，现在需要考虑下实践啦，用什么编译？ ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/87a244ae26f14fedbd6616c1a34d7f73~tplv-k3u1fbpfcp-watermark.image) ### 怎么构建由于webpack编译后会带了很多关于模块化相关的无用代码，所以一般小型的库会选择rollup，这里我们也选择rollup。 ```javascript // rollup.config.js import vue from 'rollup-plugin-vue' import commonjs from 'rollup-plugin-commonjs' export default { input: './skin/SkinDemo.vue', output: { format: 'iife', file: './dist/rollup.js', name: 'MyComponent' }, plugins: [ commonjs(), vue() ] } ``` 通过rollup-plugin-vue，我们可以把.vue文件转成.js， rollup编译输出的iife形式js。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ffbb9ce952814bed992ec9138b1c0d26~tplv-k3u1fbpfcp-zoom-1.image) 可以看到script、style、template分别被处理成对应的片段，通过整合计算，这些片段会生成一个JS对象，保存为.js文件。下图就是一个组件选项的对象。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6e404109578c4ead972514afeb20e49e~tplv-k3u1fbpfcp-zoom-1.image) 可以通过项目：[https://github.com/fly0o0/remote-component](https://github.com/fly0o0/remote-component)，尝试下rollup文件夹下的构建，具体看README说明。我们已经有了一个 Vue.js 组件选项的对象，怎么去让它挂载到对应的Vue App上呢？ ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e572f75040684caebc2b884e45328640~tplv-k3u1fbpfcp-watermark.image) ### 挂载方式回想之前通读Vue入门文档，遇到一个动态组件的概念，但当时并不太理解它的使用场景。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0c0fa216188541cebc8b81dee98505e2~tplv-k3u1fbpfcp-zoom-1.image) 动态组件是可以不固定具体的组件，根据规则替换不同的组件。从文档上看出，支持一个组件的选项对象。 ### 最终实现首先需要构建.vue文件，然后通过Ajax或动态Script去加载远端JS。由于Ajax会有跨域限制，所以这里我们选择动态Script形式去加载。而我们刚才使用Rollup导出的方式是把内容挂载在一个全局变量上。那就知道了，通过动态Script插入后，就有一个全局变量MyComponent，把它挂载在动态组件，最终就能把组件显示在页面上了。具体怎么操作？欠缺哪些步骤，首先我们需要一个加载远程.js组件的函数。 ```javascript // 加载远程组件js function cleanup(script){ if (script.parentNode) script.parentNode.removeChild(script) script.onload = null script.onerror = null script = null } function scriptLoad(url) { const target = document.getElementsByTagName('script')[0] || document.head let script = document.createElement('script') script.src = url target.parentNode.insertBefore(script, target) return new Promise((resolve, reject) => { script.onload = function () { resolve() cleanup(script) } script.onerror = function () { reject(new Error('script load failed')) cleanup(script) } }) } export default scriptLoad ``` 然后把加载下来的组件，挂载在对应的动态组件上。 ```vue ``` 基本一个Vue的远程组件就实现了，但发现还存在一个问题。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/92d8548004104f2a82a4dee1048fc8be~tplv-k3u1fbpfcp-watermark.image) 全局变量MyComponent需要约定好，但要实现比较好的开发体验来说，应该尽量减少约定。 ### 导出方式怎么解决呢？由于我们导出是使用的IIFE方式，其实Rollup还支持UMD方式，包含了Common JS和AMD两种方式。我们通过配置Rollup支持UMD。 ```javascript // rollup.config.js import vue from 'rollup-plugin-vue' import commonjs from 'rollup-plugin-commonjs' export default { input: './skin/SkinDemo.vue', output: { format: 'umd', file: './dist/rollup.js', name: 'MyComponent' }, plugins: [ commonjs(), vue() ] } ``` 可以看到构建完毕后，支持三种方式导出。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5223a0534ac743398cf390b53e68a96d~tplv-k3u1fbpfcp-zoom-1.image) 我们可以模拟node环境，命名全局变量exports、module，就可以在module.exports变量上拿到导出的组件。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/649802326fe24554ad6a51dbad087bb3~tplv-k3u1fbpfcp-watermark.image) 具体实现核心代码如下。 ```vue ``` 终于搞定了Vue版本的远程组件加载的方式。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fcde90db8e934e6f899d09e628b2019d~tplv-k3u1fbpfcp-watermark.image) 接下来得想一想，怎么处理远程组件（弹层）的设计了。 ## 小结通过使用Vue动态组件实现了远程组件功能，取代了老架构。![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/677b4fdfba0049d1a7fbce226dabadde~tplv-k3u1fbpfcp-zoom-1.image) 可以通过以下地址去尝试一下远程组件弹层，按照项目的README操作一下。会得到以下远程组件弹层。项目地址：[https://github.com/fly0o0/remote-component](https://github.com/fly0o0/remote-component) ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5dfe23c7922347afadbfb60207952a3b~tplv-k3u1fbpfcp-watermark.image) # ○ 远程组件（弹层）设计 > 远程组件已达成，这部分主要是对远程弹层组件的一些设计。对于远程单组件本身来说，只需要根据数据渲染视图，根据用户行为触发业务逻辑，整个代码逻辑是这样的。需要考虑组件复用、组件通讯、组件封装、样式层级等方向。首先我们先看看组件复用。为了方便统一管理和减少冗余代码，我们一般写一些类似的组件会抽取一部分可以公共的组件，例如按钮等。但远程单组件代码和页面端代码是分离的啊（可以理解为两个webpack入口打包出的产物），我们得想想公共组件需要放在哪里了。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bd6ba053a67c4cf2948e1a354c65c28b~tplv-k3u1fbpfcp-watermark.image) ## 组件复用现在可以发现有三种情况，我们利用枚举法尝试想一遍。 ### 打包 📦 **公共组件和远程组件打包一起** 放在一起肯定不合适，不仅会引起远程组件变大，还不能让其他远程组件复用。往下考虑再看看。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/79f5a74200974347b829237d11183472~tplv-k3u1fbpfcp-zoom-1.image) **公共组件单独打包** **** 远程组件、公共组件分别单独打包，这样也是不利的，由于远程组件抽离的公共组件少于5个，而且代码量较少，单独作为一层打包，会多一个后置请求，影响远程组件的第一时间展示。继续考虑再看看。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/72e6b22c4ccc43efb4fb87a791219a10~tplv-k3u1fbpfcp-zoom-1.image) **公共组件和页面核心库打包一起** **** 把公共组件和页面核心库打包到一起，避免后面远程组件用到时候再加载，可以提升远程组件的展示速度。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e17e1315633345d9a98b23213250147f~tplv-k3u1fbpfcp-zoom-1.image) 因此最终敲定选择最后种，把公共组件和页面核心库打包在一起。如果把远程组件.js和公共组件分开了，那我们该怎么才能使用公共组件啊？😂 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/64bb04b380e34edaa2e2367177e4d222~tplv-k3u1fbpfcp-watermark.image) ### 注册 🔑 回顾下Vue官方文档，Vue.component它可以提供注册组件的能力，然后在全局能引用到。我们来试试吧。公共组件例如按钮、关闭等，需要通过以下途径去注册。 **一个按钮组件** ```vue // 本地页面端（本地是相较于在远端CDN） ``` **一个关闭组件** ```vue // 本地页面端（本地是相较于在远端CDN） ``` 通过Vue.component全局注册公共组件，这样在远程组件中我们就可以直接调用了。 ```vue // 本地页面端（本地是相较于在远端CDN） ``` 解决了公共组件复用的问题，后面需要考虑下远程组件和页面容器，还有不同类型的远程组件之间的通讯问题。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7fb6c8e17c0d4e699dd858a266030858~tplv-k3u1fbpfcp-watermark.image) ## 组件通讯可以把页面容器理解为父亲、远程组件理解为儿子，两者存在父子组件跨级双向通讯，这里的父子也包含了爷孙和爷爷孙的情况，因此非props可以支持。那怎么处理？可以通过在页面核心库中向远程组件 provide 自身，远程组件中 inject 活动实例，实现事件的触发及回调。那不同类型的远程组件之间怎么办呢，使用Event Bus，可以利用顶层页面实例作为事件中心，利用 on 和 emit 进行沟通，降低不同类别远程组件之间的耦合度。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/54c8a41e81a545deb029ea79c5e7b454~tplv-k3u1fbpfcp-watermark.image) ## 组件封装现在有个组件封装的问题，先看个例子，基本就大概有了解了。现有3个嵌套组件，如下图。现在需要从顶层组件Main.vue给底层组件RealComponent的一个count赋值，然后监听RealComponent的input组件的事件，如果有改变通知Main.vue里的方法。怎么做呢？ ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3a69f94baedd47708fb25d8ba159e4ef~tplv-k3u1fbpfcp-zoom-1.image) 跨层级通信，有多少种方案可以选择？ 1. 我们使用vuex来进行数据管理，对于这个需求过重。 1. 自定义vue bus事件总线（如上面提到的），无明显依赖关系的消息传递，如果传递组件所需的props不太合适。 1. 通过props一层一层传递，但需要传递的事件和属性较多，增加维护成本。而还有一种方式可以通过$attrs和$listeners，实现跨层级属性和事件“透传”。 **主组件** ```js // Main.vue ``` **包装用的组件** 有的时候我们为了对真实组件进行一些功能增加，这时候就需要用到包装组件（特别是对第三方组件库进行封装的时候）。 ```js // ComponentWrapper.vue ``` **真正的组件** ```js // RealComponent.vue ``` 从例子中回归本文里来，我们要面对的场景是如下这样。远程组件其实有两层，一层是本地（页面内），一层是远端（CDN）。本地这层只是做封装用的，可以理解为只是包装了一层，没有实际功能。这时候可以理解为本地这一层组件就是包装层，包装层主要做了导入远程组件的功能没办法去除，需要利用上面的特性去传递信息给远程组件。 ## 样式层级远程组件在本文可以简单理解为远端的弹层组件，公司业务又涉及到不同的弹层类别，每种弹层类别可能会重叠。 ### 约定z-index 因此划分 0～90 为划分十层，后续可根据实际情况增加数值，设定各远程组件容器只能在规定层级内指定 z-index。 ```javascript // const.js const FLOOR = { MAIN: 0, // 主页面容器 COUPON_MODAL: 20, // 广告弹层 OTHER_MODAL: 30, // 其他弹层 ERROR_MODAL: 90, ... } ``` 设置每种远程组件即弹层的包裹层。 ```js // CouponModalWrapper.vue

组件Main 数据项:{{count}}

组件包裹层

真实组件