今天聊：如何设计实现 H5 营销页面搭建系统 - 码良

前端早早聊大会，与掘金联合举办。加 codingdreamer 进大会技术群，赢在新的起跑线。

第三十届|前端 BFF 专场 - 玩转前后端接口，7-17 全天直播，9 位讲师，报名上车看直播? )：

所有往期都有全程录播，上手年票一次性解锁全部

正文如下

前言

​

大家好，我是王坤明，目前在满邦集团的前端团队工作，主要负责基础架构和营销团队这两个部门。今天我主要分享一下，如何设计实现 H5 营销页面搭建系统的高扩展能力，主要围绕着码良是怎么去实现的来进行介绍。

目录

​

​

通过这几个方面去做一下介绍：

• 第一块是码良是什么？这一块我会通过一些图或演示，让大家直观的了解一下码良是一个什么样的东西。
• 第二块，我会简单介绍码良的核心组成，包括技术栈和核心功能。
• 第三块，我会说一下在码良平台上的运营人员和研发人员怎么去协作，怎么去提效，整个工作流程是怎样的。
• 第四块会说一下我们是怎么设计高扩展能力去满足工作流程的，最后做一下简单的总结。

码良是什么

​

首先说一下码良是什么？ ​

码良是一个高扩展的网页搭建平台，它面向运营，同时也面向研发。码良可以在上面去做移动端的页面，也可以去做 PC 大屏的页面，整个码良平台会通过基础的组件、脚本、动画、模板这些模块，去把整个功能区做一些完善，来方便支持上面的一些东西。码良平台是一个开源的项目，它的所有功能都是对外开源的，可以方便大家自行搭建和学习。上图的右下角是官方网站，大家可以有空可以进去。 ​

​

大家可以简单直观的看一下整个平台的情况，这是运营人员在码良平台看到的界面。最左边它有一个基础的组件库，还有基础组件的一些页面，然后中间是搭建区域，它可以进行拖拽，最右边是属性的一些设置，这是一个很基础的搭建平台常见功能。 ​

​

然后面对应高级的运营或者开发者，我们会提供不同的视图。比如说会有更精细的一些组件的层级控制，还会有一些比较细的动画控制面板，可以按帧去控制你这个页面所有的动画效果。我们还可以给某个组件添加一些脚本，然后通过脚本去扩展组件，实现更多的功能。 ​

这是在码良平台里面的一个开发者视图，大家先直观的了解一下，后面会进行详细的介绍。 ​

先看一下这个组件。我们可以给组件加多个脚本，每个脚本其实就是一个 js 对象，通过这个对象可以在编辑器里面给组件暴露出来一些方法，让运营更方便的去填写，稍后会详细的介绍。 ​

​

另外一个就是码良平台，它也可以做 PC 大屏的东西。 ​

整个平台有一个视图的切换，我们可以针对运营、针对设计、针对开发提供不一样的视图，这样在整个平台大家都会有比较友好的一个操作体验。然后码良平台可以支持做 PC，这上面可以切换画布的分辨率，可以做数据大屏。 ​

​

我们官方也为整个平台提供了一个组件商城，里面会有很多常用的一些组件，包括按钮、图表、分享之类的。商城里面的每个组件的代码都是公开的，大家可以去学习或者直接使用都可以。当然也希望其他人可以一起来共建生态。

码良的代码

​

码良的整个系统是由三个部分组成的，然后这三块我们都对外做了开源。

• 第一部分是一个服务端，主要是用 Node 写的；
• 第二个模块是管理后台，主要是管理码良平台里面的所有的页面，包括一些数据分析的东西；
• 最核心的就是搭建的核心编辑器和渲染器。

​

这三块都是可以到对应的 github 上去看相应的源码。

部署方式我们也提供了基础的源码部署，方便需要把自己内部项目进行搭建迭代的人去使用，也可以用 Docker 部署，你可以快速的去搭建，然后体验码良里面的核心功能，整体的话还是比较方便学习和使用的。

核心目标

码良平台整个的核心目标是什么？对内的话，我们希望码良可以对我们满帮集团的营销场景做赋能。在内部使用的话，其实我们沉淀了很多组件、脚本还有模板，后面都会有介绍的，然后至今已经投入了 6000 多个页面，整个码良平台对我们营销大场景的提效是很明显的，研发的介入率差不多只有 10% 左右，节省了大量的研发资源。对外的话，我们希望码良项目可以做一些开源的贡献，然后也希望大家可以在组件商城里面提交自己的组件。 ​

