个人学习-前端相关（3）:ES6对象的创建语法糖、ES6模块化

最新推荐文章于 2024-07-24 23:00:08 发布

Slahser123456

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量268

点赞数 5

文章标签：前端学习 es6

本文链接：https://blog.csdn.net/dopapapa/article/details/138168145

版权

ES6对象的创建

ES6中新增了对象创建的语法糖，支持class、extends、constructor等关键字，让ES6语法和面向对象的语法更接近。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
  <script>
    class Person {
        //属性
        name
        fn
        age
        //私有属性
        #gender
        //getter setter
        get name() {
            return this.name
        }
        set name(n) {
            this.name = n
        }
        get firstname() {
            return this.fn
        }
        set firstname(name) {
            this.fn = name
        }
        get gender() {
            return this.#gender
        }
        //实例方法
        eat(food) {
            //普通字符串
            console.log(this.age + "岁的" + this.name + "正在吃" + food)
            //ES6模板字符串
            console.log(`${this.age}岁的${this.name}正在吃${food}`)

        }
        //静态方法
        static sum(a, b) {
            return a + b
        }
        //构造器
        constructor(name, age, gender) {
            this.name = name
            this.age = age
            this.#gender = gender
        }

    }

    let person = new Person("张三", 10, 'boy')
    console.log(person)
    person.firstname = 'zhang'   //属性不存在，通过set方法赋值
    console.log(person.firstname)  //属性不存在，通过get方法获取值
    person.eat('橘子')
    console.log(Person.sum(1, 2))   //3

    //访问私有属性
    // console.log(person.#gender)   //报错
    console.log(person.gender)   // boy


    class Student extends Person {
        score
        study() {
            console.log(`${this.age}岁的${this.name}正在努力学习，考试分数是${this.score}`)
        }
        constructor(name, age, score) {
            super(name, age)
            this.score = score
        }
    }
    let student = new Student('rencai', 8, 100)
    student.study()
</script>

<body>

</body>

</html>

ES6模块化

模块化是一种组织和管理前端代码的方式，将代码拆分成小的模块单元，使得代码更易于维护、扩展和复用。它包括了定义、导出、导入以及管理模块的方法和规范。前端模块化的主要优势如下:

提高代码可维护性:通过将代码拆分为小的模块单元，使得代码结构更为清晰，可读性更高，便于开发者阅读和维护。
提高代码可复用性:通过将重复使用的代码变成可复用的模块，减少代码重复率，降低开发成本。
提高代码可扩展性:通过模块化来实现代码的松耦合，便于更改和替换模块，从而方便地扩展功能。

目前，前端横块化有多种规范和实现，包括 CommonJS、AMD 和 ES6 模块化。ES6 模块化是 JavaScript 语言的模块标准，使用 import和expot 关键字来实现模块的导入和导出。现在，大部分浏览器都已经原生支持 ES6 模块化，因此它成为了最为广泛使用的前端模块化标准

ES6模块化的几种暴露和导入方式
1. 分别导出
  - import * as XXX from ’./xxxx.js‘
  - export 表示需要导出的属性、方法、类
```
// moduleA.js
export const variableName = 'value';


// moduleB.js
import { variableName } from './moduleA';
console.log(variableName); // 输出 "value"
```
1. 统一导出
  - export{xx,xxx,xxxx} 多个export改为一个 export{}
  - import使用解构表达式 : import {XXX,XXXX,XXXXXX} from './xxxx.js'
2. 默认导出
  - export default methodname 默认只导出一个对象(属性、方法、类)
  - import * as xxx from './xxx.js' 使用方法xxx.default()
  - import default as xxx(也可直接省略 default as) from ’./xxx.js‘ 使用方法 xxx()
```
// moduleA.js
export class ClassName {
  // ...
}



// moduleB.js
import { ClassName } from './moduleA';
const instance = new ClassName(); // 创建类的实例
```

Slahser123456

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
个人学习-前端相关（3）:ES6对象的创建语法糖、ES6模块化

ES6 模块化是 JavaScript 语言的模块标准，使用 import和expot 关键字来实现模块的导入和导出。模块化是一种组织和管理前端代码的方式，将代码拆分成小的模块单元，使得代码更易于维护、扩展和复用。它包括了定义、导出、导入以及管理模块的方法和规范。ES6中新增了对象创建的语法糖，支持class、extends、constructor等关键字，让ES6语法和面向对象的语法更接近。提高代码可维护性:通过将代码拆分为小的模块单元，使得代码结构更为清晰，可读性更高，便于开发者阅读和维护。
复制链接

扫一扫