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

【问题标题】：Looking for suggestions on how to structure javascripts寻找有关如何构建 javascript 的建议
【发布时间】：2012-10-26 07:34:54
【问题描述】：

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

【问题讨论】：

标签： javascript design-patterns refactoring asp.net-mvc-4

【解决方案1】：

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

在这种情况下，额外的好处是您不必滥用“类”创建来包装曾经使用过的代码，以防止它污染全局命名空间。您可以为此使用模块，它更干净，更具表现力。您可以阅读关于模块模式here 的目标。并且 require.js 使模块模式易于实现，同时为您提供额外的功能，例如 AMD

【讨论】：

感谢您的提示，关于模块模式的非常好的文章。

【解决方案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 模块。

【讨论】：

我非常喜欢这种方法，使用成功，非常感谢！

【解决方案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>

我会感谢任何改进这种模式的建议:))

【讨论】：