核心组成

​

​

接下来介绍一下码良的核心组成。 ​

一个简单的搭建系统，其实都逃不了这几块。第一个就是基础的服务。基础服务我们用了 Node.js 的 Egg 框架，做了最基础的底层数据存储和读取的支撑。在上面的话会有一个管理后台，核心就是管理所有的页面和资源，围绕着页面管理模块衍生出来的，比如说页面分组的管理，我们有一个项目维度去管理，然后是项目维度的分组，我们有团队的管理以及对应的一个权限管理，然后页面衍生出来的包括页面的一些数据分析、页面的一些历史记录和页面的基础信息都会有，都会在管理平台里面。 ​

对于资源方面的话，所有的搭建系统里面都逃不了的，比如最基础的组件、设计资源、音频、视频，还有图片等这一系列的资源都会在管理后台。

最核心的就是编辑器这一块，编辑器的话，刚才大家可以看到编辑器也是可以切换不同的视图的，比如设计的视图，运营的视图。每个视图下面每个人看到的功能模块都是不一样的，然后这些所有的功能模块其实都在这里，我们做了一些抽象，包括一些组件、组合组件、脚本编辑、模板页面，这块后面会重点介绍一下。 ​

除了编辑器之外，最重要的一部分就是渲染器，渲染器这块我们会解析编辑器编辑好的东西，最终进行页面的输出，在渲染器里面我们还做了一些微前端的加速和多端的简单适配。在这基础的管理和编辑显示之外，在最上层，我们通过脚手架去创建组件和发布组件，组件全部都是发布到 CDN 里面的。所以说整体的功能模块和结构大概是这个样子。

工作流程

​

​

在码良平台里面的工作流程又是怎样的呢？我简单做一下分享。 ​

​

所有的研发，他都会去开发很多组件，包括图片、文本表单这些最基础的组件，任何搭建系统都逃不了这些东西，这是最基础的组件。在这里补充一句，我们之所以说马良平台具有的高扩展性，逃不了脚本的这一块内容，后面都会重点介绍。 ​

也就是研发这边会开发组件，开发脚本，然后把组件和脚本做一些整合，就可以快速产生组合组件。比如说，通过一个文本的组件加一个埋点的脚本，它就可以快速产生一个可以埋点的文本组件。所以说通过组件和脚本两两组合可以做很多组合组件，然后，研发可以把这些组合组件快速去做成一个页面模板。也可以多个组件一起去做组合，其最终目的就是要沉淀这个页面模板。

因为有更多更丰富的页面模板过后，运营就可以去选已有的模板，快速进行发布上线。这是研发在码良平台做的，开发组件、开发脚本然后组合组件，最终做模板页面，放到市场里面方便运营使用。运营在这个平台里面，如果是简单的页面，他可以使用组件或者使用组合组件，去快速的搭建页面，或者在搭建页面过后生成模板方面下一次使用。最终把这个页面选择然后投放到对外。

在整个流程中大家可以看到，对于开发人员来说，搭建系统它需要的是定制能力和扩展能力，我们会通过组件和脚本去实现。对于运营人员来说，他需要有丰富的模板库，可以进行简单的修改，然后快速发布上线。所以说运营人员可以在码良平台里面快速使用组合组件，或者使用模板、页面，进行快速搭建上线。整个码良平台为运营搭建了一个桥，让运营人员无需代码开发，就可以快速发布一个活动页面，同时让开发人员以低代码的形式去组合、去开发，然后提供丰富的组件库。

这是码良平台的整个工作流程，经过这样不断的循环迭代，会产生大量的脚本、组合组件和模板页面，以此达到对运营提效的效果。 ​

核心能力设计

​

我们是怎么设计组件、脚本以及组合组件来让运营和研发能够这样联动协作起来的呢？这里我介绍一下整个码良平台的核心能力设计。 ​

数据结构设计

​

