1 前言
本文是做一款游戏的心路历程。（不完全是教程）
代码部署地址 部署的版本不一定是最新的。
其实已经打算放弃了，但还是再坚持一下吧。
我们本来打算新增一些功能，但是新增功能的时候举步维艰，可能是时候把代码整理整理一下了。
2 思考
我们注意到我们之前的前端代码，我们把所有的东西都揉成一团，这对我们后面新增功能造成极大的不便。
我们重新思考一下我们的前端代码，我们至少可以把这个分成3层：
- 通信：这一层用来处理webSocket的通信，后面如果我们改变数据的交互格式，我们只要在这一层上动土即可。
- 逻辑处理： 用来处理各种逻辑与事件。
- 图像： 用来处理处理图像，现在有棋盘与棋子。
3 实现
3.1 通信
var Communicator = {
createNew : function(host, handler){
net = {};
net.handler = handler;
//链接等
net.parse = function(data){
//数据格式化，后期可以支持多种协议
}
//接收数据
net.webSocket.onmessage = function(event){
var result = net.parse(event.data);
if (net.handler && typeof(net.handler) == "function"){
net.handler(result);
}
}
net.sendMessage = function(data){
//发送数据，可以格式化数据
}
return net;
}
这里我们用到一种叫做回调的概念，相信c/c++猴子不会陌生，当我们创建这个通信模块的时候，我们穿一个回调函数给他们，“你不用关心里面是啥，你需要的时候用他就行”，下面是一个回调的简单例子。
doAlert = function(){
alert("Hello World");
}
var Test = {
createNew : function(handler){
var test = {};
test.action = handler;
test.doActino = function(){
if (test.action){
if (typeof(test.action) == "function"){
test.action();
}
}
}
return test;
}
}
test = Test.createNew(doAlert);
test.doActino();
这里我们还用到一种伪类的写法，javaScipt是一个脚本语言，我们可以通过上面的方式，写出一个Test的类，然后通过createNew实例化。
3.2 逻辑
逻辑是个大块头，基本上原有的代码中的各种函数都在逻辑层，我们需要在逻辑层创建一个通信模块。
gmk.hanlderEvent = function(result){
if (result.success == false){
alert("系统异常" + event.data);
}
var action = result.model;
if (action.code == "Start"){
gmk.startGame(action);
}else if (action.code == "Chess"){
gmk.recieveChessMsg(action);
}
}
gmk.communicator = Communicator.createNew(gmk.host, gmk.hanlderEvent);
这里把hanlderEvent传给ommunicator，当commuicator的webSocket触发onMessage时，就会调用hanlderEvent。
3.3 图像
图像是控制canvas显示的，下面是棋盘的一个例子：
var BoardBrush = {
createNew : function(ct){
bb = {};
bb.ct = ct;
bb.show = function(){
ct.clearRect(0, 0, 640, 640);
ct.fillStyle = "#996600";
ct.fillRect(0, 0, 640, 640);
ct.fillStyle = "#CCFFFF";
ct.strokeStyle = "white";
for (var i = 0; i <= 640; i += 40){
ct.beginPath();
ct.moveTo(0, i);
ct.lineTo(640, i);
ct.closePath();
ct.stroke();
ct.beginPath();
ct.moveTo(i, 0);
ct.lineTo(i, 640);
ct.closePath();
ct.stroke();
}
}
return bb;
}
}
4 总结
重构之后，前端的逻辑会清晰很多，减少了代码的耦合，对我们后面的继续开发提供了极大的帮助。
最近学了一些js，感觉收获还是挺大的。
代码
代码部署地址 部署的版本不一定是最新的。
希望大家批评指正。
Paste_Image.png
