将服务器端数据输入 JavaScript 对象构造函数答案

【问题标题】：Feeding ServerSide data into JavaScript object constructor将服务器端数据输入 JavaScript 对象构造函数
【发布时间】：2016-03-15 15:02:21
【问题描述】：

我正在使用 ASP.NET MVC，我有一个简单的要求。我需要能够将两个服务器端值“注入”到我的 JavaScript 对象中。

我的 JavaScript 对象位于我的项目引用的单独 js 文件中，但我需要能够在对象第一次使用之前将数据注入到对象中。

我的代码目前看起来像这样。

var ImageSizeEnum = {
    Small: 0,
    Medium: 1,
    Large: 2
};

var UrlBuilder = (function (baseImageUrl, storageContainer) {

    var _baseImageUrl = baseImageUrl;
    var _storageContainer = storageContainer;

    this.BuildImageUrl = function (stockImage, imageSizeEnum) {
            var imageSizeString = "";
            switch (imageSizeEnum) {
                case ImageSizeEnum.Small:
                    imageSizeString = "sm";
                    break;
                case ImageSizeEnum.Medium:
                    imageSizeString = "md";
                    break;
                case ImageSizeEnum.Large:
                    imageSizeString = "lg";
                    break;
            }

            var url = kendo.format(_baseImageUrl + "_{2}{3}", _storageContainer, stockImage.AzureId, imageSizeString, stockImage.Extension);
            return url;
    };

});

它在我的_Layout.cshtml 页面中像这样调用。

$(function () {
    UrlBuilder("@WebConfigSettings.BaseImageUrlPath", "@WebConfigSettings.AzureStorageContainer");
});

但由于BuildImageUrl 未定义，此代码似乎无法正常工作。我认为这是因为我实际上并没有通过在声明时使用 () 调用 UrlBuilder 对象来初始化和返回它。

我对不同类型的 JavaScript 对象模式（即文字、函数等）有所了解，但我完全不确定解决我的特定问题的“正确”模式和方法是什么。

有什么建议吗？

【问题讨论】：

标签： javascript asp.net asp.net-mvc object constructor

【解决方案1】：

要使this.BuildImageUrl 真正表示assign BuildImageUrl to my UrlBuilder object，您必须使用new 关键字正确构造对象。

区别在于：

1- 没有new：this 指的是执行时存在的任何当前上下文，在这种情况下，我会说它是全局窗口对象。所以UrlBuilder.BuildImageUrl 将永远为空，因为你在技术上是在做window.BuildImageUrl = ...

2- 与new:

var builder = new UrlBuilder(
    "@WebConfigSettings.BaseImageUrlPath", "@WebConfigSettings.AzureStorageContainer");

this 现在可以正确引用新的 builder 对象。所以builder.BuildImageUrl会被定义。

如果您想访问新的构建器，您可以执行以下操作：

window.urlBuilder = new UrlBuilder(
    "@WebConfigSettings.BaseImageUrlPath", "@WebConfigSettings.AzureStorageContainer");

所以从任何地方：

urlBuilder.BuildImageUrl(...)

注意：取决于您使用的框架（或者如果您甚至正在使用一个），例如 angular，可能有比 window.urlBuilder 更好的方法，因为这是通常被称为“污染全球状态”。但很多时候这就是你所需要的。

【讨论】：

非常感谢，衷心感谢击破。