-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
177 lines (174 loc) · 4.94 KB
/
index.html
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Coffee Or Tea</title>
</head>
<body>
<h2>泡一杯咖啡</h2>
<div class="">
把水煮沸<br />
把沸水冲泡咖啡<br />
把咖啡倒进杯子<br />
加糖和牛奶<br />
</div>
<h2>泡杯茶</h2>
<div class="">
把水煮沸<br />
把沸水浸泡茶叶<br />
把茶水倒进杯子<br />
加柠檬<br />
</div>
<h2>泡饮品</h2>
<p>
把水煮沸<br />
把沸水冲泡饮料<br />
把饮料倒进杯子<br />
加调料<br />
</p>
<script type="text/javascript">
//抽象类改为配置类
var Beverage = function(param) {
var boilWater = function() {
console.log('把水煮沸');
}
// var brew = function() {
// console.log('必须传递brew方法');
// }
var brew = param.brew || function() {
throw new Error('必须传递brew方法')
}
var pourInCup = param.pourInCup || function() {
throw new Error('必须传递pourInCup方法')
}
var pourInCup = param.addCondiments || function() {
throw new Error('必须传递addCondiments方法')
}
var F = function() {};
F.prototype.init = function() {
boilWater();
brew();
pourInCup();
addCondiments();
};
return F;
}
var Coffee = Beverage({
brew: function() {
console.log('沸水泡咖啡');
},
pourInCup: function() {
console.log('把咖啡倒进杯子');
},
addCondiments: function() {
console.log('加糖和牛奶');
}
})
var coffee = new Coffee();
coffee.init();
// var Coffee = function() {}
// Coffee.prototype.boilWater = function() {
// console.log('水煮开了');
// }
// Coffee.prototype.brewCoffeeGriends = function() {
// console.log('用沸水冲泡咖啡');
// }
// Coffee.prototype.pourInCup = function() {
// console.log('把咖啡倒进杯子');
// }
// Coffee.prototype.addSugarAndMilk = function() {
// console.log('加糖和牛奶');
// }
// Coffee.prototype.init = function() {
// this.boilWater();
// this.brewCoffeeGriends();
// this.pourInCup();
// this.addSugarAndMilk();
// }
// var coffee = new Coffee();
// coffee.init();
//
// class Tea {
// constructor() {
//
// }
// boilWater() {
// console.log('水煮开了');
// }
// steepTeaBag() {
// console.log('把沸水浸泡茶叶');
// }
// pourInCup() {
// console.log('把茶水倒进杯子');
// }
// addLemon() {
// console.log('加柠檬');
// }
// init() {
// this.boilWater();
// this.steepTeaBag();
// this.pourInCup();
// this.addLemon();
// }
// }
// var tea = new Tea();
// tea.init();
// 继承 override
// 共同点 基类 分离它的差异点 子类的override
// 设计代码
// 抽象类 abstract class 不用实例化 而是子类实现的抽象
// var Beverage = function() {}
// Beverage.prototype.boilWater = function() {
// console.log('水煮开了');
// }
// Beverage.prototype.brew = function() {
//
// }
// Beverage.prototype.pourInCup = function() {
//
// }
// Beverage.prototype.addCondiments = function() {
//
// }
// Beverage.prototype.init = function() {
// this.boilWater();
// this.brew();
// this.pourInCup();
// this.addCondiments();
// }
// // 泡饮品的流程 模版模式 抽象类 抽象方法在子类中实现
// var Coffee = function() {
// // 将父类的构造方法拿来执行一下
// Beverage.apply(this, arguments);
// //this上才会有对象的属性
// }
// // js的继承基于原型链的继承
// // 对象的方法查找是沿着原型链一直跑的
// // 查找自己的方法和属性
// // 父子孙 java等大型语法的继承 血统
// // Object方法 其他对象都有
// //
// // coffee.methodA
// // js查找方法 会沿着原型链一直去找
// // 长出新的链分支
// // Coffee.prototype = new Beverage();
// // var coffee = new Coffee();
// // coffee.init();
// var Tea = function() {}
// Tea.prototype = new Beverage();
// Tea.prototype.brew = function() {
// console.log('用沸水浸泡茶叶');
// }
// Tea.prototype.pourInCup = function() {
// console.log('把茶倒进杯子');
// }
// Tea.prototype.addCondiments = function() {
// console.log('加柠檬');
// }
// var tea = new Tea();
// tea.init();
</script>
</body>
</html>