將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更好，因爲這通常被稱爲「污染全局狀態」。但這很多時候都是你需要的。