どのように書いて、清潔に保つために、簡単にJavascriptの＆jQueryの

Question

を理解し、誰もが、次のコードを片付けに関する提案を持っています：

/* Example code only to demonstrate the type of code my app contains and 
will contain more of */ 

$("#filter").click(function() 
{ 
    if($(this).attr("value") != "" && $(this).attr("value").length > charLimit) 
     filterable($(this).attr("value")) 
}); 

$("#filter").keyup(function() 
{ 
    if($(this).attr("value") == "" || $(this).attr("value").length <= charLimit) 
    { 
     $('.alphablock').show(300); 
     $('.filterable a').removeClass("selected"); 
    } 
}); 

$('.slidingForm fieldset').hide(); 

$('.slidingForm fieldset:first').find(':input:first').focus(); 

/* Snip More Code */ 

は基本的に私は私の要素のそれぞれのコードの多くで終わる、これはちょうど材料の海、これは動作しますが、それは維持し、開発するために大きくて困難になるだろう。

私はPHPをよく知っていますし、通常は保守可能なブロックにコードを保持するためのクラスに頼っています。しかし、私はjQueryと一般的なjavascriptのための最良のアプローチが不確実です。これは手続きが少なく、ユーザーの操作に応じていつでも呼び出すことができるため、全く違った使い方です。

おかげ ジェイク

Answer 1

は、Model-View-Controllerの方法でコードを整理するBACKBONE.JS、AngularJSのように、Javascriptのフレームワークの1つを使用してみてください。

Answer 2

追記：使用http://documentcloud.github.com/backbone/

私のテイク：私は一般的に2つのことをするだろう

$filter = $("#filter") 
$filter.click(function(){ 
    var value = $(this).attr("value"); 
    if(value != "" && value.length > charLimit){ 
    filterable(value) 
    } 
}); 

$filter.keyup(function(){ 
    var value = $(this).attr("value"); 
    if(value == "" || value.length <= charLimit){ 
     $('.alphablock').show(300); 
     $('.filterable a').removeClass("selected"); 
    } 
}); 

$('.slidingForm fieldset').hide(); 
$('.slidingForm fieldset:first').find(':input:first').focus(); 

Answer 3

：共通の機能について

• ルック大会ベースのプラグインにリファクタリングすることができ、それらを再利用しようとする。
• それは自分のjsファイルの各主要ビューを与え、ちょうどビュー負荷が

Answer 4

きれいなものを維持するとき、それはすべてのかなりきれいだとロードが、私は最近、私がすることをやっているいくつかのものがありますお勧め：

(function($) 
{  
    "use strict"; 

    // Variables declared here are scoped to this function, won't polute 
    // the globals. 

    $(function() 
    { 
     // Do your work here. 
    }); 

})(jQuery); 

が関数自体の中でスクリプトを囲む、あなたは世界的に作成されません変数を宣言することができます。あなたがグローバルな何かをするために定義さ場合は、windowオブジェクトに割り当て：

window.something = {}; 

私も変数にあなたのjQueryオブジェクトを割り当てることを検討したい

は、例えば同じオブジェクト、のはポイントを作るリピート選択肢はありません$("#filter"),など

最後に、クラスセレクタを使用している場合は、タグ名の前に接頭辞を付けることをお勧めします。 $(".slidingForm")の代わりに$("div.slidingForm")です。単純なページの違いに気づかないかもしれませんが、多くの選択を行っているより複雑なページでは、ネイティブのgetElementsByTagNameメソッドを使用してブラウザが要素のサブセットを引き出して、 DOM全体をトラバースする必要はありません。

Answer 5

動的バインディングの必要がなければ、むしろonClickを直接要素に入れてバインドするのを避ける傾向があります。私のHTMLファイルは通常空の構造体です。

<div id="content"> 
    <div id="sidebar" /> 

そんなことです。私はそれらをjQueryを使って動的に埋めます。私のjsファイルは、オブジェクトのページやクラスなどの機能領域に編成されており、すべて対応するcssファイルを持っています。

js/basicstuff.js 
js/someclass/class1.js 
css/basicstuff.css 
css/someclass/class1.css 

プロトタイプjsファイルとそのオーバーライドがあまりにも、名前空間を共有する：私のようなファイル構造で終わります。私はかなり大きなアプリケーションをこのように書いてきましたが、個々のファイルjsとcssは、アプリケーションの機能領域（イントロ、セットアップ、ステージ1、メイン、エンディング、設定など）で分けられているため、ゲーム）。

また、動的関数グループの配列を意味があるときに使用します。たとえば、グローバル$(window).resize()関数を使用します。この関数は配列を反復し、必要なページ定義のサイズ変更関数を呼び出します。ページが次のページに移行するとき、配列内のその要素を削除するだけです（ただし、何かを傷つけることはありませんが無視するために余分な計算サイクルがかかります）。

Answer 6

私はあなたがきれいなことを意味するのか分かりません。しかし、私はいつも引数としてFunctionDeclarationを渡すことをお勧めします。そうすることで2つの利点を有する：

1. JavaScriptの宣言が掲揚されているので、FunctionDeclarationは、スクリプトの最後に配置することができ、それは引数として参照することができます。
2. Functionは、スタックトレースにエラーを投げた正確な機能が表示されるため、常にデバッグが容易です。

これは、これらの線に沿ってより多くのコードを書かれています：

(function() { 
    /* Example code only to demonstrate the type of code my app contains and 
    will contain more of */ 

    var filter = $("#filter"); 
    filter.click(filterClick); 
    filter.keyup(filterKeyup); 
    $('.slidingForm fieldset').hide(); 
    $('.slidingForm fieldset:first').find(':input:first').focus(); 

    /* Snip More Code */ 

    function filterClick() { 
     if ($(this).attr("value") !== "" && $(this).attr("value").length > charLimit) { 
      filterable($(this).attr("value")); 
     } 
    } 

    function filterKeyup() { 
     if ($(this).attr("value") === "" || $(this).attr("value").length <= charLimit) { 
      $('.alphablock').show(300); 
      $('.filterable a').removeClass("selected"); 
     } 
    } 
})(); 

Answer 7

あなたは「名前空間」オブジェクトにすべてを入れて、あなたのイベントハンドラを初期化する方法（関数である特性）を呼び出すことができます。これは物事をきちんと整理した状態に保ちます

$(document).ready(function() { 
    filter.initialize('filter'); 
}); 

var filter = (function() { 
    var initialize = function (filterID) { 
     var that = $('#' + filterID); 

     that.click(function() { 
      var value = that.val(); 

      if (value != '' && value.length > charLimit) { 
       filterable(value); 
      } 
     }); 

     that.keyup(function() { 
      var value = that.val(); 

      if (value == '' || value.length <= charLimit) { 
       $('.alphablock').show(300); 
       $('.filterable a').removeClass("selected"); 
      } 
     }); 

     $('.slidingForm fieldset').hide(); 
     $('.slidingForm fieldset:first').find(':input:first').focus(); 
    }; 

    return { 
     initialize: initialize 
    }; 
});