《前端之提交效率》关于减少代码量的方法

作者: 北极星丶超帅的 | 来源:发表于2019-08-13 15:23 被阅读0次

《前端之提交效率》关于减少代码量的方法
前端知识体系5.性能优化
记一个前端自动化测试解决方案探析
混合mixins和extends
关于Snippets和Bootstrap 3 Snippets插
小程序request封装
thinkphp6上传base64格式图片笔记！
ashx接收传递的json
防止表单重复提交
Swift探索（九）: 泛型

从入行到现在也有几年了，刚入门的时候总能感受到自己的技术在提升，到现在的每天写bug->改bug->写bug的循环，然后就想着怎么可以少写代码，过着佛系养生生活

1.重复写的方法，要么写成公共方法，要么使用混入mixins

公共方法可以放在一个文件内，然后在main.js引用，全局挂载它，例如下图

import * as utils from '@/utils/index'
Vue.prototype.$utils = utils

//使用方法 this.$utils.xxx

混入的话，我在pc端上用的多，因为后台管理基本上都是增删改查功能，在混入的文件写好这些方法，一些可能会改变就用变量，例如下面代码，有些删减，可根据自己的需求修改

/* 
 ** 混入，用途是复用 ,主要用于获取列表，编辑，修改，删除等方法 
 */
import http from '@/api/http'
import qs from 'qs'
import * as url from '@/api/urlConfig'

