使用Javascript在实时网站上创建测试环境

Question

我目前正在使用Salesforce Desk平台的后端，尝试对依赖的下拉菜单进行编码。 他们使用所谓的“案例主题”（Case-Themes），基本上是为客户端界面页面呈现布局。 问题是，当我创建自己的测试用例主题时，如果不发布它并使之生效就无法预览它。

我的问题是，如果我要使用Javascript基于参数值创建条件，这是否是发布实时主题而不弄乱前端视图/功能的有效方法？

<body>
<!-- Okay to Edit - Test Area -->
<div class="test_wrapper">
    <div class="test_header">
        <h1>DEVELOPMENT MODE</h1>
    </div>
    <hr>
    <div class="test_body">
        <h2>Development Header</h2>
        <p>Lorem ipsum dolor sit amet, consectetur </p>
    </div>
    <hr>
    <div class="test_footer">
        <h2>Development Header</h2>
        <p>Voluptate necessitatibus inventore explicabo blanditiis veniam odio.</p>
        <div id="test_button">Click</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elitinventore eligendi.</p>
        <br>
        <h2>Development SubSubHeading</h2>
        <p>Lorem ipsum dolor sit amet, consectetur quis veritatis.</p>
    </div>
    <script>
        $('#test_button').click(function(){
            alert('You are currently in Test Mode');
        });
    </script>
</div>
<!-- End Test Area -->

<!-- Don't Touch - Live Area -->
<div class="live_wrapper">
    <div class="live_header">
        <h1>Live Mode</h1>
    </div>
    <hr>
    <div class="live_body">
        <h2>Live Subheading </h2>
        <p>Lorem nis placeat vitae in qui iste laborum sequi ea.</p>
        <p>Lorem delectus possimus ipsam ex, doloribus placeat. Perspiciatis.</p>
    </div>
    <hr>
    <div class="live_footer">
        <h2>Live Subheading </h2>
        <p>Lorem veniam tempore provident minima, consequuntur. Qui iure blanditiis veniam odio.</p>
        <div id="live_button">Click</div>
        <p>Lorem vero illum necessitatibus iste rem pariatur quos autem inventore eligendi.</p>
        <br>
        <h2>Live SubSubHeading </h2>
        <p>Lorem tus porro eligendi autem optio facilis quis veritatis.</p>
    </div>
    <script>
        $('#live_button').click(function(){
            alert('You are currently in Live Mode');
        });
    </script>
</div>
<!-- End Live Area -->
<script>
    $(document).ready(function(){
        if (window.location.search.indexOf('mode=test') > -1) {
            $('.live_wrapper').hide();
            $('.test_wrapper').css('display', 'block');
            } else {
            $('.test_wrapper').hide();
            $('.live_wrapper').css('display', 'block');
        }
    });
</script>

如您所知，除非URL具有?mode=test ，否则应呈现实时代码。 有人可以指出这样做的危险/缺点吗？

Answer 1

我将为此使用CSS（在要隐藏的容器上使用display：none）。 使用查询参数的唯一缺点是，如果用户尝试，则可以查看您的测试HTML。 如果那不是问题，那就去解决。

只要确保您不公开任何人可以利用的API。

Answer 2

正如Dark Falcon在评论中所说，它将在等待JavaScript触发时短暂显示。 我建议将一个类添加到JS在测试模式下添加的body标签中，然后您可以执行以下操作：

body.test .live_wrapper {
   display: none;
}
body.test .test_wrapper {
   display: block;
}
body .live_wrapper {
   display: block;
}
body .test_wrapper {
   display: none;
}

基本上，将实时模式设置为默认模式，直到将主体的类别设置为“测试”为止

if (window.location.search.indexOf('mode=test') > -1) {
   $('body').addClass('test');
}

当然，除非您打算即时在它们之间进行更改，否则，假设您使用的是服务器端代码，则最好通过服务器端代码打开或关闭它们。

使用Javascript在实时网站上创建测试环境

问题描述

2 个解决方案

解决方案1
0 2014-11-07 14:37:51

解决方案2
0 已采纳 2014-11-07 14:59:18

使用Javascript在实时网站上创建测试环境

问题描述

2 个解决方案

解决方案1 0 2014-11-07 14:37:51

解决方案2 0 已采纳 2014-11-07 14:59:18

解决方案1
0 2014-11-07 14:37:51

解决方案2
0 已采纳 2014-11-07 14:59:18