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};
导入方式
-
基本导入方式同前一个
-
起别名导入,参考导出方式
-
对整个导入模块起别名
-
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
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战