组合关系和聚合关系?
组合关系是, 单位的意义依赖于其他单位,或者整体. 缺少了这个单位,整体无法成为完成的整体, 或者,没了这个整体,单位没有独立的意义?
聚合关系是, 单位有自己独立的意义, 没有整体,没有其他单位,同样是有意义的?
无论是组合关系还是聚合关系, 应该都是针对单位和单位之间的关系?
简书确实不太适合放代码, 回头还是要github.. 不过我们的主要意义在于笔记. 没别的大概理解了之后, 自己再抄写一遍.加深印象,加深理解.
案例代码 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewprot" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>dddd</title>
<style type="text/css">
</style>
</head>
<body>
<!--1. css reset-->
<!--2. 抽取公共方法 根据经验 根据我实现树立好的类的关系-->
<script src="commen.js" type="text/javascript" charset="utf-8"></script>
<script src="initVar.js" type="text/javascript" charset="utf-8"></script>
<script src="SquareFactoty.js" type="text/javascript" charset="utf-8"></script>
<script src="Ground.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
</script>
</body>
</html>
common.js
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
var tool = {
inherit : function (target,origin) {// 继承
// 原型的继承 圣杯模式
var temp = function () {};
temp.prototype = origin.prototype;
target.prototype = new temp();
target.prototype.constructor = target;
target.prototype.uper = origin;
},
extends : function (origin) {//另一种继承
//继承函数, 实例又相同, 很巧妙..
var result = function () {
origin.apply(this,arguments);// 继承实例
};
this.inherit(result, origin);// 继承原型
return result;
},
single : function (origin) {// 单例 + 实例继承 + 原型继承
var singleResult = (function () {
var instance;
return function () {
if (typeof instance == 'object') {
return instance;
}
origin && origin.apply(this,arguments);// 继承实例
instance = this;
return instance;
}
})();
origin && this.inherit(singleResult,origin);// 继承原型
return singleResult;
}
}
就这3个继承,我直接佩服的五体投地.真的是佩服
initVar.js 用来定义一些主要的变量?
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
// 场景 == 广场 宽度系数 高度系数
var XLEN = 30;
var YLEN = 30;
// 大写 : 基本不变的量. 游戏运行过程中.
// 方块 宽高
var SQUAREWIDTH = 20;
var SQUAREHEIGHT = 20;
// 广场 位置
var BASE_X_POINT = 200;
var BASE_Y_POINT = 100;
// 定义基类
function Square (x, y, width, height,viewContent) {// 传一个dom元素,用来渲染
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.viewContent = viewContent || document.createElement('div');
}
Square.prototype.touch = function () {
console.log(0);
}
// 定义子类
var Floor = tool.extends(Square);
var Stone = tool.extends(Square);
var Food = tool.single(Square);
var SnakeHead = tool.single(Square);
var SnakeBody = tool.extends(Square);
var Ground = tool.single(Square);
var Game = tool.single();
Ground.js
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
var ground = new Ground(BASE_X_POINT,BASE_Y_POINT,XLEN * SQUAREWIDTH,YLEN * SQUAREHEIGHT);
ground.init = function (){
// 渲染广场
this.viewContent.style.position = "absolute";
this.viewContent.style.backgroundColor = '#0ff';
this.viewContent.style.left = this.x + 'px';
this.viewContent.style.top = this.y + 'px';
this.viewContent.style.width = this.width + 'px';
this.viewContent.style.height = this.height + 'px';
document.body.appendChild(this.viewContent);
//存储 管理 广场中所有方块对象
// 二维数组 // x,y坐标本身是重要的参数
this.SquareTable = [];
for(var i = 0; i < YLEN;i++) {// 生成了二维数组.
this.SquareTable[i] = new Array(XLEN);
for(var j = 0; j < XLEN; j++) {// 创建方块.
// 生成墙壁 y = 0 || y = YLEN - 1 || x = 0 || x = XLEN -1
if( j == 0 || j == XLEN - 1 || i == 0 || i == YLEN -1) {
// 创建石头
var newSqaure = SquareFactory.create('Stone', j, i, 'black');
} else {
//创建地板
var newSqaure = SquareFactory.create('Floor', j, i, 'orange');
}
this.SquareTable[i][j] = newSqaure;
this.viewContent.appendChild(newSqaure.viewContent);
}
}
}
ground.init();
SquareFactory.js
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
// 方块工厂 // 抽象工厂模式
function SquareFactory () {
}
SquareFactory.create = function (type,x,y,color) {
// 先判断有没有流水线
if(typeof SquareFactory.prototype[type] == "undefined"){
throw "sorry";
}
if (SquareFactory.prototype[type].prototype.__proto__ != SquareFactory.prototype) {
SquareFactory.prototype[type].prototype = new SquareFactory();
}
var newSquare = new SquareFactory.prototype[type](x,y,color);
return newSquare;
}
SquareFactory.prototype.init = function (square, color) {// 上背景颜色
var sv = square.viewContent;
sv.style.position = "absolute";
sv.style.width = square.width + 'px';
sv.style.height = square.height + 'px';
sv.style.left = square.x * SQUAREWIDTH + 'px';
sv.style.top = square.y * SQUAREHEIGHT + 'px';
sv.style.backgroundColor = color;
}
SquareFactory.prototype.Floor = function (x,y,color) {
var floor = new Floor(x,y,SQUAREWIDTH,SQUAREHEIGHT);
this.init(floor, color);
return floor;
}
SquareFactory.prototype.Stone = function (x,y,color) {
var stone = new Stone(x,y,SQUAREWIDTH,SQUAREHEIGHT);
this.init(stone, color);
return stone;
}
SquareFactory.prototype.Food = function (x,y,color) {
var food = new Food(x,y,SQUAREWIDTH,SQUAREHEIGHT);
this.init(food, color);
return food;
}
SquareFactory.prototype.SnakeHead= function (x,y,color) {
var snakehead = new Snakehead(x,y,SQUAREWIDTH,SQUAREHEIGHT);
this.init(snakehead, color);
return snakehead;
}
SquareFactory.prototype.SnakeBody= function (x,y,color) {
var snakebody = new SnakeBody(x,y,SQUAREWIDTH,SQUAREHEIGHT);
this.init(snakebody, color);
return snakebody;
}
