碼良之筆——神奇的腳本

碼良之筆——神奇的腳本

本文爲「碼良系統的使用及設計實現」系列文章的第四篇。可先看前面幾篇介紹

• 開篇: 碼良的正確打開方式
• 碼良是如何設計高擴展的在線網頁製做平臺的
• 神筆已開，我該如何使用
• 組件開發

star 破千

上個禮拜上海再次迎來了進口博覽會，咱們「被迫」調休加放假三天，假期歸來，驚喜地發現碼良star 數已經破1000大關，可喜可賀。

上週咱們趕在放假前將碼良全部項目開源，包括 gods-pen-server

碼良服務端、gods-pen-admin

碼良管理後臺以及於7月份就已經開源的 gods-pen

碼良編輯器，至此，碼良宣告徹底開源。

同時咱們推出了相應的工具 gods-pen-cli 來輔助您完成整個碼良項目的運行和部署，具體細節請參考源碼部署文檔。

下面進入本篇文章的正文，碼良腳本。

腳本是什麼

市面上H5編輯器大多着力於給用戶提供可視化的編輯體驗，經過提供豐富的模板和海量的組件來知足用戶多樣化的功能需求，這確實是一個不錯的方向，碼良平臺也具有相似的機制（雖然目前組件還不夠多，模板也不夠精美）。

可是，碼良並不知足於此。

考慮以下場景，咱們向某頁面添加了10個按鈕，點擊這些按鈕時須要分別記錄點擊時間、組件 id 併發送到服務端（即記錄點擊日誌並提交）。將需求拆分一下：

1. 因爲按鈕組件自己不具有點擊日誌記錄和發送功能，須要擴展此功能；
2. 須要爲這一組按鈕都添加這個一樣的功能。

在有腳本功能以前，咱們須要新開發一個具有上述能力的按鈕組件。先不考慮開發組件的成本和所需的權限（碼良平臺任何用戶均可以開發本身的組件，其餘平臺但是未必支持哦），這種方案能知足上述需求。可是，需求稍一變化，不止按鈕，其餘組件也須要這個功能呢，還得開發，實在麻煩。

碼良的腳本機制即是爲了解決此類問題提出的。

碼良腳本具有如下幾個基本特性：

• 腳本能夠擴展組件功能。
• 腳本能夠被複用。
• 腳本幾乎具有徹底的組件控制能力

在這樣的能力加持下，其餘H5編輯器平臺很差實現的富交互、重邏輯頁面，通通能夠搞定。

不夠直觀？有圖爲證

編寫腳本，點擊組件 alert 出當前時間和組件 id

上傳腳本，給其餘組件添加此腳本

腳本開發

return {
  mounted: function () {
    console.log('hello world')
  }
}
複製代碼

以上幾行代碼就實現了一個超級簡單的腳本！使用了此腳本的組件會在其 mounted 生命週期打印出 hello world。

因此，如上所示，腳本就是一個 Vue 配置對象(option object)。是的，就是這麼簡單！

除原生 Vue 配置屬性外，你能夠爲組件添加自定義屬性、自定義方法。

自定義屬性

首先，咱們先以 vue 語法爲組件添加一個屬性 who ，在該組件mounted 生命週期內會 alert 「hello xxx」。

return {
  props: {
    who: String,
  }, 
  mounted: function () {
    window.alert('hello ' + this.who)
  }
}
複製代碼

編輯器如何識別這個屬性並提供合適的輸入控件呢，繼續修改上面的腳本

return {
  props: {
    who: {
      type: String,
      default: 'world', // 默認值
      editor: {
        type: 'input', // 需提供一個文本輸入框
        label: '誰啊', // 在編輯器中該字段實際展現的名字
        desc: '就是誰啊', // 字段描述信息，幫助理解字段的意義，hover 展現
      }
    }
  }, 
  mounted: function () {
    window.alert('hello ' + this.who)
  }
}
複製代碼

將以上腳本添加給某組件，屬性配置面版多處一個 who 屬性配置

能夠看到，咱們在 vue 屬性配置對象上添加了 editor 字段，editor.label 和 editor.desc 使 who 屬性在編輯器中更友好的展現，editor.type 指定了編輯器應該爲該屬性提供何種輸入控件，更多的editor.type輸入類型請參考文檔。

自定義方法

自定義方法經常使用於處理回調，響應事件等。

好比組件有一個屬性爲 successCall，表明某個操做成功的回調方法，其 editor.type 爲 function。

爲組件添加自定義方法後，就能夠在組件 successCall 屬性配置面板裏選取這個方法。

return {
  editorMethods: {                 // 配置 自定義方法 在組件配置面板如何展現
    workLate: {                    // 方法名，對應於 `methods` 內的某方法
      label: '打卡下班',            // 自定義方法顯示名
      params: [                    // 參數列表，能夠在編輯器輸入 
        {                
          label: '打卡時間',        // 參數1的名稱
          desc: '按時下班，請勿逗留', // 參數1的描述，可選
          type: 'string',          // 參數1的類型，支持`string|number|boolean|array|object`
          default: '02:00'         // 參數1默認值
        },
        // 參數2 參數3 ...
      ]
    }
  },
  methods:{
    workLate (ts){
      // do something
    }
  }
}
複製代碼

將以上腳本添加給某組件，並將 workLate 方法傳給 點擊操做

與普通 vue 組件相比，也只是添加了editorMethods 配置而已。

獲取組件實例

this.$parent.getComponent(anotherComponentId)
複製代碼

設置組件顯示隱藏

var $com = this.$parent.getComponent(id)
$com.visible = true // false
複製代碼

更多的組件實例的通用方法和屬性請參考文檔

一個簡單的複雜例子

再次搬出以前作過的簡陋版智障聊天機器人（對話 api 來自www.ownthink.com/robot.html）

使用按鈕、列表、文本等組件繪製出頁面結構

爲發送按鈕添加腳本，編寫處理邏輯

總之

腳本的核心實際就是一個普通的 Vue 配置對象（option object），再加上對屬性（props）和方法（methods）的描述，輔以一些碼良組件的基本通用方法和屬性。只要你擁有一些 vue 開發基礎，你就能夠盡情發揮想象力與創造力，製做開發出富交互、重邏輯的頁面。

碼良之筆，值得擁有！

例行求體驗，例行求 star。