小程序js 共用部分怎么提取

小程序JS共用部分提取的方法有：创建公共模块、使用组件、抽象节点、通过工具类函数、使用插件。 其中，创建公共模块 是最常见和实用的方法之一。

创建公共模块是指，将小程序中常用的函数、配置、常量等代码单独提取到一个公共文件中，然后在需要使用的页面或组件中通过 require 引入。这样不仅可以提高代码的复用性，还能降低维护成本。

一、创建公共模块

1、公共模块的基本概念

公共模块是将多个页面或组件中重复使用的代码片段提取出来，放在一个独立的文件中。这样做不仅可以减少代码冗余，还能使得代码结构更清晰，易于维护。

2、如何创建公共模块

创建公共模块非常简单，只需要将常用的函数、配置、常量等代码写在一个独立的文件中，然后在需要使用的页面或组件中引入即可。

例如，可以创建一个 utils.js 文件，并将常用的函数写在里面：

// utils.js
function formatTime(date) {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()
  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
function formatNumber(n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}
module.exports = {
  formatTime: formatTime
}

然后在需要使用的页面或组件中引入：

// page.js
const utils = require('../../utils/utils.js')
Page({
  onLoad: function() {
    const time = utils.formatTime(new Date())
    console.log(time)
  }
})

3、公共模块的优点

代码复用性高：将公共的代码提取出来，避免了代码的重复编写。
维护成本低：修改公共模块中的代码，只需要在一个地方进行修改，便可以影响到所有引用该模块的页面或组件。
代码结构清晰：将不同功能的代码分开存放，代码结构更加清晰，易于理解。

二、使用组件

1、组件的基本概念

组件是小程序中的一种自定义元素，可以包含模板（WXML）、样式（WXSS）、逻辑（JS）和配置（JSON）。通过组件，可以实现代码的复用和封装。

2、如何创建和使用组件

创建组件需要在项目的 components 文件夹下新建一个文件夹，然后在该文件夹中创建 .json、.wxml、.wxss 和 .js 文件。

例如，可以创建一个名为 my-component 的组件：

// components/my-component/my-component.json
{
  "component": true
}

<!-- components/my-component/my-component.wxml -->
<view class="container">
  <text>{{text}}</text>
</view>

/* components/my-component/my-component.wxss */
.container {
  padding: 20rpx;
}

// components/my-component/my-component.js
Component({
  properties: {
    text: {
      type: String,
      value: 'default text'
    }
  }
})

然后在需要使用该组件的页面中引入和使用：

// pages/index/index.json
{
  "usingComponents": {
    "my-component": "/components/my-component/my-component"
  }
}

<!-- pages/index/index.wxml -->
<view>
  <my-component text="Hello, World!"></my-component>
</view>

3、组件的优点

封装性强：组件将视图和逻辑封装在一起，使得代码更加模块化，易于维护。
复用性高：组件可以在多个页面中复用，减少了代码的重复编写。
便于管理：通过组件，可以将不同功能的代码分开管理，提高代码的可读性和可维护性。

三、抽象节点

1、抽象节点的基本概念

抽象节点是小程序的一种特殊组件，它不直接渲染到页面上，而是作为其他组件的基类，提供公共的逻辑和样式。

2、如何创建和使用抽象节点

创建抽象节点需要在项目的 components 文件夹下新建一个文件夹，然后在该文件夹中创建 .json、.wxml、.wxss 和 .js 文件。

例如，可以创建一个名为 abstract-component 的抽象节点：

// components/abstract-component/abstract-component.json { "component": true, "virtualHost": true }

<!-- components/abstract-component/abstract-component.wxml -->
<slot></slot>

/* components/abstract-component/abstract-component.wxss */
.container {
  padding: 20rpx;
}

// components/abstract-component/abstract-component.js
Component({
  properties: {
    text: {
      type: String,
      value: 'default text'
    }
  }
})

然后在其他组件中继承该抽象节点：

// components/my-component/my-component.json { "component": true, "usingComponents": { "abstract-component": "/components/abstract-component/abstract-component" } }

<!-- components/my-component/my-component.wxml -->
<abstract-component>
  <view class="container">
    <text>{{text}}</text>
  </view>
</abstract-component>

3、抽象节点的优点

代码复用性高：将公共的逻辑和样式提取到抽象节点中，可以在多个组件中复用。
维护成本低：修改抽象节点中的代码，只需要在一个地方进行修改，便可以影响到所有继承该抽象节点的组件。
代码结构清晰：将不同功能的代码分开存放，代码结构更加清晰，易于理解。

四、通过工具类函数

1、工具类函数的基本概念

工具类函数是指，将小程序中常用的函数提取到一个独立的文件中，然后在需要使用的页面或组件中引入。

2、如何创建和使用工具类函数

创建工具类函数非常简单，只需要将常用的函数写在一个独立的文件中，然后在需要使用的页面或组件中引入即可。

例如，可以创建一个 utils.js 文件，并将常用的函数写在里面：

// utils.js
function formatTime(date) {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()
  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
function formatNumber(n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}
module.exports = {
  formatTime: formatTime
}

然后在需要使用的页面或组件中引入：

// page.js
const utils = require('../../utils/utils.js')
Page({
  onLoad: function() {
    const time = utils.formatTime(new Date())
    console.log(time)
  }
})

3、工具类函数的优点

代码复用性高：将常用的函数提取到一个独立的文件中，避免了代码的重复编写。
维护成本低：修改工具类函数中的代码，只需要在一个地方进行修改，便可以影响到所有引用该函数的页面或组件。
代码结构清晰：将不同功能的代码分开存放，代码结构更加清晰，易于理解。

五、使用插件

1、插件的基本概念

插件是小程序中的一种功能模块，可以在多个小程序中复用。通过插件，可以实现代码的复用和封装，提高开发效率。

2、如何创建和使用插件

创建插件需要在微信公众平台上进行注册，然后在小程序项目中进行配置。

例如，可以创建一个名为 my-plugin 的插件：

// plugin.json
{
  "main": "index.js",
  "pages": {
    "index": {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "插件页面"
      }
    }
  }
}

// index.js
Component({
  methods: {
    formatTime: function(date) {
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      const hour = date.getHours()
      const minute = date.getMinutes()
      const second = date.getSeconds()
      return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
    }
  }
})
function formatNumber(n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}

然后在需要使用该插件的小程序中进行配置和引入：

// app.json
{
  "plugins": {
    "myPlugin": {
      "version": "1.0.0",
      "provider": "plugin-provider-id"
    }
  }
}

// page.js
const myPlugin = requirePlugin('myPlugin')
Page({
  onLoad: function() {
    const time = myPlugin.formatTime(new Date())
    console.log(time)
  }
})

3、插件的优点

复用性高：插件可以在多个小程序中复用，减少了代码的重复编写。
封装性强：插件将功能模块封装在一起，使得代码更加模块化，易于维护。
便于管理：通过插件，可以将不同功能的代码分开管理，提高代码的可读性和可维护性。

通过以上几种方法，可以有效地将小程序中共用的部分提取出来，提高代码的复用性和维护成本。同时，使用这些方法还可以使得代码结构更加清晰，易于理解和管理。对于项目团队管理，可以考虑使用研发项目管理系统PingCode 和 通用项目协作软件Worktile，它们能够帮助团队更好地协作和管理项目，提高工作效率。