小程序 utils 是什么？怎么用？

在小程序开发的世界里,utils 是一个非常重要的存在，那小程序 utils 究竟是什么呢？小程序 utils 是存放一些公共方法、工具函数的地方，它就像是一个百宝箱，里面装着各种可以重复使用的代码片段，能帮助开发者提高开发效率，避免重复编写相似的代码。

小程序 utils 的作用

代码复用

在小程序开发中,常常会有一些功能是多个页面或者组件都会用到的，比如日期格式化，不管是订单页面显示下单时间，还是个人中心显示注册时间，都需要对日期进行格式化处理，如果把日期格式化的代码写在每个用到的页面或组件里，那不仅代码量会增多，而且后期维护起来也很麻烦，但如果把日期格式化的代码放在 utils 里，做成一个公共方法，那各个页面和组件只需要引用这个方法就可以了，大大提高了代码的复用性。

逻辑封装

一些复杂的业务逻辑也可以封装在 utils 中，比如计算商品的折扣价格，涉及到原价、折扣率等多个因素的计算，把这个计算逻辑封装在 utils 里，其他地方调用这个方法，传入相应的参数就能得到结果，使代码结构更加清晰，也方便理解和维护。

提高开发效率

当项目越来越大,功能越来越多的时候，utils 的优势就更加明显了，开发者不用每次遇到类似的功能都重新编写代码，直接从 utils 中调用已经写好的方法，节省了开发时间，加快了项目进度。

小程序 utils 的常见用法

（一）创建 utils 文件

一般在小程序项目中,我们会在项目根目录下创建一个 utils 文件夹，然后在这个文件夹里创建 JavaScript 文件，utils.js，在这个文件里编写各种公共方法。

### （二）编写公共方法

字符串处理方法

比如编写一个去除字符串两端空格的方法：

```javascript function trim(str) { return str.replace(/(^\s*)|(\s*$)/g, ""); } ```

数组操作方法

编写一个数组去重的方法：

```javascript function uniqueArray(arr) { return Array.from(new Set(arr)); } ```

网络请求封装

小程序中经常会用到网络请求,我们可以把网络请求的代码封装在 utils 里。

```javascript function request(url, data, method = 'GET') { return new Promise((resolve, reject) => { wx.request({ url: url, data: data, method: method, success: function (res) { resolve(res.data); }, fail: function (err) { reject(err); } }); }); } ``` ### （三）引用 utils 方法

在页面或组件中引用 utils 方法也很简单，比如在一个页面的 js 文件中：

```javascript const utils = require('../../utils/utils.js'); Page({ onLoad: function () { let str = " 你好 "; let trimmedStr = utils.trim(str); console.log(trimmedStr); let arr = [1, 2, 2, 3]; let uniqueArr = utils.uniqueArray(arr); console.log(uniqueArr); utils.request('https://example.com/api', {}) .then(res => { console.log(res); }) .catch(err => { console.log(err); }); } }) ```

小程序 utils 的进阶用法

（一）模块化

随着项目的发展,utils 里的方法可能会越来越多，为了更好地管理，可以采用模块化的方式，比如把字符串处理的方法放在 stringUtils.js 文件里，数组操作的方法放在 arrayUtils.js 文件里，网络请求的方法放在 requestUtils.js 文件里等，然后在 utils.js 文件中进行统一导出：

```javascript const stringUtils = require('./stringUtils.js'); const arrayUtils = require('./arrayUtils.js'); const requestUtils = require('./requestUtils.js'); module.exports = { ...stringUtils, ...arrayUtils, ...requestUtils }; ``` ### （二）结合 ES6 语法

使用箭头函数

在编写 utils 方法时，可以使用箭头函数使代码更加简洁，比如上面的 trim 方法可以改写成：

```javascript const trim = (str) => str.replace(/(^\s*)|(\s*$)/g, ""); ```

解构赋值

在引用 utils 方法时，如果返回的是对象，也可以使用解构赋值。

```javascript const { trim, uniqueArray, request } = require('../../utils/utils.js'); ``` ### （三）添加注释

为了让其他开发者（包括自己日后）能够快速理解 utils 里方法的作用、参数和返回值等，添加注释是很有必要的。

```javascript /** * 去除字符串两端空格 * @param {string} str 要处理的字符串 * @returns {string} 处理后的字符串 */ const trim = (str) => str.replace(/(^\s*)|(\s*$)/g, ""); ```

小程序 utils 使用的注意事项

（一）命名规范

utils 里的方法名要清晰明了，能够准确表达方法的功能，比如日期格式化的方法可以命名为 formatDate，不要使用过于简单或者让人难以理解的命名。

### （二）参数校验

在编写 utils 方法时，要对传入的参数进行校验，比如上面的 trim 方法，如果传入的不是字符串，那方法可能就会出错，所以可以在方法开头进行参数类型的判断：

```javascript const trim = (str) => { if (typeof str!== 'string') { console.error('传入的参数不是字符串'); return ''; } return str.replace(/(^\s*)|(\s*$)/g, ""); }; ``` ### （三）版本兼容

小程序运行在不同的环境中,要考虑版本兼容问题，比如一些新的 ES6 语法在某些低版本的微信客户端可能不支持，这时候可能需要使用 Babel 等工具进行转换，或者采用兼容的写法。

小程序 utils 是小程序开发中不可或缺的一部分，它通过代码复用、逻辑封装等方式提高了开发效率，使代码结构更加清晰，开发者要熟练掌握 utils 的创建、编写、引用等常见用法，以及模块化、结合 ES6 语法等进阶用法，同时注意命名规范、参数校验和版本兼容等问题，才能充分发挥 utils 的作用，让小程序开发更加高效、便捷。

希望通过这篇文章,大家对小程序 utils 有了更深入的了解，在今后的小程序开发中能够更好地运用 utils，打造出更优秀的小程序。