es6 引入外部 js

转载

云端梦想实现家 2024-10-15 06:38:59

文章标签 es6 引入外部 js js javascript 字符串静态方法 文章分类 架构后端开发

基本用法

模块导入导出各种类型的变量，如字符串，数值，函数，类

导出的函数声明与类声明必须要有名称（export default 命令另外考虑）
不仅能导出声明还能导出引用（例如函数）

export const str = '字符串'
export const num = 123
export const obj = { name: 'Tom', age: 24 }
export const arr = [1, 2, 3]
export const set = new Set([4, 5, 6])
export const map = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
export function add(a, b) { return a + b }
export class Computer {
    // 静态方法
    static sum(list) {
        list.reduce((a, b) => a + b)
    }

    constructor(a) {
        this.a = a
        // 实例属性
        this.cache = []
        // 实例方法
        this.add = (a, b) => {
            return a + b
        }
        // 默认返回实例对象 this
    }
    // getter
    get a() {
        console.log('getter');
        return this._a;
    }
    // setter
    set a(a) {
        console.log('setter');
        this._a = a;
    }
    // 原型方法
    push(val) {
        this.cache.push(val + '哈哈哈')
    }

    unshift(val) {
        this.cache.unshift(val + '嘻嘻嘻')
    }

}
export class Child extends Computer{
    constructor(){
        super()// super必须调用。且出现在this前面
        this.age = 30
        super.push()// super 作为对象，在普通方法中，指向父类的原型对象
    }

    static sum(){
        // 调用父类静态方法
        return super.sum([4,8,36])+20;// super 作为对象，在静态方法中，指向父类
    }
}

import 命令的特点

只读属性：不允许在加载模块的脚本里面，改写接口的引用指向；即可以改写 import 变量类型为对象的属性值，不能改写 import 变量类型为基本类型的值。

import {str} from "./xxx.js"
str = 'new value'; // error,不允许修改基本类型值
 
import {obj} from "./xxx.js"
a.foo = "hello"; // a = { name: 'Tom', age: 24 , foo : 'hello' }// 允许修改对象属性值

单例模式：多次重复执行同一句 import 语句，那么只会执行一次，而不会执行多次。import 同一模块，声明不同接口引用，会声明对应变量，但只执行一次 import 。

import { str } "./xxx.js";
import { str } "./xxx.js";
// 相当于 import { str } "./xxx.js";
 
import { str } from "./xxx.js";
import { num } from "./xxx.js";
// 相当于 import { str, num } from "./xxx.js";

export default 命令

在一个文件或模块中，export、import 可以有多个，export default 仅有一个。
export default 中的 default 是对应的导出接口变量。
通过 export 方式导出，在导入时要加{ }，export default 则不需要。
export default 向外暴露的成员，可以使用任意变量来接收。

// a.js
export const str = 'string'
const dog = 'Tom'
export default dog 
// --------------------------------
// b.js
import {str} from './a.js'
import dog from './a.js'// 不需要括号
// import cat from './a.js'// 使用任意变量接收dog都行
console.log(str , dog)

复合使用

export { str, num} from "./xxx.js";
 // 约等于下面两段语句
import { str, num} from "./xxx.js";
export { str, num};

// 改名----------------------------------------
// 普通改名
export { str as foo} from "./xxx.js";
// 将 str 转导成 default
export { str as default } from "./xxx.js";
// 将 default 转导成 foo
export { default as foo } from "./xxx.js";


// 输出所有-----------------------------------------
export * from "./xxx.js";