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对象就清爽了许多,也算是有点面对对象设计了吧。
上面的设计就是我目前项目里面使用的方案,有其他更好的建议欢迎联系我,谢谢!
我是做游戏的,所以就拿一个玩家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对象就清爽了许多,也算是有点面对对象设计了吧。
上面的设计就是我目前项目里面使用的方案,有其他更好的建议欢迎联系我,谢谢!
相关文章推荐
- js中typeof的用法汇总[转载]
- js遍历数组和遍历对象的区别
- javascript工具--控制台详解(转自 阮一峰博客)
- Javascript性能优化案例
- js中setTimeout与setInterval
- jni 移植 JNI环境变量char, jstring 的相互转化
- js 分享qq空间,新浪微博,qq
- 深入浅出jsonp
- JS中自执行的匿名函数
- JavaScript 的性能优化:加载和执行
- 深入浅出jsonp
- js定义对象的两种方法以及js用call来实现类的继承
- JS闭包
- ResponsiveSlides.js最轻量级的幻灯片插件
- js、jq怎么控制文本框只能输入数字
- $.getJson
- 1、使用javascript代码写出一个函数:实现传入两个整数后弹出较大的整数
- JS方法代理
- extjs传递参数
- javascript定义类(class)的三种方法