最近在嘗試著封裝一個框架，礙于種種原因，先從簡單的入手吧。
基于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指令更新模塊，即可使用最新版功能

總結

以上是生活随笔為你收集整理的封装框架的实践的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。