export const viewsMixin = {
  data() {
    return {
      // 设置属性
      mixinViewsOptions: {
        getDataListURL: '', // 数据列表接口，API地址
        deleteURL: '', // 删除接口，API地址
        detailURL: '', // 详情接口，API地址
        addURL: '', //新增接口，API地址
        updateURL: '', //修改接口，API地址

        exportURL: '', // 导出接口，API地址
        importExcelURl: '' //导入接口，API地址
      },
      dataList: [], // 数据列表

      dataForm: {}, // 查询条件
      addFrom: {}, //新增参数
      updateForm: {}, //修改参数
      detailForm: {}, //详情参数
      deleteForm: {}, //删除情参数
      importExceForm: {}, //导入参数

      page: 1, // 当前页码
      size: 10, // 每页数
      total: 0, // 总条数

      isLoading: false,
      isAULoading: false, // 新增或修改，loading状态
      dataListLoading: false, // 数据列表，loading状态
    }
  },
  methods: {
    // 初始搜索
    initGetdataList() {
      this.page = 1
      this.getDataList()
    },

    // 初始化新增或修改页面
    async initAddOrUpdate() {
    },

    // 重置筛选框
    resetHandler() {
      this.dataForm = {}
      this.getDataList()
    },

    /*-------------- ] * 获取数据列表功能 - dataList - start * [ --------------*/
    // 设置获取列表的参数
    setDataOptions() {
      let optons = {},
        paramsData = {}

      // 过滤掉空的
      for (let key in this.paramsData) {
        this.$utils.isEmpty(this.paramsData[key]) && (paramsData[key] = this.paramsData[key])
      }

      for (let key in this.dataForm) {
        this.$utils.isEmpty(this.dataForm[key]) && (paramsData[key] = this.dataForm[key])
      }

      optons = paramsData

      optons.page= this.page
      optons.size= this.size

      return optons
    },
    // 获取数据列表
    async getDataList() {
      if (!this.mixinViewsOptions.getDataListURL) {
        return console.warn('获取列表的功能还未开发！');
      }

      let optons = await this.setDataOptions()
      this.dataListApi(optons)
    },
    async dataListApi(optons) {
      try {
        this.dataListLoading = true
        const res = await http.get(this.mixinViewsOptions.getDataListURL, optons)
        this.setDataList(res.data)
        this.dataListLoading = false
      } catch (err) {
        this.dataListLoading = false
      }
    },
    // 设置列表
    setDataList(data) {
      this.dataList = data.list
      this.total = data.total
    },
    // 分页, 当前页
    pageCurrentChangeHandle(val) {
      this.page = val
      this.getDataList()
    },
    // 设置序号
    typeIndex(index) {
      return index + (this.page - 1) * 10 + 1;
    },
    /*-------------- ] * 获取数据列表功能 - dataList - end * [ --------------*/



    // 返回上一级
    goBack() {
      this.$router.go(-1)
    },

    // 取消
    cancelHandler() {
      this.goBack()
      // this.$router.push({path: this.mixinViewsOptions.datalistPath });
    },



    /*-------------- ] * 新增功能 - addFrom - start * [ --------------*/
    // 添加
    addHandle(type) {
      if (!this.mixinViewsOptions.addURL) {
        return this.$message.info('该功能还未开发！');
      }

      this.$refs.addFrom.validate((valid) => {
        if (valid) {
          this.addApi(type)
        } else {
          return false;
        }
      });
    },
    async addApi(type) {
      try {
        this.isAULoading = true
        await http.post(this.mixinViewsOptions.addURL, this.addFrom)
        this.$message.success('新增成功！');
        this.isAULoading = false
        this.cancelHandler() 
      } catch (err) {
        this.isAULoading = false
        this.$message.error(err)
      }
    },
    /*-------------- ] * 新增功能 - addFrom - end * [ --------------*/



    /*-------------- ] * 修改功能 - updateForm - start * [ --------------*/
    // 修改
    updateHandle(id) {
      if (!this.mixinViewsOptions.updateURL) {
        return this.$message.info('该功能还未开发！');
      }

      this.$refs.updateForm.validate((valid) => {
        if (valid) {
          this.updateApi(id)
        } else {
          return false;
        }
      });
    },
    async updateApi(id) {
      try {
        this.isAULoading = true
        await http.post(`${this.mixinViewsOptions.updateURL}/${id}`, this.updateForm)
        this.$message.success('修改成功！');
        this.isAULoading = false
        this.updateForm = {}
        this.cancelHandler()
      } catch (err) {
        this.isAULoading = false
        this.$message.error(err)
      }
    },
    /*-------------- ] * 修改功能 - updateForm - end * [ --------------*/


    /*-------------- ] * 详情功能 - detailForm - start * [ --------------*/
    // 通过接口  获取详情
    async datailHandle(options, type) {
      try {
        this.isLoading = true
        const res = await http.get(`${this.mixinViewsOptions.detailURL}/${id}`, options)
        this.setDetail(res.data)
        this.isLoading = false
      } catch (err) {
        this.$message.error(err)
      }
    },
    // 设置详情
    setDetail(data) {
      this.detailForm = data
    },
    /*-------------- ] * 详情功能 - detailForm - end * [ --------------*/



    /*-------------- ] * 删除功能 - start * [ --------------*/
    // 删除
    deleteHandle(row, type) {
      if (!this.mixinViewsOptions.deleteURL) {
        return this.$message.info('该功能还未开发！');
      }

      this.$confirm('确认删除数据?', '提示', {
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        this.deleteApi(row, type)
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
    async deleteApi(row, type) {
      try {
        await http.delete(`${this.mixinViewsOptions.deleteURL}/${id}`, row)
        this.$message.success('删除成功！');
        this.getDataList()
      } catch (err) {
        this.$message.error(err)
      }
    },
    /*-------------- ] * 删除功能 - end * [ --------------*/



    /*-------------- ] * 其他功能 - start * [ --------------*/
    // 导出
    exportHandler() {
      if (!this.mixinViewsOptions.exportURL) {
        return this.$message.info('该功能还未开发！');
      }

      let params = qs.stringify(this.dataForm)
      window.location.href = `${url.apiURL}${this.mixinViewsOptions.exportURL}?${params}`
    }
    /*-------------- ] * 其他功能 - end * [ --------------*/
  }
}

2.多次引入的方法全局引入挂载

例如公共方法之类的，看上面

3.自动引入或注册

有时候每次新建一个文件就要引入或注册，这时候就可根据自己的需求节省工作量，我常用在的地方是，自动注册的公共组件和自动引入vuex模块，代码如下：

自动注册组件

//global.js
import Vue from 'vue'

/** ***     自动注册组件 不需要再important     *** **/
const requireComponent = require.context(
  '.', true, /\.vue$/
  // 找到components文件夹下以.vue命名的文件
)
requireComponent.keys().forEach(fileName => {
  const componetConfig = requireComponent(fileName)
  let a = fileName.lastIndexOf('/')
  fileName = '.' + fileName.slice(a)

  const componetName = fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')

  // console.log('自动注册组件', componetName)
  Vue.component(componetName, componetConfig.default || componetConfig)
})

然后在main.js引入

//main.js
import '@/components/global.js' // 全局的组件注册

自动引入子模块

//store/index.js

// 自动引入子模块
const modulesFiles = require.context('./modules', false, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  let name = moduleName.substring(0, moduleName.lastIndexOf('-')); //去掉-store，我命名规律是admin-store.js, 不是的可以去掉这行
  const value = modulesFiles(modulePath)
  modules[name] = value.default

  return modules
}, {})

除此之外，像管理后台菜单是后端返回的话，我也会写方法取菜单自动生成路由，提醒下，自动生成的路由，保存完了，刷新页面，需要再重新赋值component

4.自定义指令

有时候很多地方要限制，或者用到这时候就需要自定义指令上场了，例如：

/* 
 ** 自定义指令
 */

import Vue from 'vue'
import * as storage from '@/utils/storage'

/*==================|-- * 只能输入正整数指令 * start --|==================*/
// 使用方法： v-enter-number
Vue.directive('enterNumber', {
  inserted: function (el) {
    el.addEventListener("keypress", function (e) {
      e = e || window.event;
      let charcode = typeof e.charCode == 'number' ? e.charCode : e.keyCode;
      let re = /\d/;
      if (!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey) {
        if (e.preventDefault) {
          e.preventDefault();
        } else {
          e.returnValue = false;
        }
      }
    });

    //解决中文输入法下能输入中文的问题
    let legalContent, //开启输入法之前的输入内容
      LOCK = false; //是否开启中文输入法
    el.addEventListener('compositionstart', (e) => {
      legalContent = e.target.value; //保存中文输入法之前的内容
      LOCK = true; //加上锁
    }, false);

    el.addEventListener('compositionend', (e) => {
      e.target.value = legalContent;
      LOCK = false; // 解锁
    }, false);


    el.addEventListener('input', (e) => {
      if (!LOCK) {
        e.target.value = e.target.value.replace(/\D/, '');
      }
    }, false);
  }
});
/*==================|-- * 只能输入正整数指令 * end --|==================*/


/*==================|-- * 只能输入正数(包含小数)指令 * start --|==================*/
// 使用方法： v-enter-number-point
Vue.directive('enterNumberPoint', {
  inserted: function (el) {
    el.addEventListener("keypress", function (e) {
      e = e || window.event;
      let charcode = typeof e.charCode == 'number' ? e.charCode : e.keyCode;
      let re = /\d/;
      if (charcode == 46) {
        if (el.value && el.value.includes('.')) {
          e.preventDefault();
        }
        return;
      } else if (!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey) {
        if (e.preventDefault) {
          e.preventDefault();
        } else {
          e.returnValue = false;
        }
      }
    });

    let legalContent, //开启输入法之前的输入内容
      LOCK = false; //是否开启中文输入法
    el.addEventListener('compositionstart', (e) => {
      legalContent = e.target.value; //保存中文输入法之前的内容
      LOCK = true; //加上锁
    }, false);

    el.addEventListener('compositionend', (e) => {
      e.target.value = legalContent;
      LOCK = false; // 解锁
    }, false);


    el.addEventListener('input', (e) => {
      if (!LOCK) {
        e.target.value = e.target.value.replace(/^\d[\.]/g, '');
      }
    }, false);
  }
});
/*==================|-- * 只能输入正数(包含小数)指令 * end --|==================*/


/*==================|-- * 后台管理按钮权限指令 * start --|==================*/
// 使用方法： v-has="`/table/Table_Update`"
Vue.directive('has', {
  bind: function (el, binding) {
    if (!binding.value) {
      return el.style.display = 'none';
    }
    if (!Vue.prototype.$_has(binding.value)) {
      el.style.display = 'none';
    }
  }
});
//权限检查方法
Vue.prototype.$_has = function (value) {
  let isExist = false;
  let perms = storage.get('perms') || []
  if (perms === undefined || perms === null || !perms) {
    return false;
  }

  for (let item of perms) {
    if (item && item.indexOf(value) > -1) {
      isExist = true;
      break;
    }
  }
  // console.log('权限', perms)
  return isExist;
};
/*==================|-- * 权限指令 * end --|==================*/

暂时就想到这么多，后期有就再补充

《前端之提交效率》关于减少代码量的方法
从入行到现在也有几年了，刚入门的时候总能感受到自己的技术在提升，到现在的每天写bug->改bug->写bug的循环...
前端知识体系5.性能优化
1.前端性能优化思路：建立完善的开发规范，提高代码的渲染效率及可维护性。压缩代码，合并代码，减少文件体积减少...
记一个前端自动化测试解决方案探析
前端测试一直是前端项目开发过程中及其重要的一个环节，高效的测试方法可以减少我们进行代码自测的时间，提高开发效率，如...
混合mixins和extends
mixins（混入）用途：减少源代码的污染：已经写好构造器后，需要增加方法或者临时使用的方法减少代码量，实现代...
关于Snippets和Bootstrap 3 Snippets插
Snippets Snippets就是代码片段，是前端开发中节省时间、提高效率、减少出错的好东西。前端开发中，最容...
小程序request封装
最近做了两个小程序，业务相对比较简单，关于公益方面的，收获颇多，其中感觉在开发中明显提升开发效率以及减少代码量的就...
thinkphp6上传base64格式图片笔记！
前端代码服务端处理代码：提交的数据：
ashx接收传递的json
前端代码后台ashx代码: C#提交json post请求代码：
防止表单重复提交
一、前端控制（页面控制）从前端控制主要方法就是点击提交后将提交按钮置灰，js中的提交方法不再响应提交事件二、后...
Swift探索（九）: 泛型
一: 泛型 1.1 什么是泛型泛型可以将类型参数化，提高代码复用效率，减少代码量。 1.2 泛型解决的问题下面...