第一块是数据结构方面，大家可以看到这是一个由码良平台搭建的页面。假如我们对这个页面进行抽象，可以看到这个页面其实是由一系列的组件组成的，比如图片、步骤条、列表，还有按钮，这个可能加了一些埋点或者跳转的脚本，我们可以抽象看一下它的数据。 ​

​

大家可以看到这个数据其实就是一个 json 对象，每个节点其实就是一个组件，每个节点里面会有比较关键的一些信息，包括类型等。不同的组件可以有不同的类型，还有组件的位置的 style 信息，还有组件传入的一些参数，这些参数都是运营在链接面板上进行设置过后才会传到这里面，方便组件去解析。

另外一个就是它的 child 元素，组件是可嵌套的。所以对一个页面整体来说的话，它就是这么一个可嵌套的 json。除了这些基本的数据之外，我们还有其他的一些数据，这一块是一个相对比较完整的一个组件的描述信息。

除了开始讲到的最基本的类型之外，还有其他属性，比如说 Id 属性，它的值是组件的唯一编号，方便你在代码里面获取或者是动态渲染的标记。另外一个属性就是动画 Animate，大家可以看到我们网络平台有一个可编辑的动画面板，它的信息就是存储在这里。除了这些之外，重点还有一个扩展脚本 Script，后面会详细说一下。每个组件的扩展信息都在这里面。 ​

简单小结一下整个页面的描述：页面是由无数可嵌套的组件构成的，每个组件其实是由一个 json 来进行描述的，然后整个码良的搭建系统就围绕着怎么去编辑 json，怎么去渲染 json，做了一个整体的系统设计。有了整体的数据之外，那么我们每个组件是如何设计的？

组件设计

这里分享一下组建的创建到加载，然后到最终渲染的整个流程。 ​

​

首先我们讲组件的创建，在码良平台里面，所有的组件都是通过脚手架来创建的。这个脚手架提供了相应的命令去快速创建一个项目，这是创建好的一个项目，创建好这个项目过后，可以进行这个项目的组件功能的开发，开发过程中你也可以对组件开发一个属性编辑器面板，开发好了过后会打包，然后发布到 CDN 里面去，我们所有的组件库和对应的编辑器也都在 CDN 里面，右下角有个详细的帮助文档，大家可以看看。

​

简单的演示下创建的过程。码良平台这里会有一个命令行可以快速去创建一个组件，然后创建的时候会出现相应的一些信息选择类型和一个分类，它会提示你是否要创建对应的属性编辑器，创建好了过后会是一个项目。这个项目他其实分了三部分，有预览的，有组件的代码和编辑器。 ​

​

大家可以看一下创建好的项目，第一，它有一个预览器，预览器运行起来过后其实是一个显示组件和编辑面板的一个容器，提供一个大环境给他。

另外这个项目里面有组件核心的编辑代码，这一块负责组件的显示，还有一个属性编辑器，属性编辑器它对应的代码在 editor 里面，然后我们对组件进行一系列的开发过后进行打包，打包好了过后，对应的组件代码它就会生成到 index.js 里面，然后编辑器的代码会生成到 editor.js 里面，我们会把打包好的代码通过码良的脚手架发布到 CDN 里面。 ​

​

这样的话，在 CDN 里面就有相应的组件代码了，比如说 echart。发布到 CDN 里面之后，我们会提供一个默认的访问链接，它是可以读取到 js 的。链接的规则大家也可以简单的看一下，比如说 2761 是每个组件的分组 ID，echart 是组件的 name，后面是组件的版本。还有一个 index 和 editor 文件。

然后我们可以看一下打包好的 js 的主要内容。大家可以看一下，这是一个 UMD 模块，我们其实就是在 window 对象上，按命名规则暴露了一个全局对象，来方便获取组件的代码和编辑组件对应编辑器的代码， ​

​

一个组件的逻辑开发好了发布到 CDN 之后，我们是怎么加载它呢？其实逻辑很简单，我们通过动态创建一个 script，然后把脚本 load 进来过后，就可以在 window 对象上通过标准的命名规则去拿到组件对象，这就是完成了加载动作，加载好了过后会去做整个页面的渲染。 ​

