2

多くのjQueryダイアログを含むWebページを開発しています。

私のコードは原則として機能しますが、すぐに「ダーティ」になることに気づきました。コードをクリーンアップして、よりOOに似たものにすることを強く望んでいます。

私のコードの主な問題は次のとおりです。

  • ダイアログ固有の状態（つまり、変数のセット）はありません
  • ダイアログなし-ローカルイベントハンドラー
  • ダイアログ固有の関数はグローバルです

DelphiやWinFormsのように、jQueryダイアログをよりOOに似たものにするために、どのアプローチとソリューションが存在しますか？

4

2 に答える 2

0

たぶん、以下があなたを助けることができます：

  • ダイアログ固有の状態（つまり、変数のセット）はありません

他の要素と同様に、 data（）を使用して、状態を拡張要素に関連付けることができます。

$("#yourDialog").dialog({
    // your options...
}).data("yourData", {
    some: "state",
    associatedWith: "thisElement"
});
  • ダイアログなし-ローカルイベントハンドラー

意味dialog-localは明確ではありませんが、ダイアログウィジェットはイベントを発行します。もちろん、さまざまなハンドラーを、さまざまなダイアログウィジェットの内部要素でトリガーされるイベントにバインドできます。

  • ダイアログ固有の関数はグローバルです

それらは実際にはグローバルではありません（$.fn名前空間の一部です）が、dialog()毎回拡張要素を呼び出さなければならないことは、不必要に重いと見なされる可能性があることを理解しています。

ただし、その構文は単なるブリッジであり、jQueryのイディオムにより適したウィジェットのメソッドにアクセスする方法です。を使用してウィジェット自体への参照を取得し、data()そのメソッドを直接呼び出すことができます。例えば：

$("#yourDialog").dialog("open");
$("#yourDialog").dialog("close");

と同等です：

var dialogWidget = $("#yourDialog").data("dialog");
dialogWidget.open();
dialogWidget.close();

更新： jQuery UI 1.9以降、キーdata()はウィジェットの完全修飾名になり、ドットがダッシュに置き換えられます。したがって、上記のコードは次のようになります。

var dialogWidget = $("#yourDialog").data("ui-dialog");
dialogWidget.open();
dialogWidget.close();

非修飾名の使用は1.9でも引き続きサポートされていますが、非推奨であり、1.10でサポートが終了します。

于 2012-08-01T12:28:33.423 に答える
0

私はこれについてあまり経験がありませんが、私が理解しているように、backbone.jsのようなJSフレームワークがこれを支援することができます。

この投稿をチェックして、この男がどのように使用しているかを確認してください： Backbone.jsとJQueryUIダイアログ-バインドされていないイベント

彼らの紹介を引用するには：

多くのJavaScriptを含むWebアプリケーションで作業する場合、最初に学ぶことの1つは、データをDOMに結び付けるのをやめることです。jQueryセレクターとコールバックの絡み合った山になってしまうJavaScriptアプリケーションを作成するのは非常に簡単です。これらはすべて、HTML UI、JavaScriptロジック、およびサーバー上のデータベース間でデータの同期を維持しようと必死になっています。リッチクライアント側のアプリケーションの場合、より構造化されたアプローチが役立つことがよくあります。

于 2012-08-01T12:34:17.517 に答える