Skip to content

Commit df83d0e

Browse files
author
shijh
committed
add
1 parent a1a4e64 commit df83d0e

File tree

3 files changed

+258
-0
lines changed

3 files changed

+258
-0
lines changed

‎设计模式学习/结构型设计模式/组合模式/1.jpg

138 KB
Loading

‎设计模式学习/结构型设计模式/组合模式/container.js

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
/**
2+
* 寄生式继承,继承原型
3+
* 传参subClass 子类
4+
* 传参superClass 父类
5+
*/
6+
function inheritPrototype(subClass, superClass) {
7+
var p = inheritObject(superClass.prototype);
8+
p.constructor = subClass;
9+
subClass.prototype = p;
10+
}
11+
12+
// 原型式继承
13+
function inheritObject(o) {
14+
function F(){}
15+
F.prototype = o;
16+
return new F();
17+
}
18+
19+
var News = function() {
20+
this.children = [];
21+
this.element = null;
22+
};
23+
24+
News.prototype = {
25+
init: function() {
26+
throw new Error("请填写你的方法");
27+
},
28+
add: function() {
29+
throw new Error("请填写你的方法");
30+
},
31+
getElement: function() {
32+
throw new Error("请填写你的方法");
33+
}
34+
};
35+
36+
var Container = function(id, parent) {
37+
News.call(this);
38+
39+
this.id = id;
40+
41+
this.parent = parent;
42+
43+
this.init();
44+
};
45+
46+
inheritPrototype(Container, News);
47+
48+
Container.prototype.init = function() {
49+
this.element = document.createElement('ul');
50+
this.element.id = this.id;
51+
this.element.className = 'new-container';
52+
};
53+
54+
Container.prototype.add = function(child) {
55+
this.children.push(child);
56+
this.element.appendChild(child.getElement());
57+
return this;
58+
};
59+
60+
Container.prototype.getElement = function() {
61+
return this.element;
62+
};
63+
64+
Container.prototype.show = function() {
65+
this.parent.appendChild(this.element);
66+
};
67+
68+
69+
70+
var Item = function(className) {
71+
News.call(this);
72+
this.className = className || '';
73+
this.init();
74+
};
75+
76+
inheritPrototype(Item, News);
77+
78+
Item.prototype.init = function() {
79+
this.element = document.createElement('li');
80+
this.element.className = this.className;
81+
};
82+
83+
Item.prototype.add = function(child) {
84+
this.children.push(child);
85+
this.element.appendChild(child.getElement());
86+
return this;
87+
};
88+
89+
Item.prototype.getElement = function() {
90+
return this.element;
91+
};
92+
93+
var NewsGroup = function(className) {
94+
News.call(this);
95+
this.className = className || '';
96+
this.init();
97+
};
98+
99+
inheritPrototype(NewsGroup, News);
100+
101+
NewsGroup.prototype.init = function() {
102+
this.element = document.createElement('div');
103+
this.element.className = this.className;
104+
};
105+
106+
NewsGroup.prototype.add = function(child) {
107+
this.children.push(child);
108+
this.element.appendChild(child.getElement());
109+
return this;
110+
};
111+
112+
NewsGroup.prototype.getElement = function() {
113+
return this.element;
114+
};
115+
116+
var ImageNews = function(url, href, className) {
117+
News.call(this);
118+
this.url = url || '';
119+
this.href = href || '#';
120+
this.className = className || 'normal';
121+
this.init();
122+
};
123+
124+
inheritPrototype(ImageNews, News);
125+
126+
ImageNews.prototype.init = function() {
127+
this.element = document.createElement('a');
128+
var img = new Image();
129+
img.src = this.url;
130+
this.element.appendChild(img);
131+
this.element.className = 'image-news ' + this.className;
132+
this.element.href = this.href;
133+
};
134+
135+
ImageNews.prototype.add = function() {};
136+
137+
ImageNews.prototype.getElement = function() {
138+
return this.element;
139+
};
140+
141+
var IconNews = function(text, href, type) {
142+
News.call(this);
143+
this.text = text || '';
144+
this.href = href || '#';
145+
this.type = type || 'video';
146+
this.init();
147+
};
148+
149+
inheritPrototype(IconNews, News);
150+
151+
IconNews.prototype.init = function() {
152+
this.element = document.createElement('a');
153+
this.element.innerHTML = this.text;
154+
this.element.href = this.href;
155+
this.element.className = 'icon ' + this.type;
156+
};
157+
158+
IconNews.prototype.add = function() {};
159+
160+
IconNews.prototype.getElement = function() {
161+
return this.element;
162+
};
163+
164+
var EasyNews = function(text, href) {
165+
News.call(this);
166+
this.text = text || '';
167+
this.href = href || '#';
168+
this.init();
169+
};
170+
171+
inheritPrototype(EasyNews, News);
172+
173+
EasyNews.prototype.init = function() {
174+
this.element = document.createElement('a');
175+
this.element.innerHTML = this.text;
176+
this.element.href = this.href;
177+
this.element.className = 'text';
178+
};
179+
180+
EasyNews.prototype.add = function() {};
181+
182+
EasyNews.prototype.getElement = function() {
183+
return this.element;
184+
};
185+
186+
var TypeNews = function(text, href, type, pos) {
187+
News.call(this);
188+
this.text = text || '';
189+
this.href = href || '#';
190+
this.type = type || '';
191+
this.pos = pos || 'left';
192+
this.init();
193+
}
194+
195+
TypeNews.prototype.init = function() {
196+
this.element = document.createElement('a');
197+
if(this.pos === 'left') {
198+
this.element.innerHTML = '[' + this.type + '] ' + this.text;
199+
}
200+
else {
201+
this.element.innerHTML = this.text + ' [' + this.type + ']';
202+
}
203+
this.element.href = this.href;
204+
this.element.className = 'text';
205+
};
206+
207+
TypeNews.prototype.add = function() {};
208+
209+
TypeNews.prototype.getElement = function() {
210+
return this.element;
211+
};

‎设计模式学习/结构型设计模式/组合模式/index.html

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Document</title>
6+
<style>
7+
.small img{
8+
width: 20px;
9+
height: 20px;
10+
}
11+
</style>
12+
</head>
13+
<body>
14+
15+
<script src="./container.js"></script>
16+
<script>
17+
var new1 = new Container('new', document.body);
18+
new1.add(
19+
new Item('normal').add(
20+
new IconNews('梅西没拿金球也伟大', '#', 'video')
21+
)
22+
).add(
23+
new Item('normal').add(
24+
new IconNews('保护强球强过用意明显', '#', 'live')
25+
)
26+
).add(
27+
new Item('normal').add(
28+
new NewsGroup('has-img').add(
29+
new ImageNews('./1.jpg', '#', 'small')
30+
).add(
31+
new EasyNews('从240斤胖子成功变型男', '#')
32+
).add(
33+
new EasyNews('五大雷人跑步机', '#')
34+
)
35+
)
36+
).add(
37+
new Item('normal').add(
38+
new TypeNews('但是开发考虑是否觉得jfk', '#', 'CBA', 'left')
39+
)
40+
).add(
41+
new Item('normal').add(
42+
new TypeNews('火炮标6山上对方即可垃圾及', '#', 'CBA', 'right')
43+
)
44+
).show()
45+
</script>
46+
</body>
47+
</html>

0 commit comments

Comments
 (0)