require和import使用

如何引⼊文件外部的js代码?

html文件

  <script src='/example.js'></script>
  # <!-- src填⼊要引入js路径 -->

js文件

• module.exports 与 require用法

  /*********test.js********/
  var test = {
    name: 'test';
    func1: function () {
      console.log('test');
    }
  }
  
  function func2 () {
    alert('Hi moring');
  }
  
  module.exports = test; // exports 设为test
  module.exports.func2 = func2; // 为exports添加func2
  
  /*************main.js**************/ // 引入模块
  var Test = require('/test') //调⽤对应函数
  Test.func1();
  Test.func2();
  

• export 与 import用法
  export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能(一个模块就是一个独立的文件)

  /*********test.js********/
  // 定义时直接声明
  export var office = 'word' // 变量必须声明后再使用
  export function jump () {
    alert('jump')
  }
  
  // 定义后声明
  var a = 'aaaaa' 
  export {a as d} // 别名外部引⽤变量名为d
  
  var b = 'bbbbb' 
  function fly ()  {
    alert('fly')
  }
  export {b,fly} //{}不能少，即使只有一个变量
  
  /*************main.js**************/ // 引入模块
  import {office,jump,d,b,fly} from './test' //调⽤接口
  jump()
  //或者使用以下方式直接引⼊对应文件所对外暴露的接口 
  import * as Test from '../moduleTest2' //调用接口
  Test.jump()
  

• export default 和 import用法
  使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无
  法加载，为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用
  到export default命令，为模块指定默认输出

  /*********test.js********/
  export default {
    name: 'Jack',
    sex: 'male',
    run: function () {
      alert(this.name + ' run fast')
    }
  }
  
  /*************main.js**************/ // 引⼊模块 
  import Test from './test';  
  // 等同于
  // import { default as Test } from './test';
  
  // 调⽤对应函数
  Test.run();
  // 使⽤变量
  console.log(Test.name + Test.sex)
  

• 使用import()函数注⼊,做到运行时加载

  /**********test.js*************/
  export function jump () {
    alert('jump')
  }
  
  /*************main.js**************/
  import('../moduleTest2').then(Test => {
    Test.jump();
  })
  .catch(error => {
  })
  

  注意点:import()函数加载模块成功以后，这个模块会作为一个对象， 当作then方法的参数。因此，可以使用对象解构赋值的语法，获取输出接口。

  import('./myModule.js')
  .then(({export1, export2}) => {
    // ...·
  });
  

  上面代码中，export1和export2都是myModule.js的输出接口，可以解构获得。
  如果模块有default输出接口，可以用参数直接获得。

    import('./myModule.js')
   .then(myModule => {
     console.log(myModule.default);
   })；