使用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