JavaScript 模块导入方式

JavaScript 模块导入方式

Node 中的导入导出方式

此类导入方式借助module对象通过module.exports赋予 js 文件中某数据类型能够被导入的权限，通过require(<filename>)导入数据类型，这种导入方式主要在 Node.js2 中使用。每个运行在 Node 上的 js 文件都存在一个有导出属性的本地module对象。require(<filename>)赋予的变量名不必须与导出文件中的变量相同，原则上保持一致。

基本方式

导出文件 <1-airplane.js>

let Airplane = {};
Airplane.myAirplane = "StarJet";
module.exports = Airplane;

导入文件与模块文件位于同一目录

const Airplane = require('./1-airplane.js');
const displayAirplane=()=>{
  console.log(Airplane);
  console.log(Airplane.myAirplane);
}
displayAirplane();

匿名方式

此类导入方式依赖了JavaScript语言变量是引用的特性，直接在module.exports后定义数据类型。

导出文件 <2-airplane.js>

module.exports = {
  myAirplane:"CloudJet",
  displayAirplane:function(){
    return this.myAirplane;
  }
};

导入方式同上。

ES6 中的导入导出方式

default 方式

此类导出方式利用了 ES6 中的特性，可读性、灵活性高，通过export default替换module.exports。

导出文件 <airplane.js>

function meetsSpeedRangeRequirements(maxSpeed, minSpeed,requiredSpeedRange){
  const range = maxSpeed - minSpeed;
  if (range>requiredSpeedRange){
    return true;
  }
  else return false;
}
export default meetsSpeedRangeRequirements;

导入文件 (值得注意的是，此时导入方式中不存在.js后缀)

import meetsSpeedRangeRequirements from './airplane';

Named 方式

这种导入方式实现了多个数据类型的导入。此时导出与导入文件中数据类型的变量名必须相同。

• 一次性导出或导入

  导出文件 <airplane.js>

  

  let availableAirplanes=[
    {name:'AeroJet',
    fuelCapacity:800,
    maxSpeed:1200,
    minSpeed:300,
    availableStaff:['pilots', 'flightAttendants',    'engineers', 'medicalAssistance','sensorOperators']
    },
    {name:'SkyJet',
    fuelCapacity:500,
    maxSpeed:800,
    minSpeed:200,
    availableStaff:[
    'pilots','flightAttendants'
  ]}];
  let flightRequirements = {
  };
  function meetsSpeedRangeRequirements(maxSpeed, minSpeed,requiredSpeedRange){
  }
  function meetsStaffRequirements(availableStaff,requiredStaff){
  }
  export {availableAirplanes, flightRequirements,meetsStaffRequirements};
  

  导入文件

  

  import {availableAirplanes, flightRequirements,meetsStaffRequirements} from './airplane';
  

• 逐个导出或导入

  导出文件 <airplane.js>

  

  export let availableAirplanes=
      [
    {
        name:'AeroJet',
    	  fuelCapacity:800,
    	  maxSpeed:1200,
    	  minSpeed:300,
    	  availableStaff:['pilots', 'flightAttendants',    'engineers', 'medicalAssistance','sensorOperators']
    },
    {
        name:'SkyJet',
    fuelCapacity:500,
    maxSpeed:800,
    minSpeed:200,
    availableStaff:[
    'pilots','flightAttendants'
  ]}];
  

  导入方式同前一个。

起别名

此类导入方式基于 named 一次性导出或导入方式，通过 as 关键字给变量起别名。

导出文件 <airplane.js>

export {availableAirplanes as aircrafts, flightRequirements as flightReqs,meetsStaffRequirements as meetsStaffReqs,meetsSpeedRangeRequirements as meetsSpeedRangeReqs};

导入方式

1. 基本导入方式同前一个

2. 起别名导入，参考导出方式

3. 对整个导入模块起别名

4. 

   import * as Carte from './menu';
   Carte.chefsSpecial;
   Carte.isVeg();
   Carte.isLowSodium();
   

组合方式

default方式与named方式可以组合使用。

导出文件 <airplane.js>

export let availableAirplanes=[
  {name:'AeroJet',
  fuelCapacity:800,
  maxSpeed:1200,
  minSpeed:300,
  availableStaff:['pilots', 'flightAttendants',    'engineers', 'medicalAssistance','sensorOperators']
  },
  {name:'SkyJet',
  fuelCapacity:500,
  maxSpeed:800,
  minSpeed:200,
  availableStaff:[
  'pilots','flightAttendants'
]}];
export let flightRequirements = {
};
function meetsSpeedRangeRequirements(maxSpeed, minSpeed,requiredSpeedRange){
}
export function meetsStaffRequirements(availableStaff,requiredStaff){
}
export default meetsSpeedRangeRequirements;

本文由 简悦 SimpRead 转码， 原文地址 blog.csdn.net