6

javascriptコードとjquery関数の構造化についてアドバイスをもらいたいです。私はDOMイベント処理やajaxなどにJQueryを使用するのが好きです。過去に、jsファイル全体が匿名のJquery関数の束で構成されている貧弱なコードのように見えるものを書きました。

私は疑問に思っています-「よく構造化された」javascriptファイルはJQueryと組み合わせるとどのように見えますか？多くの標準的なJavaScript関数があり、必要に応じていくつかのJQuery$()関数が組み込まれますか？コードを純粋に手続き的な方法で処理することは問題ありませんか、それともいくつかのOOPの概念を使用するのが最善でしょうか？私はいつも、ヘルパー関数を使って階層的に相互に呼び出す関数をたくさん持っていましたが、オブジェクトはありません（ランダムなサードパーティライブラリを使用するときに使用される関数を除く）。

私はjavascriptプログラマー（主にJava）ではないので、経験豊富なjs開発者からのアドバイスは素晴らしいでしょう。

4

5 に答える 5

3

正直なところ、私はMVCの概念をjQueryに適用しようとしています。約500行を超えたら、そうしないと、物事に追いつくのが難しくなります。

モデル

  • ローカルにキャッシュされたデータ
  • クッキー
  • サーバーからの読み取り/書き込み-サーバー（AJAX）

意見

  • 基本的にすべてのDHTML関連（HTMLの生成/操作、CSSの変更、アニメーション/効果など）

コントローラ

  • イベント処理（ユーザーイベントとカスタムイベントの両方）

このためのプロジェクト もいくつかあります。

于 2010-07-20T14:30:02.323 に答える
1

概念が最先端であるだけでなく、概要の理由から、相互に属する関数をカプセル化する必要があるため、オブジェクト指向の構造を提案します。

大きなjsファイルがある場合（パフォーマンス上の理由から1つだけにする必要があります）、機能ごとにコードを構造化しないと、数週間経っても何も見つかりません。

于 2010-07-20T14:27:28.760 に答える
1

jQueryでベッドに入る場合、私の提案はずっとベッドに入るということです。つまり、必要に応じて独自のjQueryプラグインコードを作成することを意味します。これは、jQueryオブジェクトをパラメーターとして受け取る関数を作成したい場合にいつでも使用できます。

WebページのJavascriptコードの性質は、本質的にすべてがイベントループで発生するようなものであるため、ほとんどのルーチンはかなり小さいものです。おそらく、実行する必要のある作業の最大のチャンクは、すべてのハンドラーを初期化するコードです。多くのページがあるアプリケーションWebサイトをまとめるときは、次のことを選択できます。

  • すべてのページを独自の特別なスノーフレークにし、独自の動作のための独自のJavascriptを使用します

また

  • すべてのページの動作を収集して標準化し、単一のグローバルメカニズムにします

私は両方を経験しました、そして2番目の方法は間違いなくより良いです、しかしそれはそれ自身の問題を抱えています。物事を常に把握し、特殊なケースによってHTML（またはJSP）ソースにコードが流出しないようにする必要があります。誰かが、すべてのページに自分自身を適用しようとするサイトグローバルスクリプトコードのパフォーマンスの問題に対処する必要があります。そしてもちろん、あなたは巨大な初期化関数を成長させ始めます。

そのようなものでメンテナンスの地獄から私を救うのは、個別のスクリプトファイル（ページごとに1つ「機能」、多かれ少なかれ、カスタムjQueryプラグイン）を単一のモノリシックスクリプトに結合して実際にサーバーにデプロイするビルドステップです。私はFreeMarkerでそれを行いましたが、それを行う方法は他にもたくさんあります。このようなステップを実行することの良い副産物は、YUICompressorを実行する良い機会であるということです。

于 2010-07-20T14:34:39.883 に答える
1

私はあなたのMVとCを別々に保つことが最善であるという点でピーターベイリーの答えを2番目にしなければなりません。GUIウィジェットの最適なスタイルは、ウィジェットを初期化する関数（HTMLの作成、スタイルの追加、またはアニメーションイベントの添付）を作成し、ウィジェットが使用されるさまざまな場所にカスタムイベントハンドラーを添付することでした。

カスタムイベントは、再利用可能なウィジェットの鍵です。これにより、GUIウィジェットでのDOMの変更に対するコードの脆弱性が減り、コードが読みやすくなります。

たとえば、次のようなHTML構造を動的に作成するカスタムボタンがあるとします。

<div class="MyButton"><div class="button-helpful-wrapper"><img src="/blah.png"/></div></div>

初期化コードがクリックイベントを使用してフェードなどを追加するとします。それは問題ではありません。

興味深いのは、このボタンを使用する場合です。'click'イベントをどのdivにアタッチしますか？GUIウィジェットの構造を知る必要はなく、ウィジェットの新しいタイプのイベントを作成する方がよいでしょう。そのようです：

$('#MyButton_Instance1').bind('myclick', function () {...} );

また、ウィジェットの構造については完全に不可知論者です。

これを機能させるには、実際のイベントをカスタムイベントにプロキシするバインド/トリガーを追加するだけです。これを配置するのに最適な場所は、ウィジェット初期化コードです。

$('.MyButton').myButton();

どこ

myButton = function () {
    $(this).find('.button-helpful-wrapper').bind('click', function (event) {
        $(this).trigger('myclick', event);
    });
}

これにより、特定のDOM要素イベントではなく、一般的なウィジェットイベントにアタッチするため、ウィジェットが非常に再利用可能になります。それを試してみてください。

于 2010-07-20T14:55:55.617 に答える
0

まず、オブジェクトスタイルアプローチ、関数よりもメソッドを使用できます

例

var User = {
    loggedin : false,
    name : "Robert PItt",
    id : 45
}

そして、あなたはそのようにjsファイル内にシステムアイテムを作成することができます

if(typeof System == undefined)
{
    System = new Object();
}

System.Globals = 
{
   //Some Global Settings,uri's etc in here
}

System.Gui = {
   Init : function()
   {
      if(User.loggedin == true)
      {
          this.RemoveItem("#userlogin");
      }
   },
   RemoveItem: function(form)
   {
       $(form).remove();
   }
}

System.Gui.init(); //Within head maybe/

ご覧のとおり、メソッドを保持するための複数の「コンテナー」を作成できます。コンテナーは、コードを整理して同時に分離するのに役立ちます。また、Ajax、ツール、セキュリティ、コールバックなどのGUIと一緒に作成できます。等々。

于 2010-07-20T14:35:44.797 に答える