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

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

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

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

正文以下

本文是第二十一届 - 前端早早聊搭建专场，也是早早聊第 148 场，来自满帮-坤明的分享。github

前言

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

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

码良是什么

首先说一下码良是什么？后端

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

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

而后面对应高级的运营或者开发者，咱们会提供不一样的视图。好比说会有更精细的一些组件的层级控制，还会有一些比较细的动画控制面板，能够按帧去控制你这个页面全部的动画效果。咱们还能够给某个组件添加一些脚本，而后经过脚本去扩展组件，实现更多的功能。 markdown

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

先看一下这个组件。咱们能够给组件加多个脚本，每一个脚本其实就是一个 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 或者一些第三方的基础框架层，它都是已经在渲染器那一层引入了，因此说理论上你的组件代码其实只会打包和你组件逻辑相关的东西。若是组件有依赖一些图表库的话，你也能够经过动态建立脚本的方式去加载对应的第三方库，这里不是特别推荐打包到组件代码里面去。

另一个就是组件代码的大小，我以为要看具体的状况。若是你以为组件太大的话，仍是有不少的方案去进行优化的，包括配合一些缓存的行为。

😍别忘了下方点赞喔😍