JavaScript调用Server.Execute渲染ASP时反引号报错的解决方法

• 执行层级错位：Server.Execute是ASP服务端运行时方法，只会在服务器生成页面响应、还没把内容发给浏览器的阶段执行，根本不可能等到客户端JS判断完屏幕宽度再触发条件加载
• 语法匹配冲突：当前写法用JS模板字符串的反引号把ASP代码段包在里面，服务端输出的内容很容易打乱JS反引号的成对匹配规则，浏览器解析到错位的反引号就会直接抛语法错误
• 逻辑完全失效：就算硬把语法报错解决了，这种写法也会在服务端渲染阶段，无差别把桌面端、移动端两个ASP文件的内容全部输出到页面的JS代码块里，根本实现不了按终端尺寸加载对应内容的效果

• 拆分服务端逻辑：把桌面端、移动端需要加载的ASP文件，直接改成可以独立输出HTML片段的可访问页面，不要依赖在JS代码块里嵌套Server.Execute的方式加载
• 替换客户端填充逻辑：删掉所有反引号包裹的ASP代码段，改用jQuery的AJAX能力，在客户端判断完屏幕宽度后，异步请求对应路径的ASP文件，拿到返回的HTML再填充到#responsive-loader元素中，修改后的核心逻辑参考：

  // 初始化状态变量
  let Desktop_status = undefined, mobile_status = undefined;
  function getScreenResolution(t) {
      console.log(t);
      // 满足桌面端条件时加载对应内容
      if (t > 768 && Desktop_status !== true) {
          mobile_status = false;
          Desktop_status = true;
          $.get("/cmd/cmd-assets/includes/home-files/load-desktop.asp", function(res) {
              $("#responsive-loader").html(res);
              init();
          })
      }
      // 满足移动端条件时加载对应内容
      if (t <= 768 && mobile_status !== true) {
          mobile_status = true;
          Desktop_status = false;
          $.get("/cmd/cmd-assets/includes/home-files/load-mobile.asp", function(res) {
              $("#responsive-loader").html(res);
              init();
          })
      }
  }
  

• 优化体验细节：给resize事件加简单的防抖逻辑，避免窗口拖拽缩放过程中频繁发起重复请求；把原来代码里状态值和硬编码数字1做判断的逻辑，改成直接和布尔值对比，消除类型判断的隐患
• 规避语法冲突：如果确实要使用Server.Execute的服务端能力，只能把它放在页面的纯HTML渲染区域，绝对不能嵌入到客户端JS的函数、模板字符串内部，防止服务端输出的引号、反斜杠等特殊字符打乱JS语法结构

内容的提问来源于stack exchange，提问作者usama latif