总结JavaScript不同模块化规范的差别

本篇文章主要介绍CommonJs，AMD，CMD，ES Modules的基本使用与区别

1. CommonJs

   也就是Nodejs上使用的模块化规范，模块加载是同步加载，服务端能够直接运行，浏览器端要运行需要打包工具打包以后才能运行（比如browserify）

   基本语法:

   暴露模块：

   复制代码module.exports = value; exports.xxx = value;

   1
   2
   3
   module.exports = value;
   exports.xxx = value;
   

   引入模块：

   复制代码require(xxx)

   1
   2
   require(xxx)
   

2. AMD

   专门针对浏览器端的，模块加载是异步的，依赖于Require.js

   基本语法：

   暴露模块

   复制代码//定义没有依赖的模块 define(function(){ return 模块 }) //定义有依赖的模块 define['module1', 'module2'], function(m1, m2){ function() showMsg(){ console.log("我是模块", m1.xxx) } return {showMsg}; }

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   //定义没有依赖的模块
   define(function(){
   return 模块
   })
   //定义有依赖的模块
   define['module1', 'module2'], function(m1, m2){
   function() showMsg(){
   console.log("我是模块", m1.xxx)
   }
   return {showMsg};
   }
   

   引入模块

   main.js

   复制代码(function(){ //引入之前记得配置js文件的路径 requirejs.config({ baseUrl: 'js/module',//公共路径，也就是下面paths中的路径前面都得加上js/ paths: { module1: 'module1', module2: 'module2' } }) require(['module1', 'module2'], function(m1, m2){ //使用m1, m2 m1.xxx; m2.yyy; }) })();

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   (function(){
   //引入之前记得配置js文件的路径
   requirejs.config({
   baseUrl: 'js/module',//公共路径，也就是下面paths中的路径前面都得加上js/
   paths: {
   module1: 'module1',
   module2: 'module2'
   }
   })
   require(['module1', 'module2'], function(m1, m2){
   //使用m1, m2
   m1.xxx;
   m2.yyy;
   })
   })();
   

   index.html中

   复制代码//date-main是你自己的文件，src是你下载下来的require.js的文件 <script data-main="js/main.js" src="js/require.js"></script>

   1
   2
   3
   //date-main是你自己的文件，src是你下载下来的require.js的文件
   <script data-main="js/main.js" src="js/require.js"></script>
   

3. CMD

   专门用于浏览器端，模块的加载是异步的

   模块使用时才会加载

   暴露模块

   复制代码define(function(require, exports, module){ exports.xxx = value module.exports = value }) //定义有依赖的模块 define(function(require, exports, module){ //引入依赖模块(同步) var module2 = require('./module2') //引入依赖模块(异步) require.asycn('./module3', function (m3) { }) //暴露模块 exports.xxx = value })

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   define(function(require, exports, module){
   exports.xxx = value
   module.exports = value
   })
   //定义有依赖的模块
   define(function(require, exports, module){
   //引入依赖模块(同步)
   var module2 = require('./module2')
   //引入依赖模块(异步)
   require.asycn('./module3', function (m3) {
   })
   //暴露模块
   exports.xxx = value
   })
   

   引入模块

   复制代码define(function (require) { var m1 = require('./module1') var m4 = require('./module4') m1.show() m4.show() })

   1
   2
   3
   4
   5
   6
   7
   define(function (require) {
   var m1 = require('./module1')
   var m4 = require('./module4')
   m1.show()
   m4.show()
   })
   

4. ES Modules

   依赖的模块需要编译打包处理(先使用Babel，将ES6编译为ES5，再使用browserify编译js，最终才能在浏览器上运行)

   学习过Vue的朋友应该很熟悉这种规范，因为Vue中使用的就是这种规范

   基本语法

   暴露模块:

   • 常规暴露

     • 分别暴露
     复制代码export function foo(){//export，不是exports .... } export function bar(){//export，不是exports .... }

     1
     2
     3
     4
     5
     6
     7
     export function foo(){//export，不是exports
     ....
     }
     export function bar(){//export，不是exports
     ....
     }
     

     • 统一暴露
     复制代码function foo(){ ... } function bar(){ ... } export { foo, bar }

     1
     2
     3
     4
     5
     6
     7
     8
     function foo(){
     ...
     }
     function bar(){
     ...
     }
     export { foo, bar }
     

   • 默认暴露

     复制代码export default () => { ... };

     1
     2
     3
     4
     export default () => {
     ...
     };
     

   引入模块：

   复制代码import { foo, bar } from '路径';//引入常规暴露的模块 import obj from '路径';//引入默认暴露的模块 foo(); bar(); obj();

   1
   2
   3
   4
   5
   6
   import { foo, bar } from '路径';//引入常规暴露的模块
   import obj from '路径';//引入默认暴露的模块
   foo();
   bar();
   obj();
   

最后

以上就是风中香水最近收集整理的关于总结JavaScript不同模块化规范的差别的全部内容，更多相关总结JavaScript不同模块化规范内容请搜索靠谱客的其他文章。