模块化——import和require

import和require

• 写在之前

  • import和require都是JS模块化编程使用的，用于提升前端性能。

• 对模块化的理解

  • 模块化主要是将一整个系统拆分成各个独立的部分。
  • 一个模块是完成某一个功能的一段代码（可以和组件相比较理解）。
  • 在JAVA中模块化是将实现某个功能的一段代码封装成一个类，但是因为JavaScript中没有类（至少ES6之前没有类），因此JS借助了对象或构造函数来模拟类进而实现模块化。

• 引入规范

  • require/exports是commonJS引入。（commonJS默认导出的是一个对象）。
  • import/export是ES6引入。（因为存在浏览器兼容问题，需要在node中使用babel将ES6语法编译成ES5）。

• 调用时间

  • require是运行时调用，所以可以放在代码的任何地方。
  • import是编译时调用，所以必须放在文件开头。（因为编译时会做语法检查）

• 本质

  • require是赋值过程，它实际上就是RHS赋值。（值传递）。
  • import是解构过程，使用import导入模块的属性或方法是引用传递（将地址传入）。

• 语法用法展示

  • require用法

    • 将模块A中要导出的数据放入module的exports属性中，假设模块B中要使用导出的这部分内容，那么可以在模块B中使用require导入，这时就会导出模块A中的exports属性并在模块B中执行RHS赋值操作。（执行浅拷贝）。

      这里是模块A

      module.exports = {
        a: function() {
          console.log('exports from module');
        }
      }
      

      这里是模块B

      const obj = require('./moduleA.ts');
      obj.a() //exports from module
      

    • 当我们不需要导出模块A中的全部内容的时候

      module.exports = {
        test: function(){
          console.log('test');
        },
        a: function(){
          console.log('exports from module')
        }
      }
      

      const { test } = require('./moduleA.ts');
      

      我们使用解构赋值，使用大括号包裹住要导出的部分。

  • import用法

    • 使用import导出的值和模块中的值始终保持一致，也就是引用拷贝，import采用解构赋值结合export使用。

    • 使用export关键字标记要导出的内容，当test.js中需要导入这部分内容的时候，使用import，这时export就会将标记的内容导出，病执行引用传递（地址传递）。

      • 这里是文件module.js

      export function test(args){
        console.log(args);
      }
      export default{
        a: function(){
          console.log('export from module');
        }
      }
      export const name = 'aaa';
      

      • 这里是文件test.js

      import _, { test, name} from './module.js'
      

      在test.js中，我们使用 _ 导出export default的内容。

      import module from './module.js'
      

      也可以这样导出默认导出的内容。

      import {module as moduleA} from './module.js'
      

      当出现有命名重复的时候，那么我们需要用到ES6中的对模块重命名的语法。上面是将module重命名为moduleA。