怪物奇妙物语

宇宙无敌超级美少男的怪物奇妙物语

首页 新随笔 联系 管理
  819 随笔 :: 0 文章 :: 2 评论 :: 16万 阅读

JavaScript 模块导入方式

Node 中的导入导出方式

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

基本方式

导出文件 <1-airplane.js>

image-20221114145927452

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

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

image-20221114145936873

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

匿名方式

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

导出文件 <2-airplane.js>

image-20221114150032071

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

导入方式同上。

ES6 中的导入导出方式

default 方式

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

导出文件 <airplane.js>

image-20221114150141649

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

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

image-20221114150157393

import meetsSpeedRangeRequirements from './airplane';

Named 方式

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

  • 一次性导出或导入

    导出文件 <airplane.js>

    image-20221114150238056

    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};

    导入文件

    image-20221114150247889

    import {availableAirplanes, flightRequirements,meetsStaffRequirements} from './airplane';
  • 逐个导出或导入

    导出文件 <airplane.js>

    image-20221114150356062

    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>

image-20221114150412416

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

导入方式

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

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

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

  4. image-20221114150431853

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

组合方式

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

导出文件 <airplane.js>

image-20221114150515632

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

posted on   超级无敌美少男战士  阅读(71)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示