0

最近、私は多くのコードを に入れていることに気づきましたが、$(document).ready()それは私にはきれいに見えません。たとえば、ajax を介してデータベースにクエリを実行し、それを返してリストに追加するものを作成している場合、次のようにします。

$(function(){
   //Initialize my DOM elements
   $MyList = $("#MyList"),
   $MyButton = $("#MyButton");

   //Add my Click event
   $MyButton.click(function(){
      $.ajax({
         type: 'POST',
         url: "/lists/getmylist",
         contentType: "application/json",
         success: function(results){
            //Parse my results and append them using my favorite templating helper
            var jsonResults = $.parseJSON(result);
            $MyList.mustache("my-template", jsonResults);
         }
      });
   })
});

これは小さな例であることがわかりましたが、複数のクリック イベントや ajax リクエストなどがあると、非常に大きくて面倒になり始めます。最終的には、ドキュメントの準備が整います。すべての ajax リクエストを外部の JavaScript ファイルに入れて、よりクリーンにすることができることはわかっていますが、このアーキテクチャは一般的に問題ありませんか? 本当に面倒なようです。他の人がプラグイン アーキテクチャまたは init 関数を使用しているのを見てきました。私は通常、このドキュメントをすべてのページの下部に用意し、ページを正しく機能させるために必要なものをすべて挿入します。これは私のjsを構造化する良い方法ですか?

4

2 に答える 2

4

いくつかのモデル オブジェクトと一般的なオブジェクト指向プログラミング プリンシパルの追加は、ここで大いに役立つと思います。データの取得とモデル クラスへの保存を分割すると、非常に役立つはずです。

Javascript を使用した OO について考え始めるためのリンクをいくつか示します。

オブジェクト指向 JavaScript の記述

Javascript のデザイン パターン

Javascript: プロトタイプ継承 Javascript: プロトタイプ継承 2

役立つかもしれないもう 1 つのことは、Javascript を複数のファイルに分割することです。1 つは、すべてのページに添付されるヘッダーを介して含まれる可能性のあるグローバル スクリプト用で、それを必要とする各ページ用のスクリプトです。

于 2013-03-15T00:07:45.253 に答える
1

おそらく、 Backbone.js (または他のフレームワークの 1 つ) は、探しているレスキューの一部である可能性があります。

バックボーンは、継承されたスパゲッティを整理するのに非常に役立ちました。出発点は、大量のドキュメントをバックボーン ビュー (またはその倍数) に移行することです。

ビュー、コレクション、モデルを個別のファイルに分割してスクリプトを整理し、それらをまとめて 1 つのファイルにまとめて縮小することで、ブラウザーは多くの要求ではなく 1 つの要求のみを行う必要があります。

ASP.NET MVC4 はバンドリングを行うことができ、MVC3 でも同様に機能します。

これは単純な出発点の例にすぎません。ページあたりのスクリプト サイズを縮小するためのより高度な手法 (AMD、require.js など) がありますが、キャッシングと gzip を使用すると、単一のすべてのスクリプト バンドルで十分であることがわかります。ケースの。

あなたの例については、バックボーンの実装の可能性があります

コードを名前空間化することを忘れないでください...

var app = app || {};

$(function ($) {

// depending on your server setup you might be able to just override the url
// and get away with what you want. Otherwise you might look into overriding
// the save/fetch or sync methods of the collection
app.MyListCollection = Backbone.Collection.extend({
    url: '/lists/getmylist'

});


app.MyListView = Backbone.View.extend({

//bind the view to the existing element in the HTML.
    el: '#MyList',

    // your mustache template 
    template:$('#list-template').html(),

    // hook up your event handlers to page components
//(within the context of your el)
    events: {
        'click #MyButton': 'onMyButtonClick'
    },

    //called on object creation.
    initialize: function () {

//you could create a collection here or pass it into the init function
        this.collection = new app.MyListCollection();

        //when the collection is changes, call the render method
        this.listenTo(this.collection, 'reset', this.render);
    },
    // render is named by convention, but its where you would "redraw" your view and apply your template
    render: function () {

    this.$el.html(
        Mustache.render(
            this.template(this.collection.toJSON())));

        return this;
    },

    //your click handler
    onMyButtonClick: function(e){
        this.collection.fetch();
    }

});
});

ドキュメントを使用して、必要なバックボーン機能をスピンアップし、それを使用して、サーバー側のデータを使用して JavaScript をブートストラップします。

$(function () {

// create an instance of your view
new app.MyListView();

//example bootstrap using razor
app.title = @Model.Title;
});
于 2013-03-15T14:42:55.273 に答える