在渲染页面的时候，其实就是递归每一个节点，然后通过该节点的配置信息去加载对应的 js 逻辑，并且创建对象。在创建对象的时候，通过动态组件的特性渲染到页面。大家看一下，这下面是一个核心的递归结构，我们可以看到每个组件它都是被一个 div 包裹着的，当我们递归到当前这个节点的时候，我们会把当前节点的样式信息设置到包裹容器里面，这样包裹容器决定了当前组件的位置大小等信息。

内部的话，我们会通过一个组件 ID 为 key 的动态组件， 进行动态渲染，在渲染的过程中绑定组件的参数，最终在递归遍历他的孩子元素进行递归渲染。这是整个页面中所有的 json 一个一个的递归，然后进行渲染的一个核心逻辑。 ​

​

那么对于每一个组件的注册和渲染流程又是怎样的呢？ ​

首先，当遍历到其中某一个节点的时候，需要去创建节点的对象，首先就需要去获得对象的逻辑代码，通过前面提到的加载对应组件的 js，然后在全局 window 对象上可以拿到对应的对象，拿到指定的对象后，会遍历对象上面配置的脚本信息，然后把这些脚本信息进行组合，组合好了后会创建成一个组合好的 Vue 对象，再通过动态组件渲染到节点，这块的核心逻辑可以看上图右边的代码。

其实简单看一下，就是通过 Vue 的 extend 去拿到最基础的组件对象，然后再通过不断的遍历，把扩展脚本加到这个对象里面去，这里也是通过 extend。所以说脚本可以和最基础的组件代码进行整合，然后把整合好的对象，以组件的 ID 为 key，以整合好的组件为值放到全局对象 window 上，然后再通过动态组件设置为 ID 进行页面的组件渲染，渲染好了过后会绑定样式，然后在绑定事件，在绑定动画相关的东西，整个过程下来组件就渲染好了。 ​

这里简单小结一下，一个组件其实就是一个 Vue 的对象，组件打包发布到 CDN 里面，然后通过动态创建脚本的方式把它拉下来，再挂载到 window 对象上，然后递归到某个节点的时候会去渲染逻辑，组件渲染其实是通过 Vue 的动态组件的特性插入到页面里面去的。整体的组件设计其实都是依赖 Vue 的整个流程的。

组件属性编辑设计

​

除了组件设计标准之外，组件还有很重要的一个部分，那就是组件的属性编辑器的设计。因为组件属性编辑器相当于是对运营人员提供了一个口子，方便运营能更方便的去管理组件。所以说组件属性编辑器这块也是比较重要的。 ​

​

然后说一下码良这边是怎么设计的。码良平台的设计思路分为两部分，一块是基础的属性编辑器，另一块是高级属性编辑器。怎么理解呢？第一个，基础属性编辑器就是一些固定的文本，没有相关的逻辑，比如说一些单行的输入框、图片选择、音频、视频这些，它没有逻辑，只有固定值，我们称之为基础属性。 ​

另外一个就是高级属性编辑器，它的属性值不是固定的，比如说它需要通过一个接口请求来获得数据；还有一种，就是组件对应的这些属性的交互是很复杂的，这两种我们都称之为高级属性编辑器。后面这两块简单说一下。 ​

​

首先看一下什么是基础的属性编辑器。比如说一个组件，它由最基础的文本、图片、日期选择构成，根据这些属性，我们在属性面板里面都会给运营提供不一样的操作控件，这就是属性编辑器，目前的这些只是相对比较基础的。 ​

​

大家可以看一下这里的脚本。熟悉 Vue 的同学应该很熟悉，其实就是一个 Vue 对象的传入参数，每个参数里面我们都给它扩展了一个 editer 属性，然后我们可以通过 editer 的配置去解析，给组件提供不一样的属性编辑面板。 ​

比如说第一个 editer 的属性值是图片，那么我们这里就提供一个图片的控制面板给运营，然后像下面的日期、枚举类型，都可以直接在组件参数上定义，这样的属性我们统称为简单属性。 ​

editer 总共有哪些属性可以去配置呢？这里简单说一下。上图右边是一个全量的配置，我们首先可以看一下 label，label 的名字是方便我们显示在编辑器这里的。另外一个就是描述信息 desc，比如说 label 的值太长了，也可以移上去做一个动态提示，所以这里有一个描述的信息。

