uniapp函数复用

### 如何在UniApp中实现函数复用 在UniApp开发过程中，通过合理的设计模式和技术手段来实现函数复用是非常重要的。它不仅能够减少代码冗余，还能提升项目的可维护性和扩展性。以下是几种常见的最佳实践方法： #### 方法一：利用`common`目录封装公共工具类 可以通过创建一个专门用于存放公共工具类的目录（如`common`），将常用的逻辑和功能模块化处理。这种方式适用于那些需要频繁调用的基础验证或计算逻辑。 例如： ```javascript // common/StrUtils.js function checkEmail(email) { return /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(email); } function checkMobile(mobile) { return /^1[34578]\d{9}$/.test(mobile); } module.exports = { checkEmail, checkMobile }; ``` 在其他页面或者组件中引入并使用该工具类时，可以选择以下两种方式之一[^2]： - **方式一**：使用 `require()` 导入； - **方式二**：采用 ES6 的 `import` 语法导入； 具体示例如下所示： ```javascript // 使用 require() 方式 var StrUtils = require('../../common/StrUtils'); console.log(StrUtils.checkEmail('[email protected]')); // 或者使用 import 方式 import StrUtils from '@/common/StrUtils'; console.log(StrUtils.checkMobile('13800138000')); ``` #### 方法二：基于Vuex管理状态与业务逻辑分离 对于涉及复杂的状态管理和跨页面通信场景，则推荐借助 Vuex 来集中存储应用层面的数据以及提供相应的 getter 和 action 方法供各处调用[^2]。这样不仅可以保持单向数据流原则，还便于调试追踪问题所在位置。 配置步骤大致如下： 1. 安装 Vuex 插件； 2. 初始化 store 配置文件； 3. 编写 actions/mutations/getters 等相关内容； 4. 在 Vue 组件内部 commit mutation 或 dispatch action 进行动态更新。 简单例子展示如何设置全局计数器功能： ```javascript // store/index.js export default new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count += 1; } }, actions: { increase({commit}) { setTimeout(() => { commit('increment') }, 1000); } } }); ``` 然后可以在任意地方触发这个异步增加操作： ```javascript this.$store.dispatch('increase').then(() => { console.log(this.$store.state.count); }) ``` #### 方法三：插件机制注册全局方法 如果某些特定需求在整个项目范围内都需要访问到某个固定的接口服务或者其他第三方库实例的话，那么可以考虑将其作为插件的形式注入进去[^2]。比如网络请求拦截器、日志记录器等功能都可以如此设计。 新建 plugin 文件夹下的 axiosPlugin.js 文件内容大概像下面这样子： ```javascript // plugins/axiosPlugin.js const install = (Vue, options) => { const instance = Axios.create({...options}); // 添加响应拦截器 instance.interceptors.response.use(response => response.data); Object.defineProperty(Vue.prototype, '$http', {value:instance}); }; if(typeof window !== 'undefined' && window.Vue){ window.Vue.use(install,{baseURL:'/api'}); } export default install; ``` 最后记得要在 main.js 中加载此自定义插件即可生效： ```javascript import axiosPlugin from './plugins/axiosPlugin' Vue.use(axiosPlugin,{ baseURL:'https://some-domain.com/api', timeout:10000 }) ``` 现在每一个 vue component 内部都能够直接通过 this.$http 发起 ajax 请求啦！ --- ### 总结 以上三种策略各有优劣之处，在实际运用当中可以根据具体情况灵活选用合适的解决方案。无论是简单的字符串效验还是复杂的多端同步控制都能找到对应的优化路径。