動畫示範，JS代碼是怎樣被混淆加密的

本文分享的是一個動畫效果源碼，示範JS代碼是如何被加密的。

先看效果：

動畫示範，JS代碼是怎樣被混淆加密的一般我們在進行JS加密時，送出原始代碼，緊接着就直接得到了加密代碼，混淆加密過程是黑盒狀态，是不被我們知道的。

這個動畫，用慢放的效果，逐幀示範了JS代碼在進行混淆加密時發生的變化。

<h2>動畫示範：JShaman是怎樣對JS代碼混淆加密的</h2>
<button onclick="mini_change();">開始</button><br>
<br>
<textarea id="js_code" style="width:800px; height:200px;font-size:19px;">
function get_copyright(){
    var domain = "JShaman專注于JS代碼混淆加密";
    var from_year = 2017;
    var the_copyright = "(c)" + from_year + "-" + (new Date).getFullYear() + "," + domain;
    return the_copyright;
}
//輸出資訊
console.log(get_copyright());
</textarea>
<br>
注：示範的是JShaman專業版部分效果
<script>

    var index = 0;
    var js_code_textarea = document.getElementById("js_code");
    var change_matrix = [
        ["\n",""],
        ["    ",""],
        ["var domain","var _"],
        ["\n",""],
        ["    ",""],
        ["var from_year","var _2"],
        ["\n",""],
        ["    ",""],
        ["var the_copyright","var _3"],
        ["from_year","_2"],
        ["\n",""],
        ["    ",""],
        ["\n",""],
        ["the_copyright","_3"],
        ["domain","_"],
        ["\n",""],
        ["//輸出資訊",""],
        ["\n",""],
        ["function get_copyright(){",""],
        ["}",""],
        ["get_copyright()","function(){"+`var _ = "JShaman專注于JS代碼混淆加密";var _2 = 2017;var _3 = "(c)" + _2 + "-" + (new Date).getFullYear() + "," + _;return _3;`+"}()"],
        [`var _ = "JShaman專注于JS代碼混淆加密";var _2 = 2017;var _3 = "(c)" + _2 + "-" + (new Date).getFullYear() + "," + _;return _3;`,""],
    ]
    
    function mini_change(){
        js_code_textarea.value = js_code_textarea.value.replace(change_matrix[index][0], change_matrix[index][1]);
        index++;
        console.log(index[0]);

        if(index >change_matrix.length-1){
            console.log("執行");
            eval(js_code_textarea.value);
            alert("示範完成");
            return;
        }else{
            setTimeout(mini_change,1000);
        }
    }
</script>