js 奇葩技巧之隐藏代码

 更新时间:2017年08月11日 10:33:00   作者:楼教主  
这篇文章主要介绍了js 奇葩技巧之隐藏代码,通过代码示例展示了隐藏代码的过程,需要的朋友可以参考下

昨天在群看到有人发了个文章叫《“短”化你的代码》,思路非常不错,采用unicode的零宽字符来实现字符隐藏,虽然有字符,可是你却看不见它。
这篇文章详细的介绍了这种方法的实现原理,最后还给出了一个生成工具。

当然,作者算了留了一个小小的练习给我们,因为他只用了两个字符,导致转换后的数据是原始数据的 8倍。
他给我们提供了4个零宽字符,我们就可以缩小至4倍。

好了,我们来看下代码吧。

(function(window) {
 var rep = { // 替换用的数据,使用了4个零宽字符,数据量减少了一半。
  '00': '\u200b',
  '01': '\u200c',
  '10': '\u200d',
  '11': '\uFEFF'
 };
 function hide(str) {
  str = str.replace(/[^\x00-\xff]/g, function(a) { // 转码 Latin-1 编码以外的字符。
   return escape(a).replace('%', '\\');
  });
  str = str.replace(/[\s\S]/g, function(a) { // 处理二进制数据并且进行数据替换
   a = a.charCodeAt().toString(2);
   a = a.length < 8 ? Array(9 - a.length).join('0') + a : a;
   return a.replace(/../g, function(a) {
    return rep[a];
   });
  });
  return str;
 }
 var tpl = '("@code".replace(/.{4}/g,function(a){var rep={"\u200b":"00","\u200c":"01","\u200d":"10","\uFEFF":"11"};return String.fromCharCode(parseInt(a.replace(/./g, function(a) {return rep[a]}),2))}))';
 window.hider = function(code, type) {
  var str = hide(code); // 生成零宽字符串
  str = tpl.replace('@code', str); // 生成模版
  if (type === 'eval') {
   str = 'eval' + str;
  } else {
   str = 'Function' + str + '()';
  }
  return str;
 }
})(window);

大家可以通过最简单的代码例子进行测试一下,看看效果如何,也可以进一步优化,或者写成插件什么的,就当练习吧。。
虽然这个东西没什么实际用处,不过有时候玩玩还是不错的,可出面试题吓唬新人哦。。

以上就是小编为大家整理的js 奇葩技巧之隐藏代码,希望对大家有所帮助!

相关文章

  • uniapp常用路由跳转的几种方式(navigateTo、redirectTo...)

    uniapp常用路由跳转的几种方式(navigateTo、redirectTo...)

    uni-app有两种方式进行路由跳转,下面这篇文章主要给大家介绍了关于uniapp常用路由跳转的几种方式(navigateTo、redirectTo...),文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • 今天分享几个少见却很有用的 JS 技巧

    今天分享几个少见却很有用的 JS 技巧

    这篇文章主要介绍了今天分享几个少见却很有用的 JS 技巧,非常不错,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-10-10
  • axios/fetch实现stream流式请求示例详解

    axios/fetch实现stream流式请求示例详解

    这篇文章主要为大家介绍了axios/fetch实现stream流式请求示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • 图片预载入

    图片预载入

    [红色]图片预载入...
    2006-10-10
  • 使用Three.js 实现虎年春节3D创意页面

    使用Three.js 实现虎年春节3D创意页面

    虎年春节将至,本文使用 React + Three.js技术栈,实现趣味 3D创意页面,主要包括:ShadowMaterial、 MeshPhongMaterial等基本材质的使用、使用 LoadingManager展示模型加载进度、OrbitControls`的缓动动画、TWEEN简单补间动画效果等,感兴趣的朋友一起看看吧
    2022-01-01
  • 30分钟快速入门掌握ES6/ES2015的核心内容(上)

    30分钟快速入门掌握ES6/ES2015的核心内容(上)

    ES6增加了很多新的语法,很多同学学习起来感觉很别扭,有时候也不理解新增加的语法有什么用,对ES6的学习也没有兴趣进而动力不足、学习效率不高。下面这篇文章将通过30分钟带大家快速入门掌握ES6/ES2015的核心内容,需要的朋友可以参考下。
    2018-04-04
  • Bootstrap的基本应用要点浅析

    Bootstrap的基本应用要点浅析

    BootStrap是基于HTML、CSS和JavaScript的框架,使你只需要写简单的代码就可以很快的搭建一个还不错的前端框架,他是后端程序员的福音,使他们只需要专注业务逻辑,而无须浪费太多的精力在界面设计上
    2016-12-12
  • javascript中parseInt()函数的定义和用法分析

    javascript中parseInt()函数的定义和用法分析

    这篇文章主要介绍了javascript中parseInt()函数的定义和用法,较为详细的分析了parseInt()函数的定义及具体用法,以及参数使用时的注意事项,需要的朋友可以参考下
    2014-12-12
  • 关于对TypeScript泛型参数的默认值理解

    关于对TypeScript泛型参数的默认值理解

    泛型可以理解为宽泛的类型,通常用于类和函数,下面这篇文章主要给大家介绍了关于对TypeScript泛型参数默认值的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • 基于Echarts实现饼图效果

    基于Echarts实现饼图效果

    这篇文章主要为大家详细介绍了基于Echarts实现饼图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05

最新评论