封装框架的实践

最近在尝试着封装一个框架，碍于种种原因，先从简单的入手吧。
基于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指令更新模块，即可使用最新版功能

总结

以上是生活随笔为你收集整理的封装框架的实践的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。