Heim > Web-Frontend > js-Tutorial > Hauptteil

So implementieren Sie Import und Export in Javascript (Code im Anhang)

不言
Freigeben: 2018-08-22 17:56:23
Original
3804 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit der Implementierung von Import und Export in JavaScript (mit Code). Ich hoffe, dass er für Freunde hilfreich ist.

Knotenimport und -export

Eine JavaScript-Datei kann exprots unzählige Variablen, Funktionen und Objekte exportieren, aber require() muss JS nur einmal laden. Nur eine Datei. Daher wird nach der Unsichtbarkeit ein Namespace der obersten Ebene hinzugefügt.

Das Importieren eines leeren Moduls ist ein leeres Objekt, und ein Modul ist ein Objekt.

Exportmethode:

  • exports, die gesamte Formel exportieren

  • module.exports, den Aufgabenteil exportieren

Importmethode:

  • reuire()

// 导出一个变量
exports.a = 10;

// 导入该变量
let b = require('./export')

// 导入的形式 `console.log(b)`输出导入的值:
// { a: 10 }
Nach dem Login kopieren
// 导出一个变量,直接需要变量值使用.
// module.exports = 'name';

// 导入该变量
let b = require('./export')

// 导入的形式 `console.log(b)`输出导入的值:
// name
Nach dem Login kopieren
// 导出对象
module.exports = {
  name1: 123,
  name2: 456
}

// 导入该变量
let b = require('./export')

// 导入的形式 `console.log(b)`输出导入的值:
// { name1: 123, name2: 456 }
Nach dem Login kopieren
// 导出对象
exports.msg = {
  name1: 1,
  name2: 2
}

// 导入该变量
let b = require('./export')

// 导入的形式 `console.log(b)`输出导入的值:
// { msg: { name1: 1, name2: 2 } }
Nach dem Login kopieren
// 导出函数
exports.showMsg = function () {
}

// 导入该变量
// let b = require('./export')

// 导入的形式 `console.log(b)`输出导入的值:
// { showMsg: [Function] }

// 在 引用结果 需要  通过  变量 引用对象 执行
// var b= require();
// b.showMsg();
Nach dem Login kopieren
// 导出函数
module.exports = function () {
}

// 导入该变量
let b = require('./export')

// 导入的形式 `console.log(b)`输出导入的值:
// [Function]

// 引入文件的 变量  直接执行
Nach dem Login kopieren

Exportmethode, die häufig von Funktionen verwendet wird: module.exports

ES6- und TS-Import und -Export

Export: export
Import: import

Hinweis:

  • Exportieren und Importieren, außer bei Verwendung von as, die Variablennamen sind dieselben

  • Exportieren Sie eine Datei, der Standardwert ist ein leeres Objekt

  • Verwenden Sie direkt die Importdatei, um Variablennamen zu definieren und

  • default direkt zum Exportieren auszuführen

  • export defaultDas Standardexportmodul kann keinen {}Objektexport verwenden

// 导出一个常量
export const foo = Math.sqrt(2)

// 导入
import { foo } from './export'
import * as Tools from './export' // 使用 Tools.foo
Nach dem Login kopieren
function myFunction () {}
// 导出已经声明的函数
export { myFunction }

导入
import { myFunction } from './export'
Nach dem Login kopieren
// 多个导出
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'
Nach dem Login kopieren
// 导出函数
export default function () {}
export default function fun () {}

// 导入
import myFunction from './export' // 可以取任意变量名
// 如果导出默认,定义函数名或者变量名,或者类名
// 导入的时候可以写和原来相同名字,也可以取任意变量名
Nach dem Login kopieren
// 导出类
export default class {}

// 导入
import Test from './export'
Nach dem Login kopieren

Eine Datei (Modul) kann nur einen Standardexport haben, der eine Klasse, Funktion, Objekt usw.

Importieren Sie den Inhalt des gesamten Moduls, fügen Sie die Variable export in den aktuellen Bereich ein und schließen Sie alle Exportbindungen in die Datei export ein (einschließlich export default):

// 导出多个模块
export function query () {}
export function update () {}

// 导入
import * as API from './export'
Nach dem Login kopieren

Behandeln Sie das gesamte Modul als zusätzliche Funktion Import, aber importieren Sie nicht die exportierten Mitglieder des Moduls:

import 'my-module'
Nach dem Login kopieren

Verwandte Empfehlungen:

Excel-Import- und Exportprobleme mit Import und Export

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Import und Export in Javascript (Code im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!