另外一个最重要的就是类型 type。我们预制了很多类型，图上列举的都是我们预制的。包括基本的输入框、颜色选择、图片、视频、音频、富文本、枚举、时间选择、单选等，这些业务类型都可以直接通过配置一个组件的类型，就可以让组件对应的属性编辑器有相应的功能。还有一个属性需要介绍一下，比如像 work，work 可以写一些简单的逻辑，让有些属性可以互斥，比如说，组件选择了下拉框中的条件一，然后组件中的单选框就不显示。 ​

然后我们去看一下它是怎么实现的。所有的 Vue 对象上的 props 信息，我们都可以通过 $option 去获取，获取之后我们会遍历所有的参数，然后根据参数的不同类型去渲染不同的编辑面板。这里可以看一下我们枚举了很多类型，比如说 string 的时候是 input，number 的时候是 number。然后像这种日期选择、枚举的，其实就是解析参数的类型，然后去按需渲染不同的控件给到运营使用。 ​

​

这种最基础的属性，它有一些优点。比如说使用比较方便，它只需要你定义组件的时候，给组件的属性加一个额外的 editer 的配置，然后码良平台在解析组件的时候就能知道给属性提供怎样的编辑面板，并且配合脚本使用的话会更强大。但是它也有不少缺点，第一个是它只能配置固定的数据，前面也看到它只能提供如单文本或颜色这些不带任何逻辑的选项，没办法在参数里面去写逻辑，然后去动态获得这些数据。 ​

例如，有一个很简单的场景，一个下拉框的三个选项数据是通过一个接口获得的，那么用基础的属性你就没办法去做。第二点，就是没办法提供属性之间的强关联关系。比如，有些属性选了一个值，另外一个属性就不存在或者显示其他的内容。这些复杂的逻辑操作，基础属性是没办法满足的。最后一点，比如说，有些组件的属性配置面板是极其复杂的，像一些常见的九宫格、转盘抽奖等，都需要一个比较复杂的属性配置面板才能支持。 ​

​

基于这些缺点，我们提供了一个高级属性编辑器的思路，你可以在开发一个组件的时候为这个组件同时开发一个属性编辑器面板。 ​

​

当你开发好发布之后，在码良的编辑器里面，它就会一一对应上。比如说你的组件上图的左边，那么你选择左边的组件过后，它就会加载组件对应的属性编辑面板，这样你就可以完全按照自己的规则去开发组件对应所有属性的编辑面板。 ​

然后简单介绍一下原理，前面也看到我们创建一个组件的时候，其实有三部分，一个是编辑器，另一个是预览模块，还有一个是组件的核心模块。在组件的整体结构中，我们可以看到所有的组件都是在解析显示传入的参数信息，编辑器的核心逻辑都是围绕着怎么去编辑这一个属性去进行开发，它们的关联关系就围绕着传入的参数进行展开。 ​

可以看上图的代码，组件的逻辑主要是组件和编辑器传入相同的参数信息，也就是组件的 props 信息传进去，编辑器去编辑这些属性，然后渲染的组件模块会根据数据的不同状态，显示不同的信息。这就是大致的原理。

在编辑器这一块的话，可以看到一个组件的编辑面板分为两块，一块是高级的属性编辑器，这块你可以按照自己的功能或者布局去做复杂的逻辑开发。另一块是基础的属性面板，这块的属性面板显示的是，比如说扩展的脚本数据，或者高级模块的有些属性不去单独做，只需要透传到基础属性去做简单的显示和配置。 ​

在实现代码里面，整体的流程是：在你选中一个组件的时候，组件对应的编辑器的 js，会通过动态 load 脚本的方式加载到本地，加载好了过后，同样的也就会以特殊的 key 的形式，通过动态渲染组件的方式插入到这里。这是高级属性面板的流程。

下面介绍基础的属性面板，大概流程是这样：在创建好属性编辑器的时候，会把组件的传入参数传给它，这样的话编辑器面板编辑对应的属性值，然后组件就根据组件数据的值显示不同的信息。 ​

​

总结一下，属性编辑器的核心目的就是提供友好的交互给运营使用。所以说我们通过基础属性编辑器满足开发区扩展，然后提供高级属性编辑器，满足运营的特殊化的需求，这两方面我们都是有能力去进行扩展和制作的。 ​

脚本设计

