如何将模块导入对象？JavaScript工具函数库组织最佳实践

核心思路 #

要实现lib-name.some-module.some-thing()这类点语法访问，本质是把各子模块挂载到一个全局根对象上。不用依赖ES模块的导入导出（原生import无法直接挂载到现有对象），直接用**IIFE（立即执行函数表达式）**封装模块，既避免全局作用域污染，又能构建层级对象结构。

目录结构与代码实现 #

保留你规划的目录结构：

lib-name
 - main.js
 - some-module
    - some-part-of-the-module.js
    - some-other-part-of-the-module.js

1. 子模块封装（以some-part-of-the-module.js为例） #

每个子模块用IIFE封装内部逻辑，然后手动挂载到全局根对象的对应层级：

// some-module/some-part-of-the-module.js
(function(global) {
  // 模块私有方法
  function someThing(arg) {
    console.log(arg);
    // 具体业务逻辑
  }

  // 逐层创建/获取层级对象，挂载方法
  global.libName = global.libName || {};
  global.libName.someModule = global.libName.someModule || {};
  global.libName.someModule.someThing = someThing;
})(window);

2. 主入口main.js #

主文件负责初始化全局根对象，也可添加全局配置或初始化逻辑：

// main.js
(function(global) {
  // 初始化根对象，防止重复创建
  global.libName = global.libName || {};
  
  // 可选：全局初始化方法
  global.libName.init = function(options) {
    // 全局配置逻辑，比如设置默认参数
  };
})(window);

3. 页面引入方式 #

在HTML中按先主后子的顺序引入脚本：

<script src="/lib-name/main.js"></script>
<script src="/lib-name/some-module/some-part-of-the-module.js"></script>
<script src="/lib-name/some-module/some-other-part-of-the-module.js"></script>

之后在页面中就能直接用点语法调用：

libName.someModule.someThing("This is a function argument!");

方案优势 #

• 纯原生实现，无需任何构建工具，直接在浏览器运行
• 用IIFE隔离模块内部逻辑，避免全局变量冲突，同时通过根对象统一暴露API，解决ODR问题
• 层级结构清晰，完全匹配你想要的点语法访问方式

可选优化：封装挂载工具 #

如果手动挂载层级太繁琐，可在main.js中添加通用挂载函数：

// main.js中新增挂载工具
(function(global) {
  global.libName = global.libName || {};
  
  // 接收路径字符串和要挂载的对象，自动创建层级
  global.libName.mount = function(path, obj) {
    const parts = path.split('.');
    let current = global.libName;
    for (let i = 0; i < parts.length - 1; i++) {
      current[parts[i]] = current[parts[i]] || {};
      current = current[parts[i]];
    }
    current[parts[parts.length - 1]] = obj;
  };
})(window);

子模块中即可简化挂载逻辑：

// some-module/some-part-of-the-module.js
(function(global) {
  function someThing(arg) {
    console.log(arg);
  }

  global.libName.mount('someModule.someThing', someThing);
})(window);

推荐同类轻量库 #

如果不想从零搭建，推荐几个无依赖、支持全局点语法访问的工具库：

• Lodash：大型工具库，UMD版本可通过全局_对象用点语法访问所有方法，也能按需引入单个模块
• date-fns：轻量日期处理库，UMD版本通过全局dateFns对象访问各类日期方法，体积小且无依赖

内容的提问来源于stack exchange，提问作者Willy Wonka