自定义JS公共方法

在开发中,有时候会遇到订单返回多种状态,但是状态都是数字表示的情况:
例如:

订单状态: 1 为待付款、2 为待发货、3 为待收货、4 为待评价、5 为已完成、6 为已取消，未传该参数或0为全部

我们第一反应就是将其用枚举提取出来作为公共的参数, 可是 JS 竟然没有, 要是多个地方使用,每处都写一遍我估计会吐的.

这时我们可以使用自定义 JS 文件的方式,将状态值封装 在一个公共的方法中,方便我们的使用; 类似于定义一个全局的公共方法;

• 一次封装多个方法 (注意: js 文件中使用的是 export default { })

// utils/myModule.js
export default {
  hello() {
    return 'Hello from myModule!';
  },
  add(a, b) {
    return a + b;
  }
}

下面是调用

// 在某个页面或组件中
import myModule from '@/utils/myModule.js';
 
export default {
  // ...
  methods: {
    useMyModule() {
      console.log(myModule.hello()); // 输出: Hello from myModule!
      console.log(myModule.add(5, 3)); // 输出: 8
    }
  }
}

或者另外一种写法:

const apiUri = 'https://api.jisuapi.com';

const sayHi = function(opration){
        return opration
}

export default {
    apiUri,
    sayHi
}

下面调用:

// 在某个页面或组件中
import myModule123 from '@/utils/myModule.js';
 
export default {
  // ...
  methods: {
    useMyModule() {
        console.log(myModule123.apiUri);   // 打印: https://api.jisuapi.com
        console.log(myModule123.sayHi('我是派大星'));  // 打印:  我是派大星
    }
  }
}

使用过程中需要注意的地方:
1. 引用的 import中myModule是可以随意定义的;
2. 在 uniapp 页面的只用中, myModule的前面不能添加 this

• 定义一个专用的模块，用来组织和管理这些全局的变量.(注意: js 文件中使用的是 export + 变量/方法 )

// utils/myModule.js

// 常量
export const role = '我是派大星'
// 箭头方法传参
export const friends = (opration) => {
    return opration.name1 + opration.name2
}
// 普通方法传参
export function getRoleData() {
    return '我是海绵宝宝'
}

下面是调用

// 在某个页面或组件中
import { getRoleData,role, friends } from '@/src/commen/myModule.js'
 
export default {
  // ...
  methods: {
    useMyModule() {
        console.log(role);   // 打印: 我是派大星
        console.log(getRoleData());  //打印:  我是海绵宝宝
        console.log(friends({name1: '小奶狗', name2: '小花猫'})); // 打印: 小奶狗小花猫
    }
  }
}

注意 :
1. myModule.js中的这三个变量和方法是独立的, 各自使用了 export
2. 在引用的时候, { getRoleData,role, friends } 必须和myModule.js定义的方法名称保持一致.
3. 在 uniapp 页面的只用中, myModule的前面不能添加 this