vue 常用方法封装

// 验证手机号是否合格
export function isPhone(phoneStr) {
   let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
   if (!myreg.test(phoneStr)) {
      return false;
   } else {
      return true;
   }
}

// 验证身份证号是否合格
export function isIdCard(idCardStr) {
   let idcardReg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
   if (idcardReg.test(idCardStr)) {
      return true
   } else {
      return false
   }
}

//  验证车牌号是否合格
export function isVehicleNumber(vehicleNumber) {
   let xreg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/;
   let creg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/;
   if (vehicleNumber.length == 7) {
      return creg.test(vehicleNumber);
   } else if (vehicleNumber.length == 8) {
      return xreg.test(vehicleNumber);
   } else {
      return false;
   }
}

// 验证字符串是否为空(也不能为纯空格)
export function isEmptyString(string) {
   if (string == undefined ||
      typeof string == "undefined" ||
      !string ||
      string == null ||
      string == '' ||
      /^\s+$/gi.test(string)) {
      return true;
   } else {
      return false;
   }
}

// 生日转为年龄( 精确到月份)
export function birsdayToAge(birsday) {
   let aDate = new Date();
   let thisYear = aDate.getFullYear();
   let bDate = new Date(birsday);
   let brith = bDate.getFullYear();
   let age = thisYear - brith;
   if (aDate.getMonth() == bDate.getMonth()) {
      if (aDate.getDate() < bDate.getDate()) {
         age = age - 1;
      }
   } else {
      if (aDate.getMonth() < bDate.getMonth()) {
         age = age - 1;
      }
   }
   return age
}

// 去除参数空数据(用于向后台传递参数的时候)
export function filterEmptyData(obj) {
   for (let prop in obj) {
      obj[prop] === '' ? delete obj[prop] : obj[prop]
   }
   return obj;
}

//判断数据是 null 和 undefined 的情况
export function getType(val) {
   if (val == null) {
      return val + "";
   }
   return typeof (val) === "object" ?
      Object.prototype.toString.call(val).slice(8, -1).toLowerCase() :
      typeof (val);
}

/**
 * @desc  函数防抖,用于多次触发,只执行 规定时间后再执行有且只有一次触发 的情况。便于优化性能
 * @param {function} func - 需要使用函数防抖的被执行的函数。必传
 * @param {Number} wait - 多少毫秒之内触发,只执行第一次,默认1000ms。可以不传
 */
export function debounce(func, wait) {
   let timeout = null
   wait = wait || 1000
   return function () {
      let context = this
      let args = arguments
      if (timeout) clearTimeout(timeout)
      let callNow = !timeout
      timeout = setTimeout(() => {
         timeout = null
      }, wait)
      if (callNow) func.apply(context, args)
   }
}

/**
 * 节流函数, 用于将多次执行变为每隔一段时间执行
 * @param fn 事件触发的操作
 * @param delay 间隔多少毫秒需要触发一次事件
 */
export function throttle2(fn, delay) {
   let timer = null;
   return function () {
      let context = this;
      let args = arguments;
      if (!timer) {
         timer = setTimeout(function () {
            fn.apply(context, args);
            clearTimeout(timer);
         }, delay);
      }
   };
}

// 时间戳转化成日期格式
export function timesSeconds(timestamp) {
   if (!timestamp) {
      return;
   }
   var date = new Date(timestamp); //时间戳为10位需*1000,时间戳为13位的话不需乘1000
   const Y = date.getFullYear() + "-";
   const M =
      (date.getMonth() + 1 < 10 ?
         "0" + (date.getMonth() + 1) :
         date.getMonth() + 1) + "-";
   const D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
   var h = null;
   var m = null;
   var s = null;
   if (date.getHours()) {
      h = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
   } else {
      h = "00";
   }
   if (date.getMinutes()) {
      m =
         date.getMinutes() < 10 ?
         ":" + "0" + date.getMinutes() :
         ":" + date.getMinutes();
   } else {
      m = ":00";
   }
   if (date.getSeconds()) {
      s =
         date.getSeconds() < 10 ?
         ":" + "0" + date.getSeconds() :
         ":" + date.getSeconds();
   } else {
      s = ":00";
   }
   return Y + M + D + "\xa0\xa0\xa0" + h + m + s;
}

