import 和 require 是 JS 模块化编程使用的，模块化是一种将系统分离成独立功能部分的方法，一个模块是为完成一个功能的一段程序或子程序，"模块"是系统中功能单一且可替换的部分。模块化思想是从 Java 上衍生过来的，他将所需要的功能封装成一个类，哪里需要就在哪里调用，JS 中没有类的说法，但它引入了这种思想，在 JS中 用对象或构造函数来模拟类的封装实现模块化。
require 的基本语法
在导出的文件中使用 module.exports 对模块中的数据导出，内容类型可以是字符串、变量、对象、方法等不予限定，使用 require() 引入到需要的文件中即可。
在模块中，将所要导出的数据存放在 module 的 export 属性中，在经过 CommonJs/AMD 规范的处理，在需要的页面中使用 require 指定到该模块，即可导出模块中的 export 属性并执行赋值操作（值拷贝）。
- // module.js
- module.exports = {
- a: function() {
- console.log('exports from module');
- }
- }
- // sample.js
- var obj = require('./module.js');
- obj.a() // exports from module
当我们不需要导出模块中的全部数据时，使用大括号包含所需要的模块内容。
- // module.js
- function test(str) {
- console.log(str);
- }
- module.exports = {
- test
- }
- // sample.js
- let { test } = require('./module.js');
- test ('this is a test');
import 的基本语法
使用 import 导出的值与模块中的值始终保持一致，即引用拷贝，采用 ES6 中解构赋值的语法，import 配合 export 结合使用。
import 是 read-only 的，值是单向传递的。default 是 ES6 模块化所独有的关键字，export default {} 输出默认的接口对象，如果没有命名，则在 import 时可以自定义一个名称用来关联这个对象。
- // module.js
- export function test(args) {
- console.log(args);
- }
- // 定义一个默认导出文件, 一个文件只能定义一次
- export default {
- a: function() {
- console.log('export from module');
- }
- }
- export const name = 'gzc'
- // 使用_导出export default的内容
- import _, { test, name } from './a.js'
- test(`my name is ${name}`) // 模板字符串中使用${}加入变量
它们之间的区别
1、require 是赋值过程并且是运行时才执行，import 是解构过程并且是编译时执行。require 可以理解为一个全局方法，所以它甚至可以进行下面这样的骚操作，是一个方法就意味着可以在任何地方执行，而 import 必须写在文件的顶部。
- var a = require(a() + '/ab.js')
2、require 的性能相对于 import 稍低，因为 require 是在运行时才引入模块并且还赋值给某个变量，而 import 只需要依据 import 中的接口在编译时引入指定模块所以性能稍高。
3、在 commom.js 中 module.exports 之后 导出的值就不能再变化，但是在 es6 的 export 中是可以的。
- var a = 6
- export default {a}
- a = 7 // 在es6中的export可以
- var a = 6
- module.exports = a
- a = 7 // 在common.js中，这样是错误的
4、require/exports 方式的写法比较统一
- // require
- const module = require('module')
- // exports
- export.fs = fs
- module.exports = fs
5、import/export 方式的写法就相对丰富些
- // import
- import fs from 'fs';
- import { newFs as fs } from 'fs'; // ES6语法, 将fs重命名为newFs, 命名冲突时常用
- import { part } from fs;
- import fs, { part } from fs;
- // export
- export default fs;
- export const fs;
- export function part;
- export { part1, part2 };
- export * from 'fs';
时间是一个好东西，记录的是学习的证据
评论