封裝框架的實踐

星空發表於2019-02-16
封裝框架

最近在嘗試著封裝一個框架，礙於種種原因，先從簡單的入手吧。
基於vue和elementUI封裝的框架，整合 資料儲存localforage、字型圖示庫font-awesome、css擴充語言scss、網路請求axios等模組，為了讓業務開發更專注於資料驅動。
專案原始碼地址：https://gitee.com/g2333/data_…

使用場景

1. 環境
　　框架基於vue2.0開發，故開發環境也需要nodejs和vue-cli。

2. 擴充和維護
　　為使框架本身易擴充和維護，專案採用vue-cli封裝，在開發和使用過程都不打包，保持程式的可讀性，同時也方便在引用該模組時可簡單的修改配置檔案和原始碼。

3. 便捷使用
　　在一個全新的vue-cli初始化專案中，
　　安裝模組(在vue專案路徑下npm i modulecomponents)，
　　引用模組(在vue專案的main.js中新增import `modulecomponents/index.js`)
　　測試使用(比如使用框架暴露的方法dataTool.alert(`測試成功`))

專案配置

1. 依賴模組
　　框架本身依賴有如下模組：
　　elementUI 框架的主力，用於元件封裝和方法的呼叫、
　　localforage 資料儲存，用於儲存前端的大量資料、
　　font-awesome 字型圖示庫、
　　scss css擴充語言、
　　axios 網路請求

2. 設定專案入口
　　修改package.json檔案，新增main欄位，指向專案入口("main": "mc/index.js")，修改private欄位，設定為開源("private": false)

3. 專案初始化
　　為了讓框架方便引用，故在初始化檔案index.js(框架專案開發過程使用indexdsForDev.js)，自動引入依賴和全域性變數的掛載

4. 檔案提交
　　設定專案.gitignore檔案忽略node_modules避免在協同開發時因為環境不一致導致的webpack報錯
　　設定專案.npmignore檔案忽略釋出時非必要的檔案，減少模組的體積

封裝的模組

1. 元件
　　元件基於elementUI封裝，專案中封裝的元件為避免命名衝突，都以mc-為字首開頭。　
　　計劃封裝的元件有如下：
　　表格mc-table、
　　表單mc-form、
　　樹列表mc-tree、
　　對話方塊mc-dialog、
　　上下文選單mc-contentmenu、
　　按鈕組mc-btns、
　　流圖mc-flow、
　　下拉選框mc-select、
　　附件上傳mc-upload

//在介面上顯示一個表單
<mc-form :object="form"></mc-form>
//表單物件，描述表單的結構和資料
form: new mc.Form({
  structure: [{
    label: `測試`,
    name: `test`,
  }],
  data: {
    test: `hello world`,
  }
})

　　除框架封裝的元件外，依舊支援使用elementUI元件

2. 全域性方法
　　為了方便開發，較為常用的方法被掛載在全域性變數dataTool的屬性中，比如
　　請求方法：ajax請求httpReq、檔案匯出exportFile、檔案上傳uploadFile；
　　提示類方法：警告彈框alert、邊角提示notify、確認輸入框confirm、鎖屏載入loading等；
　　呼叫元件類方法：開啟彈窗openDialog、關閉彈窗closeDialog、開啟上下文選單openContextmenu、關閉上下文選單closeContextmenu等；
　　資料處理：物件型別的克隆和過濾objClone、時間格式的轉化formatTime、cookie的新增setCookie等；
　　原型鏈上的方法：獲取表格新增的一行資料Array.newTableRow、陣列元素位置交換Array.swap等；
　　事件方法：註冊事件addEvent、觸發事件emitEvent、取消事件cancelEvent等；

//開啟上下文選單，點選匯出檔案，將請求的內容匯出成flow.json檔案
dataTool.openContextmenu(event,[{
  text: `匯出檔案`,
  icon: `fa fa-download`,
  color: `blue`,
  click: ()=>{
    const reqObj = {url:`http://rap2api.taobao.org/app/mock/22119/FUNC=getFlow`, params: {}, type:`mock`};
    dataTool.httpReq(reqObj).then(res=>{
      dataTool.exportFile({fileName: `flow.json`,data: JSON.stringify(res.CONTENT)});
    }); 
  }
}])

3. 配置檔案
　　封裝的元件各有一份預設配置檔案，方便全域性調整元件的引數。
　　封裝的元件既支援元件類的預設引數修改，也相容修改單個例項和繼承元件類

export default {　//表單類的配置檔案
  btns: [], //表單底部欄按鈕
  topBtns: [], //表單頂部欄按鈕
  hiddenRows: [], //隱藏的行
  topBtnStyle: ``, 
  bottomBtnStyle: `text-align:right`, 
  dialogEdit: false, //是否開啟普通字串型別的彈窗編輯功能
  showRules: true, //是否顯示錶單規則驗證
  style: "margin: 10px;",
  inline: false,
  labelWidth: "50px",
  labelPosition: "right",
  size: "small",
  autoComplete: `on`,
  spellcheck: false,
  readOnly: false,
  extBtnIcon: `el-icon-more`,
  textArea: {
    size: { minRows: 1, maxRows: 10},
    resize: `none`,
  },
  tag: {
    input: ``,
    type: `warning`,
    closeTransition: false,
    appendWord: ` + New Tag`,
  },
  inputStyle: `width:100%`,
  dataType: { //採用小寫，減少列舉數量
    bool: [`bool`,`boolean`,`switch`],
    checkboxGroup: [`checkboxgroup`,`checkbox`],
    radio: [`radio`],
    select: [`singleenum`,`multiselect`,`multienum`],
    time: [`time`],
    date: [`date`,`datetime`,`datetimerange`,`daterange`],
    button: [`button`,`btn`],
    tag: [`tags`,`tag`],
    input: [``,`input`,`string`,`text`,`textarea`,`number`,`float`,`password`,`double`,`int`,`integer`,`long`,`search`,`extinput`],
    component: [`mc-table`],
  },
}

開發記錄

1. 專案結構
　　整體專案的規劃整理在一個xmind檔案中，方便記錄開發進度和了解專案的整體大綱，這是圖片版 http://qpic.cn/dDPbFwEeD (請在複製貼上到瀏覽器的位址列中訪問)

2. 使用文件
　　為了記錄開發進度和形成規範，專案開發的使用說明和修改會記錄在石墨文件https://shimo.im/sheet/K8QPjP…

3. 版本控制
　　使用git作為版本控制，專案的原始碼託管在碼雲上https://gitee.com/g2333/data_…
　　既方便協同開發，也方便程式碼版本控制

框架更新

1. 專案更新
　　修改後的原始碼在測試成功後，修改package.json中的版本號，將程式碼推送到碼雲上，然後通過npm釋出新版本

2. 模組更新
　　通過npm update modulecomponents指令更新模組，即可使用最新版功能

相關文章