一文搞懂JS模块、模块格式、模块加载器和模块打包器(中)

简介: 接下来我们就来一起学习下js模块、模块化解决方案、模块加载器和模块打包器的区别。 本文的主要意图是帮大家快速理解现代前端JS开发的概念,并不会深入去探讨每种工具和模式。

相反,我们使用模块的构造函数来实例化一个模块:


var module = new Module();


访问模块的公共 API:


module.sayHello();
// => Hello


这种模式的好处与 IIFE 相同,不过同样它也不能给开发者提供依赖管理的机制。


随着JS的发展,衍生了很多种模块定义语法,每种语法都有各自的优点和缺点。我们称之为模块格式。


模块格式


模块格式是我们用来定义一个模块的语法。


ES6出现之前,JS没有提供官方的模块定义语法。因此,聪明的开发者们提出了多种定义模块的方式。


一些广为使用的模块格式有:


  • Asynchronous Module Definition(AMD)


  • CommonJS


  • Universal Module Definition(UMD)


  • System.register


  • ES6 Module


下面我们快速过一下每种模块定义的方式。


AMD


AMD模块运行在浏览器环境下,它使用define函数来定义模块。


define(['dep1', 'dep2'], function (dep1, dep2) {
    return function () {};
});


CommonJS


CommonJS模块运行在nodejs环境下,它使用 require 管理依赖,module.exports 来定义模块。


var dep1 = require('./dep1');  
var dep2 = require('./dep2');
module.exports = function(){  
  // ...
}


UMD


UMD模块可以同时运行在浏览器和Nodejs环境下。


(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
      define(['b'], factory);
  } else if (typeof module === 'object' && module.exports) {
    module.exports = factory(require('b'));
  } else {
    root.returnExports = factory(root.b);
  }
}(this, function (b) {
  return {};
}));


System.register


System.register 模块的设计意图是在ES5中支持ES6 模块语法:


import { p as q } from './dep';
var s = 'local';
export function func() {  
  return q;
}
export class C {  
}


ES6 module


从ES6开始,js提供了原生的模块机制。它使用export向外暴露API:


// lib.js
// 对外导出sayHello
export function sayHello(){  
  console.log('Hello');
}
// 不对外导出
function somePrivateFunction(){  
  // ...
}


使用import导入另一个模块中的API:


import { sayHello } from './lib';
sayHello();


为导入的API使用别名:


import { sayHello as say } from './lib';
say();  
// => Hello


导入整个模块:


import * as lib from './lib';
lib.sayHello();  
// => Hello


模块中定义默认导出项:


// lib.js
// 导出默认函数
export default function sayHello(){  
  console.log('Hello');
}
// 导出非默认函数
export function sayGoodbye(){  
  console.log('Goodbye');
}


相关文章
|
3月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
797 1
|
4月前
|
缓存 JavaScript 前端开发
高效打造跨平台桌面应用:Electron加载服务器端JS
【9月更文挑战第17天】Electron 是一个基于 Chromium 和 Node.js 的开源框架,允许使用 HTML、CSS 和 JavaScript 构建跨平台桌面应用。加载服务器端 JS 可增强应用灵活性,实现代码复用、动态更新及实时通信。通过 HTTP 请求、WebSocket 或文件系统可实现加载,但需注意安全性、性能和兼容性问题。开发者应根据需求选择合适方法并谨慎实施。
183 3
|
2月前
|
JavaScript 前端开发
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
|
2月前
|
算法 开发者
Moment.js库是如何处理不同浏览器的时间戳格式差异的?
总的来说,Moment.js 通过一系列的技术手段和策略,有效地处理了不同浏览器的时间戳格式差异,为开发者提供了一个稳定、可靠且易于使用的时间处理工具。
50 1
|
2月前
|
缓存 前端开发 JavaScript
JavaScript加载优化
JavaScript加载优化
|
2月前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
优化CSS和JavaScript加载
|
2月前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能;Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。
|
3月前
|
JavaScript 中间件 Shell
Node.js JXcore 打包
10月更文挑战第8天
41 1
|
3月前
|
缓存 JSON JavaScript
Node.js模块系统
10月更文挑战第4天
52 2
|
4月前
|
XML JSON JavaScript
js的json格式
js的json格式