封装框架的实践

14次阅读

共计 3378 个字符,预计需要花费 9 分钟才能阅读完成。

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

正文完
 0