JavaScript中require和import的区别详解

ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使用module.exports导出接口。

node编程中最重要的思想之一就是模块,而正是这个思想,让JavaScript的大规模工程成为可能。模块化编程在js界流行,也是基于此,随后在浏览器端,requirejs和seajs之类的工具包也出现了,可以说在对应规范下,require统治了ES6之前的所有模块化编程,即使现在,在ES6 module被完全实现之前,还是这样。

node的module遵循CommonJS规范,requirejs遵循AMD,seajs遵循CMD,虽各有不同,但总之还是希望保持较为统一的代码风格。

AMD 与 CMD 与 Common.js的区别有哪些?

前端模块规范有三种:CommonJs,AMD和CMD。
CommonJs用在服务器端,AMD和CMD用在浏览器环境
AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
AMD:提前执行(异步加载:依赖先执行)+延迟执行
CMD:延迟执行(运行到需加载,根据顺序执行)

一、CommonJS

CommonJS就是为JS的表现来制定规范,因为js没有模块的功能所以CommonJS应运而生,它希望js可以在任何地方运行,不只是浏览器中。

CommonJS定义的模块分为:{模块引用(require)} {模块定义(exports)} {模块标识(module)}

1、定义模块

根据CommonJS规范,一个单独的文件就是一个模块。每一个模块都是一个单独的作用域,也就是说,在该模块内部定义的变量,无法被其他模块读取,除非定义为global对象的属性

2、模块输出:

模块只有一个出口,module.exports对象,我们需要把模块希望输出的内容放入该对象

3、加载模块:

加载模块使用require方法,该方法读取一个文件并执行,返回文件内部的module.exports对象
require()用来引入外部模块;exports对象用于导出当前模块的方法或变量,唯一的导出口;module对象就代表模块本身。

4、模块module.exports与实例化方法

在nodejs中,提供了exports 和 require 两个对象,其中 exports 是模块公开的接口,require 用于从外部获取一个模块的接口,即所获取模块的 exports 对象。而在exports抛出的接口中,如果你希望你的模块就想为一个特别的对象类型,请使用module.exports;如果希望模块成为一个传统的模块实例,请使用exports.xx方法;module.exports才是真正的接口,exports只不过是它的一个辅助工具。最终返回给调用的是module.exports而不是exports。下面看代码;
首先来看module.exports,新建一个hello.js,代码如下: 

module.exports=function(name,age,money){
        this.name=name;
        this.age=age;
        this.money=money;
        this.say=function(){
                console.log('我的名字叫:'+this.name+',我今年'+this.age+'岁,月薪为:'+this.money+'元;')
        }
};

可以看到,module.exports被赋予了一个构造函数;再新建一个main.js,其中引入hello.js这个模块,把exports方法接受进来,main.js代码如下:

var Hello=require('./hello');
var hello=new Hello('jone','28','10000')
hello.say();

进入node环境,运行main.js,可以看到,已经打印出来:我的名字叫:jone,我今年28岁,月薪为:10元
而在hello.js中,我们是赋予了exports一个函数 ,当然,也可以采用匿名函数的方式;见代码:

function hello(name,age,money){
        this.name=name;
        this.age=age;
        this.money=money;
        this.say=function(){
                console.log('我的名字叫:'+this.name+',我今年'+this.age+'岁,月薪为:'+this.money+'元;')
        }
}
module.exports=hello;

以上modle.exports,这个模块很明显是一个特别的对象模型;那如果采用对象实例的方法该如何实现呢?其实也很简单,只需要给exports对象负值一个新的方法即可;见下面代码:

function hello(name,age,money){
        this.name=name;
        this.age=age;
        this.money=money;
        this.say=function(){
                console.log('我的名字叫:'+this.name+',我今年'+this.age+'岁,月薪为:'+this.money+'元;')
        }
}
var Hello=new hello('jone','28','10000');
exports.add=Hello

在hello.js中,依然是一个构造函数,声明了一个变量Hello,然后再把Hello赋值给exports自定义的add方法;那么在main.js中,由于add已经是exports的一个自定义的实例方法了,因此我们可以直接这么调用它:Hello.add.say();见代码:

var Hello=require('./hello');
Hello.add.say()

进行node环境,运行main.js,可以看到,结果和上面一样,都会输出:我的名字叫:jone,我今年28岁,月薪为:10元

二、AMD

AMD是”Asynchronous Module Definition”的缩写,意思就是”异步模块定义”。由于不是JavaScript原生支持,使用AMD规范进行页面开发需要用到对应的库函数,也就是大名鼎鼎RequireJS,实际上AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出

它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。

RequireJS主要解决两个问题

多个js文件可能有依赖关系,被依赖的文件需要早于依赖它的文件加载到浏览器
js加载的时候浏览器会停止页面渲染,加载文件越多,页面失去响应时间越长

三、CMD

CMD 即Common Module Definition通用模块定义,CMD规范是国内发展出来的,就像AMD有个requireJS,CMD有个浏览器的实现SeaJS,SeaJS要解决的问题和requireJS一样,只不过在模块定义方式和模块加载(可以说运行、解析)时机上有所不同

语法

Sea.js 推崇一个模块一个文件,遵循统一的写法

因为CMD推崇

一个文件一个模块,所以经常就用文件名作为模块id

CMD推崇依赖就近,所以一般不在define的参数中写依赖,在factory中写

factory是一个函数,有三个参数,function(require, exports, module)

require 是一个方法,接受 模块标识 作为唯一参数,用来获取其他模块提供的接口:require(id)

exports 是一个对象,用来向外提供模块接口

module 是一个对象,上面存储了与当前模块相关联的一些属性和方法

 JS 中的require 和 import 区别

1.ES6 模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。