讲了组件和组件对应的属性编辑器功能，这里就必须要提到脚本这一块，脚本是什么？脚本相当于是给组件插上了一个翅膀，然后我们简单介绍一下脚本是什么？

在码良平台里面的一个典型脚本，就是上图左边的样子。大家可以看一下，这其实就是一个有 Vue 相应特征的一个对象，然后它可以传入一些参数、方法，然后我们扩展了一个对编辑器暴露方法的一个配置信息，当我们对一个组件加了脚本过后，那么组件在编辑面板上就可以快速多出来这么一个方法和属性，让运营可以去填写，填写好后我们可以在逻辑里面去进行处理。

比如说，上图黄色的 image 按钮的方法，它可以填一些参数的信息，都是可以通过脚本里面的配置去进行添加的，这就是脚本。简单来说，脚本可以加强组件的一些功能，并且能很好的和属性编辑器面板进行联动。 ​

​

除了暴露这种基础的东西之外，脚本还可以做其他的东西。比如说，你可以在脚本里面去做一些数据请求，然后把请求到的数据来初始化当前组件，你也可以在脚本里面通过 ID 的方式去获得其它的组件，获取值后，对获取到的组件的方法或者属性进行修改和调用。总结一下：脚本其实就是一个标准的 vue 对象，拥有 vue 的所有生命周期以及自定义方法的能力。 ​

​

脚本它还有一个特点，就是它是可以组合的。举个例子，比如说我们有一个分享的脚本，然后有个保存图片的脚本，还有一些数据请求的脚本，我们就可以把这些小的功能组合到按钮组件里面，那么这个按钮就拥有了这些功能，就会生成一个功能更强大的按钮组件。核心逻辑上面已经提到过，这就是脚本的作用，就是它可以快速的扩展当前这个基础组件的能力。 ​

我们来看一下脚本在码良平台里面是怎么使用的。首先我们可以让一个组件去选择多个脚本，然后这里选择了两个脚本，选好脚本过后，它就会在编辑面板里面多出来对应的属性和方法，这些属性和方法都可以通过脚本去添加，并且都暴露了参数和方法，参数和方法都可以通过脚本属性编辑器面板去扩展。暴露出来方法之后，你就可以按需填一些代码。这就是脚本的使用方式。你可以给一个组件快速添加脚本，然后通过一些简单的逻辑扩展，让组件在编辑器里面有更好的一个配置。 ​

​

在这个过程中，脚本一般都是怎么去使用的呢？第一点：我们可以去做一些简单功能的覆盖，比如说，上图左边是组件本身的一个功能，然后提交的数据需要有些逻辑处理，但是我们可以通过脚本去把已有的提交方法给覆盖掉，然后来做一些其他的逻辑处理，也可以对组件的功能区进行替换和增强。 ​

​

第二点：脚本可以很方便的组合，比如说文本组件，它有埋点功能、跳转功能、分享功能，可以逐步迭代成一个复杂的文本组件。按钮组件、图片组件也是类似的。 ​

​

但是如果我们用脚本的话，就可以把它拆开。通过组合的方式，原有组件的逻辑不会变，但是我们会组合出来更多更强大的一个组件，这就是脚本的好处。 ​

​

但脚本的设计同时也带来了其他问题，比如说太复杂，脚本对于运营人员来说还是比较困难的，运营也不会写这些脚本。另外一个就是太灵活，由于脚本的设计机制决定了脚本可以覆盖组件的功能，所以说这个功能还是太灵活，反而不好控制。所以脚本它只适合开放给开发使用。

封装组件与组合组件

​

​

对开发来说，我们提供了另外一种方式去让运营能更好的去使用。那么这就是要提到的封装组件和组合组件，我们先简单看一下什么是封装组件和组合组件。

首先我们可以看到上图左下角是一个常用的组件，然后我们可以给它进行一个封装，封装好了过后，大家可以看到它会把里面的孩子元素合成一个整体，合成一个整体之后，它的复杂度会降低，然后把不必要的复杂度给包裹到里面去，这就是封装组件。 ​

那么组合组件又是什么呢？组合组件是我们把一个组件另存为，另存为之后，我们可以给先保存着，保存之后，我们就可以在组合组件里面快速的找到刚才保存的组件，然后我们可以直接拉过来使用，这就是一个组合组件。组合组件的作用，就是把一些我们已经编辑好的功能，成块的另存为组件，然后方便我们研发和运营快速使用。 ​