// 数组扁平化
export function flatten(arr) {
   return arr.reduce((result, item) => {
      return result.concat(Array.isArray(item) ? flatten(item) : item)
   }, [])
}
### 封装常用方法的最佳实践 在 Vue 2 中封装常用方法可以提高代码的重用性和维护性。通过将重复使用的功能模块化,可以在多个组件之间共享这些工具函数。 #### 创建通用工具库文件 为了便于管理和导入,建议创建一个独立的 JavaScript 文件来保存所有的公用方法。通常命名为 `utils.js` 或者按照功能分类命名,比如 `downloadUtils.js`[^3]。 ```javascript // utils/downloadUtils.js export function downloadLocalFile(file, fileName) { const a = document.createElement('a'); const prefixUrl = process.env.NODE_ENV === 'production' ? '/test/' : '/'; a.href = `${prefixUrl}static/downloadFile/${file}`; a.download = fileName; a.click(); document.body.removeChild(a); } ``` 此段代码展示了如何构建一个简单的文件下载辅助函数,它可以根据环境变量动态调整基础路径,并允许指定要下载的具体文件及其名称。 #### 使用 Vuex Store 和持久化插件 对于状态管理方面,在 Vue 应用程序中推荐使用 Vuex 来集中管理应用的状态逻辑。当涉及到需要跨页面保留的数据时,则可以通过引入第三方库如 `vuex-persistedstate` 来实现数据的本地缓存[^1]。 ```bash npm install store2 vuex-persistedstate --save ``` 接着定义全局可用的状态仓库: ```javascript import Vue from 'vue'; import Vuex from 'vuex'; import createPersistedState from 'vuex-persistedstate'; Vue.use(Vuex); const store = new Vuex.Store({ state: {}, mutations: {}, actions: {}, plugins: [ createPersistedState() ] }); export default store; ``` 这段配置使得任何存储于 Vuex 内部的状态都可以被自动序列化并保存到浏览器会话或本地存储中去,从而实现了简单而有效的持久化机制。 #### Axios 请求拦截器 网络请求也是应用程序开发中的重要部分之一。利用 axios 可以为 HTTP 客户端添加自定义行为,例如统一处理错误响应、附加认证令牌等操作[^4]。 ```javascript // src/utils/request.js import axios from 'axios'; const service = axios.create({ baseURL: '/', timeout: 5000, }); service.interceptors.request.use( config => { // Do something before request is sent return config; }, error => Promise.reject(error), ); service.interceptors.response.use( response => response.data, error => Promise.reject(error), ); export default service; // api/index.js import service from './request'; export function fetchData(params) { return service.get('/api/data', { params }); } export function postData(data) { return service.post('/api/submit', data); } ``` 这里展示的是基于 axios 构建的服务层抽象以及两个具体的 API 方法——获取远程数据(`fetchData`)和提交表单(`postData`)。这样的设计有助于简化业务逻辑层面的操作,同时也方便后续对通信细节做出更改。 #### 组件内部调用 最后一步是在实际的 Vue 组件里边引用之前所准备好的各种实用工具和服务接口。这可以通过 ES6 导入语句轻松完成。 ```html <template> <!-- ... --> </template> <script> import { mapActions } from 'vuex'; import { fetchData, postData } from '@/apis'; import { downloadLocalFile } from '@/utils/downloadUtils'; export default { name: 'ExampleComponent', methods: { ...mapActions(['someAction']), async loadData() { try { const result = await fetchData({ queryParam: value }); console.log(result); } catch (err) { alert(err.message || '加载失败!'); } }, submitForm(formData) { postData(formData).then(() => this.$router.push('/success')); }, triggerDownload(filename) { downloadLocalFile(`${filename}.pdf`, filename); } } }; </script> ``` 以上就是关于如何在 Vue 2 中合理地组织和复用代码的一些指导原则和技术要点。遵循这些做法不仅能够提升项目的整体质量,还能让团队协作更加顺畅高效。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值