import和require的区别和使用

相同：import和require都是模块化编程的产物

区别：

遵循规范：

• require是AMD规范引入的方式
• import是es6的一个语法标准，如果要兼容浏览器的话必须转化为es5的语法。

调用时间：

• require是运行时调用，所以可以放置在模块任何位置。只能在运行时确定模块的依赖关系以及输入/输出变量，无法进行静态优化。
• import是编译时调用，所以必须放置在模块头部。支持编译时静态分析，便于JS引入宏和类型检验。动态绑定。

本质

• require是赋值过程，因此对于对象赋值，是一种浅拷贝。
• import是解构过程

用法：

• require

  require/exports

  // a.js
  const myfs = require('b');
  // b.js
  module.exports = "hello";
  // or
  exports = "hello";
  
  // exports = module.exports;
  // return module.exports;
  

• import

  import导入模块

  import xx from 'test.js';// xx 默认导入的是default的值
  // 如果是用 {} 表示其内的内容是解构对应于export {}导出的内容
  import { a } from 'test.js'; // a 对应于export导出的变量名一致
  import * as test from 'test.js'; // 导入所有的数据
  import { a as key,b as value } from 'test.js' // 导入指定的变量数据并进行重命名操作 
  

  import导出模块

  export {
  	a,
      b
  }; // 此方式针对于直接使用已定义好的变量名称
  export default {
      a,
      bb: b
  }; // 此方式针对于需要对已有的变量进行重命名操作，比如： bb:b，此时就不能使用export:{}
  export default object;// 此方式针对于需要导出的模块已经被封装成对象，直接导出object
  
  // 重定向导出
  // 含义： 在当前页面导出另一个页面导出的内容
  // a.js
  const a = "hello";
  const b = {
      test: "hellp"
  }
  export {
  	a
  }
  export default b;
  
  // b.js
  // 将 export {}中的值全部导出去
  export * from './a.js';// ./表示当前目录下
  // 将export default XX　的值导出
  export { default } from './a.js'; 
  
  // 在使用重定向默认的导出的时候,会报错
  // Uncaught SyntaxError: Unexpected token 'export'
  

  注意: 导入export {} 的时候,需要使用解构,也即加上{}来进行引入

  导入export default的时候,不需要加{},原因:全局只有一个默认导出,所以不需要加{}

  页面中要使用import语法,可能会报以下错误:

  Uncaught SyntaxError: Cannot use import statement outside a module
  

  原因: script标签默认使用javascript语言(type = 'text/javascript'),使用es6的语法会发生解析错误,需要在script标签中加入type="module"