ES6中import和CommonJS中require的区别

一、ES6中import和commonJS中require的区别:

  1. import是ES6标准中的模块化解决方案(因为浏览器支持情况不同,项目中本质是使用node中的babel将es6转码为es5再执行,import会被转码为require)。

    require是node中遵循CommonJS规范的模块化解决方案。

  2. ES6模块是编译时输出接口,CommonJS模块是运行时加载。

  3. ES6模块是动态引用,即导入和导出的值都指向同一个内存地址,所以导入的值会随着导出值变化。

CommonJs的模块是对象。导出时是指拷贝,就算导出的值变化了,导入的值也不会变化,如果想要更新值就要重新导入。

  1. import语句导入同一个模块如果加载多次只执行一次,require语句导入次数和实际执行次数相同。

  2. import必须用在当前模块的顶层,如果在局部作用域内,会报错,es6这样的设计可以提高编译器效率,但没法实现运行时加载。

    require可以用在代码的任何地方。

  3. 前者是关键词,后者不是

  4. require支持动态引入,也就是require(${path}/xx.js),import目前不支持,但是已有提案

  5. ES6模块之中,顶层的this关键字返回undefined,而不是指向window。也就是说,在模块顶层使用this关键字,是无意义的。利用顶层的this等于undefined这个语法点,可以侦测当前代码是否在 ES6 模块之中。const isNotModuleScript = this !== undefined。require的模块中this指向window,this === window.

二、import介绍:

静态的import 语句用于导入由另一个模块导出的绑定。无论是否声明了 strict mode ,导入的模块都运行在严格模式下。在浏览器中,import 语句只能在声明了 type="module" 的 script 的标签中使用。

三、import用法:

import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { foo , bar } from "module-name/path/to/specific/un-exported/file";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";

export 语句用于从模块中导出函数、对象或原始值。

// 导出单个特性
export let name1, name2, …, nameN; // also var, const
export let name1 = …, name2 = …, …, nameN; // also var, const
export function FunctionName(){...}
export class ClassName {...}

// 导出列表
export { name1, name2, …, nameN };

// 重命名导出
export { variable1 as name1, variable2 as name2, …, nameN };

// 解构导出并重命名
export const { name1, name2: bar } = o;

// 默认导出
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };

// Aggregating modules
export * from …; // does not set the default export
export * as name1 from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default } from …;

四、require介绍:

RequireJS是一个JavaScript文件和模块加载器,可视为模块管理工具。

五、require使用:

// index.html
     

// main.js
/**
 * RequireJS全局配置文件
 */
requirejs.config({
    //设置项目路径,项目会以baseUrl作为相对路径去查找模块文件
    baseUrl:"./js",
    //预加载JS文件的配置项,默认可不用添加.js后缀
    paths:{
        //RequireJS默认假定所有的依赖资源都是JS脚本,因此无需再module ID上再加上js后缀。
        jquery:"https://cdn.bootcss.com/require.js/2.3.6/require.min.js",
        boostrap: "bootstrap"
    }
});

// 引用配置好的模块
requirejs(['jquery', 'bootstrap'],function($, undefined){

});

// 引用自定义模块
require(['js/test2.js'], function(math) {
         console.log(math);
       });

// test2.js 自定义模块
define(function() {
    var add = (x, y) => {
      return x + y;
    };
    return {
      add: add
    }
  });// 如果有依赖define(['jquery'], function($) {return {}});// 自定义命名define('math/add', ['jquery'], function($) {return {add: XXX}});

你可能感兴趣的:(ES6中import和CommonJS中require的区别)