面向对象和模块化
moyanfaker 2020-12-10 模块化js
# 面向对象和模块化
# 一、面向对象
# 封装?
# ES5 面对对象---假的
<script>
//以函数的形式来写对象
//没有专门的类声明方法
function Person(name, age) {
//1.既是构造函数,又是类
this.name = name;
this.age = age;
}
//2.添加方法 方法独立在类之外
Person.prototype.showName = function () {
alert(this.name);
};
Person.prototype.showAge = function () {
alert(this.age);
};
// let p = new Person("blue", 18);
// p.showAge();
// p.showName();
// 3.没有专门的继承方法
function Worker(name, age, job) {
//4.从父类继承要靠骗
Person.call(this, name, age);
this.job = job;
}
Worker.prototype = new Person();//5.没有专门继承父类方法的方式
Worker.prototype.constructor = Worker;
Worker.prototype.showJob = function () {
console.log(this.job);
};
let w = new Worker("blue", 18, "随便");
w.showAge();
w.showName();
w.showJob();
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
# ES6 面向对象
# 提供了 4 个新的关键字,用于解决上面的问题
- class:类声明
- constructor:构造函数/构造器
- extends:继承
- super:超类/父类
<script>
//1.有单独的类声明 构造函数声明 统一化
class Person {
// 2.类和构造函数区分开来
constructor(name, age) {
this.age = age;
this.name = name;
}
showName() {//3.方法在类的内部
console.log(this.name);
}
showAge() {
console.log(this.age);
}
}
// 4.有专门的继承关键字
class Worker extends Person {
constructor(name, age, job) {
super(name, age);//5.专门的父级调用
this.job = job;
}
showJob() {//6.无需通过prototype继承
console.log(this.job);
}
}
let w = new Worker("green", 19, "随便");
w.showName();
w.showAge();
w.showJob();
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
# 二、ES6 模块系统
# 使用 ES6 模块
//mod1.js ---定义模块
export let a = 12;
export let b = 6;
export let c = 8;
1
2
3
4
2
3
4
//index.js---使用模块
import * as mod1 from "./mod1";
console.log(mod1.a, mod1.b, mod1.c);
1
2
3
2
3
//webpack.config.js---编译配置
const path = require("path");
module.exports = {
mode: "development",
entry: "./js/index.js",
output: {
path: path.resolve(__dirname, "build"),
filename: "bundle.js",
},
};
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 详解模块语法
# 引入模块(import)
//引入整个模块
import * as name from "file";
//引入成员
import {export1,export2 as alias2,[...]} from "file";
//引入默认成员
import name from "file";
//运行模块代码,但不引入任何成员
import "file";
//异步引入
let promise = import("file");
注:file开头一定要有./
如:
let promise = import("./mod1");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 声明模块及导出(export)
//变量
export let a = 12;
export const a = 12;
//一堆
let a,b,c=...;
export{a,b,c...};
//导出函数
export function show(){
...
}
//导出class
export class Person{
}
默认成员
export default
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25