​

那么总结一下封装组件，我们通过封装组件把对运营的复杂逻辑进行封装，对外不可见，我们还可以配合脚本和数据总线的方式，把一些不必要的东西给它隐藏，然后把一些必要的东西暴露到最外层，让运营填写就可以了，以此来降低运营的使用门槛。 ​

另外一个就是组合组件，组合组件为研发提供了一个开发组件的平台，它可以把你常用的组件、脚本按一定的功能开发好，开发好了过后快速导出一个组合组件，方便运营使用，也方便研发自己下一次使用。 ​

封装组件实现其实也很简单。封装组件主要是通过一些参数标记、组件的状态来实现的。通过组件的状态，在编辑器上面进行一些操作限制或者显示限制。比如说是否能展开、是否能整体拖拽，是否能点击下一个孩子元素。实现方案并不复杂。 ​

组合组件的实现方式会更容易理解，因为整个页面来说它就是一个 json，然后这个部分我们要保存起来，下次复用其实就是保存和管理 json。

模板

有了组合组件过后，虽然能解决大部分问题，但对运营来说的话，运营需要的是快速创建页面，所以说它需要有比较丰富的模板。 ​

​

模板对大家来说可能更容易理解。其实模板就是研发和运营已经搭建好的一些页面，如果运营觉得这些页面可复用性很高，那么它就可以另存为模板，方便下次的快速使用。模板的管理其实也就是管理整个页面的一个 json，和组合组件类似。 ​

总结

​

​

简单做一下总结：码良平台是通过组件、脚本、组合组件和模板这几块内容，向我们提供了一个面向运营无代码的方式，和面向研发低代码的方式去搭建页面的一个高扩展的平台，方便大家自己搭建和使用，整体的代码复杂度也不高，也方便大家自己学习。

​

推书

我们前面的分享讲完，在这里给大家分享一本书《悟透 JavaScript》，这是我刚入行的时候看的一本 js 相关的书。虽然这本书对我的影响不算太大，但是我觉得这本书很好玩，所以推荐给大家。看这本书有点让我看小说学习 js 的感觉。所以说如果是最开始在学 js 的人，我还是推荐大家可以看看。 ​

招聘

​

另外一个就是满帮集团的前端团队目前在招聘，希望大家加入我们，上海和南京都会有相应的岗位。最后先感谢一下大家，然后我这次的分享差不多了，然后也希望大家可以关注一下我们的项目。谢谢大家，今天我的分享结束。 ​

​

Q&A

Q：请问坤明老师，所有的组件都是单独部署到 CDN 上的吗？如果有某个组件想更新，是如何做到单组件更新的？ ​

A：好的。所有的组件都是单独部署的到 CDN 上的。大家可以看到，组件发布的时候，它的命名规则里面是有组件的名字和对应的版本号的，每个组件在 CDN 里面对应的版本号都是有唯一的一个 js 代码的。

另外是怎么更新的问题。在码良平台里面，当你使用一个组件的时候，码良平台会检查组件有没有新的版本，如果有新版本的话，它就会在属性面板当中进行提示，有新组件，是否需要点击更新，然后你点击更新就可以了。​

Q：请问坤明老师，组件的打包方式是什么？大小如何？如果大多数组件都依赖相同的依赖，那么怎么减少组件的体积。

A：首先组件的大小取决于组件本身功能的复杂度。有时候你可能会依赖很多一些第三方库，这块的话，你需要自己权衡。

理论上来说的话，组件包的大小，和第三方依赖包可能没有太大的联系。因为，组件本身的项目，它所依赖的基础的三方包，比如说像 Vue 或者一些第三方的基础框架层，它都是已经在渲染器那一层引入了，所以说理论上你的组件代码其实只会打包和你组件逻辑相关的东西。如果组件有依赖一些图表库的话，你也可以通过动态创建脚本的方式去加载对应的第三方库，这里不是特别推荐打包到组件代码里面去。 ​

另外一个就是组件代码的大小，我觉得要看具体的情况。如果你觉得组件太大的话，还是有很多的方案去进行优化的，包括配合一些缓存的行为。

?别忘了下方点赞喔?