摘要：最近在嘗試著封裝一個(gè)框架，礙于種種原因，先從簡單的入手吧。基于和封裝的框架，集成數(shù)據(jù)存儲字體圖標(biāo)庫拓展語言網(wǎng)絡(luò)請求等模塊，為了讓業(yè)務(wù)開發(fā)更專注于數(shù)據(jù)驅(qū)動。

最近在嘗試著封裝一個(gè)框架，礙于種種原因，先從簡單的入手吧。
基于vue和elementUI封裝的框架，集成 數(shù)據(jù)存儲localforage、字體圖標(biāo)庫font-awesome、css拓展語言scss、網(wǎng)絡(luò)請求axios等模塊，為了讓業(yè)務(wù)開發(fā)更專注于數(shù)據(jù)驅(qū)動。
項(xiàng)目源碼地址：https://gitee.com/g2333/data_...

1. 環(huán)境
　　框架基于vue2.0開發(fā)，故開發(fā)環(huán)境也需要nodejs和vue-cli。

2. 拓展和維護(hù)
　　為使框架本身易拓展和維護(hù)，項(xiàng)目采用vue-cli封裝，在開發(fā)和使用過程都不打包，保持程序的可讀性，同時(shí)也方便在引用該模塊時(shí)可簡單的修改配置文件和源碼。

3. 便捷使用
　　在一個(gè)全新的vue-cli初始化項(xiàng)目中，
　　安裝模塊(在vue項(xiàng)目路徑下npm i modulecomponents)，
　　引用模塊(在vue項(xiàng)目的main.js中添加import "modulecomponents/index.js")
　　測試使用(比如使用框架暴露的方法dataTool.alert("測試成功"))

1. 依賴模塊
　　框架本身依賴有如下模塊：
　　elementUI 框架的主力，用于組件封裝和方法的調(diào)用、
　　localforage 數(shù)據(jù)存儲，用于存儲前端的大量數(shù)據(jù)、
　　font-awesome 字體圖標(biāo)庫、
　　scss css拓展語言、
　　axios 網(wǎng)絡(luò)請求

2. 設(shè)置項(xiàng)目入口
　　修改package.json文件，添加main字段，指向項(xiàng)目入口("main": "mc/index.js")，修改private字段，設(shè)置為開源("private": false)

3. 項(xiàng)目初始化
　　為了讓框架方便引用，故在初始化文件index.js(框架項(xiàng)目開發(fā)過程使用indexdsForDev.js)，自動引入依賴和全局變量的掛載

4. 文件提交
　　設(shè)置項(xiàng)目.gitignore文件忽略node_modules避免在協(xié)同開發(fā)時(shí)因?yàn)榄h(huán)境不一致導(dǎo)致的webpack報(bào)錯(cuò)
　　設(shè)置項(xiàng)目.npmignore文件忽略發(fā)布時(shí)非必要的文件，減少模塊的體積

1. 組件
　　組件基于elementUI封裝，項(xiàng)目中封裝的組件為避免命名沖突，都以mc-為前綴開頭?！?br>　　計(jì)劃封裝的組件有如下：
　　表格mc-table、
　　表單mc-form、
　　樹列表mc-tree、
　　對話框mc-dialog、
　　上下文菜單mc-contentmenu、
　　按鈕組mc-btns、
　　流圖mc-flow、
　　下拉選框mc-select、
　　附件上傳mc-upload

//在界面上顯示一個(gè)表單

//表單對象，描述表單的結(jié)構(gòu)和數(shù)據(jù)
form: new mc.Form({
  structure: [{
    label: "測試",
    name: "test",
  }],
  data: {
    test: "hello world",
  }
})

　　除框架封裝的組件外，依舊支持使用elementUI組件

2. 全局方法
　　為了方便開發(fā)，較為常用的方法被掛載在全局變量dataTool的屬性中，比如
　　請求方法：ajax請求httpReq、文件導(dǎo)出exportFile、文件上傳uploadFile；
　　提示類方法：警告彈框alert、邊角提示notify、確認(rèn)輸入框confirm、鎖屏加載loading等；
　　調(diào)用組件類方法：打開彈窗openDialog、關(guān)閉彈窗closeDialog、打開上下文菜單openContextmenu、關(guān)閉上下文菜單closeContextmenu等；
　　數(shù)據(jù)處理：對象類型的克隆和過濾objClone、時(shí)間格式的轉(zhuǎn)化formatTime、cookie的添加setCookie等；
　　原型鏈上的方法：獲取表格新增的一行數(shù)據(jù)Array.newTableRow、數(shù)組元素位置交換Array.swap等；
　　事件方法：注冊事件addEvent、觸發(fā)事件emitEvent、取消事件cancelEvent等；

//打開上下文菜單，點(diǎn)擊導(dǎo)出文件，將請求的內(nèi)容導(dǎo)出成flow.json文件
dataTool.openContextmenu(event,[{
  text: "導(dǎo)出文件",
  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. 配置文件
　　封裝的組件各有一份默認(rèn)配置文件，方便全局調(diào)整組件的參數(shù)。
　　封裝的組件既支持組件類的默認(rèn)參數(shù)修改，也兼容修改單個(gè)實(shí)例和繼承組件類

export default {　//表單類的配置文件
  btns: [], //表單底部欄按鈕
  topBtns: [], //表單頂部欄按鈕
  hiddenRows: [], //隱藏的行
  topBtnStyle: "", 
  bottomBtnStyle: "text-align:right", 
  dialogEdit: false, //是否開啟普通字符串類型的彈窗編輯功能
  showRules: true, //是否顯示表單規(guī)則驗(yàn)證
  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: { //采用小寫，減少枚舉數(shù)量
    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. 項(xiàng)目結(jié)構(gòu)
　　整體項(xiàng)目的規(guī)劃整理在一個(gè)xmind文件中，方便記錄開發(fā)進(jìn)度和了解項(xiàng)目的整體大綱，這是圖片版 http://qpic.cn/dDPbFwEeD (請?jiān)趶?fù)制粘貼到瀏覽器的地址欄中訪問)

2. 使用文檔
　　為了記錄開發(fā)進(jìn)度和形成規(guī)范，項(xiàng)目開發(fā)的使用說明和修改會記錄在石墨文檔https://shimo.im/sheet/K8QPjP...

3. 版本控制
　　使用git作為版本控制，項(xiàng)目的源碼托管在碼云上https://gitee.com/g2333/data_...
　　既方便協(xié)同開發(fā)，也方便代碼版本控制

1. 項(xiàng)目更新
　　修改后的源碼在測試成功后，修改package.json中的版本號，將代碼推送到碼云上，然后通過npm發(fā)布新版本

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