Conocí la importación hace mucho tiempo. La importación en C# es la función de introducir una clase o un espacio de nombres. js siempre ha introducido el archivo js a través del atributo src de la etiqueta del script de la página. Pero ahora hay más y más desarrollo modular de js, y se necesitan diferentes clases o variables para cooperar entre los componentes. No debe introducirse a nivel de página como antes. Es demasiado pesado y la cooperación ligera es muy feliz. se generan exportaciones e importaciones.
1. exportar : exportar, puede exportar clases, variables y funciones, puede exportarlas directamente cuando están definidas, o puede exportarlas después de que estén definidas. Levantar:
/*****
* 工程师类,直接使用export进入导出
*/
export class Engineer{
/***
* 构造函数
*/
constructor(name){
this.name = name;
}
/***
* 名称
*/
name="";
/****
* 不能使用let、const、var 等修饰符
*/
work="";
/***
* 心态好，永远18岁
*/
age = 18;
/***
* 使用语言列表
*/
languageArr=[];
/****
* 介绍我的名字,不能在前面加function
*/
introduce(){
console.log(`myName is:${
this.name}`);
console.log(`myWork is:${
this.work}`);
console.log(`age is:${
this.age}`);
}
/**
* 写代码
*
*/
writeCode(){
console.log(`code language is:${
this.languageArr}`);
}
}
WebEngineer debe heredar de Engineer y debe presentar Engineer, por lo que el método de escritura es:
//导入Engineer 类
import {
Engineer} from "../es6/export.js"
//使用 new 来创建一个实例对象
//let engineer = new Engineer("爱钱的大笨蛋");
//engineer.introduce();//调用实体方法（函数/行为）
export class WebEngineer extends Engineer{
/***
* 构造函数，一创建的时候便可以设置变量值
*/
constructor(name,languageArr){
super(name);//父类的构造函数调用
this.languageArr = languageArr;//通过传进去的值来初始化我的变量（属性）
this.work = "我的工作主要是做前端开发工作";//直接初始化我的变量（属性）
}
dream(){
console.log("我是一个喜欢做梦想的人，想象着有自己的大帝国，乌拉")
}
}
La referencia en la página es diferente al tipo tradicional, la introducción de la página es la siguiente:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Syntax of ES 6</title>
</head>
<body>
<!--<script type="text/javascript" src="es6.js"></script>-->
<!--<script type="text/javascript" src="extendsTest.js"></script>-->
<!--<script type="text/javascript" src="es5.js"></script>-->
<!--引入WebEngineer-->
<script type="module">
import {
WebEngineer} from '../es6/import.js'
let webEngineer = new WebEngineer("前端开发",["css","js","html"]);
webEngineer.introduce();//自我介绍，此方法继承于Engineer类
webEngineer.writeCode();//写代码，此方法继承于Engineer类
webEngineer.dream();//这个是我自己的方法，我扩展的方法
</script>
</body>
</html>
Los resultados obtenidos son los siguientes:
2. importar : importar, puede importar clases, variables, funciones, importar una clase (función, variable) o varias clases (función, variable) desde un archivo. levantar:
//导入Engineer 类
import {
Engineer} from "../es6/export.js"
/****
* 完成继承后导出给页面使用
***/
export class WebEngineer extends Engineer{
/***
* 构造函数，一创建的时候便可以设置变量值
*/
constructor(name,languageArr){
super(name);//父类的构造函数调用
this.languageArr = languageArr;//通过传进去的值来初始化我的变量（属性）
this.work = "我的工作主要是做前端开发工作";//直接初始化我的变量（属性）
}
dream(){
console.log("我是一个喜欢做梦想的人，想象着有自己的大帝国，乌拉")
}
}
Bueno, se ha introducido un proceso completo, introduzcamos varias exportaciones y varias importaciones a la vez.
Sintaxis de exportación:
/***
* 导出类
*/
export class MyClass{
}
/***
* 导出函数
*/
export function exportF(){
console.log("export function");
}
/***
* 导出变量
* @type {string}
*/
export var name="爱钱的大傻憨";
/**
* 先定义再导出
*/
export function doSomeThings(a,b) {
console.log("export doSomeThings");
}
/***
* 默认导出
*/
export default function(){
console.log("export default function");
}
importar
//导入Engineer 类
import {
Engineer,MyClass,exportF,name,doSomeThings} from "../es6/export.js"
El contenido de importación y exportación es relativamente simple y no hay muchas dificultades.Es un proceso de exportación e importación. Sin embargo, las especificaciones del mecanismo para importar y exportar actualmente incluyen CommonJS, AMD, CMD y es6. Introducido en el próximo capítulo.