uniapp怎么使用公共的js

在uniapp中使用公共的JS文件，主要通过引入公共JS文件、模块化管理和工具函数等方式来实现。 首先，你需要创建一个公共的JS文件，然后在需要使用的页面或组件中引入它。接下来，我们详细说明如何操作。

一、创建公共JS文件

在项目的根目录下创建一个 utils 文件夹，然后在 utils 文件夹中创建一个 common.js 文件，这个文件将包含所有的公共函数。

// utils/common.js
// 示例公共函数
export function formatDate(date) {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  return `${year}-${month}-${day}`;
}
export function randomNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

二、在页面或组件中引入公共JS文件

在需要使用公共函数的页面或组件中，通过 import 语句引入 common.js 文件。

// pages/index/index.vue
<script>
import { formatDate, randomNumber } from '@/utils/common.js';
export default {
  data() {
    return {
      date: new Date(),
      randomNum: 0
    };
  },
  methods: {
    updateDate() {
      this.formattedDate = formatDate(this.date);
    },
    generateRandom() {
      this.randomNum = randomNumber(1, 100);
    }
  },
  mounted() {
    this.updateDate();
    this.generateRandom();
  }
};
</script>

三、模块化管理

为方便维护和提高代码复用性，建议将公共函数按照功能模块进行管理。例如，将日期处理函数放在 date.js 文件中，将随机数生成函数放在 random.js 文件中。

// utils/date.js
export function formatDate(date) {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  return `${year}-${month}-${day}`;
}
// utils/random.js
export function randomNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

然后在页面或组件中按需引入这些模块化的公共函数。

// pages/index/index.vue
<script>
import { formatDate } from '@/utils/date.js';
import { randomNumber } from '@/utils/random.js';
export default {
  data() {
    return {
      date: new Date(),
      randomNum: 0
    };
  },
  methods: {
    updateDate() {
      this.formattedDate = formatDate(this.date);
    },
    generateRandom() {
      this.randomNum = randomNumber(1, 100);
    }
  },
  mounted() {
    this.updateDate();
    this.generateRandom();
  }
};
</script>

四、工具函数

对于一些常用的工具函数，可以将它们集中放在一个文件中，例如 utils/tools.js，这样可以方便统一管理。

// utils/tools.js
export function debounce(func, wait) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
}
export function throttle(func, limit) {
  let inThrottle;
  return function(...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

五、引入第三方库

有时，项目需要使用一些第三方库来简化开发。可以通过 npm 安装第三方库，然后在需要的地方引入并使用。

npm install lodash

// utils/common.js
import _ from 'lodash';
export function cloneDeep(obj) {
  return _.cloneDeep(obj);
}

六、使用项目管理系统

在项目开发和团队协作中，推荐使用项目管理系统如研发项目管理系统PingCode和通用项目协作软件Worktile来提高效率和管理代码。

七、总结

在uniapp中使用公共的JS文件，可以通过创建公共JS文件、模块化管理、使用工具函数和引入第三方库等方式实现。这样不仅可以提高代码的复用性，还能使项目结构更加清晰。通过合理使用这些方法，可以大大提升开发效率和代码质量。