require和import


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

CommonJS

CommonJS定义的模块分为:{模块引用(require)} {模块定义(exports)} {模块标识(module)}
require()用来引入外部模块;exports对象用于导出当前模块的方法或变量,唯一的导出口;module对象就代表模块本身。
require统治了ES6之前的所有模块化编程,即使现在,在ES6 module被完全实现之前,还是这样。

// a.js

// -------- node -----------
module.exports = {
  a : function() {},
  b : 'xxx'
};
// b.js

// ------------ node ---------
var m = require('./a');
m.a();

require()是同步方法
ES6发布的module并没有直接采用CommonJS,甚至连require都没有采用,也就是说require仍然只是node的一个私有的全局方法,module.exports也只是node私有的一个全局变量属性

注意:module.exports方法不会多次生效,只执行最后一行语句的导出方法,这个与下面要介绍的export是有区别的,后面会介绍这个

ES6 模块

ES6 模块不是对象,而是通过export命令显式指定输出的代码,再通过import命令输入。
模块功能主要由两个命令构成:export和import。export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。

// ES6模块
import { stat, exists, readFile } from 'fs';

上面代码的实质是从fs模块加载 3 个方法,其他方法不加载。这种加载称为“编译时加载”或者静态加载,即 ES6 可以在编译时就完成模块加载,效率要比 CommonJS 模块的加载方式高。但是这样会造成import时无法动态加载

//react native根据平台动态加载js,无法使用import方式加载
var NativeAPI = require('./Native_API/NativeAPI.' + Platform.OS);

export导出模块

// module "my-module.js"
function cube(x) {
  return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export { cube, foo };

注意,export命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系。但是module.exports是可以的

// 错误演示
// 报错
export 1; // 绝对不可以

// 报错
var a = 100;
export a;

//module.exports
var a = 1;
module.exports = a

export在导出接口的时候,必须与模块内部的变量具有一一对应的关系。直接导出1没有任何意义,也不可能在import的时候有一个变量与之对应。 export a 虽然看上去成立,但是 a 的值是一个数字,根本无法完成解构,因此必须写成 export {a} 的形式。即使a被赋值为一个function,也是不允许的。

// 写法一
export var m = 1;

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

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

注意:export可以在代码中导出多个

var m = 1;
export {m};//导出m

var b = 2;
export {b}//导出b

import导入模块

import的语法跟require不同,而且import必须放在文件的最开始,且前面不允许有其他逻辑代码。

// import "user.js"
import { cube, foo } from 'my-module';
console.log(cube(3)); // 27
console.log(foo);    // 4.555806215962888

import后面跟上花括号的形式是最基本的用法,花括号里面的变量与export后面的变量一一对应。这里,你必须了解 对象的解构赋值 的知识,也可参考阮一峰的结构赋值

as关键字

简单的说就是取一个别名。export中可以用,import中其实可以用:

// a.js
var a = function() {};
export {a as fun};

// b.js
import {fun as a} from './a';
a();

export的时候,对外提供的接口是fun,它是a.js内部a这个函数的别名,但是在模块外面,认不到a,只能认到fun。
import中的as就很简单,就是你在使用模块里面的方法的时候,给这个方法取一个别名,好在当前的文件里面使用。两个不同文件可能都export同一个fun的对象

export default 命令

export default命令,为模块指定默认输出。

// 第一组
export default function crc32() { // 输出
  // ...
}
import crc32 from 'crc32'; // 输入

// 第二组
export function crc32() { // 输出
  // ...
};
import {crc32} from 'crc32'; // 输入

default其实是as的语法糖,这个语法糖的好处就是import的时候,可以省去花括号{}。

*符号

*代表所有

 import * as _ from 'xxx.js';//表示把xxx模块中的所有接口挂载到 _ 这个对象上

通过*号直接继承某一个模块的接口

export * from '_';

// 等效于:
import * as all from '_';
export all;

尽量少用,它使用的所有的export的接口,但是你当前模块其实并不一定需要用到所有的接口,还是用{}按照需要去引用

Require Or Import

require理论上可以运用在代码的任何地方,甚至不需要赋值给某个变量之后再使用;但是import则不同,它是编译时的(require是运行时的),它必须放在文件开头,而且使用格式也是确定的,不容置疑。它不会将整个模块运行后赋值给某个变量,而是只选择import的接口进行编译,这样在性能上比require好很多。

按照规范module.exports =>require,export=>import,但是现在开发为了兼容低版本的JS引擎会对import进行降级处理,会把import转换成require;这样就造成了各种方法可以混合使用,如

//import.js:导出模块a和d
export class a {//分开导出
    constructor(arg=2) {
        this.t = 1;
        this.t2 = arg;
    }
    b(){
        console.log('b');
        console.log(this.t2);
    }
    c(){
        console.log('c')
        console.log(this.t);
    }
}
var d = function(){
};
export {d};

//require.js:导出模块a,d,e
class a {//分开导出
    constructor(arg=2) {
        this.t = 1;
        this.t2 = arg;
    }
    b(){
        console.log('b');
        console.log(this.t2);
    }
    c(){
        console.log('c')
        console.log(this.t);
    }
}
var d = function(){
    console.log(d)
};
var e = 1
module.exports = {a,d,e};

//index.js
var require_a = require('./require')
var import_a = require('./import')
import {a as test} from './import'
import a from './require'
import * as all_require from './require'
import * as all_import from './import'

console.log(require_a);//{a: ƒ, d: ƒ, e: 1}
console.log(import_a);//{a: ƒ, d: ƒ, __esModule: true}
console.log(test);//ƒ a()
console.log(a);//{a: ƒ, d: ƒ, e: 1}
console.log(all_require);//{a: ƒ, d: ƒ, e: 1, default: {…}}
console.log(all_import);//{a: ƒ, d: ƒ, __esModule: true}

//a1,a2数据不影响
//constructor可传参数,但参数名不能与变量名相同
var a1 = new test();
var a2 = new test(4);

console.log(a1.t,a1.t2);//1,2
a1.b();//b,2
a1.t=3;
a1.c();//c,3

console.log(a2.t,a2.t2);//1,4
a2.b();//b,4
a2.t=5;
a2.c();//c,5

可以看到在混用时require和import在编码是是都可以使用的,需要注意的是require是把所有模块加载进去,与import * 基本相同,但是import *会增加default属性。import需要指定模块名,如果不存在会返回undefined。

require 取到整个对象

import a 取到default的对象,如果无default对象,在编译时会报错

import {a} 取到 a对象

import * as XX 取到所有对象,并放到XX里面

//a.js
export default class xxxx {}

var xxx = require('./a.js');//{default:ƒ xxx()}
import xxx from './a.js';//ƒ xxx()

当export有default时,在使用require时,需要从default中才能取到要使用的对象,而import可以直接拿到对应的属性

//a.js
module.exports = class a {}

var a = require('./a.js');//ƒ xxx()
import a from './a.js';//ƒ xxx()

如果module.exports导出的是单一的对象时,使用require和import取到的对象是同样的,都是可以直接使用,和default的效果基本一致。

注意:webpack3在module.exports编译时,在模块前自增加了default属性

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,402评论 6 499
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,377评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,483评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,165评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,176评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,146评论 1 297
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,032评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,896评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,311评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,536评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,696评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,413评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,008评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,659评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,815评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,698评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,592评论 2 353

推荐阅读更多精彩内容