Require是CommonJS的语法,CommonJS的模块是对象,输入时必须查找对象属性。

// CommonJS模块
let { stat, exists, readFile } = require('fs');

// 等同于
let _fs = require('fs');
let stat = _fs.stat;
let exists = _fs.exists;
let readfile = _fs.readfile;

above:整体加载fs模块(即加载fs所有方法),生成一个对象”_fs”,然后再从这个对象上读取三个方法,这叫“运行时加载”,因为只有运行时才能得到这个对象,不能在编译时做到静态化。

ES6模块不是对象,而是通过export命令显示指定输出代码,再通过import输入。

import { stat, exists, readFile } from 'fs';

above:从fs加载“stat, exists, readFile” 三个方法,其他方法不加载,

2.ES6模块默认使用严格模式,无论是否声明“use strict” 

ES6 模块之中,顶层的this指向undefined,即不应该在顶层代码使用this。

Module 主要由两个命令组成,import和export,export用于规定模块的对外接口,import命令用于输入其他模块提供的功能

3.Export 

模块是独立的文件,该文件内部的所有的变量外部都无法获取。如果希望获取某个变量,必须通过export输出,

// profile.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

或者用更好的方式:用大括号指定要输出的一组变量

// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export {firstName, lastName, year};

除了输出变量,还可以输出函数或者类(class),

export function multiply(x, y) {
  return x * y;
};

还可以批量输出,同样是要包含在大括号里,也可以用as重命名:

function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

Attention:

export 命令规定的是对外接口,必须与模块内部变量建立一一对应的关系

// 写法一
export var m = 1;

// 写法二
var m = 1;
export {m};

// 写法三
var n = 1;
export {n as m};


// 报错
export 1;

// 报错
var m = 1;
export m;

报错的写法原因是:没有提供对外的接口,第一种直接输出1,第二种虽然有变量m,但还是直接输出1,导致无法解构。

同样的,function和class的输出,也必须遵守这样的写法。

// 报错
function f() {}
export f;

// 正确
export function f() {};

// 正确
function f() {}
export {f};

And:export语句输出的接口,都是和其对应的值是动态绑定的关系,即通过该接口取到的都是模块内部实时的值。

位置:export模块可以位于模块中的任何位置,但是必须是在模块顶层,如果在其他作用域内,会报错。

function foo() {
  export default 'bar' // SyntaxError
}
foo()

4.Import命令

export定义了模块的对外接口后,其他JS文件就可以通过import来加载这个模块,

// main.js
import {firstName, lastName, year} from './profile';

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

import命令接受一对大括号,里面指定要从其他模块导入的变量名,必须与被导入模块(profile.js)对外接口的名称相同。

如果想重新给导入的变量一个名字,可以用as关键字,

import { lastName as surname } from './profile';

import后的from 可以指定需要导入模块的路径名,可以是绝对路径,也可以是相对路径, .js路径可以省略,如果只有模块名,不带有路径,需要有配置文件指定。

注意,import命令具有提升效果,会提升到整个模块的头部,首先执行。(是在编译阶段执行的)

因为import是静态执行的,不能使用表达式和变量,即在运行时才能拿到结果的语法结构(e.g. if…else…)

5.module的整体加载

除了指定加载某个输出值,还可以用(*)指定一个对象,所有的变量都会加载在这个对象上。

// circle.js。输出两个函数

export function area(radius) {
  return Math.PI * radius * radius;
}

export function circumference(radius) {
  return 2 * Math.PI * radius;
}


// main.js 加载在个模块

import { area, circumference } from './circle';

console.log('圆面积:' + area(4));
console.log('圆周长:' + circumference(14));

//上面写法是逐一指定要加载的方法,整体加载的写法如下。
import * as circle from './circle';

console.log('圆面积:' + circle.area(4));
console.log('圆周长:' + circle.circumference(14));

注意,模块整体加载所在的那个对象(上例是circle),应该是可以静态分析的,所以不允许运行时改变。

import * as circle from './circle';

// 下面两行都是不允许的
circle.foo = 'hello';
circle.area = function () {};

6.export default

之前的例子中,使用import导入时,都需要知道模块中所要加载的变量名或函数名,用户可能不想阅读源码,只想直接使用接口,就可以用export default命令,为模块指定输出

// export-default.js
export default function () {
  console.log('foo');
}

其他模块加载该模块时,import命令可以为该匿名函数指定任意名字。

// import-default.js
import customName from './export-default';
customName(); // 'foo'

export default也可以用于非匿名函数前。

下面比较一下默认输出和正常输出。

// 第一组
export default function crc32() { // 输出
  // ...
}

import crc32 from 'crc32'; // 输入

// 第二组
export function crc32() { // 输出
  // ...
};

import {crc32} from 'crc32'; // 输入

可以看出,使用export default时,import语句不用使用大括号。

import和export命令只能在模块的顶层,不能在代码块之中。否则会语法报错。

这样的设计,可以提高编译器效率,但是没有办法实现运行时加载。

因为require是运行时加载,所以import命令没有办法代替require的动态加载功能。

所以引入了import()函数。完成动态加载。

import(specifier)

specifier用来指定所要加载的模块的位置。import能接受什么参数,import()可以接受同样的参数。

import()返回一个Promise对象。

const main = document.querySelector('main');

import(`./section-modules/${someVariable}.js`)
  .then(module => {
    module.loadPageInto(main);
  })
  .catch(err => {
    main.textContent = err.message;
  });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • Js模块打包exports require import的用法和区别
  • JavaScript中使用import 和require打包后实现原理分析
  • 一文让你彻底搞清楚javascript中的require、import与export
  • Javascript(es2016) import和require用法和区别详解
张贴在2