0

我问这个问题的主要原因是因为我听说过很多过时的 JS 技术，它们不再好或者只是过时了。在听到关于旧 JS 的所有负面消息后，看到 08 年的线程让我害怕。

我主要关心的是变量和文件。

我想为视频游戏创建某种高级计算器，因此我将拥有大量需要全局的变量。由于游戏中的角色有很多不同的“统计数据”，即使这意味着更多的写作，做这样的事情是否更好，只是在一切之前的前缀：

stats.health = 50;
stats.mana = 50;
stats.whatever = 100;

//or is this better:

health = 50;
mana = 50;
whatever = 100;

下一个问题是关于文件的。我将有相当多的数组，其中包含大量数据、加载的大量图像以及用于图像的大量 onTouch 函数。我是否为每个创建单独的 JS 文件？首先加载所有数据，然后是图像，然后是函数，在 /html 或 /body 标签之前的最底部添加监听器？我来自 Lua，虽然我以前就知道 html + css，但我才刚开始使用 JS，因此非常感谢任何建议。

我不确定的另一件事是，我至少见过 3 种创建图像的方法，它们之间有什么区别？

例如：

for (var i = 0; i < imageSrc.length; i++) {
image[i] = new Image(); 
image[i].src = "images/" + imageSrc[i] + ".png"; 
end

还：

document.createElement("img");

那是在用户使用页面时使用 javascript 创建图像。

有没有更好的方法来创建从一开始就存在的图像？例如在 div 中创建它：

<img id="bgMain" src="images/background.png" style="position:absolute; top:0px; left:0px;" />

我的最后一个问题是：http: //jsperf.com/cached-vs-getelementbyid/5

缓存的性能显然要好得多，但我根本不明白 obj.elems.el 是什么，或者我是否研究过它。有没有人有正确解释如何缓存变量的链接？

非常感谢任何有关更好编码实践的额外信息和提示。非常感谢您的阅读，并提前感谢您的帮助！

4

3 回答 3

3

拥有许多全局变量确实没有什么好的论据。制作一个全局容器，并将所有内容粘贴在其中。

window.globalContainer = {};
globalContainer.var1 = 1;
globalContainer.var2 = 2;
//etc

您很可能会意识到甚至不使用 globalContainer 也是可能的，因为您可以让所有内容在一个由事件决定条目的范围环境中运行。

.js必须取出所有房屋的文件。获取速度很慢，因此您应该尝试执行一次而不是多次。将您可以使用的所有脚本合并到一个文件中，而不是将它们放在所有地方。话虽这么说，你应该只在生产中这样做——在开发时你应该做最易读的事情。请记住，您的生产和开发 javascript 应该始终不同。一种易于阅读和逻辑分离，一种易于转移和缩小。

您加载图像的路线并不重要。createImage或者new Image()两者都会有相同的结果。要记住的重要一点是，在.src分配之前不会获取实际图像。发生这种情况时，图像被加载。一旦浏览器看到一个资源，它就会缓存它。这就是预加载魔法发生的方式。渲染是另一回事。即使您已经缓存了图像，也可能需要一些时间来渲染，特别是如果其中有许多设置为一次渲染并且它们是大图像。

于 2013-05-28T23:07:05.160 回答
2

反对以前 JS 漏洞利用的最大论据是大量的全局变量和增加的冲突可能性......历史上最简单的解决方法是命名空间......

//"this" is the global namespace, window in a browser.
this.project = this.project || {}; //establish project namespace
project.section = project.section || {}; // project.section
project.section.somevar = 0;
project.section.someMethod = function(){
  ...
};

这有它的优点和缺点，优点是你得到了结构，并且可以避免碰撞......缺点是这种做法需要大量的纪律来最小化泄漏的抽象。此外，树搜索 project.section.subsection.area.method 的成本有一点查找成本。

您可以通过将代码文件包装在立即调用函数表达式 (IIFE) 中来减少泄漏抽象（意外变量泄漏）

(function(){
  this.project = this.project || {};
  //
}());

即便如此，维护这样的代码库仍然需要做很多工作。最近，JavaScript 的模块模式有所增长。您可能会想从模块的角度来思考，并使用它们公开的那些模块和对象/类。目前有两种流行的模式，即异步模块设计 (AMD) 和 CommonJS (CJS)，还有许多不同的工具可用于将模块构建为可在客户端使用的脚本。

您很可能想要使用RequireJS (AMD)，并查看Bower（JS 包管理器）、Grunt和Yeoman。

有很多可用的教程，你可能想看看像FrozenJS这样的工具包，至少对于结构示例。

以下是如何为系统构建模块的示例...所述模块将用于从字段模块的实体继承的字段上的给定字符...您将公开一个具有绑定的构造函数“字符”（ field) 方法和 render() 方法...来处理它自己的状态。您可以将其视为角色控制器或 ViewModel（在 MVC/MVVM 术语中）。

