2

私はフィードバック、Javaスクリプトをより良く構成する方法についての提案を探しています。私はjsコードを独自のファイルに移動しようとしました。それは機能しますが、以下のサンプルのようなスクリプトに関しては、これが好ましい方法であるかどうか疑問に思いますか？明らかになったプロトタイプパターンはやり過ぎですか、それとも他の理由で良い選択肢ではありませんか？

Portalen.Archive = function() {
};

Portalen.Archive.prototype = function () {

var options = {
    minDate: new Date(2012, 0, 1),
    changeMonth: true,
    changeYear: true
};

var start = function () {

    $("#StartDate").datepicker(options);
    $("#EndDate").datepicker(options);

    $("#searchButton").on("click", function() {
        search();
    });
};

var search = function() {
    $.ajax({
        url: "/Archive/Index",
        type: "post",
        data: $("#searchForm").serialize(),
        success: function (response) {
            $("#resultContainer").html(response);
        }
    });
};

return {
    start: start
};

}（）;

そして、ビューでは、私はそれをこのように使用します

<script type="text/javascript" src="~/Scripts/app/portalen-archive.js"></script>
<script type="text/javascript">
    $(function () {
        var s = new Portalen.Archive();
        s.start();
    })
</script>
4

3 に答える 3

3

最近require.jsを使い始めました。moduleパターンを利用しています。モジュールを定義し、後で必要に応じてそれらをインポートし、Pythonスタイルのインポートの方法で依存関係を表現できます。

この場合の追加の利点は、「クラス」の作成を悪用して、一度使用したコードをラップして、グローバル名前空間を汚染しないようにする必要がないことです。このためにモジュールを使用するだけで、よりクリーンで表現力豊かになります。モジュールパターンの目的については、こちらをご覧ください。また、require.jsを使用すると、 AMDなどの追加機能を提供しながら、モジュールパターンを簡単に実装できます。

于 2012-10-26T07:49:32.980 に答える
1

私は時々このように使用します：

/* defined in ~/Scripts/app/portalen.js */    
var Portalen = {
    Archive: '',
    AnotherClass: ''
}

/* defined in ~/Scripts/app/portalen-archive.js  */
Portalen.Archive = function(options){
    this.options = {
        someSettings: 'default',
        anotherOneOption: [],
        datePickerSettings: {
            minDate: new Date(2012, 0, 1),
            changeMonth: true,
            changeYear: true
        }
    }

    /* You can overwrite these settings (this.options) when creating an instance  */
    $.extend(this.options, options)

    /* auto init an instance.. but you can remove it and call init when & where you want after creating an instance of Portalen.Archive */
    this.init(); 
}

Portalen.Archive.prototype = {
    init: function(){
        var self = this;
        console.log('initialize');

        self._bindEvents();
    },

    search: function(){
        $.ajax({
            url: "/Archive/Index",
            type: "post",
            data: $("#searchForm").serialize(),
            success: function (response) {
                $("#resultContainer").html(response);
            }
        });
    },

    _bindEvents: function(){
        var self = this;
        $("#StartDate").datepicker(self.options.datePickerSettings);
        $("#EndDate").datepicker(self.options.datePickerSettings);

        $("#searchButton").on("click", function() {
            self.search();
        });
    }
}

そして、あなたはインスタンスを作成することができます

<script type="text/javascript" src="~/Scripts/app/portalen.js"></script>
<script type="text/javascript" src="~/Scripts/app/portalen-archive.js"></script>
<script type="text/javascript" src="~/Scripts/app/portalen-another-class.js"></script>
<script>
    $(function(){
        /* For now it will automaticly call init method..  */
        var archive = new Portalen.Archive({
                /* you can overwrite any optioin */
                someSettings: 'overwrite this option'
            });
    });
</script>

このパターンを改善するための提案をいただければ幸いです:)）

于 2012-10-26T10:56:17.427 に答える
1

JavaScriptはJavaではなく、すべてのエンティティをクラスで表す必要があります。したがって、JavaScriptでクラス/プロトタイプを使用しているのは、現在のタイプの複数のオブジェクトを作成する必要がある場合のみです。したがって、ここでクラスを作成する必要はないと思います。ただし、通常のJavaScriptオブジェクトを名前空間として使用できます。また、このメソッドにはではなく名前initを付けstartますが、もちろんそれはあなた次第です。

モジュール内：

var Portalen = (function($, window, app) {

    app.Archive = {} || app.Archive;

    var options = app.Archive.options = {
        minDate: new Date(2012, 0, 1),
        changeMonth: true,
        changeYear: true
    };

    var search = app.search = function() {
        $.ajax({
            url: "/Archive/Index",
            type: "post",
            data: $("#searchForm").serialize(),
            success: function (response) {
                $("#resultContainer").html(response);
            }
        });
    };

    app.Archive.init = function() {
        app.initDatePickers();
        app.initEventHandlers();
    };

    app.initDatePickers = function() {
        $("#StartDate").datepicker(options); // or app.options
        $("#EndDate").datepicker(options);
    };

    app.initEventHandlers = function() {
        $("#searchButton").on("click", app.search);
    };

    return app;
})(jQuery, window, Portalen || {});

何処か別の場所：

$(function() {
    Portalen.Archive.init();
});

さらに、JavaScriptモジュールを便利な方法で整理できるRequire.jsを確認することをお勧めします。

于 2012-10-26T07:55:49.683 に答える