Heim >Web-Frontend >js-Tutorial >Einführung in die Verwendung von Modularität in ES6 (Codebeispiel)

Einführung in die Verwendung von Modularität in ES6 (Codebeispiel)

不言
不言nach vorne
2018-10-29 14:23:501893Durchsuche

Dieser Artikel bietet Ihnen eine Einführung in die Verwendung der Modularität in ES6 (Codebeispiele). Ich hoffe, dass er für Freunde hilfreich ist.

Modularisierung besteht darin, die Funktion einzeln zu machen, die Funktionen mit geringer Kopplung in ein einzelnes Modul zu extrahieren und jedes Modul eine einzelne Funktion bereitzustellen

Export-Export-Modul

Mehrere Exporte verwenden

module.js

export let A = 123;
export function test() {
    return 'test';
}
export class Hello {
    test() {
        console.log('class');
    }
}

index.js

// 1.基本用法
import {A,test,Hello} from './class/module';
console.log(A, test()); // 123 "test"
// 2.只关心某些内容
import {A} from './class/module';
console.log(A); // 123
// 3.* 和 as。* 表示导入所有,as 表示起一个别名
import * as module1 from './class/module';
console.log(module1.test()); // test

Exportstandard verwenden

module.js

// 推荐写法
let A = 123;
let test = function() {
    console.log('test');
};
class Hello {
    test() {
        console.log('class');
    }
}
// default 给导出的对象不起名字,把权力交给引入方
export default {
    A,
    test,
    Hello
}

index.js

import module2 from './class/module';
console.log(module2.A); // 123

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung von Modularität in ES6 (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:segmentfault.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen