ES6中import和commonJS中require的区别:
1. import是ES6标准中的模块化解决方案(因为浏览器支持情况不同,项目中本质是使用node中的babel将es6转码为es5再执行,import会被转码为require)。
require是node中遵循CommonJS规范的模块化解决方案。
2. ES6模块是编译时输出接口,CommonJS模块是运行时加载。
3. ES6模块是动态引用,即导入和导出的值都指向同一个内存地址,所以导入的值会随着导出值变化。
CommonJs的模块是对象。导出时是指拷贝,就算导出的值变化了,导入的值也不会变化,如果想要更新值就要重新导入。
3. import语句导入同一个模块如果加载多次只执行一次,require语句导入次数和实际执行次数相同。
4. import必须用在当前模块的顶层,如果在局部作用域内,会报错,es6这样的设计可以提高编译器效率,但没法实现运行时加载。
require可以用在代码的任何地方。
5. 前者是关键词,后者不是
6. require支持动态引入,也就是require(${path}/xx.js),import目前不支持,但是已有提案
7. 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
<script src="https://cdn.bootcss.com/require.js/2.3.6/require.min.js" data-main="js/main"></script>
// 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}});