本篇文章帶給大家的內容是關於javascript中導入導出的實作方式(附程式碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
一個JavaScript
文件,可以向外exprots
無數個變量,函數,對象,但是require( )
; 的時候,只需要載入一次JS檔即可。所以,無形之後,會增加一個頂層命名空間。
導入一個空模組,是一個空物件,一個模組就是一個物件。
匯出方式:
exports
, 匯出整個式子
module. exports
, 匯出賦值部分
#匯入方式:
reuire()
#
// 导出一个变量 exports.a = 10; // 导入该变量 let b = require('./export') // 导入的形式 `console.log(b)`输出导入的值: // { a: 10 }
// 导出一个变量,直接需要变量值使用. // module.exports = 'name'; // 导入该变量 let b = require('./export') // 导入的形式 `console.log(b)`输出导入的值: // name
// 导出对象 module.exports = { name1: 123, name2: 456 } // 导入该变量 let b = require('./export') // 导入的形式 `console.log(b)`输出导入的值: // { name1: 123, name2: 456 }
// 导出对象 exports.msg = { name1: 1, name2: 2 } // 导入该变量 let b = require('./export') // 导入的形式 `console.log(b)`输出导入的值: // { msg: { name1: 1, name2: 2 } }
// 导出函数 exports.showMsg = function () { } // 导入该变量 // let b = require('./export') // 导入的形式 `console.log(b)`输出导入的值: // { showMsg: [Function] } // 在 引用结果 需要 通过 变量 引用对象 执行 // var b= require(); // b.showMsg();
// 导出函数 module.exports = function () { } // 导入该变量 let b = require('./export') // 导入的形式 `console.log(b)`输出导入的值: // [Function] // 引入文件的 变量 直接执行
物件,函數常用的匯出方式:
module.exportsES6和TS方式匯入導出export導入:
注意點:
#匯出和導入,除了使用
as匯出一個文件,預設是一個空物件
直接使用匯入文件定義變數名,直接執行
export default
預設匯出模組不能使用{}
物件導出
// 导出一个常量 export const foo = Math.sqrt(2) // 导入 import { foo } from './export' import * as Tools from './export' // 使用 Tools.foo
function myFunction () {} // 导出已经声明的函数 export { myFunction } 导入 import { myFunction } from './export'
// 多个导出 export function cube(x: number): number { return x * x * x } const foo: number = Math.PI * Math.sqrt(2) export { foo } // 导出多个 // 导入 import { cube, foo } from './export'
// 导出函数 export default function () {} export default function fun () {} // 导入 import myFunction from './export' // 可以取任意变量名 // 如果导出默认,定义函数名或者变量名,或者类名 // 导入的时候可以写和原来相同名字,也可以取任意变量名
// 导出类 export default class {} // 导入 import Test from './export'
一個檔案(模組)預設的導出只能有一個, 可以是類,函數, 物件等
匯入整個模組的內容,在目前作用域插入
export變量,包含export檔案中全部匯出綁定(包括
export default
// 导出多个模块 export function query () {} export function update () {} // 导入 import * as API from './export'將整個模組作為附加功能導入, 但不導入模組的匯出成員:
import 'my-module'
以上是javascript中導入導出的實作方式(附程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!