一、前言

最近要使用 Layui mini 单页版进行后台管理项目的前端页面的开发。完完全全使用 Layui 的模块化开发项目还是比较伤脑筋，所以我决定对 Layui mini 单页版进行自己的封装。封装需要了解 JS 相关的语法和知识点，该篇文章就是对封装过程中 JS 知识点的记录。
技术支持：https://www.runoob.com/js

二、JS 的类

// 类是用于创建对象的模板
// 下面代码中的 name 和 age 是 Animal 的属性（JS 属性的
// 写法和 Java 不同）

class Animal {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
}

创建对象时会自动调用构造函数方法 constructor()

class Animal {
    constructor(birthYear) {
        this.birthYear = birthYear
    }

    /**
     * 计算年龄的方法
     */
    calculateAge(year) {
        return new Date().getFullYear() - year
    }
}

三、JS 类继承

与 Java 一样，JS 类继承使用 extends 关键字。
super() 方法用于调用父类的构造函数。

继承可实现代码的复用。

JS 的 Getter 和 Setter

JS 的 Getter 和 Setter 方法通过 get 和 set 关键字进行定义。

class Animal {
    constructor(name, age) {
        this._name = name // 下划线开头表示是对象的内部属性
        this._age = age
    }

    get getAge() {
        return this._age
    }

    set setName(name) {
        this._name = name
    }
}

        let dog = new Animal('FlowerDog', 3)
        
        console.log('dogName: ' + dog.name)
        
        // 设置 dog 对象的属性值
        dog.setName = 'GoodDog'

        console.log('dogName: ' + dog.name)
        
        // 即使 getter 是一个方法，要获取属性值时也不要使用括号
        console.log('dogAge: ' + dog.getAge)

使用 Setter 的方式和设置属性值的方式一样。虽然 Setter 是一个方法，但不需要带括号（JS 的 Setter 方法的使用和 Java 的 Setter 方法的使用不一样。）

在 Setter 方法中，一切的 return 都是无效的。

四、 JS 的 静态方法

静态方法（类方法）：使用 static 关键字修饰的方法。它属于类而不属于对象。在实例化对象之前可通过 类名.方法名 调用静态方法。

静态方法不能在对象上调用，只能在类中调用。

五、封装过程的小知识点

(1) jQuery 的 extend() 方法

作用：可将一个或多个对象的内容合并到目标对象。

注意：
① 若只为 $.extend() 指定了一个参数，则意味着参数 target 被省略。此时，target 就是 jQuery对象本身。通过此方式，可为全局对象 jQuery 添加新的函数。
② 若多个对象具有相同的属性，则后者会覆盖前者的属性值。

六、解决 IDEA 遇到 java 文件有橘色图案的解决办法

感谢大哥的文章。
https://blog.csdn.net/wztmds/article/details/124435140