方法封装

第一种

封装

// common/utils.js
export function showToast1(title) {
    uni.showToast1({
        title,
        icon: 'none',
        duration: 1500
    });
}

export function showToast2(title) {
    uni.showToast2({
        title,
        icon: 'none',
        duration: 1500
    });
}

使用

// 具名导入
import { showToast1, showToast2 } from '@/common/utils.js';

或者 

// 全部导入
import * as tools from '@/common/utils.js';

handleClickPage() {
  showToast1('敬请期待');
}

第二种

封装

const showToast = (title) => {
    uni.showToast({
        title,
        icon: 'none',
        duration: 1500
    });
};

export default {
    showToast
};

使用

import utils from '@/common/utils.js';

handleClickPage() {
  utils.showToast('敬请期待');
}

其他记录

封装

const showLoading = (title, successCallback, errorCallback) => {
    uni.showLoading({
        title,
        mask: true,
        success: successCallback, // 加载成功回调
        fail: errorCallback // 加载失败回调
    });
};

使用

import utils from '@/common/utils.js';

// 调用 showLoading 方法，并传入成功和失败的回调
utils.showLoading('加载中...', () => {
  // 加载成功的处理逻辑
  console.log('加载成功');
}, () => {
  // 加载失败的处理逻辑
  console.log('加载失败');
});

总结对比(来源于kimi)

这两种方式在实际开发中的主要区别在于模块化和代码的可维护性。下面我会详细解释每种方式的特点和适用场景，并给出哪种方式可能更好的建议。

第一种方式：具名导出

特点： - 每个函数都是独立的，可以单独导出和导入。 - 命名清晰，每个导出的函数都有明确的名字。 - 可以方便地重命名导出的函数，而不会影响到其他模块。 - 可以利用树摇（tree shaking）优化，减少最终打包体积。

适用场景： - 当你需要在多个地方使用多个不同的功能时。 - 当你想要明确地控制哪些函数被导出和导入时。

优点： - 代码更加模块化，每个函数都是一个独立的模块。 - 可以单独替换或更新某个函数，而不会影响到其他函数。

缺点： - 如果函数较多，可能会导致导出和导入的代码较多。

第二种方式：默认导出

特点： - 整个对象作为一个模块导出，所有方法都包含在这个对象中。 - 导入时不需要指定具体的函数名，直接通过对象访问。

适用场景： - 当你有一个工具类，其中包含多个相关的方法时。 - 当你想要减少导入语句的数量，使得代码更加简洁时。

优点： - 代码更加简洁，特别是当需要导入多个函数时。 - 可以方便地扩展对象，添加新的方法。

缺点： - 不支持树摇优化，因为整个对象都被导入了，即使只使用其中一部分。 - 如果对象很大，可能会增加最终打包体积。

哪种方式更好？

这取决于具体的使用场景和团队的偏好：

模块化和可维护性： 如果你重视模块化和代码的可维护性，第一种方式（具名导出）可能更好，因为它允许更细粒度的控制和优化。
简洁性和扩展性： 如果你更倾向于代码的简洁性和方便的扩展性，第二种方式（默认导出）可能更适合，尤其是在工具类或相关功能集合的场景下。
性能和优化： 如果你关注最终打包体积和性能优化，第一种方式（具名导出）更有利于利用树摇优化，减少不必要的代码。

总的来说，没有绝对的好与坏，选择哪种方式应该基于项目的具体需求、团队的偏好以及代码的可维护性等因素综合考虑。