JS中的「import」和「require 」的区别

Admin
Admin
Admin
52
文章
6
评论
2020年10月12日11:35:13 评论 140 2053字阅读6分50秒

import require 是 JS 模块化编程使用的,模块化是一种将系统分离成独立功能部分的方法,一个模块是为完成一个功能的一段程序或子程序,"模块"是系统中功能单一且可替换的部分。模块化思想是从 Java 上衍生过来的,他将所需要的功能封装成一个类,哪里需要就在哪里调用,JS 中没有类的说法,但它引入了这种思想,在 JS中 用对象或构造函数来模拟类的封装实现模块化。

require 的基本语法

在导出的文件中使用 module.exports 对模块中的数据导出,内容类型可以是字符串、变量、对象、方法等不予限定,使用 require() 引入到需要的文件中即可。

在模块中,将所要导出的数据存放在 moduleexport 属性中,在经过 CommonJs/AMD 规范的处理,在需要的页面中使用 require 指定到该模块,即可导出模块中的 export 属性并执行赋值操作(值拷贝)。

  1. // module.js
  2. module.exports = {
  3.     a: function() {
  4.         console.log('exports from module');
  5.     }
  6. }
  7. // sample.js
  8. var obj = require('./module.js');
  9. obj.a()  // exports from module

当我们不需要导出模块中的全部数据时,使用大括号包含所需要的模块内容。

  1. // module.js
  2. function test(str) {
  3.     console.log(str);
  4. }
  5. module.exports = {
  6.     test
  7. }
  8. // sample.js
  9. let { test } =  require('./module.js');
  10. test ('this is a test');

import 的基本语法

使用 import 导出的值与模块中的值始终保持一致,即引用拷贝,采用 ES6 中解构赋值的语法,import 配合 export 结合使用。

importread-only 的,值是单向传递的。defaultES6 模块化所独有的关键字,export default {} 输出默认的接口对象,如果没有命名,则在 import 时可以自定义一个名称用来关联这个对象。

  1. // module.js
  2. export function test(args) {
  3.     console.log(args);
  4. }
  5. // 定义一个默认导出文件, 一个文件只能定义一次
  6. export default {
  7.     a: function() {
  8.         console.log('export from module');
  9.     }
  10. }
  11. export const name = 'gzc'
  12. // 使用_导出export default的内容
  13. import _, { test, name } from './a.js'
  14. test(`my name is ${name}`)  // 模板字符串中使用${}加入变量

它们之间的区别

1、require 是赋值过程并且是运行时才执行,import 是解构过程并且是编译时执行。require 可以理解为一个全局方法,所以它甚至可以进行下面这样的骚操作,是一个方法就意味着可以在任何地方执行,而 import 必须写在文件的顶部。

  1. var a = require(a() + '/ab.js')

2、require 的性能相对于 import 稍低,因为 require 是在运行时才引入模块并且还赋值给某个变量,而 import 只需要依据 import 中的接口在编译时引入指定模块所以性能稍高。

3、在 commom.jsmodule.exports 之后 导出的值就不能再变化,但是在 es6export 中是可以的。

  1. var a = 6
  2. export default {a}
  3. a = 7  // 在es6中的export可以
  4. var a = 6
  5. module.exports = a
  6. a = 7   // 在common.js中,这样是错误的

4、require/exports 方式的写法比较统一

  1. // require
  2. const module = require('module')
  3. // exports
  4. export.fs = fs
  5. module.exports = fs

5、import/export 方式的写法就相对丰富些

  1. // import
  2. import fs  from 'fs';
  3. import { newFs as fs } from 'fs';  // ES6语法, 将fs重命名为newFs, 命名冲突时常用
  4. import { part } from fs;
  5. import fs, { part } from fs;
  6. // export
  7. export default fs;
  8. export const fs;
  9. export function part;
  10. export { part1, part2 };
  11. export * from 'fs';

时间是一个好东西,记录的是学习的证据

继续阅读
Admin
  • 本文由 发表于 2020年10月12日11:35:13
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
Vue 中计算属性和侦听器 前端开发

Vue 中计算属性和侦听器

在 Vue 中通常我们会在模板绑定表达式,模板是用来描述视图结构的。如果模板中的表达式存在过多的逻辑性语句,那么整个模板就会变得特别的臃肿,可读性和维护性将会降低,因此为了简化逻辑,我们可以使用计算属...
浅谈 JS 中的防抖和节流操作 前端开发

浅谈 JS 中的防抖和节流操作

一般在进行窗口的 resize、scroll 等输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕。此时我们可以采用 debounce(防抖)和 thr...
Vue-Router + Webpack 路由懒加载实现 前端开发

Vue-Router + Webpack 路由懒加载实现

当打包构建应用时,Javascript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。结合 Vue 的异步组件...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: