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 奇葩技巧之隐藏代码,希望对大家有所帮助!

(0)

相关推荐

  • 大家未必知道的Js技巧收藏

    1.document.GetElementsByTagName可以获得某一个标签的所有元素,可以通过  document.getElementsByTagName('*') 获得页面上的所有元素,这里星号代表任何标签,而注释标签的tagName是"!" 2.String 的方法substr与substring的区别  substr(start[,length]);//表示从start位置开始取length个字符串 substring(start,end);//表示从start,到end

  • Android键盘显示与隐藏代码

    Java代码 复制代码 代码如下: InputMethodManager imm = (InputMethodManager)getSystemService(SendActivity.this.INPUT_METHOD_SERVICE); //显示键盘 imm.showSoftInput(editText, 0); //隐藏键盘 imm.hideSoftInputFromWindow(editText.getWindowToken(), 0);

  • js技巧--转义符"\"的妙用

    // blueDestiny, never-online // blueDestiny [at] 126.com 通常,我们在动态给定一个container的innerHTML时,通常是样做的: <div id="divc" /> <SCRIPT LANGUAGE="JavaScript"> var div = document.getElementById("divc"); var html = ""

  • js技巧收集(200多个) 超强推荐第1/2页

    1.文本框焦点问题 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect:当文字加亮后,产生该文件 <input type="text" value="郭强" onfocus="if(value=='郭强') {value=''}" onblur="if  (value=='') {value='郭强'}">点击时文字

  • css li 超出隐藏代码

    这样的方法新手们常常不知道该如何搞定.下面就是方法的演示.不过请注意此方法适用与IE与OP浏览器! 设置li超出部分显示省略号的方法 jb51.net jb51.net - Div CSS布局 常见问题 jb51.net - Div CSS布局 常见问题 jb51.net - Div CSS布局 常见问题 jb51.net - Div CSS布局 常见问题 jb51.net - Div CSS布局 常见问题 jb51.net - Div CSS布局 常见问题 jb51.net - Div CSS

  • js 奇葩技巧之隐藏代码

    昨天在群看到有人发了个文章叫<"短"化你的代码>,思路非常不错,采用unicode的零宽字符来实现字符隐藏,虽然有字符,可是你却看不见它. 这篇文章详细的介绍了这种方法的实现原理,最后还给出了一个生成工具. 当然,作者算了留了一个小小的练习给我们,因为他只用了两个字符,导致转换后的数据是原始数据的 8倍. 他给我们提供了4个零宽字符,我们就可以缩小至4倍. 好了,我们来看下代码吧. (function(window) { var rep = { // 替换用的数据,使用了4

  • js小技巧--自动隐藏红叉叉

    当文章中链接的图片失效时,就会看到令人讨厌的红叉叉,虽然图片有alt属性可以补救一下该图的意义,但都给人不友好的感觉.  如果给图片加一个判断,当加载失败时就不显示,这样可以产生更令用户满意的体验.  代码如下: <img src='none.gif' onerror="this.parentNode.removeChild(this)" style="display:none" onload="this.style.display='block'&

  • js控制li的隐藏和显示实例代码

    html页面 <div class="favorite_list"> <div class="list_type" id="list_type"> <ul class="all"> <li> <a href="javascript:void(0);" onclick="showli(1);">全部(<span class=

  • JS实现直接运行html代码的方法

    本文实例讲述了JS实现直接运行html代码的方法.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset='utf-8'/> <title>直接运行 html 代码</title> </head> <body> <textarea style='width:300px;height:200px;' id='txtCode'&

  • 必备的JS调试技巧汇总

    前言:任何一个编程者都少不了要去调试代码,不管你是高手还是菜鸟,调试程序都是一项必不可少的工作.一般来说调试程序是在编写代码之后或测试期修改Bug 时进行的,往往在调试代码期间更加能够体现出编程者的水平高低以及分析问题的准确度.不少初学者在寻找错误原因时,总是不得要领,花费了大量时间却无法解决一些最终证明是相当简单的Bug.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今天,如何在前端开发中降低开发成本,

  • yii2 页面底部加载css和js的技巧

    一般来说,网页内部的js文件或代码,都是放置在网页底部</body>的前面,这是因为网页自上而下加载,用户在访问我们页面的时候尽量不要因为加载js展现过长时间的空白页面,停留时间过长就白白流失了用户量. yii2中是集成了jQuery的,而且jQuery文件是加载在页面底部的,因此,如果我们的js代码段不在页面底部加载,就很大可能会发生$未定义的友好提示. 我这废话一大堆得毛病确实需要去挂个号看看了... 先来看看js代码段怎么处理 <?php $this->registerJs(

  • JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)

    本文实例讲述了JS实用技巧.分享给大家供大家参考,具体如下: js屏蔽错误 把下面的代码放在JS脚本中 <script type="text/javascript"> window.onerror = function(){ alert("出现脚本错误"); return true; } alert(b); </script> 注意:定义onerror事件应该在出错之前,否则任然会出现脚本错误 如何防止设置DIV出现滚动条? style=&q

  • 静态页面html中跳转传值的JS处理技巧

    本文实例讲述了静态页面html中跳转传值的JS处理技巧.分享给大家供大家参考,具体如下: 在html中通过"?"传值: <a href="index2.html?name=caoy">静态传值</a> 在跳转到的页面index2.html中接收: var name=UrlParm.parm("name"); 代码如下: index.html: <script type="text/javascript&qu

  • JS 进度条效果实现代码整理

    第一种方法:Loading.js 复制代码 代码如下: //频率 var frequency = 50; //步长 var step = 3; //背景颜色 var loadingBgcolor = "#ffffff"; //宽度 var loadingWidth = 354; /* *参数说明: *content:显示内容,可以为空: *imageURL:将引用JS文件的路径设置即可: *left:进度条显示位置left *top:进度条显示位置top */ function Loa

  • javascript学习总结之js使用技巧

    1 假如浏览器不支持JavaScript怎么办? a.为什么浏览器会不支持?大部分浏览器都有禁用脚本的功能,例如chrome. b.在js被禁用的情况下要保证网页仍能实现它的核心功能(关键的用户需求) 例子:在一个新窗口里打开链接,可以使用BOM的open()方法 function popUp(winURL) { window.open(winURL, "popup", "width=,height="); } 具体的js实现有以下几个方案: 方案一:使用javas

随机推荐