您的位置:首页 > Web前端 > JavaScript

javascript之面对对象设计

2015-06-23 19:21 696 查看
    关于javascript,因为工作需要,我学了将近一年了,现在只能算入门级吧,还有很多不懂的地方。我们的项目是从去年八月左右开始做的,到现在已经迭代了好多个版本了,从一开始只有一个场景一个界面,到现在算是比较齐全了,这其中每次的迭代,都会发现好多的问题,接下来说说我这一年来对javascript的面对对象设计的一些感慨,如有说得不对的或者不好的,还请多多指教。

     我是做游戏的,所以就拿一个玩家player的对象怎么设计来说说吧。
    一开始的时候,想得很简单,不就一个player吗,不就一个对象吗?顺手拈来:
 // player.js

var Player = {

};

// player_building.js

Player.buildings = {};

Player.buildBuilding = function () {

};

// player_Equipment.js
Player..equipments = {}; 

Player.getEquipments = function () {

}; 

刚开始的时候,觉得这样设计没啥问题,一个文件存放相关模块的代码,感觉挺好的(其实太逗了,哈哈!)。

后来呢,发现我有需求说要创建多个玩家对象,这下不好办了,没办法,换了一种写法:

// player.js
var Player = function() {
};

// player_building.js
Player.prototype.buildings = {};
Player.prototype.buildBuilding = function () {
};

// player_Equipment.js
Player.prototype.equipments = {}; 
Player.prototype.getEquipments = function () {
};

 咋看之下,没啥问题,挺好的,现在可以这样搞了:
player1 = new Player();
player2 = new Player(); 

  现在想要几个玩家都so easy了,但是,这样真的可以了吗?答案肯定是no!
  各位看官又要问了,有啥问题呢,其实问题出现在 prototypes上,我们会发现player1和player2的buildings和equipments会是一模一样的,改了player1的buildings,player2的buildings也同样会被改变,这尼玛的不是坑爹吗,player1和player2有个毛线的关系啊,为啥会这样呢?然后呢,没办法,去查了下资料,发现了这么一句话“Javascript中对象的prototype属性的解释是:返回对象类型原型的引用。”。

   突然发现了啥了没有,原来是原型的引用,所以不管是player1还是player2,他们的buildings和equipments都是
 Player原型的,所以不管是通过player1还是player2修改buildings和equipments,其实结果都是一样的。发现问题了,那就好办了。

  那咱就继续改 ,我们可以这样:

// player.js
var Player = function() {
    this.buildings  = {};
    this.equipments = {};
};

// player_building.js
Player.prototype.buildBuilding = function () {
};

// player_Equipment.js
Player.prototype.getEquipments = function () {
}; 

 对于数据的属性我们就不用prototype来了不就行了吗,我们把它都写到player下面。嗯,再试一下,确实,现在再修改player1的buildings或者equipments都不会对player2产生任何影响了。感觉好极了(真的好极了吗,逗!)。

 经过一段时间的积累,我们又发现我们的代码实在是不忍直视,所有的数据字段都在Player.js里,非常的乱!一点都没有面对对象的感觉。不知道你们能不能忍受,反正我是受不了了,然后我就思考,我要重构这个Player对象,查阅了一些资料,也与几个同事进行了一番探讨,最终我的解决方案是这样的: 
// player.js
var Player = function() {
    this.building  = new PlayerBuilding();
    this.equipment = new PlayerEquipment();
};

// player_building.js
PlayerBuilding = function () {
    this.buildings = {};
    this.buildBuilding = function () {
    };
};

// player_Equipment.js
PlayerEquipment = function () {
    this.equipments = {};
    this.getEquipments = function () {
    };
};

// buildingManager.js
var BuildingManager = {
    buildBuilding : function (player) {
        // 资源判断,依赖关系判断等等
        player.building.buildBuilding();
    };
};

// equipmentManager.js
var EquipmentManager.js = {
};

  细心的各位看官应该会发现,我每个模块都多了一个manager的文件,大概说一下我的思路,Player对象挂多个模块,每个模块是单独的对象,每个模块的实现不用依赖于其他模块,每个模块主要是一些数据的操作。至于逻辑判断或者是模块间的交互,我就放在对应模块的manager下,这样子一来,我的Player对象就清爽了许多,也算是有点面对对象设计了吧。

  上面的设计就是我目前项目里面使用的方案,有其他更好的建议欢迎联系我,谢谢!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: