javascript - 关于 JavaScript 软件分解结构指南

Question

我正在尝试重构我的旧 Colorchess (ChessHighlight) 程序。这是一款旨在增强棋子在每一回合的影响力的棋盘，帮助初学者理解游戏。

根据给定转弯处船上的压力平衡，瓷砖的颜色如下:

• 绿色=无压力
• 白色 = 白色玩家拥有该图 block
• 黑色 = 黑色玩家拥有该图 block
• 从绿-黄-橙-红渐变中选取的颜色:此图 block 的冲突情况

人工智能正在项目中，但目前我专注于使这款游戏在两种情况下都能在设备上正确玩:平板电脑上的桌面游戏或网络游戏。

我决定用 JavaScript 编写客户端代码，我喜欢它!服务器同步将在 PHP 中进行，因为我的实际托管环境是在下面。

当我尝试将所有内容放在一起时，我的问题和想法就出现了:

(客户端库) - RequireJS --> 加载文件 - KnockoutJS --> 绑定(bind)UI事件 - ICanHaz --> 模板化 - Zepto --> DOM 操作 - 也许还有用于实用程序的 underscoreJS

我担心编写意大利面条式代码，难以理解和维护。

在旧程序 ChessHighlight 中，有很多交错的构造声明和原型(prototype)扩展，例如:

// file board.js
function Board() { ... }
function Tile() { ... }

// next included file :
function Chessman() { ... }

// again in a third included file
// since board and chessmen are defined 
Tile.prototype.put(chessman) { ... }
Tile.prototype.empty() { ... }

由于游戏本身的高耦合性，堆栈中包含的每个文件都带有越来越多的定义，代码变得困惑......

一个困难是游戏需要事务实现，因为我做了如下设置:

// both... (think ACID commit in a RDBMS)
tile_h8.chessman = rook_white_1;
rook_white_1.tile = tile_h8;

现在我通过创建一个“对象关系池管理器”来部分解决这个问题，该管理器旨在存储:

• 引用任何类型的对象(棋盘、棋子、棋子、影响力...)
• 对象之间的关系
• 还有一些明显的类型检查和基数/数量求和

(我此时正在烘焙代码)

一些问题:

• 如何以定义基本代码原子的方式编写可扩展代码(优雅地，没有类和接口(interface)模拟，而是原型(prototype)和闭包):在非常短的文件中使用 Tile、Board、Chessman，然后将它们粘合在一起其他部分:添加回调行为？

注意:我尝试阅读游戏引擎代码(Crafty、Quintus...)，但是这些引擎的核心(1600 行代码)虽然有很好的文档记录，但很难理解(起点在哪里？在哪里)是运行时流程？？)

• UML:我有一种感觉，经典方法可能会因闭包、回调和嵌套作用域而迅速失败，我似乎本能地编写和理解，但绘制绘图似乎是一个技巧......多么好的 JS开发人员将其用作攀登 1500 多行代码高峰的安全绳？

  • 最后:我将拥有一个“类似 jquery”的引擎 API，可以将其轻松插入 GUI 的 KnockOut ViewModel 的计算可观察量中。像这样的东西

[代码]

var colorchess = new Colorchess( my_VM_for_this_DIV_part );
colorchess.reset( "standard-game" );
colorchess("a1") --> a wrapper for "a1" tile
colorchess("h8").chessman() --> a wrapper for "h8" tile's chessman (rook)

// iterate on black chessman
colorchess("black").each( function( ref, chessman) {})

// a chainable example
colorchess("white").chessman("queen").influences()

[/代码]

...但目前，我还不知道如何建模、编写和测试这些可变对象。

欢迎提出建议。感谢您的帮助。

Answer 1

我认为在构造函数中定义对象并不是坏事。将它们定义为闭包更糟糕，因为它会消耗更多资源，并且不容易被 JS 引擎优化。

紧密耦合的对象也是闭包的一个问题，您可以使用中介模式来解决这个问题。中介器可能会使您的代码复杂化，但您在设置后可以轻松控制应用程序流程。

在大型项目中，为 JS 项目提供好的工具非常重要，我已经尝试过一些；就像带有 Eclipse 的 Google 闭包编译器、​​带有 typescript 的 Visual Studio，现在尝试带有 Dart 编辑器的 Dart (google Dart)(=带有正确插件的 Eclipse)。这可以帮助您快速发现不一致并更轻松地进行重构。 Typescript 将是唯一一个可以轻松使用 JS 库的库，因为 Typescript 是带有可选扩展的 JS。不确定 AngularJS 如何与 Dart 端口一起出现，但这值得一看。

对于 ACID，如果您正在谈论以反射(reflect)服务器数据库中的数据的方式更新客户端对象的状态。您可以使用 Promise 代替回调。这将提高 XHR 更新的可读性。编写 PHP，这样您就可以获得包含 block 和图 block 所需状态的更新消息，以便它可以更改事务中的数据。