今天聊：如何設計實現 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 或者一些第三方的基礎框架層，它都是已經在渲染器那一層引入了，因此說理論上你的組件代碼其實只會打包和你組件邏輯相關的東西。若是組件有依賴一些圖表庫的話，你也能夠經過動態建立腳本的方式去加載對應的第三方庫，這裏不是特別推薦打包到組件代碼裏面去。

另一個就是組件代碼的大小，我以爲要看具體的狀況。若是你以爲組件太大的話，仍是有不少的方案去進行優化的，包括配合一些緩存的行爲。

😍別忘了下方點贊喔😍