Question

由于性能和其他问题，我想将代码拆分为单独的函数，因为它只是一个很大的“.ready”函数。

我是javaScript / jquery的新手，但我想我会自己试一试。我完全按照我认为的方式完成了但是我的控制台告诉我事情是未定义的所以我猜我的事情超出了范围。我已经更详细地阅读了它，但仍然没有任何地方。

我的代码目前工作正常，但我想进入干净编码的习惯。有人可以指出我哪里出错了所以我可以继续自己吗？

这是我到目前为止的一个例子

//Global variables
var randomWord = [];
var listOfWords = [];
var populationNumber = [];
var attemptNumber = [];
var completionNumber = [];
var gridSize = [];

generateGrid();

startMusic();

randomizeReward();


//Click event to start the game
$(".start-btn-wrapper").click(function () {
    startplay();
});
//Click event to restart the game
$(".restart-btn").click(function () {
    restartplay();
});

由于

小提琴：http://jsfiddle.net/QYaGP/

摆弄HTML：http://jsfiddle.net/QYaGP/1/

Answer 1

您需要开始将一些信息传递到您定义的函数中。如果你的函数都没有参数，那么你将不得不使用全局定义的变量，对jquery选择的硬编码引用等，以便完成任何事情。

举个例子，你有一个函数

function replaySound() {
    $("#hintSound").attr('src', listOfWords[randomWord].hintSound);
    hintSound.play();
}

这实际上是通过元素listOfWords[randomWord]播放#hintSound中详述的声音。你可以通过以下方式做到：

function playSound(selector, wordlistEntry) {
    $(selector).attr('src', wordlistEntry.hintSound);
    $(selector)[0].play();
}

然后，您可以致电：{/ p>，而不是致电replaySound()

playSound('#hintSound', listOfWords[randomWord]);

这样你想要的行为就包含在函数中，但是细节，即你需要的数据，都是通过参数传递的。这允许您重复使用该功能来使用任何选择器播放任何声音，而不仅仅是#hintSound。

你会发现，当你这样做时，你需要开始选择一个函数将在调用它的代码中选择什么，而不是在函数中。这很好，因为你试图实现的内容是在调用代码中，而不是在函数中。这被称为“关注点分离”;你试图将关于给定事物的逻辑限制在一个区域，而不是在许多函数中传播它。但是您仍然希望函数允许您封装行为。这使您可以干净，轻松地更改行为，而无需在每次逻辑的某些部分更改时重写所有内容。

结果应该是你发现几个函数实际上做了同样的事情，但具有不同的细节，所以你可以只使用一个函数并重用它。这就是不要重复自己的原则，这也很重要。

Answer 2

如果您担心性能问题，我会考虑使用AngularJS等框架。您可以注入模块化代码。更好的是，使用MVC，您的视图将绑定到您的模型，因此通过更改模型，视图会自动更新。

此外，停止使用类选择器。使用ID选择器。它们要快得多。您还希望预加载选择器（即使使用类选择器）。这样你只搜索DOM一次：

var ele = $('#elementId');

$(ele).doSomething();

这样，您就可以引用DOM元素。您可以使用数据结构来存储全局范围之外的所有引用：

var elementReferences = {}; //declaration
elementReferences.mainPage = {}; //use
elementReferences.mainPage.root = $('#mainPage'); //load the root div of a page segment
elementReferences.mainPage.title =   $(elementReferences.mainPage.root).children('#title'); //load the title 

elementReference.mainPage.form = $(elementReferences.mainPage.root).children('#form'); //load the form

现在你可以这样做：

$(elementReference.mainPage.form).whatever();

并且它不必在DOM中搜索元素。这对于较大的应用程序尤其有用。

如果你把一个函数放在document.ready中，按照你的小提琴，你只能在document.ready call的范围内访问该函数。您真的希望能够在需要的范围内动态加载/卸载函数，这是angularjs发挥作用的地方。

在大多数情况下，您还希望从全局范围中删除函数和变量，并将它们放入按依赖项和用法排序的容器中。这是面向对象的编程101.你可以将它们放在一个容器中，而不是让一堆数组位于全局范围内，而这些数组可能会被另一个开发人员错误地覆盖：

var arrays = {}; //create the object

arrays.whatever1 = [];
arrays.whatever2 = [];

显然，您可能需要一个比“数组”更具描述性的名称。函数的工作方式相同：

var ajax = {}; //ajax object
var ajax.get = function(){
};
var ajax.post = function(){
};
var ajax.delete = function(){
};

这通常会促进更清晰，更易于维护的代码。在实际开始开发之前，您希望花费大量时间编写完整记录整体架构的规范。如果你能提供帮助，千万不要跳枪。花时间彻底研究和规划大局，以及如何将所有东西融合在一起，而不是试图甩开它并随时计算出来。当你这样做时，你花费更少的时间来重新发明轮子。

它是由谷歌开发的，所以它应该存在很长一段时间。我不确定你是否是负责系统架构的人，但如果你公司的性能/可重用性是一个问题，那么绝对值得一看。在软件架构和工程方面，我非常乐意向您介绍我所知道的大部分知识。如果您有兴趣，请给我打电话。总是很乐意提供帮助！

将代码拆分为函数

2 个答案: