将ServerSide数据提供给JavaScript对象构造函数

Question

我正在使用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对象模式（即文字，函数等）的不同类型，但我完全不确定'正确'模式和方法是如何解决我的特定问题的。

有什么建议吗？

Answer 1

对于this.BuildImageUrl实际上意味着assign BuildImageUrl to my UrlBuilder object您必须使用new关键字正确构造对象。

区别在于：

1-没有new：this指任何当前上下文存在而执行，在这种情况下，我会说这是全局的window对象。所以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(...) 

注：取决于你使用框架（或者如果你甚至使用一个），例如角度，可能比做window.urlBuilder更好，因为这通常被称为“污染全局状态”。但这很多时候都是你需要的。