共计 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 指令更新模块，即可使用最新版功能
