開發一個 Enhancer 前端組件

1. 介紹

• Enhancer組件 由 組件配置頁面(configurator) 和 組件自己(widget) 兩部分組成。
• 組件配置頁面會將用戶的配置保存成一個 JSON。
• 組件在預覽頁面會包含在一個指定的窗口容器內，得到配置的 JSON。
• 推薦先前往 Enhancer 教程, 將 必修 部分看一遍。

配置頁面(configurator)

下圖爲 enhancer-timeline 組件的配置頁面

通常配置頁面分爲 數據源配置 和 其餘配置項, 上圖中左邊是數據源配置, 右邊是其餘配置項。

配置頁面生成的 JSON 以下:

{
  "dataSourceId": 1,       // 數據源 id, 經過這個id能獲取到組件數據
  "direction": "vertical", // 展現方向
  "showCenter": true,      // 居中顯示
  "icon":"fas fa-tag",     // 節點圖標
  "iconSize": 16,          // 圖標大小
  "titleFontSize": 16,     // 標題字體大小
  "contentFontSize": 14,   // 內容字體大小
  "footerFontSize": 12     // 底部字體大小
}

組件預覽頁面(widget)

下圖爲 enhancer-timeline 組件的預覽頁面:

2. 建立組件

這裏咱們準備開發一個列表組件, 組件名叫 widget-dev-demo. 以列表的形式渲染從數據源獲取到的數據, 該組件能夠控制列表中的數據是不是單行渲染。 下圖中左右兩部分分別是不一樣配置的展現

2.1 環境準備

• 請到 node.js 去下載安裝 node。

• 全局安裝組件開發工具 ewtool:

  npm install ewtool -g --registry=https://registry.npm.taobao.org

2.2 初始化組件

打開命令行終端, 運行下面的命令:

mkdir widget-dev-demo
cd widget-dev-demo
ewtool
npm install --registry=https://registry.npm.taobao.org
npm start

3. 熟悉組件開發界面

啓動 widget-dev-demo 組件開發後, 會在默認瀏覽器中打開頁面並顯示以下:

若是你的默認瀏覽器不是 Chrome, 建議換成 Chrome 來查看。

3.1 場景列表

• 自定義場景: 每一個組件都會有不少的配置項, 爲了展現不一樣配置的效果, 能夠點擊下面的另存爲按鈕, 把組件的配置另存爲一個場景。
• 定向場景: 定向場景專門用於測試組件的不一樣API和狀態是否能正常運行, 組件開發完成時能夠用這些場景來測試組件。

3.2 組件配置區

開發者須要將組件的不一樣配置項渲染在這塊區域。

3.3 操做按鈕

從左到右分別是:

預覽組件, 保存配置, 另存爲(將組件配置另存爲一個場景), 查看配置。

3.4 注意

若是在尚未點擊 保存配置 按鈕以前就點擊了 預覽組件 按鈕, 會打開新頁面顯示以下:

會看到組件一直在加載中, 這是由於此時組件的配置還沒保存過, 須要先點 保存配置 按鈕。

4. 開發配置器

widget-dev-demo 組件配置器的具體代碼請參考 configurator, 下面介紹一下主要步驟:

4.1 在 contruct 函數裏初始化 html 元素

const tplHTML = template({
  locale: locale()
});

$('body').html(tplHTML);

// 初始化數據源配置器
this.dataSourceConfig = Enhancer.DatasourceManager.createConfigurator('dataSourceDom', {
  supportedTypes: ['rdb', 'http', 'static', 'jsonp'],
  dataSpecification: 'dataSpecification', // 組件數據格式說明 
  onSave: (source) => {
    this.profile.dataSourceId = source.id;
  }
});

4.2 在 setProfile 函數裏回填以前保存過的配置項

// 用保存過的數據源Id區加載數據源, 而後回填給數據源配置器
if (this.profile.dataSourceId) {
  Enhancer.DatasourceManager.getDatasource(this.profile.dataSourceId, (source) => {
    this.dataSourceConfig.setConfig(source);
  });
}

// 回填 單行顯示 配置項
if (this.profile.oneLine) {
  $('input[name=oneLine]').prop('checked', true);
}

4.3 在 getProfile 函數裏檢查配置的合法性並返回新的配置數據

因爲 widget-dev-demo 組件只有一個 數據源 配置項和一個 單行顯示 的配置項, 所以 getProfile 函數只會返回這兩個字段。

return {
  dataSourceId: this.profile.dataSourceId,
  oneLine: $('input[name=oneLine]').prop('checked')
};

開發完成後的效果

5. 開發組件

widget-dev-demo 組件的具體代碼請參考widget, 主要代碼以下:

// 獲取組件所在的 html 容器
const $container = this.getContainer();

// 經過配置器裏保存的數據源Id加載數據
this.getSourceData(profile.dataSourceId, (data) => {
  // 將 數據源數據(data.rows) 和 配置數據(profile.oneLine) 塞給 tpl 模版進行渲染 
  $container.html(tpl({
    locale: locale(),
    data: data.rows,
    oneLine: profile.oneLine
  }));

  // 通知平臺 組件已經初始化完成
  this.trig('complete');
});

6. 配置&預覽組

6.1 配置數據源

1. 回到配置頁面。
2. 因爲是本地開發, 數據源類型請選擇 靜態數據。

3. 將下面的數據粘貼到數據源編輯器裏。

   {
     "rows": [{
       "content": "In locavore voluptate assumenda. Non raw denim sapiente aute small batch fap. Raw denim cliche lo-fi umami cray incididunt sunt before they sold out. Viral mollit flexitarian locavore, beard readymade eiusmod anim."
     }, {
       "content": "Lorem Ipsum has been the industry's standard dummy text eve. Lorem Ipsum has been the industry's standard dummy text eve. Lorem Ipsum has been the industry's standard dummy text eve. Lorem Ipsum has been the industry's standard dummy text eve"
     }, {
       "content": "Lorem Ipsum has been the industry's standard dummy text eve"
     }]
   }

4. 點擊 保存數據源 按鈕。
5. 點擊 保存 按鈕。

6.2 預覽組件

1. 到配置頁面, 點擊 預覽 按鈕後能夠看到的效果以下:
   

   以列表的形式渲染數據, 當寬度不夠時文字自動換行顯示。

2. 到配置頁面, 將 單行顯示 複選框勾上, 而後點 保存 按鈕, 而後再點 預覽 按鈕能夠看到的效果以下:
   

   以列表的形式渲染數據, 當寬度不夠時超出部分會顯示成省略號。

7. 發佈組件

組件發佈能夠經過下面兩種方式來發布, 任選其一便可

方式一: 命令發佈

1. 打開命令行終端, 切換到 widget-dev-demo 目錄下。
2. 運行下面的命令:

ewtool login // 用在 enhancer 平臺上註冊的用戶名、密碼進行登陸, 如已登陸過請忽略
ewtool release

方式二: 網頁發佈

1. 打開命令行終端, 切換到 widget-dev-demo 目錄下。

2. 運行下面的命令:

   ewtool pack // 會將組件代碼打包到 widget-dev-demo/release 下

3. 用瀏覽器打開 https://developer.enhancer.io/myWidgets, 點擊 添加第一個組件, 在組件添加頁面 填寫組件相關內容 而後提交組件。
4. 組件發佈完成後能夠在瀏覽器裏打開個人組件, 而後繼續完善組件相關的信息