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

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();
});

​ 另外我想建议你看看Require.js，它可以让你以方便的方式组织你的 JavaScript 模块。

于 2012-10-26T07:55:49.683 回答
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 回答