LiCheng

require 和 import 区别

前言

当前端应用越来越复杂时，我们想要将代码分割成不同的模块，便于复用、按需加载等。

require 和 import 分别是不同模块化规范下引入模块的语句，下文将介绍这两种方式的不同之处。


# 一. 出处

类型 年份 出处
require 2009 CommonJS
import 2015 ECMAScript2015（ES6）

# 二. require

  • 它相当于 module.exports 的传送门;

  • module.exports后面的内容是什么，require 的结果就是什么，对象、数字、字符串、函数…… ;

  • 再把 require 的结果赋值给某个变量，相当于把 require 和 module.exports 进行平行空间的位置重叠;

  • require 理论上可以运用在代码的任何地方，甚至不需要赋值给某个变量之后再使用;

  • require 引入基础数据类型时，属于复制该变量;

  • require 引入复杂数据类型时，数据浅拷贝该对象;

# 1. 举例：

# 模块化文件：

var Pool = cc.Class({

    ctor: function () {
        this._pools = {};
        this.poolName = '你好';
    },
})

module.exports = new Pool();

# 需要导入的地方：

let PoolName = require('Pool').poolName;
let Pool = require('Pool');


// 输出：
console.log('PoolName:', PoolName);
console.log('Pool:', Pool);

PoolName: 你好
Pool: CCClass{}

# 三. import

  • import 它是编译时的（ require 是运行时的）它必须放在文件开头;

  • 而且使用格式也是确定的，不容置疑;

  • 它不会将整个模块运行后赋值给某个变量，而是只选择 import 的接口进行编译，这样在性能上比 require 好很多;`

  • require 是赋值过程，import是解构过程;

  • 支持编译时静态分析，便于JS引入宏和类型检验;

# 1. 举例：

# 模块化文件：

var Pool = cc.Class({

    ctor: function () {
        this._pools = {};
        this.poolName = '你好';
    },
})

module.exports = new Pool();

# 导入文件：

import Pool from "../public_util/Pool";

# 四. 区别

# 1. 遵循规范:

类型 区别
require AMD规范引入方式
import es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法

# 2. 调用时机:

类型 区别
require 运行时调用，所以require理论上可以运用在代码的任何地方
import 编译时调用，所以必须放在文件开头

# 3. 本质:

类型 区别
require require是赋值过程
import import是解构过程

← 事件循环 →