ES6-模块化

Posted 2020-10-04 toTo_l

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ES6-模块化相关的知识，希望对你有一定的参考价值。

ES6-模块化

　　在es6标准中，js原生支持modulele。这种将js代码分割成不同功能的小块进行模块化的概念是在一些三方规范中流行起来的，比如CommonJS、AMD和CMD。接下来我们看一下这几种规范。

一、模块化规范

1.1 CommonJs规范实例

　　详细请移步这里。

1 import ‘./demo‘;    //导入当前目录下的模块
2 import ‘mysql‘ ;    //导入模块目录中的模块
3 
4 export.exports = {}   //导出模块

　　NodeJS对其有更好的实现。

1.2 AMD规范实例

1、html代码

 1 index.html
 2 ---------------
 3 <!DOCTYPE html>
 4 <html>
 5 <head>
 6   <title></title>
 7   <!-- 引入require.js -->
 8   <script type="text/javascript" src="http://cdn.bootcss.com/require.js/2.3.3/require.js"></script>
10 </head>
11 <body>
12   <script type="text/javascript" src="main.js"></script>
13 </body>
14 </html>

　　2、js代码

myName.js
---------------
// 定义模块
define(‘myName‘,[],function () {
  return ‘My name is toTo_li.‘
})

yourName.js
---------------
// 定义模块
define(‘yourName‘,[],function () {
  return ‘Your name is boke.‘
})

main.js
---------------
// 调用模块
require([‘myName‘,‘yourName‘],function (myName,yourName) {
  console.log(myName)
  console.log(yourName)
})

AMD的规范的实现有RequireJS，了解更多请移步CommonJs

1.3 CMD规范实例

define(function(require, exports, module) {
  var $ = require(‘jquery‘);  // 导入模块
  var Spinning = require(‘./spinning‘);
  exports.doSomething = ...
  module.exports = ...  // 导出模块
})

二、ES6的模块化

　　ES6模块需要使用babel转码，这里简单解释一下什么是babel转码。

　　　　babel就是将‘ES6模块化语法’转化为‘CommonJS模块化语法’，其中的require exports等是Commonjs在具体实现中所提供的变量，了解过node的同学应该知道。

import ‘./test‘;  // 导入当前目录中的模块
import ‘jquery‘;  // 导入模块目录中的模块
export function test() {}  // 导出模块

　　ES6的模块化是将不同功能的代码分别写在不同的文件中，各模块只需导出公共接口部分，然后通过模块的导入的方式可以在其他地方使用。

 1 //point.js
 2 module "point"{
 3      export class Point{
 4          constructor(x,y){
 5               public x = x;
 6               public y = y;
 7          }  
 8      }      
 9 }
10 
11 //myapp.js
12 //声明引用的模块
13 module point from "/point.js";
14 
15 //这里可以看出，尽管声明了引用的模块，还是可以通过指定需要的部分进行导入
16 import Point from "point";
17 
18 var origin = new Point(10,5);
19 console.log(origin);

　　关于ES6模块的具体信息，可以查看阮一峰老师的模块化

以上是关于ES6-模块化的主要内容，如果未能解决你的问题，请参考以下文章

30秒就能看懂的JavaScript 代码片段

如何使用模块化代码片段中的LeakCanary检测内存泄漏？