如何对Javascript代码进行二次压缩(混淆)

如何对Javascript代码进行二次压缩(混淆)

对Javascript代码进行压缩(混淆),可以有效减少传输和加载时间。但是,不是所有的变量(方法)都能被混淆的,一般来说,只有非属性的变量(方法)可以被混淆,而属性的变量(方法)就不行了。我们自己是知道这些属性(方法)是不会被外部访问和修改的,所以可以很放心地对其进行二次混淆。那么,如何自己定义混淆规则并进行二次混淆呢?

首先,页面上至少要用一个输入框和一个按钮。我这里设置有2个输入框,分别加上“uncompress”和“compress”两个类,表示为压缩和已压缩的。点击按钮,就开始压缩。

然后,自定义混淆规则,把压缩前和压缩后的字符串分别存在两个数组里面,然后,使用replace方法进行替换就可以了。代码如下:

var beforeArr = ['addUniqueClass', 'longValue', 'IDontKnowWhatIsIt'],
    afterArr = ['au', 'lv', 'idk'];
$("button").on('click', function() {
        var value = $(".uncompressed").val();
        var length = beforeArr.length;
        for(var i = 0; i< length; i ++) {
            value = value.replace(beforeArr[i], afterArr[i]);
        }
        $(".compressed").val(value);
});

 

好了,当我们用这个方法去压缩代码后,觉得不放心,看看是不是确实都替换了。在代码里面搜一搜有没有压缩前的字符串,发现还真有,这是怎么回事?原来,当我们只是用字符串替换字符串时,是只能替换一次的,如果后面还有就无法继续替换了。不过正则表达式里面有全局替换的功能,所以把字符串转换成全局的正则表达式就可以了。

$("button").on('click', function() {
        var value = $(".uncompressed").val();
        var length = beforeArr.length;
        for(var i = 0; i< length; i ++) {
            var exg = new RegExp(beforeArr[i], 'g');
            value = value.replace(exg, afterArr[i]);
        }
        $(".compressed").val(value);
});

  

这下,代码里面就搜不到压缩前的字符串了。

但还有一点不满意,就是维护性差了些,如果添加新的规则还好办,如果要修改或删除原有规则,那就没那么容易一一对应了。所以要做成映射关系比较直观的数组,像这样:

var Arr = [
  'addUniqueClass → au',
  'longValue → lv', 
  'IDontKnowWhatIsIt → idk'
];

  

 

这样,看起来就直观多了,剩下的只是把箭头两侧的字符串分别存在两个数组里面就可以了。

另外,为了避免像$这样的符号无法被识别出来,可以在正则表达式前面加上'\\'。

完整代码如下:

var Arr = [
  'addUniqueClass → au',
  'longValue → lv', 
  'IDontKnowWhatIsIt → idk'
],
    beforeArr = [],
    afterArr = [],
    arrLength = Arr.length;
for(var i = 0; i < ArrLength; i ++){
  var value = arr[i].split('→')[0].trim();
  beforeArr.push(value);
  value = arr[i].split('→')[1].trim();
  afterArr.push(value);
}
 
$("button").on('click', function() {
  var value = $(".uncompressed").val();
  var length = beforeArr.length;
  for(var i = 0; i< length; i ++) {
    var exg = new RegExp('\\' + beforeArr[i], 'g');
    value = value.replace(exg, afterArr[i]);
  }
  $(".compressed").val(value);
});

  

转载于:https://www.cnblogs.com/linzb1993/p/5949281.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值