Question

我正在寻找有关如何更好地构建我的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>

Answer 1

我最近开始使用require.js。它正在使用module模式。您可以定义模块，然后在需要时导入它们，并以某种python风格的导入方式表达依赖关系。

在这种情况下，额外的优势在于您不必滥用“类”创建来包装曾经使用过的代码以防止它污染全局命名空间。你可以使用模块，这是更清洁和更具表现力。您可以阅读有关模块模式here的目标。而且require.js使模块模式易于实现，同时为您提供AMD

等附加功能

Answer 2

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模块。

Answer 3

我有时会这样使用：

/* 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>

我将不胜感激任何建议改善这种模式:)）

寻找有关如何构建javascript的建议

3 个答案: