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>

如您所知，除非网址有?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;
}

这将基本上将实时模式设置为默认值，直到您将主体的类设置为“test”

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

当然，除非你打算在运行中进行更改，否则最好使用服务器端代码打开或关闭它们，假设你正在使用它。

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

2 个答案: