最近在嘗試着封裝一個框架,礙於種種緣由,先從簡單的入手吧。
基於vue和elementUI封裝的框架,集成 數據存儲localforage、字體圖標庫font-awesome、css拓展語言scss、網絡請求axios等模塊,爲了讓業務開發更專一於數據驅動。
項目源碼地址:https://gitee.com/g2333/data_...css
1. 環境
框架基於vue2.0開發,故開發環境也須要nodejs和vue-cli。前端
2. 拓展和維護
爲使框架自己易拓展和維護,項目採用vue-cli封裝,在開發和使用過程都不打包,保持程序的可讀性,同時也方便在引用該模塊時可簡單的修改配置文件和源碼。vue
3. 便捷使用
在一個全新的vue-cli初始化項目中,
安裝模塊(在vue項目路徑下npm i modulecomponents
),
引用模塊(在vue項目的main.js中添加import 'modulecomponents/index.js'
)
測試使用(好比使用框架暴露的方法dataTool.alert('測試成功')
)node
1. 依賴模塊
框架自己依賴有以下模塊:
elementUI 框架的主力,用於組件封裝和方法的調用、
localforage 數據存儲,用於存儲前端的大量數據、
font-awesome 字體圖標庫、
scss css拓展語言、
axios 網絡請求webpack
2. 設置項目入口
修改package.json文件,添加main字段,指向項目入口("main": "mc/index.js"
),修改private字段,設置爲開源("private": false
)ios
3. 項目初始化
爲了讓框架方便引用,故在初始化文件index.js(框架項目開發過程使用indexdsForDev.js),自動引入依賴和全局變量的掛載git
4. 文件提交
設置項目.gitignore文件忽略node_modules避免在協同開發時由於環境不一致致使的webpack報錯
設置項目.npmignore文件忽略發佈時非必要的文件,減小模塊的體積web
1. 組件
組件基於elementUI封裝,項目中封裝的組件爲避免命名衝突,都以mc-
爲前綴開頭。
計劃封裝的組件有以下:
表格mc-table
、
表單mc-form
、
樹列表mc-tree
、
對話框mc-dialog
、
上下文菜單mc-contentmenu
、
按鈕組mc-btns
、
流圖mc-flow
、
下拉選框mc-select
、
附件上傳mc-upload
ajax
//在界面上顯示一個表單 <mc-form :object="form"></mc-form> //表單對象,描述表單的結構和數據 form: new mc.Form({ structure: [{ label: '測試', name: 'test', }], data: { test: 'hello world', } })
除框架封裝的組件外,依舊支持使用elementUI組件vue-cli
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
指令更新模塊,便可使用最新版功能