封装框架的实践

摘要：最近在尝试着封装一个框架，碍于种种原因，先从简单的入手吧。基于和封装的框架，集成数据存储字体图标库拓展语言网络请求等模块，为了让业务开发更专注于数据驱动。

最近在尝试着封装一个框架，碍于种种原因，先从简单的入手吧。
基于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

//在界面上显示一个表单

//表单对象，描述表单的结构和数据
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指令更新模块，即可使用最新版功能