欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

require和import的区别

程序员文章站 2022-06-04 16:39:50
...

遵循规范

–require 是 AMD规范引入方式

–import是es6的一个语法标准,如果要兼容浏览器的话必须转化成es5的语法

 

调用时间

–require是运行时调用,所以require理论上可以运用在代码的任何地方

–import是编译时调用,所以必须放在文件开头

 

本质

–require是赋值过程,其实require的结果就是对象、数字、字符串、函数等,再把require的结果赋值给某个变量

–import是解构过程,但是目前所有的引擎都还没有实现import,我们在node中使用babel支持ES6,也仅仅是将ES6转码为ES5再执行,import语法会被转码为require

 

用法

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

require('./a')(); // a模块是一个函数,立即执行a模块函数
var data = require('./a').data; // a模块导出的是一个对象
var a = require('./a')[0]; // a模块导出的是一个数组

另外说一下 在vue中如果需要动态引入图片,

<img :src="logoSrc" >

export default {
  data () {
    return {
      // 直接引入,会出现图片404,是因为webpack把路径当做了字符串,不会去当做路劲解析图片地址
      logoSrc: './../assets/avatar.png' 
      // require可以将图片作为模块加载进来,被webpack解析
      logoSrc: require('./../assets/avatar.png')
    }
  }
}

–import有严格的格式要求并且必须在文件开头

// 导入默认值 对应export-dafault默认导出的内容
import defaultExport from “module-name”;
// 导入整个模块 然后重命名
import * as name from “module-name”;
// 导入export具体的某个对象或值
import { export } from “module-name”;
// 导入具体内容然后重命名
import { export as alias } from “module-name”;
// 导入具体多个内容
import { export1 , export2 } from “module-name”;
import { export1, export2 as alias2 , [...] } from “module-name”;
import defaultExport, { export [ , [...] ] } from “module-name”;
import defaultExport, * as name from “module-name”;
// 仅为副作用导入,运行模块中所有代码
import “module-name”;