uml類圖
組合關(guān)系和聚合關(guān)系?
組合關(guān)系是,
單位的意義依賴于其他單位,或者整體.
缺少了這個單位,整體無法成為完成的整體,
或者,沒了這個整體,單位沒有獨立的意義?
聚合關(guān)系是,
單位有自己獨立的意義,
沒有整體,沒有其他單位,同樣是有意義的?
無論是組合關(guān)系還是聚合關(guān)系, 應該都是針對單位和單位之間的關(guān)系?
簡書確實不太適合放代碼,
回頭還是要github..
不過我們的主要意義在于筆記.
沒別的大概理解了之后,
自己再抄寫一遍.加深印象,加深理解.
案例代碼
index.html
<!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. 抽取公共方法 根據(jù)經(jīng)驗 根據(jù)我實現(xiàn)樹立好的類的關(guān)系-->
<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
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) {//另一種繼承
//繼承函數(shù), 實例又相同, 很巧妙..
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 用來定義一些主要的變量?
// 場景 == 廣場 寬度系數(shù) 高度系數(shù)
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
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);
//存儲 管理 廣場中所有方塊對象
// 二維數(shù)組 // x,y坐標本身是重要的參數(shù)
this.SquareTable = [];
for(var i = 0; i < YLEN;i++) {// 生成了二維數(shù)組.
this.SquareTable[i] = new Array(XLEN);
for(var j = 0; j < XLEN; j++) {// 創(chuàng)建方塊.
// 生成墻壁 y = 0 || y = YLEN - 1 || x = 0 || x = XLEN -1
if( j == 0 || j == XLEN - 1 || i == 0 || i == YLEN -1) {
// 創(chuàng)建石頭
var newSqaure = SquareFactory.create('Stone', j, i, 'black');
} else {
//創(chuàng)建地板
var newSqaure = SquareFactory.create('Floor', j, i, 'orange');
}
this.SquareTable[i][j] = newSqaure;
this.viewContent.appendChild(newSqaure.viewContent);
}
}
}
ground.init();
SquareFactory.js
// 方塊工廠 // 抽象工廠模式
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;
}
