0

パフォーマンスやその他の問題のため、以前は 1 つの大きな ".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/

4

2 に答える 2

0

定義している関数にいくつかの情報を渡し始める必要があります。すべての関数に引数がない場合は、何かを実行するために、グローバルに定義された変数、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();
}

そして、呼び出す代わりに、次のようにreplaySound()呼び出します。

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

このようにして、必要な動作は関数にラップされますが、詳細、つまり必要なデータは引数を介して渡されます。これにより、関数を再利用して、だけでなく、任意のセレクターを使用して任意のサウンドを再生できます#hintSound。

その際、関数ではなく、関数を呼び出すコードで関数がどのように動作するかを選択し始める必要があることがわかります。達成しようとしていることのコンテキストは、関数ではなく呼び出し元のコードにあるため、これは良いことです。これは「関心の分離」として知られています。多くの機能に分散させるのではなく、特定の事柄に関するロジックを1つの領域に限定しようとします。ただし、動作をカプセル化できる関数が必要です。これにより、ロジックの一部が変更されるたびにすべてを書き直すことなく、動作をクリーンかつ簡単に変更できます。

その結果、いくつかの関数が実際には同じことをしたが、詳細が異なることがわかるはずです。そのため、代わりに1つの関数を使用して、それを再利用できます。それは、Do n't Repeat Yourselfの原則であり、これも重要です。

于 2012-11-19T16:32:13.307 に答える
0

パフォーマンスが気になる場合は、AngularJS などのフレームワークの使用を検討します。モジュール化されたコードを挿入できます。さらに良いことに、MVC を使用すると、ビューがモデルにバインドされるため、モデルを変更するとビューが自動的に更新されます。

また、クラス セレクターの使用を停止します。ID セレクターを使用します。彼らははるかに高速です。また、セレクターをプリロードすることも必要です (クラス セレクターを使用する場合でも)。そうすれば、DOM を 1 回だけ検索できます。

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 呼び出しの範囲内でのみその関数にアクセスできます。関数が必要なスコープ内で、必要に応じて関数を動的にロード/アンロードできるようにしたいと本当に思っています。

また、ほとんどの場合、関数と変数をグローバル スコープから削除し、それらを依存関係と使用法によって並べ替えられたコンテナーに配置します。これはオブジェクト指向プログラミング 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(){
};

これにより、一般に、より再利用可能で保守が容易な、よりクリーンなコードが促進されます。実際に開発を開始する前に、アーキテクチャ全体を完全に文書化する仕様の作成にかなりの時間を費やしたいと考えています。あなたがそれを助けることができるなら、決して銃を飛ばさないでください. 全体像とすべてがどのように適合するかを徹底的に調査して計画することに時間を費やしてください。このようにすると、車輪の再発明に費やす時間が減ります。

これはグーグルによって開発されたものなので、かなり長い間存在するはずです。あなたがシステムのアーキテクチャを担当しているかどうかはわかりませんが、会社でパフォーマンス/再利用性が問題になっている場合は、検討する価値があります。ソフトウェア アーキテクチャとエンジニアリングに関して私が知っていることのほとんどについて、ウォークスルーを提供できれば幸いです。興味があればメッセージを送ってください。いつも喜んでお手伝いします！

于 2012-11-19T16:51:04.403 に答える