从服务器脚本 (ASP.NET) 传递 JavaScript 变量名称和值

Question

有什么好的方法可以处理这种混乱、不必要且不是真正动态的 JavaScript 生成：

var <%# JavascriptId %> = new BusinessChart(
    '<%# JavascriptId %>',<%# CurrentUserId %>,'<%# ChartId %>'
    ,'<%# Helper.GetBaseUrl() %>','<%# ChartPath %>'
    ,'<%# Helper.ResolveUrl("~", true) %>'
);

<%# JavascriptId %>.Init();

我找到了这个other question，但答案似乎没有解决气味的来源。

我看到了一些具体问题：

• JavascriptId 是一个变量名。我为什么要在服务器端定义客户端变量名？
• 用户的 CurrentUserId 永远不会改变...这是他们的用户 ID。 GetBaseUrl() 和 ResolveUrl("~") 也一样...为什么我要到处传递常量？
• 我必须打开 aspx.cs 代码隐藏文件来调试东西，并且不能使用 Intellisense。

我已经提出了一些想法来处理上述问题（声明一个全局“应用程序”对象，jQuery + 在 DOM 元素上声明类），但我想听听更多关于此的想法。

Answer 1

你问的是代码smells，所以我猜代码情况的模糊性是合适的。例如，与 BusinessChart 有什么关系。这里有很多我们不知道的。但这是我闻到的味道： 只有你提到的第一个问题对我来说真的很糟糕。很奇怪必须在服务器上指定。我想这可能是一个原因，但我很难想象它。至于变量 CurrentUserID，这很容易有充分的理由。例如，可能 BusinessChart 根据用户的角色过滤不同的数据。

对于 GetBaseUrl 和 ResolvUrl，这也可能是合法的。 BusinessChart 可能需要一个完全限定的 URL，而 GetBaseUrl/ResolveUrl 是提供该 URL 的中心位置，因此您只需在一个位置进行配置更改。为什么不使用 web.config 参考呢？ Errrr，可能有多个 Web 应用程序或部署使用这些路径，Helper 类从一个公共数据库中获取这些 URL，为多个应用程序或部署提供一个公共配置位置。

至于使用代码隐藏。 . .有时这是必要的。虽然确实不需要像这样的动态代码，但有时那里的复杂性可以实现最大的整体简单性。

如您所见，我试图对现有代码提出质疑。但是，我不会惊讶地发现，正如您所怀疑的那样，您的示例中的所有动态代码确实毫无用处。我会说你的嗅觉似乎很不错！而且你说的第一个问题是最糟糕的。

Answer 2

也许您应该更多地关注数据驱动的 JavaScript。将您的数据存储为 JSON，让您的代码去做“codey”的事情：

// This is the dynamic data part
var charts = [{
  Id: '<%# JavascriptId %>',
  UserId: <%# CurrentUserId %>,
  ChartId: '<%# ChartId %>',
  BaseUrl: '<%# Helper.GetBaseUrl() %>',
  ChartPath: '<%# ChartPath %>',
  HomePath: '<%# Helper.ResolveUrl("~", true) %>'
}];

// This is just code that can be stored away 
// in the application's static javascript
function initChart(data) {
  var chart = new BusinessChart(
      data.Id, data.UserId, data.ChartId, 
      data.BaseUrl, data.ChartPath, data.HomePath);
  char.Init();
  return chart;
}

更好的是，不要将其放入 HTML 文件中，而是编写一个返回此 JSON 的 REST 请求处理程序。

现在您已经非常接近 AJAX 应用程序了。