javascript - 如何保持 C# 和 Javascript 代码同步？

Question

我认为这个问题可能会出现在任何人身上，我对如何充分利用技术来保持我的代码库干燥和同步感兴趣。

我正在开发一个 ASP.NET MVC5 Web 应用程序。我有几个变量需要与客户端沟通。说“PageType”，我需要使用 Google Analytics 在客户端进行跟踪。意图可能多种多样，这是一个具有相同目的的简单应用程序，用于说明。

我有一个 C# 类，它允许我指定各种 PageType，并在它们之间进行切换以进行切换大小写，例如:

public static class PageTypes {
    public const String Home = "Home";
    public const String AboutUs = "AboutUs";
    public const String ContactUs = "ContactUs";
}

当我们检查动态值时，这很有用，例如:

String pageType = ViewBag.PageType;
if(!String.IsNullOrWhiteSpace(pageType))
{
    switch(pageType)
    {
        case PageTypes.Home:
            // do something here
            break;
        case PageTypes.AboutUs:
            // do something else here
            break;
        ...

...甚至在进行比较时。我希望你明白这一点。因此，在 Razor View 中，我可以在内联脚本的页面中输出 var pageType = '@ViewBag.PageType'; ，它将显示为 var pageType = 'Home' ; 或者诸如此类的情况，在页面的内联 javascript 中。现在，就像我对 C# 代码所做的那样，我希望能够在 javascript 中切换页面类型的大小写。

// This part is dynamic so will be inline script of the razor view
var pageType = 'Home';

// This part is logic so can reside in an external script

// This part is just illustration, I will worry about naming and accessibility later
// This will be in a separate script and will be included, and will be referenced, thereby providing Intellisense within Visual Studio
var PageTypes = {
    Home: 'Home',
    AboutUs: 'AboutUs'
};

// I should be able to do this, in an external script
switch(pageType){
    case PageTypes.Home:
        alert('Home!');
        break;
    case PageTypes.AboutUs:
        alert('Not Home');
        break;
    default:
        alert('Nothing');
        break;
}

可见，如果C#的static class PageTypes与JavaScript中的var PageTypes同步的话，对我们开发者来说是一个福音，智能感知和预定义值，以便避免拼写错误和值不兼容。

在 C# 和 JavaScript 中获得智能感知的同时实现这一目标的最佳方法是什么？

我更喜欢 C# 的改变影响 JS，而不是相反。 switch 语句不需要转换，只需转换常量值，就像我提到的那样。

我认为构建过程中的脚本可能很有用，但是有没有任何工具/插件/替代方法可以完成我提到的任务？

Answer 1

如果我明白问题是什么，你可以做的是:

• 使用模板引擎在 html 标记内的某个变量中设置页面类型(抱歉，我不使用 .Net，不知道如何编写它)。在此示例中，我在 body 元素中使用了 data-*

• 在你的js中，检索数据类型值(在示例中，我使用了jquery)

  var type = $("body").data("type");

• 在键/对象变量/对象内定义一些函数，每个函数都适合您的页面类型

  var PageTypeFunctions = { 首页:函数(){

  },
  aboutus: function() {
  
  },
  xpto: function() {
  
  }
  

  }

• 从

  调用函数

  PageTypeFunctionstype;

使用这种方法，您将不必处理 PageTypes 变量。对于每种页面类型，您只需要一个函数。当然，您可以进行一些检查来验证 PageTypeFunctions[type] 是否存在。