在小程序开发中，随着业务逻辑的不断增长，单个页面的 JS 文件很容易变得臃肿难以维护。 可以使用官方提供的组件间代码共享方案 behaviors 来解决这一问题， 但将页面改为 Compose 会导致灵活性受限，无法使用页面生命周期。则可以选择拆分页面逻辑实现模块化开发，使用分离和组合的方式来提升代码的可维护性和复用性。

1. 传统开发模式的痛点

1. 代码臃肿：所有逻辑集中在一个文件
2. 耦合度过高：功能模块相互依赖
3. 维护困难：多人协作容易冲突

例如，一个页面使用了 swiper 实现了三个功能：搜索、翻译、聊天。传统开发模式需要将三个业务逻辑写在一个 js 文件里，非常臃肿。

// pages/index/index.js
Page({
  data: {
    // 搜索模块数据
    searchKeyword: '',
    searchHistory: [],
    // 翻译模块数据
    translateText: '',
    languagePairs: ['zh-en', 'en-zh'],
    // 聊天模块数据
    messages: [],
    currentChatId: null
  },
  
  // 搜索模块方法
  handleSearchInput() {},
  clearSearchHistory() {},
  
  // 翻译模块方法
  switchLanguage() {},
  copyTranslation() {},
  
  // 聊天模块方法
  sendMessage() {},
  deleteMessage() {},
  
  onLoad() {
    // 初始化搜索模块
    // 初始化翻译模块
    // 初始化聊天模块
  }
})

2. 模块化拆分方案

2.1 核心思想

• 单一职责原则：每个模块专注一个功能
• 高内聚低耦合：模块内部自包含
• 生命周期分治：按需组合生命周期

2.2 文件结构示例

index

searchToolBehavior.js

translateToolBehavior.js

chatToolBehavior.js

index.js

index.wxml

index.wxss

3. 行为模块实现

// searchToolBehavior.js
export const searchToolBehavior = {
  data: {
    searchKeyword: '',
    searchResults: []
  },
  
  methods: {
    handleSearch() {
      // 搜索逻辑
    },
    clearSearch() {
      this.setData({ searchKeyword: '' })
    }
  },

  onLoad() {
    console.log('Search module loaded')
  }
}

4. 主页面组合

4.1 模块引入与合并

import { searchToolBehavior } from './behaviors/searchToolBehavior'
import { translateToolBehavior } from './behaviors/translateToolBehavior'
import { chatToolBehavior } from './behaviors/chatToolBehavior'

Page({
  // 合并生命周期
  onLoad() {
    searchToolBehavior.onLoad?.call(this)
    chatToolBehavior.onLoad?.call(this)
  },
  onShow() {
    translateToolBehavior.onShow?.call(this)
  },

  // 数据聚合
  data: {
    currentIndex: 0,
    ...searchToolBehavior.data,
    ...translateToolBehavior.data,
    ...chatToolBehavior.data
  },

  // 方法合并
  ...searchToolBehavior.methods,
  ...translateToolBehavior.methods,
  ...chatToolBehavior.methods,

  // 页面自有方法
  switchTab(e) {
    // 切换逻辑
  }
})

4.2 组合关键点

1. 生命周期管理：手动调用各模块生命周期
2. 数据合并：使用展开运算符聚合数据
3. 方法合并：注意避免命名冲突
4. 上下文绑定：使用call保持正确this指向

通过模块化拆分的方式组织小程序页面逻辑，可以有效提升代码质量和开发效率。与 behaviors 各有优缺点，需要根据实际开发场景选择解决方案。