封装框架的实践

2023年1月17日 216次阅读 来源: 星空

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

    原文作者：星空
    原文地址: https://segmentfault.com/a/1190000017309840
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