封装框架的实践

最新推荐文章于 2019-07-24 20:46:39 发布

weixin_34138139

最新推荐文章于 2019-07-24 20:46:39 发布

阅读量125

点赞数

文章标签：面试 json javascript ViewUI

原文链接：https://segmentfault.com/a/1190000017309840

版权

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