[ JavaScript ] 面向对象 | 模块化

面向对象 class

好似 Java 一般

<script>
        // ES6 面向对象
        class Persion {
            // 构造函数
            constructor(name, age) {
                this.name = name
                this.age = age
            }
            showName() {
                alert(this.name)
            }
            showAge() {
                alert(this.age)
            }
        }

        let persion = new Persion('aowei', 18)
        persion.showAge()
        persion.showName()

        // 继承
        class Worker extends Persion {
            constructor(name, age, job) {
                super(name, age)
                this.job = job
            }
            showJob(){
                alert(this.job)
            }
        }

        let worker = new Worker('aowei', 18, 'student')
        worker.showJob()

    </script>

模块化

  • 模块化的简单示例
    <script>

        // 导出(export)
        // 变量
        export let a = 12
        export const b = 3

        // 导出一堆变量
        let a = 1
        let b = 2
        export {
            a, b
        }

        // 导出函数
        export function show(){

        }

        // 导出class
        export class Persion{
            ...
        }

        // 导出默认成员
        export default {

        }

        // 导入
        // 引入所有成员
        import * as mod from 'xxx' 

        // 引入default成员
        import mod from 'xxx'

        // 引入部分成员
        import { a, b as bb } from 'xxx'

        // 只引入(css)
        import 'xxx'

        // 异步引入
        let promise = import('./xxx')
    </script>

在这里插入图片描述

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页