//character.js AMD Module
define(['jQuery','./field'],function($,fieldModule){
  //module
  return {
    'Character':CharacterObject
    ...
  };

  function CharacterObject() {
    ... constructor internals ...
  }

  //inherit from field.Entity
  CharacterObject.prototype = new fieldModule.Entity();

  //prototype methods
  CharacterObject.prototype.bind = function(fieldInstance) {
    ... bind the CharacterObject instance to the field ...
  }

  CharacterObject.prototype.render = function() {
    ... render UI update(s) ...
    //assuming an event loop for UI processing
  }

  ...
});

除此之外，您甚至可能需要考虑使用可能不值得的中间人语言/编译步骤，从而进一步减少某些行为问题的可能性的咖啡脚本。

于 2013-05-28T23:28:54.813 回答
1

我将有大量需要全局的变量

为什么他们需要全球化？从你的数据来看，你正在做一些角色统计计算器。我建议你在 JavaScript 中学习 OOP，并基于对象构建你的角色模型。这样，它们是“字符的实例”而不是全局变量。我看起来像：

//build a character
var character = new Character('XXXfoozballXXX');
character.health = 100;
character.mana = 100;
character.simulateHit();
character.setStats({
  str:120,
  agi:120,
  luk:90,
  ...
});

//The data never lives in the global. They are in the instances of objects.
//You can discard them and build new ones without worry of globals or resetting

我将有相当多的数组，其中包含大量数据、加载的大量图像以及用于图像的大量 onTouch 函数。我是否为每个创建单独的 JS 文件？

你需要一些依赖处理框架和结构。我建议你为初学者学习RequireJS和Backbone。还有其他框架，它们恰好是我目前使用的。

RequireJS 将要求您拆分文件以实现模块化和可重用性，但会将它们与优化器一起编译到一个文件中。Backbone 为您提供了一种将数据、UI 和逻辑拆分为对象的方法，这使得您首先学习 OOP 很重要。

我不确定的另一件事是，我至少见过 3 种创建图像的方法，它们之间有什么区别？

有很多方法可以做到：

  • 在 JavaScript 中构建元素
  • 在 JavaScript 中构建一个 Image 对象
  • 构建 HTML 并使用.innerHTML()

我更喜欢第二种方法，因为它类似于 OOP，使用其他类似 OOP 的代码会更容易处理。

缓存的性能显然要好得多，但我根本不明白 obj.elems.el 是什么，或者我是否研究过它。有没有人有正确解释如何缓存变量的链接？

缓存方法所做的只是从 DOM 中获取元素一次，并将整个测试简化为分配，而不是绑定、获取等。可以说，JavaScript 和 DOM 是“独立的世界”。从一个“土地”到另一个“土地”的交叉代码需要开销。

为了避免这种开销，你限制了“交叉点”。由于您已经获取了一次元素，并且现在已经引用了它，因此您无需再次获取它。相反，重用已经存在的引用。

于 2013-05-28T23:11:36.083 回答