text: 
  function readTxt() {
      // var outputs = "there\"s no server side";
      // document.getElementsByClassName("output")[0].innerHTML = outputs;
      const html = '<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1" /><title>前端不为人知的一面--前端冷知识集锦 - 刘哇勇 - 博客园</title><link type="text/css" rel="stylesheet" href="/bundles/blog-common.css?v=03KQeESEmpLfzDqUo0NiWUg5Zd5aRam3JHBZTK05Wug1"/><link id="MainCss" type="text/css" rel="stylesheet" href="/skins/ThinkInside/bundle-ThinkInside.css?v=RRjf6pEarGnbXZ86qxNycPfQivwSKWRa4heYLB15rVE1"/><link type="text/css" rel="stylesheet" href="/blog/customcss/123544.css?v=EqtVeCByYwaGj84pme4j%2fP%2bB6o0%3d"/><link id="mobile-style" media="only screen and (max-width: 768px)" type="text/css" rel="stylesheet" href="/skins/ThinkInside/bundle-ThinkInside-mobile.css?v=LjwgQ0FzHvrnBwqVgaX9-PCi828F5QvBpVgcPmzg8hc1"/><link title="RSS" type="application/rss+xml" rel="alternate" href="http://www.cnblogs.com/Wayou/rss"/><link title="RSD" type="application/rsd+xml" rel="EditURI" href="http://www.cnblogs.com/Wayou/rsd.xml"/><link type="application/wlwmanifest+xml" rel="wlwmanifest" href="http://www.cnblogs.com/Wayou/wlwmanifest.xml"/><script src="//common.cnblogs.com/script/jquery.js" type="text/javascript"></script><script type="text/javascript">var currentBlogApp = "Wayou", cb_enable_mathjax=false;var isLogined=true;</script><script src="/bundles/blog-common.js?v=sOdYid7LG2hTngUynaywFfjiZPGYTVbrXvHf35yaPPs1" type="text/javascript"></script></head><body><a name="top"></a><link rel="stylesheet" type="text/css" href="http://files.cnblogs.com/Wayou/pace.css"/><link href="http://files.cnblogs.com/Wayou/not.css" media="screen" rel="stylesheet" type="text/css" /><script type="text/javascript" src="http://files.cnblogs.com/Wayou/pace.min.js"></script><script type="text/javascript" src="http://files.cnblogs.com/Wayou/not.js"></script><script type="text/javascript">window.onload = function() {    $("#MyLinks1_MyHomeLink").attr("href", "http://www.cnblogs.com/wayou/p/");    $("#cnblogs_post_body em").parent("p").addClass("emphasis_block");    $("#cnblogs_post_body a").attr("target", "_blank");    $("<a class="fastCom" id="fastCom"  title="快速评论" href="#comment_form_container"></a>").appendTo("#cnblogs_post_body");    $(window).scroll(function() {        if ($(this).scrollTop()) {            $("#toTop").stop(true, true).fadeIn()        } else {            $("#toTop").stop(true, true).fadeOut()        }    });    var e = ["感谢推荐！顶贴的都是好人  \\(^______^)/", "欢迎参与评论，博主很激动  \\(^______^)/", "要登陆了才能进行操作哦~"];    $(".diggit").bind("click", function() {        $.notific8($(".login_tips").length == 0 ? e[0] : e[2], {            life: 3e3,            heading: "来自博主的问候:",            theme: "smoke",            sticky: false,            horizontalEdge: "top",            verticalEdge: "right",            zindex: 1500        })    });    $("#btn_comment_submit").bind("click", function() {        $.notific8(e[1], {            life: 3e3,            heading: "来自博主的问候:",            theme: "smoke",            sticky: false,            horizontalEdge: "top",            verticalEdge: "right",            zindex: 1500        })    });    if ($(".login_tips").length != 0) {        $("#fastCom").bind("click", function() {            $.notific8(e[2], {                life: 3e3,                heading: "来自博主的问候:",                theme: "smoke",                sticky: false,                horizontalEdge: "top",                verticalEdge: "right",                zindex: 1500            })        })    }    ;(function() {        (function(e) {            return $.fn.wanker = function(e) {                var t;                t = $.extend({                    delay: 1e3,                    duration: 1500                }, e);                return this.each(function() {                    var e, n, r, i, s, o, u;                    e = $(this);                    i = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);                    if (!i) {                        r = false;                        o = null;                        n = null;                        u = null;                        s = function() {                            r = false;                            return n = null                        };                        return $(window).resize(function() {                            if (r) {                                n = Math.abs(new Date - o)                            } else {                                o = new Date;                                r = true                            } if (n > t.delay) {                                e.fadeIn()                            }                            if (u) {                                clearTimeout(u)                            }                            return u = setTimeout(function() {                                e.fadeOut();                                return s()                            }, t.duration)                        })                    }                })            }        })($)    }).call(this);    $("[data-wanker]").wanker();    $("#tbCommentBody").attr("placeholder","来吧~少年，消灭零回复！");}</script><div id="home"><div id="header">	<div id="blogTitle">	<a id="lnkBlogLogo" href="http://www.cnblogs.com/Wayou/"><img id="blogLogo" src="/Skins/custom/images/logo.gif" alt="返回主页" /></a>					<h1><a id="Header1_HeaderTitle" class="headermaintitle" href="http://www.cnblogs.com/Wayou/">刘哇勇的部落格</a></h1><h2></h2>			</div>	<div id="navigator">		<ul id="navList"><li><a id="blog_nav_sitehome" class="menu" href="http://www.cnblogs.com/">博客园</a></li><li><a id="blog_nav_myhome" class="menu" href="http://www.cnblogs.com/Wayou/">首页</a></li><li></li><li></li><li><a id="blog_nav_rss" class="menu" href="http://www.cnblogs.com/Wayou/rss">订阅</a></li><li><a id="blog_nav_admin" class="menu" rel="nofollow" href="https://i.cnblogs.com/">管理</a></li></ul>		<div class="blogStats">						<div id="blog_stats"><span id="stats_post_count">随笔 - 82&nbsp;</span><span id="stats_article_count">文章 - 1&nbsp;</span><span id="stats-comment_count">评论 - 1610</span></div>					</div>	</div></div><div id="main">	<div id="mainContent">	<div class="forFlow">		<div id="post_detail"><div id="topics">	<div class = "post">		<h1 class = "postTitle">			<a id="cb_post_title_url" class="postTitle2" href="http://www.cnblogs.com/Wayou/p/things_you_dont_know_about_frontend.html">前端不为人知的一面--前端冷知识集锦</a>		</h1>		<div class="clear"></div>		<div class="postBody">			<div id="cnblogs_post_body"><p>前端已经被玩儿坏了！像<a href="http://www.cnblogs.com/Wayou/p/chrome_dev_tool_style_console.html">console.log()可以向控制台输出图片</a>等炫酷的玩意已经不是什么新闻了，像用<span style="background-color: #c0c0c0;">||</span>操作符给变量赋默认值也是人尽皆知的旧闻了，今天看到Quora上一个<a href="http://www.quora.com/Web-Development/What-are-the-most-interesting-HTML-JS-DOM-CSS-hacks-that-most-web-developers-dont-know-about?utm_source=html5weekly&amp;utm_medium=email">帖子</a>，瞬间又GET了好多前端技能，一些属于技巧，一些则是闻所未闻的冷知识，一时间还消化不过来。现分类整理出来分享给大家，也补充了一些平时的积累和扩展了一些内容。</p><h1>HTML篇</h1><h2>浏览器地址栏运行JavaScript代码</h2><p>这个很多人应该还是知道的，在浏览器地址栏可以直接运行JavaScript代码，做法是以<span style="background-color: silver;">javascript:</span>开头后跟要执行的语句。比如：</p><div class="highlight" style="background: #272822;"><pre><span style="color: #a6e22e;">javascript</span><span style="color: #f92672;">:</span><span style="color: #a6e22e;">alert</span><span style="color: #f8f8f2;">(</span><span style="color: #e6db74;">"hello from address bar :)"</span><span style="color: #f8f8f2;">);</span></pre></div><p>将以上代码贴到浏览器地址栏回车后<span style="background-color: silver;">alert</span>正常执行，一个弹窗神现。</p><p><em>需要注意的是如果是通过copy paste代码到浏览器地址栏的话，IE及Chrome会自动去掉代码开头的<span style="background-color: silver;">javascript:</span>，所以需要手动添加起来才能正确执行，而Firefox中虽然不会自动去掉，但它根本就不支持在地址栏运行JS代码，sigh~</em></p><p>这一技术在我的另一篇博文《<a href="http://www.cnblogs.com/Wayou/p/set_chrome_your_default_email_handler.html">让Chrome 接管邮件连接，收发邮件更方便了</a>》中有使用到，利用在浏览器地址栏中执行JavaScript代码将Gmail设置为系统的邮件接管程序。</p><h2>浏览器地址栏运行HTML代码</h2><p>如果说上面那条小秘密知道的人还算多的话，这条秘笈知道的人就要少一些了，在非IE内核的浏览器地址栏可以直接运行HTML代码！</p><p>比如在地址栏输入以下代码然后回车运行，会出现指定的页面内容。</p><div class="highlight" style="background: #272822;"><pre>data:text/html,<span style="color: #f92672;">&lt;h1&gt;</span>Hello, world!<span style="color: #f92672;">&lt;/h1&gt;</span></pre></div><p>&nbsp;</p><p><img src="http://images.cnitblog.com/blog/431064/201404/101915156379194.png" alt="" /></p><h2>你造么，可以把浏览器当编辑器</h2><p>还是浏览器地址栏上做文章，将以下代码贴到地址栏运行后浏览器变成了一个原始而简单的编辑器，与Windows自带的notepad一样，吼吼。</p><div class="highlight" style="background: #272822;"><pre>data:text/html,<span style="color: #f92672;">&lt;html</span><span style="color: #a6e22e;">contenteditable</span><span style="color: #f92672;">&gt;</span></pre></div><p>&nbsp;</p><p><img src="http://images.cnitblog.com/i/431064/201404/102028041379059.gif" alt="" /></p><p>归根结底多亏了HTML5中新加的<span style="background-color: silver;">contenteditable</span>属性，当元素指定了该属性后，元素的内容成为可编辑状态。</p><p>推而广之，将以下代码放到console执行后，整个页面将变得可编辑，随意践踏吧~</p><div class="highlight" style="background: #272822;"><pre><span style="color: #f8f8f2;">document.</span><span style="color: #a6e22e;">body</span><span style="color: #f8f8f2;">.</span><span style="color: #a6e22e;">contentEditable</span><span style="color: #f92672;">=</span><span style="color: #e6db74;">"true"</span><span style="color: #f8f8f2;">;</span></pre></div><p>&nbsp;</p><p><img src="http://images.cnitblog.com/i/431064/201404/101958425287841.gif" alt="" /></p><p>&nbsp;</p><h2>利用a标签自动解析URL</h2><p>很多时候我们有从一个URL中提取域名，查询关键字，变量参数值等的需要，而万万没想到可以让浏览器方便地帮我们完成这一任务而不用我们写正则去抓取。方法就在JS代码里先创建一个<span style="background-color: silver;">a标签</span>然后将需要解析的URL赋值给<span style="background-color: silver;">a</span>的<span style="background-color: silver;">href</span>属性，然后就得到了一切我们想要的了。</p><div class="highlight" style="background: #272822;"><pre><span style="color: #66d9ef;">var</span><span style="color: #a6e22e;">a</span><span style="color: #f92672;">=</span><span style="color: #f8f8f2;">document.</span><span style="color: #a6e22e;">createElement</span><span style="color: #f8f8f2;">(</span><span style="color: #e6db74;">"a"</span><span style="color: #f8f8f2;">);</span><span style="color: #a6e22e;">a</span><span style="color: #f8f8f2;">.</span><span style="color: #a6e22e;">href</span><span style="color: #f92672;">=</span><span style="color: #e6db74;">"http://www.cnblogs.com/wayou/p/"</span><span style="color: #f8f8f2;">;</span><span style="color: #a6e22e;">console</span><span style="color: #f8f8f2;">.</span><span style="color: #a6e22e;">log</span><span style="color: #f8f8f2;">(</span><span style="color: #a6e22e;">a</span><span style="color: #f8f8f2;">.</span><span style="color: #a6e22e;">host</span><span style="color: #f8f8f2;">);</span></pre></div><p><img src="http://images.cnitblog.com/blog/431064/201404/101915173257879.png" alt="" /></p><p>利用这一原理，稍微扩展一下，就得到了一个更加健壮的解析URL各部分的通用方法了。下面代码来自<a href="http://james.padolsey.com/javascript/parsing-urls-with-the-dom/">James的博客</a>。</p><div class="highlight" style="background: #272822;"><pre><span style="color: #66d9ef;">function</span><span style="color: #a6e22e;">parseURL</span><span style="color: #f8f8f2;">(</span><span style="color: #a6e22e;">url</span><span style="color: #f8f8f2;">)</span><span style="color: #f8f8f2;">{</span><span style="color: #66d9ef;">var</span><span style="color: #a6e22e;">a</span><span style="color: #f92672;">=</span><span style="color: #f8f8f2;">document.</span><span style="color: #a6e22e;">createElement</span><span style="color: #f8f8f2;">(</span><span style="color: #e6db74;">"a"</span><span style="color: #f8f8f2;">);</span><span style="color: #a6e22e;">a</span><span style="color: #f8f8f2;">.</span><span style="color: #a6e22e;">href</span><span style="color: #f92672;">=</span><span style="color: #a6e22e;">url</span><span style="color: #f8f8f2;">;</span><span style="color: #66d9ef;">return</span><span style="color: #f8f8f2;">{</span><span style="color: #a6e22e;">source</span><span style="color: #f92672;">:</span><span style="color: #a6e22e;">url</span><span style="color: #f8f8f2;">,</span><span style="color: #a6e22e;">protocol</span><span style="color: #f92672;">:</span><span style="color: #a6e22e;">a</span><span style="color: #f8f8f2;">.</span><span style="color: #a6e22e;">protocol</span><span style="color: #f8f8f2;">.</span><span style="color: #a6e22e;">replace</span><span style="color: #f8f8f2;">(</span><span style="color: #e6db74;">":"</span><span style="color: #f8f8f2;">,</span><span style="color: #e6db74;">""</span><span style="color: #f8f8f2;">),</span><span style="color: #a6e22e;">host</span><span style="color: #f92672;">:</span><span style="color: #a6e22e;">a</span><span style="color: #f8f8f2;">.</span><span style="color: #a6e22e;">hostname</span><span style="color: #f8f8f2;">,</span><span style="color: #a6e22e;">port</span><span style="color: #f92672;">:</span><span style="color: #a6e22e;">a</span><span style="color: #f8f8f2;">.</span><span style="color: #a6e22e;">port</span><span style="color: #f8f8f2;">,</span><span style="color: #a6e22e;">query</span><span style="color: #f92672;">:</span><span style="color: #a6e22e;">a</span><span style="color: #f8f8f2;">.</span><span style="color: #a6e22e;">search</span><span style="color: #f8f8f2;">,</span><span style="color: #a6e22e;">params</span><span style="color: #f92672;">:</span><span style="color: #f8f8f2;">(</span><span style="color: #66d9ef;">function</span><span style="color: #f8f8f2;">(){</span><span style="color: #66d9ef;">var</span><span style="color: #a6e22e;">ret</span><span style="color: #f92672;">=</span><span style="color: #f8f8f2;">{},</span><span style="color: #a6e22e;">seg</span><span style="color: #f92672;">=</span><span style="color: #a6e22e;">a</span><span style="color: #f8f8f2;">.</span><span style="color: #a6e22e;">search</span><span style="color: #f8f8f2;">.</span><span style="color: #a6e22e;">replace</span><span style="color: #f8f8f2;">(</span><span style="color: #e6db74;">/^\?/</span><span style="color: #f8f8f2;">,</span><span style="color: #e6db74;">""</span><span style="color: #f8f8f2;">).</span><span style="color: #a6e22e;">split</span><span style="color: #f8f8f2;">(</span><span style="color: #e6db74;">"&amp;"</span><span style="color: #f8f8f2;">),</span><span style="color: #a6e22e;">len</span><span style="color: #f92672;">=</span><span style="color: #a6e22e;">seg</span><span style="color: #f8f8f2;">.</span><span style="color: #a6e22e;">length</span><span style="color: #f8f8f2;">,</span><span style="color: #a6e22e;">i</span><span style="color: #f92672;">=</span><span style="color: #ae81ff;">0</span><span style="color: #f8f8f2;">,</span><span style="color: #a6e22e;">s</span><span style="color: #f8f8f2;">;</span><span style="color: #66d9ef;">for</span><span style="color: #f8f8f2;">(;</span><span style="color: #a6e22e;">i</span><span style="color: #f92672;">&lt;</span><span style="color: #a6e22e;">len</span><span style="color: #f8f8f2;">;</span><span style="color: #a6e22e;">i</span><span style="color: #f92672;">++</span><span style="color: #f8f8f2;">)</span><span style="color: #f8f8f2;">{</span><span style="color: #66d9ef;">if</span><span style="color: #f8f8f2;">(</span><span style="color: #f92672;">!</span><span style="color: #a6e22e;">seg</span><span style="color: #f8f8f2;">[</span><span style="color: #a6e22e;">i</span><span style="color: #f8f8f2;">])</span><span style="color: #f8f8f2;">{</span><span style="color: #66d9ef;">continue</span><span style="color: #f8f8f2;">;</span><span style="color: #f8f8f2;">}</span><span style="color: #a6e22e;">s</span><span style="color: #f92672;">=</span><span style="color: #a6e22e;">seg</span><span style="color: #f8f8f2;">[</span><span style="color: #a6e22e;">i</span><span style="color: #f8f8f2;">].</span><span style="color: #a6e22e;">split</span><span style="color: #f8f8f2;">(</span><span style="color: #e6db74;">"="</span><span style="color: #f8f8f2;">);</span><span style="color: #a6e22e;">ret</span><span style="color: #f8f8f2;">[</span><span style="color: #a6e22e;">s</span><span style="color: #f8f8f2;">[</span><span style="color: #ae81ff;">0</span><span style="color: #f8f8f2;">]]</span><span style="color: #f92672;">=</span><span style="color: #a6e22e;">s</span><span style="color: #f8f8f2;">[</span><span style="color: #ae81ff;">1</span><span style="color: #f8f8f2;">];</span><span style="color: #f8f8f2;">}</span><span style="color: #66d9ef;">return</span><span style="color: #a6e22e;">ret</span><span style="color: #f8f8f2;">;</span><span style="color: #f8f8f2;">})(),</span><span style="color: #a6e22e;">file</span><span style="color: #f92672;">:</span><span style="color: #f8f8f2;">(</span><span style="color: #a6e22e;">a</span><span style="color: #f8f8f2;">.</span><span style="color: #a6e22e;">pathname</span><span style="color: #f8f8f2;">.</span><span style="color: #a6e22e;">match</span><span style="color: #f8f8f2;">(</span><span style="color: #e6db74;">/\/([^\/?#]+)$/i</span><span style="color: #f8f8f2;">)</span><span style="color: #f92672;">||</span><span style="color: #f8f8f2;">[,</span><span style="color: #e6db74;">""</span><span style="color: #f8f8f2;">])[</span><span style="color: #ae81ff;">1</span><span style="color: #f8f8f2;">],</span><span style="color: #a6e22e;">hash</span><span style="color: #f92672;">:</span><span style="color: #a6e22e;">a</span><span style="color: #f8f8f2;">.</span><span style="color: #a6e22e;">hash</span><span style="color: #f8f8f2;">.</span><span style="color: #a6e22e;">replace</span><span style="color: #f8f8f2;">(</span><span style="color: #e6db74;">"#"</span><span style="color: #f8f8f2;">,</span><span style="color: #e6db74;">""</span><span style="color: #f8f8f2;">),</span><span style="color: #a6e22e;">path</span><span style="color: #f92672;">:</span><span style="color: #a6e22e;">a</span><span style="color: #f8f8f2;">.</span><span style="color: #a6e22e;">pathname</span><span style="color: #f8f8f2;">.</span><span style="color: #a6e22e;">replace</span><span style="color: #f8f8f2;">(</span><span style="color: #e6db74;">/^([^\/])/</span><span style="color: #f8f8f2;">,</span><span style="color: #e6db74;">"/$1"</span><span style="color: #f8f8f2;">),</span><span style="color: #a6e22e;">relative</span><span style="color: #f92672;">:</span><span style="color: #f8f8f2;">(</span><span style="color: #a6e22e;">a</span><span style="color: #f8f8f2;">.</span><span style="color: #a6e22e;">href</span><span style="color: #f8f8f2;">.</span><span style="color: #a6e22e;">match</span><span style="color: #f8f8f2;">(</span><span style="color: #e6db74;">/tps?:\/\/[^\/]+(.+)/</span><span style="color: #f8f8f2;">)</span><span style="color: #f92672;">||</span><span style="color: #f8f8f2;">[,</span><span style="color: #e6db74;">""</span><span style="color: #f8f8f2;">])[</span><span style="color: #ae81ff;">1</span><span style="color: #f8f8f2;">],</span><span style="color: #a6e22e;">segments</span><span style="color: #f92672;">:</span><span style="color: #a6e22e;">a</span><span style="color: #f8f8f2;">.</span><span style="color: #a6e22e;">pathname</span><span style="color: #f8f8f2;">.</span><span style="color: #a6e22e;">replace</span><span style="color: #f8f8f2;">(</span><span style="color: #e6db74;">/^\//</span><span style="color: #f8f8f2;">,</span><span style="color: #e6db74;">""</span><span style="color: #f8f8f2;">).</span><span style="color: #a6e22e;">split</span><span style="color: #f8f8f2;">(</span><span style="color: #e6db74;">"/"</span><span style="color: #f8f8f2;">)</span><span style="color: #f8f8f2;">};</span><span style="color: #f8f8f2;">}</span></pre></div><h2>页面拥有ID的元素会创建全局变量</h2><p>在一张HTML页面中，所有设置了ID属性的元素会在JavaScript的执行环境中创建对应的全局变量，这意味着<span style="background-color: silver;">document.getElementById</span>像人的阑尾一样显得多余了。但实际项目中最好老老实实该怎么写就怎么写，毕竟常规代码出乱子的机会要小得多。</p><div class="highlight" style="background: #272822;"><pre><span style="color: #f92672;">&lt;div</span><span style="color: #a6e22e;">id=</span><span style="color: #e6db74;">"sample"</span><span style="color: #f92672;">&gt;&lt;/div&gt;</span><span style="color: #f92672;">&lt;script</span><span style="color: #a6e22e;">type=</span><span style="color: #e6db74;">"text/javascript"</span><span style="color: #f92672;">&gt;</span><span style="color: #a6e22e;">console</span><span style="color: #f8f8f2;">.</span><span style="color: #a6e22e;">log</span><span style="color: #f8f8f2;">(</span><span style="color: #a6e22e;">sample</span><span style="color: #f8f8f2;">);</span><span style="color: #f92672;">&lt;/script&gt;</span></pre></div><p><img src="http://images.cnitblog.com/blog/431064/201404/101915206068576.png" alt="" /></p><h2>加载CDN文件时，可以省掉HTTP标识</h2><p>现在很流行的CDN即从专门的服务器加载一些通用的JS和CSS文件，出于安全考虑有的CDN服务器使用HTTPS方式连接，而有的是传统的HTTP，其实我们在使用时可以忽略掉这个，将它从URL中省去。</p><div class="highlight" style="background: #272822;"><pre><span style="color: #f92672;">&lt;script</span><span style="color: #a6e22e;">src=</span><span style="color: #e6db74;">"//domain.com/path/to/script.js"</span><span style="color: #f92672;">&gt;&lt;/script&gt;</span></pre></div><p>&nbsp;这一点在之前一篇译文博客《<a href="http://www.cnblogs.com/Wayou/p/jquery_best_practise.html">jQuery编程最佳实践</a>》中也有提到。</p><h2>利用script标签保存任意信息</h2><p>将script标签设置为<span style="background-color: silver;">type="text"</span>然后可以在里面保存任意信息，之后可以在JavaScript代码中很方便地获取。</p><div class="highlight" style="background: #272822;"><pre><span style="color: #f92672;">&lt;script</span><span style="color: #a6e22e;">type=</span><span style="color: #e6db74;">"text"</span><span style="color: #a6e22e;">id=</span><span style="color: #e6db74;">"template"</span><span style="color: #f92672;">&gt;</span>	<span style="color: #f92672;">&lt;h1&gt;</span>This won"t display<span style="color: #f92672;">&lt;/h1&gt;</span><span style="color: #f92672;">&lt;/script&gt;</span></pre></div><p>&nbsp;</p><div class="highlight" style="background: #272822;"><pre><span style="color: #66d9ef;">var</span><span style="color: #a6e22e;">text</span><span style="color: #f92672;">=</span><span style="color: #f8f8f2;">document.</span><span style="color: #a6e22e;">getElementById</span><span style="color: #f8f8f2;">(</span><span style="color: #e6db74;">"template"</span><span style="color: #f8f8f2;">).</span><span style="color: #a6e22e;">innerHTML</span></pre></div><h1>CSS篇</h1><h2>关于CSS的恶作剧</h2><p>相信你看完以下代码后能够预料到会出现什么效果。</p><div class="highlight" style="background: #272822;"><pre><span style="color: #f92672;">*</span><span style="color: #f8f8f2;">{</span><span style="color: #66d9ef;">cursor</span><span style="color: #f92672;">:</span><span style="color: #66d9ef;">none</span><span style="color: #75715e;">!important</span><span style="color: #f8f8f2;">;</span><span style="color: #f8f8f2;">}</span></pre></div><p><img src="http://images.cnitblog.com/i/431064/201404/111126147314580.jpg" alt="" /></p><h2>简单的文字模糊效果</h2><p>以下两行简单的CSS3代码可达到将文字模糊化处理的目的，出来的效果有点像使用PS的滤镜，so cool!</p><div class="highlight" style="background: #272822;"><pre><span style="color: #f92672;">p</span><span style="color: #f8f8f2;">{</span><span style="color: #66d9ef;">color</span><span style="color: #f92672;">:</span><span style="color: #66d9ef;">transparent</span><span style="color: #f8f8f2;">;</span><span style="color: #66d9ef;">text-shadow</span><span style="color: #f92672;">:</span><span style="color: #ae81ff;">#111</span><span style="color: #ae81ff;">0</span><span style="color: #ae81ff;">0</span><span style="color: #ae81ff;">5px</span><span style="color: #f8f8f2;">;</span><span style="color: #f8f8f2;">}</span></pre></div><p>&nbsp;</p><p><img src="http://images.cnitblog.com/blog/431064/201404/101915212789204.png" alt="" /></p><p>&nbsp;</p><h2>垂直居中</h2><p>有好多次博主都有这样的需求，垂直居中显示某个DIV，我们知道CSS中天然有水平居中的样式<span style="background-color: silver;">text-align:center</span>。唯独这个垂直居中无解。</p><p>当然你可以将容器设置为<span style="background-color: silver;">display:table</span>，然后将子元素也就是要垂直居中显示的元素设置为<span style="background-color: silver;">display:table-cell</span>，然后加上<span style="background-color: silver;">vertical-align:middle</span>来实现，但此种实现往往会因为<span style="background-color: silver;">display：table</span>而破坏整体布局，那还不如直接用<span style="background-color: #c0c0c0;">table标签</span>了呢。</p><p>下面这个样式利用了<span style="background-color: silver;">translate</span>来巧妙实现了垂直居中样式，需IE9+。</p><div class="highlight" style="background: #272822;"><pre><span style="color: #a6e22e;">.center-vertical</span><span style="color: #f8f8f2;">{</span><span style="color: #66d9ef;">position</span><span style="color: #f92672;">:</span><span style="color: #66d9ef;">relative</span><span style="color: #f8f8f2;">;</span><span style="color: #66d9ef;">top</span><span style="color: #f92672;">:</span><span style="color: #ae81ff;">50</span><span style="color: #f92672;">%</span><span style="color: #f8f8f2;">;</span><span style="color: #f8f8f2;">transform</span><span style="color: #f92672;">:</span><span style="color: #f8f8f2;">translateY(</span><span style="color: #ae81ff;">-50</span><span style="color: #f92672;">%</span><span style="color: #f8f8f2;">);</span><span style="color: #f8f8f2;">}</span></pre></div><p>相比而言，水平居中要简单得多，像上面提到的<span style="background-color: silver;">text-align:center</span>，经常用到的技巧还有<span style="background-color: silver;">margin:0 auto</span>。但对于<span style="background-color: silver;">margin</span>大法也只在子元素宽度小于容器宽度时管用，当子元素宽度大于容器宽度时此法失效。</p><p>如法炮制，利用<span style="background-color: silver;">left</span>和<span style="background-color: silver;">transform</span>同样可实现水平居中，不过意义不大，毕竟<span style="background-color: silver;">text-align</span>和<span style="background-color: silver;">margin</span>差不多满足需求了。</p><div class="highlight" style="background: #272822;"><pre><span style="color: #a6e22e;">.center-horizontal</span><span style="color: #f8f8f2;">{</span><span style="color: #66d9ef;">position</span><span style="color: #f92672;">:</span><span style="color: #66d9ef;">relative</span><span style="color: #f8f8f2;">;</span><span style="color: #66d9ef;">left</span><span style="color: #f92672;">:</span><span style="color: #ae81ff;">50</span><span style="color: #f92672;">%</span><span style="color: #f8f8f2;">;</span><span style="color: #f8f8f2;">transform</span><span style="color: #f92672;">:</span><span style="color: #f8f8f2;">translateX(</span><span style="color: #ae81ff;">-50</span><span style="color: #f92672;">%</span><span style="color: #f8f8f2;">);</span><span style="color: #f8f8f2;">}</span></pre></div><p>&nbsp;</p><h2>多重边框</h2><p>利用重复指定<span style="background-color: silver;">box-shadow</span>来达到多个边框的效果</p><p><a href="http://dabblet.com/gist/4034534"> 在线演示</a>&nbsp; &nbsp;&nbsp;</p><div class="highlight" style="background: #272822;"><pre><span style="color: #75715e;"></span><span style="color: #f92672;">div</span><span style="color: #f8f8f2;">{</span><span style="color: #f8f8f2;">box</span><span style="color: #f92672;">-</span><span style="color: #f8f8f2;">shadow</span><span style="color: #f92672;">:</span><span style="color: #ae81ff;">0</span><span style="color: #ae81ff;">0</span><span style="color: #ae81ff;">0</span><span style="color: #ae81ff;">6px</span><span style="color: #f8f8f2;">rgba(</span><span style="color: #ae81ff;">0</span><span style="color: #f92672;">,</span><span style="color: #ae81ff;">0</span><span style="color: #f92672;">,</span><span style="color: #ae81ff;">0</span><span style="color: #f92672;">,</span><span style="color: #ae81ff;">0</span><span style="color: #f92672;">.</span><span style="color: #ae81ff;">2</span><span style="color: #f8f8f2;">)</span><span style="color: #f92672;">,</span><span style="color: #ae81ff;">0</span><span style="color: #ae81ff;">0</span><span style="color: #ae81ff;">0</span><span style="color: #ae81ff;">12px</span><span style="color: #f8f8f2;">rgba(</span><span style="color: #ae81ff;">0</span><span style="color: #f92672;">,</span><span style="color: #ae81ff;">0</span><span style="color: #f92672;">,</span><span style="color: #ae81ff;">0</span><span style="color: #f92672;">,</span><span style="color: #ae81ff;">0</span><span style="color: #f92672;">.</span><span style="color: #ae81ff;">2</span><span style="color: #f8f8f2;">)</span><span style="color: #f92672;">,</span><span style="color: #ae81ff;">0</span><span style="color: #ae81ff;">0</span><span style="color: #ae81ff;">0</span><span style="color: #ae81ff;">18px</span><span style="color: #f8f8f2;">rgba(</span><span style="color: #ae81ff;">0</span><span style="color: #f92672;">,</span><span style="color: #ae81ff;">0</span><span style="color: #f92672;">,</span><span style="color: #ae81ff;">0</span><span style="color: #f92672;">,</span><span style="color: #ae81ff;">0</span><span style="color: #f92672;">.</span><span style="color: #ae81ff;">2</span><span style="color: #f8f8f2;">)</span><span style="color: #f92672;">,</span><span style="color: #ae81ff;">0</span><span style="color: #ae81ff;">0</span><span style="color: #ae81ff;">0</span><span style="color: #ae81ff;">24px</span><span style="color: #f8f8f2;">rgba(</span><span style="color: #ae81ff;">0</span><span style="color: #f92672;">,</span><span style="color: #ae81ff;">0</span><span style="color: #f92672;">,</span><span style="color: #ae81ff;">0</span><span style="color: #f92672;">,</span><span style="color: #ae81ff;">0</span><span style="color: #f92672;">.</span><span style="color: #ae81ff;">2</span><span style="color: #f8f8f2;">);</span><span style="color: #66d9ef;">height</span><span style="color: #f92672;">:</span><span style="color: #ae81ff;">200px</span><span style="color: #f8f8f2;">;</span><span style="color: #66d9ef;">margin</span><span style="color: #f92672;">:</span><span style="color: #ae81ff;">50px</span><span style="color: #66d9ef;">auto</span><span style="color: #f8f8f2;">;</span><span style="color: #66d9ef;">width</span><span style="color: #f92672;">:</span><span style="color: #ae81ff;">400px</span><span style="color: #f8f8f2;">}</span></pre></div><p>&nbsp;</p><p><img src="http://images.cnitblog.com/blog/431064/201404/101915219188076.png" alt="" /></p><h2>实时编辑CSS</h2><p>通过设置style标签的<span style="background-color: silver;">display:block</span>样式可以让页面的<span style="background-color: silver;">style</span>标签显示出来，并且加上<span style="background-color: silver;">contentEditable</span>属性后可以让样式成为可编辑状态，更改后的样式效果也是实时更新呈现的。此技巧在IE下无效。拥有此技能者，逆天也！</p><div class="highlight" style="background: #272822;"><pre><span style="color: #75715e;">&lt;!DOCTYPE html&gt;</span><span style="color: #f92672;">&lt;html&gt;</span><span style="color: #f92672;">&lt;body&gt;</span><span style="color: #f92672;">&lt;style</span><span style="color: #a6e22e;">style=</span><span style="color: #e6db74;">"display:block"</span><span style="color: #a6e22e;">contentEditable</span><span style="color: #f92672;">&gt;</span>        	<span style="color: #f92672;">body</span><span style="color: #f8f8f2;">{</span><span style="color: #66d9ef;">color</span><span style="color: #f92672;">:</span><span style="color: #f8f8f2;">blue</span><span style="color: #f8f8f2;">}</span><span style="color: #f92672;">&lt;/style&gt;</span><span style="color: #f92672;">&lt;/body&gt;</span><span style="color: #f92672;">&lt;/html&gt;</span></pre></div><p>&nbsp;</p><p><img src="http://images.cnitblog.com/i/431064/201404/101959317158348.gif" alt="" /></p><h2>创建长宽比固定的元素</h2><p>通过设置父级窗口的<span style="background-color: silver;">padding-bottom</span>可以达到让容器保持一定的长度比的目的，这在响应式页面设计中比较有用，能够保持元素不变形。</p><div class="highlight" style="background: #272822;"><pre><span style="color: #f92672;">&lt;div</span><span style="color: #a6e22e;">style=</span><span style="color: #e6db74;">"width: 100%; position: relative; padding-bottom: 20%;"</span><span style="color: #f92672;">&gt;</span><span style="color: #f92672;">&lt;div</span><span style="color: #a6e22e;">style=</span><span style="color: #e6db74;">"position: absolute; left: 0; top: 0; right: 0; bottom: 0;background-color:yellow;"</span><span style="color: #f92672;">&gt;</span>        this content will have a constant aspect ratio that varies based on the width.<span style="color: #f92672;">&lt;/div&gt;</span><span style="color: #f92672;">&lt;/div&gt;</span></pre></div><p>&nbsp;<img src="http://images.cnitblog.com/i/431064/201404/102304341842348.gif" alt="" /></p><h2>CSS中也可以做简单运算</h2><p>通过CSS中的<span style="background-color: silver;">calc</span>方法可以进行一些简单的运算，从而达到动态指定元素样式的目的。</p><div class="highlight" style="background: #272822;"><pre><span style="color: #a6e22e;">.container</span><span style="color: #f8f8f2;">{</span>	<span style="color: #66d9ef;">background-position</span><span style="color: #f92672;">:</span><span style="color: #f8f8f2;">calc(</span><span style="color: #ae81ff;">100</span><span style="color: #f92672;">%</span><span style="color: #f92672;">-</span><span style="color: #ae81ff;">50px</span><span style="color: #f8f8f2;">)</span><span style="color: #f8f8f2;">calc(</span><span style="color: #ae81ff;">100</span><span style="color: #f92672;">%</span><span style="color: #f92672;">-</span><span style="color: #ae81ff;">20px</span><span style="color: #f8f8f2;">);</span><span style="color: #f8f8f2;">}</span></pre></div><p>&nbsp;</p><h1>JavaScript篇</h1><h2>生成随机字符串</h2><p>利用<span style="background-color: silver;">Math.random</span>和<span style="background-color: silver;">toString</span>生成随机字符串，来自前一阵子看到的一篇<a href="http://flippinawesome.org/2013/12/23/45-useful-javascript-tips-tricks-and-best-practices/">博文</a>。这里的技巧是利用了<span style="background-color: #c0c0c0;">toString</span>方法可以接收一个基数作为参数的原理，这个基数从2到36封顶。如果不指定，默认基数是10进制。略屌！ &nbsp; &nbsp;</p><div class="highlight" style="background: #272822;"><pre><span style="color: #66d9ef;">function</span><span style="color: #a6e22e;">generateRandomAlphaNum</span><span style="color: #f8f8f2;">(</span><span style="color: #a6e22e;">len</span><span style="color: #f8f8f2;">)</span><span style="color: #f8f8f2;">{</span><span style="color: #66d9ef;">var</span><span style="color: #a6e22e;">rdmString</span><span style="color: #f92672;">=</span><span style="color: #e6db74;">""</span><span style="color: #f8f8f2;">;</span><span style="color: #66d9ef;">for</span><span style="color: #f8f8f2;">(;</span><span style="color: #a6e22e;">rdmString</span><span style="color: #f8f8f2;">.</span><span style="color: #a6e22e;">length</span><span style="color: #f92672;">&lt;</span><span style="color: #a6e22e;">len</span><span style="color: #f8f8f2;">;</span><span style="color: #a6e22e;">rdmString</span><span style="color: #f92672;">+=</span><span style="color: #f8f8f2;">Math.</span><span style="color: #a6e22e;">random</span><span style="color: #f8f8f2;">().</span><span style="color: #a6e22e;">toString</span><span style="color: #f8f8f2;">(</span><span style="color: #ae81ff;">36</span><span style="color: #f8f8f2;">).</span><span style="color: #a6e22e;">substr</span><span style="color: #f8f8f2;">(</span><span style="color: #ae81ff;">2</span><span style="color: #f8f8f2;">));</span><span style="color: #66d9ef;">return</span><span style="color: #a6e22e;">rdmString</span><span style="color: #f8f8f2;">.</span><span style="color: #a6e22e;">substr</span><span style="color: #f8f8f2;">(</span><span style="color: #ae81ff;">0</span><span style="color: #f8f8f2;">,</span><span style="color: #a6e22e;">len</span><span style="color: #f8f8f2;">);</span><span style="color: #f8f8f2;">}</span></pre></div><p>&nbsp;</p><p><img src="http://images.cnitblog.com/blog/431064/201404/101915229657890.png" alt="" /></p><h2>整数的操作</h2><p>JavaScript中是没有整型概念的，但利用好位操作符可以轻松处理，同时获得效率上的提升。</p><p><span style="background-color: silver;">|0</span>和<span style="background-color: silver;">~~</span>是很好的一个例子，使用这两者可以将浮点转成整型且效率方面要比同类的<span style="background-color: #c0c0c0;">parseInt</span>,<span style="background-color: #c0c0c0;">Math.round</span> 要快。在处理像素及动画位移等效果的时候会很有用。性能比较<a href="http://jsperf.com/math-floor-vs-math-round-vs-parseint/42">见此</a>。</p><div class="highlight" style="background: #272822;"><pre><span style="color: #66d9ef;">var</span><span style="color: #a6e22e;">foo</span><span style="color: #f92672;">=</span><span style="color: #f8f8f2;">(</span><span style="color: #ae81ff;">12.4</span><span style="color: #f92672;">/</span><span style="color: #ae81ff;">4.13</span><span style="color: #f8f8f2;">)</span><span style="color: #f92672;">|</span><span style="color: #ae81ff;">0</span><span style="color: #f8f8f2;">;</span><span style="color: #75715e;">//结果为3</span><span style="color: #66d9ef;">var</span><span style="color: #a6e22e;">bar</span><span style="color: #f92672;">=</span><span style="color: #f92672;">~~</span><span style="color: #f8f8f2;">(</span><span style="color: #ae81ff;">12.4</span><span style="color: #f92672;">/</span><span style="color: #ae81ff;">4.13</span><span style="color: #f8f8f2;">);</span><span style="color: #75715e;">//结果为3</span></pre></div><p>&nbsp;顺便说句，<span style="background-color: silver;">!!</span>将一个值方便快速转化为布尔值<span style="background-color: silver;">!!window===true</span> 。</p><p>&nbsp;</p><h2>重写原生浏览器方法以实现新功能</h2><p>下载的代码通过重写浏览器的<span style="background-color: silver;">alert</span>让它可以记录弹窗的次数。</p><div class="highlight" style="background: #272822;"><pre><span style="color: #f8f8f2;">(</span><span style="color: #66d9ef;">function</span><span style="color: #f8f8f2;">()</span><span style="color: #f8f8f2;">{</span><span style="color: #66d9ef;">var</span><span style="color: #a6e22e;">oldAlert</span><span style="color: #f92672;">=</span><span style="color: #f8f8f2;">window.</span><span style="color: #a6e22e;">alert</span><span style="color: #f8f8f2;">,</span><span style="color: #a6e22e;">count</span><span style="color: #f92672;">=</span><span style="color: #ae81ff;">0</span><span style="color: #f8f8f2;">;</span><span style="color: #f8f8f2;">window.</span><span style="color: #a6e22e;">alert</span><span style="color: #f92672;">=</span><span style="color: #66d9ef;">function</span><span style="color: #f8f8f2;">(</span><span style="color: #a6e22e;">a</span><span style="color: #f8f8f2;">)</span><span style="color: #f8f8f2;">{</span><span style="color: #a6e22e;">count</span><span style="color: #f92672;">++</span><span style="color: #f8f8f2;">;</span><span style="color: #a6e22e;">oldAlert</span><span style="color: #f8f8f2;">(</span><span style="color: #a6e22e;">a</span><span style="color: #f92672;">+</span><span style="color: #e6db74;">"\n You"ve called alert "</span><span style="color: #f92672;">+</span><span style="color: #a6e22e;">count</span><span style="color: #f92672;">+</span><span style="color: #e6db74;">" times now. Stop, it"s evil!"</span><span style="color: #f8f8f2;">);</span><span style="color: #f8f8f2;">};</span><span style="color: #f8f8f2;">})();</span><span style="color: #a6e22e;">alert</span><span style="color: #f8f8f2;">(</span><span style="color: #e6db74;">"Hello World"</span><span style="color: #f8f8f2;">);</span></pre></div><p>&nbsp;</p><h2>关于console的恶作剧</h2><p>关于重写原生方法，这里有个恶作剧大家可以拿去寻开心。Chrome的<span style="background-color: silver;">console.log</span>是支持对文字添加样式的，甚至<span style="background-color: silver;">log</span>图片都可以。于是可以重写掉默认的log方法，把将要log的文字应用到CSS的模糊效果，这样当有人试图调用<span style="background-color: silver;">console.log()</span>的时候，出来的是模糊不清的文字。好冷，我表示没有笑。</p><p>是从<a href="https://plus.google.com/+AddyOsmani/posts/TanDFKEN9Kn">这篇</a>G+帖子的评论里看到的。使用之后的效果是再次调用log会输出字迹模糊不清的文字。</p><div class="highlight" style="background: #272822;"><pre><span style="color: #66d9ef;">var</span><span style="color: #a6e22e;">_log</span><span style="color: #f92672;">=</span><span style="color: #a6e22e;">console</span><span style="color: #f8f8f2;">.</span><span style="color: #a6e22e;">log</span><span style="color: #f8f8f2;">;</span><span style="color: #a6e22e;">console</span><span style="color: #f8f8f2;">.</span><span style="color: #a6e22e;">log</span><span style="color: #f92672;">=</span><span style="color: #66d9ef;">function</span><span style="color: #f8f8f2;">()</span><span style="color: #f8f8f2;">{</span><span style="color: #a6e22e;">_log</span><span style="color: #f8f8f2;">.</span><span style="color: #a6e22e;">call</span><span style="color: #f8f8f2;">(</span><span style="color: #a6e22e;">console</span><span style="color: #f8f8f2;">,</span><span style="color: #e6db74;">"%c"</span><span style="color: #f92672;">+</span><span style="color: #f8f8f2;">[].</span><span style="color: #a6e22e;">slice</span><span style="color: #f8f8f2;">.</span><span style="color: #a6e22e;">call</span><span style="color: #f8f8f2;">(</span><span style="color: #a6e22e;">arguments</span><span style="color: #f8f8f2;">).</span><span style="color: #a6e22e;">join</span><span style="color: #f8f8f2;">(</span><span style="color: #e6db74;">" "</span><span style="color: #f8f8f2;">),</span><span style="color: #e6db74;">"color:transparent;text-shadow:0 0 2px rgba(0,0,0,.5);"</span><span style="color: #f8f8f2;">);</span><span style="color: #f8f8f2;">};</span></pre></div><p>&nbsp;<img src="http://images.cnitblog.com/i/431064/201404/110034275752237.jpg" alt="" /></p><h2>不声明第三个变量的值交换</h2><p>我们都知道交换两个变量值的常规做法，那就是声明一个中间变量来暂存。但鲜有人去挑战不声明中间变量的情况，下面的代码给出了这种实现。蛮有创意 的。</p><div class="highlight" style="background: #272822;"><pre><span style="color: #66d9ef;">var</span><span style="color: #a6e22e;">a</span><span style="color: #f92672;">=</span><span style="color: #ae81ff;">1</span><span style="color: #f8f8f2;">,</span><span style="color: #a6e22e;">b</span><span style="color: #f92672;">=</span><span style="color: #ae81ff;">2</span><span style="color: #f8f8f2;">;</span><span style="color: #a6e22e;">a</span><span style="color: #f92672;">=</span><span style="color: #f8f8f2;">[</span><span style="color: #a6e22e;">b</span><span style="color: #f8f8f2;">,</span><span style="color: #a6e22e;">b</span><span style="color: #f92672;">=</span><span style="color: #a6e22e;">a</span><span style="color: #f8f8f2;">][</span><span style="color: #ae81ff;">0</span><span style="color: #f8f8f2;">];</span></pre></div><p>&nbsp;<img src="http://images.cnitblog.com/i/431064/201404/110037490758544.jpg" alt="" /></p><h2>万物皆对象</h2><p>在JavaScript的世界，万物皆对象。除了<span style="background-color: #c0c0c0;">null</span>和<span style="background-color: #c0c0c0;">undefined</span>，其他基本类型数字，字符串和布尔值都有对应有包装对象。对象的一个特征是你可以在它身上直接调用方法。对于数字基本类型，当试图在其身上调用<span style="background-color: silver;">toString</span>方法会失败，但用括号括起来后再调用就不会失败了，内部实现是用相应的包装对象将基本类型转为对象。所以<span style="background-color: silver;">(1).toString()</span>相当于<span style="background-color: silver;">new Number(1).toString()</span>。因此，你的确可以把基本类型数字，字符串，布尔等当对象使用的，只是注意语法要得体。</p><p>同时我们注意到，JavaScript中数字是不分浮点和整形的，所有数字其实均是浮点类型，只是把小数点省略了而以，比如你看到的<span style="background-color: #c0c0c0;">1</span>可以写成<span style="background-color: #c0c0c0;">1.</span>，这也就是为什么当你试图<span style="background-color: silver;">1.toString()</span>时会报错，所以正确的写法应该是这样：<span style="background-color: silver;">1..toString()</span>，或者如上面所述加上括号，这里括号的作用是纠正JS解析器，不要把<span style="background-color: #c0c0c0;">1</span>后面的点当成小数点。内部实现如上面所述，是将<span style="background-color: #c0c0c0;">1.</span>用包装对象转成对象再调用方法。</p><h2>If语句的变形</h2><p>当你需要写一个<span style="background-color: silver;">if</span>语句的时候，不妨尝试另一种更简便的方法，用JavaScript中的逻辑操作符来代替。</p><div class="highlight" style="background: #272822;"><pre><span style="color: #66d9ef;">var</span><span style="color: #a6e22e;">day</span><span style="color: #f92672;">=</span><span style="color: #f8f8f2;">(</span><span style="color: #66d9ef;">new</span><span style="color: #f8f8f2;">Date).</span><span style="color: #a6e22e;">getDay</span><span style="color: #f8f8f2;">()</span><span style="color: #f92672;">===</span><span style="color: #ae81ff;">0</span><span style="color: #f8f8f2;">;</span><span style="color: #75715e;">//传统if语句</span><span style="color: #66d9ef;">if</span><span style="color: #f8f8f2;">(</span><span style="color: #a6e22e;">day</span><span style="color: #f8f8f2;">)</span><span style="color: #f8f8f2;">{</span>	<span style="color: #a6e22e;">alert</span><span style="color: #f8f8f2;">(</span><span style="color: #e6db74;">"Today is Sunday!"</span><span style="color: #f8f8f2;">);</span><span style="color: #f8f8f2;">};</span><span style="color: #75715e;">//运用逻辑与代替if</span><span style="color: #a6e22e;">day</span><span style="color: #f92672;">&amp;&amp;</span><span style="color: #a6e22e;">alert</span><span style="color: #f8f8f2;">(</span><span style="color: #e6db74;">"Today is Sunday!"</span><span style="color: #f8f8f2;">);</span></pre></div><p>比如上面的代码，首先得到今天的日期，如果是星期天，则弹窗，否则什么也不做。我们知道逻辑操作存在短路的情况，对于逻辑与表达式，只有两者都真才结果才为真，如果前面的<span style="background-color: silver;">day</span>变量被判断为假了，那么对于整个与表达式来说结果就是假，所以就不会继续去执行后面的<span style="background-color: silver;">alert</span>了，如果前面<span style="background-color: silver;">day</span>为真，则还要继续执行后面的代码来确定整个表达式的真假。利用这点达到了<span style="background-color: silver;">if</span>的效果。</p><p>对于传统的<span style="background-color: silver;">if</span>语句，如果执行体代码超过了1 条语句，则需要加花括号，而利用逗号表达式，可以执行任意条代码而不用加花括号。</p><div class="highlight" style="background: #272822;"><pre><span style="color: #66d9ef;">if</span><span style="color: #f8f8f2;">(</span><span style="color: #a6e22e;">conditoin</span><span style="color: #f8f8f2;">)</span><span style="color: #a6e22e;">alert</span><span style="color: #f8f8f2;">(</span><span style="color: #ae81ff;">1</span><span style="color: #f8f8f2;">),</span><span style="color: #a6e22e;">alert</span><span style="color: #f8f8f2;">(</span><span style="color: #ae81ff;">2</span><span style="color: #f8f8f2;">),</span><span style="color: #a6e22e;">console</span><span style="color: #f8f8f2;">.</span><span style="color: #a6e22e;">log</span><span style="color: #f8f8f2;">(</span><span style="color: #ae81ff;">3</span><span style="color: #f8f8f2;">);</span></pre></div><p>上面<span style="background-color: silver;">if</span>语句中，如果条件成立则执行三个操作，但我们不需要用花括号将这三句代码括起来。当然，这是不推荐的，这里是冷知识课堂:)</p><p>&nbsp;</p><h2>禁止别人以iframe加载你的页面</h2><p>下面的代码已经不言自明了，没什么好多说的。</p><div class="highlight" style="background: #272822;"><pre><span style="color: #66d9ef;">if</span><span style="color: #f8f8f2;">(window.</span><span style="color: #a6e22e;">location</span><span style="color: #f92672;">!=</span><span style="color: #f8f8f2;">window.</span><span style="color: #a6e22e;">parent</span><span style="color: #f8f8f2;">.</span><span style="color: #a6e22e;">location</span><span style="color: #f8f8f2;">)</span><span style="color: #f8f8f2;">window.</span><span style="color: #a6e22e;">parent</span><span style="color: #f8f8f2;">.</span><span style="color: #a6e22e;">location</span><span style="color: #f92672;">=</span><span style="color: #f8f8f2;">window.</span><span style="color: #a6e22e;">location</span><span style="color: #f8f8f2;">;</span></pre></div><p>&nbsp;</p><h2>console.table</h2><p>Chrome专属，IE绕道的<span style="background-color: silver;">console</span>方法。可以将JavaScript关联数组以表格形式输出到浏览器<span style="background-color: silver;">console</span>，效果很惊赞，界面很美观。</p><div class="highlight" style="background: #272822;"><pre><span style="color: #75715e;">//采购情况</span><span style="color: #66d9ef;">var</span><span style="color: #a6e22e;">data</span><span style="color: #f92672;">=</span><span style="color: #f8f8f2;">[{</span><span style="color: #e6db74;">"品名"</span><span style="color: #f92672;">:</span><span style="color: #e6db74;">"杜雷斯"</span><span style="color: #f8f8f2;">,</span><span style="color: #e6db74;">"数量"</span><span style="color: #f92672;">:</span><span style="color: #ae81ff;">4</span><span style="color: #f8f8f2;">},</span><span style="color: #f8f8f2;">{</span><span style="color: #e6db74;">"品名"</span><span style="color: #f92672;">:</span><span style="color: #e6db74;">"冈本"</span><span style="color: #f8f8f2;">,</span><span style="color: #e6db74;">"数量"</span><span style="color: #f92672;">:</span><span style="color: #ae81ff;">3</span><span style="color: #f8f8f2;">}];</span><span style="color: #a6e22e;">console</span><span style="color: #f8f8f2;">.</span><span style="color: #a6e22e;">table</span><span style="color: #f8f8f2;">(</span><span style="color: #a6e22e;">data</span><span style="color: #f8f8f2;">);</span></pre></div><p>&nbsp;</p><p><img src="http://images.cnitblog.com/blog/431064/201404/101915232787860.png" alt="" /></p><h2>REFERENCE</h2><ul><li><a href="http://www.quora.com/Web-Development/What-are-the-most-interesting-HTML-JS-DOM-CSS-hacks-that-most-web-developers-dont-know-about?utm_source=html5weekly&amp;utm_medium=email">What are the most interesting HTML/JS/DOM/CSS hacks that most web developers don"t know about?</a></li><li><a href="http://flippinawesome.org/2013/12/23/45-useful-javascript-tips-tricks-and-best-practices/">45 Useful JavaScript Tips, Tricks and Best Practices</a></li><li><a href="http://samuli.hakoniemi.net/10-small-things-you-may-not-know-about-javascript/">10 Small Things You May Not Know About Javascript</a></li></ul></div><div id="MySignature"></div><div class="clear"></div><div id="blog_post_info_block"><div id="BlogPostCategory"></div><div id="EntryTag"></div><div id="blog_post_info"></div><div class="clear"></div><div id="post_next_prev"></div></div>		</div>		<div class = "postDesc">posted @<span id="post-date">2014-04-10 19:58</span><a href="http://www.cnblogs.com/Wayou/">刘哇勇</a> 阅读(<span id="post_view_count">...</span>) 评论(<span id="post_comment_count">...</span>)<a href ="https://i.cnblogs.com/EditPosts.aspx?postid=3657214" rel="nofollow">编辑</a><a href="#" onclick="AddToWz(3657214);return false;">收藏</a></div>	</div>	<script type="text/javascript">var allowComments=true,cb_blogId=123544,cb_entryId=3657214,cb_blogApp=currentBlogApp,cb_blogUserGuid="c5e8573b-1ed6-e111-aa3f-842b2b196315",cb_entryCreatedDate="2014/4/10 19:58:00";loadViewCount(cb_entryId);</script>	</div></div><a name="!comments"></a><div id="blog-comments-placeholder"></div><script type="text/javascript">var commentManager = new blogCommentManager();commentManager.renderComments(0);</script><div id="comment_form" class="commentform"><a name="commentform"></a><div id="divCommentShow"></div><div id="comment_nav"><span id="span_refresh_tips"></span><a href="javascript:void(0);" onclick="return RefreshCommentList();" id="lnk_RefreshComments" runat="server" clientidmode="Static">刷新评论</a><a href="#" onclick="return RefreshPage();">刷新页面</a><a href="#top">返回顶部</a></div><div id="comment_form_container"></div><div class="ad_text_commentbox" id="ad_text_under_commentbox"></div><div id="ad_t2"></div><div id="opt_under_post"></div><div id="ad_c1" class="c_ad_block"></div><div id="under_post_news"></div><div id="ad_c2" class="c_ad_block"></div><div id="under_post_kb"></div><div id="HistoryToday" class="c_ad_block"></div><script type="text/javascript">    fixPostBody();    setTimeout(function () { incrementViewCount(cb_entryId); }, 50);    deliverAdT2();    deliverAdC1();    deliverAdC2();        loadNewsAndKb();    loadBlogSignature();    LoadPostInfoBlock(cb_blogId, cb_entryId, cb_blogApp, cb_blogUserGuid);    GetPrevNextPost(cb_entryId, cb_blogId, cb_entryCreatedDate);    loadOptUnderPost();    GetHistoryToday(cb_blogId, cb_blogApp, cb_entryCreatedDate);</script></div>	</div>	</div>	<div id="sideBar">		<div id="sideBarMain">			<div class="newsItem"><h3 class="catListTitle">公告</h3>	<div id="blog-news"></div><script type="text/javascript">loadBlogNews();</script></div>			<div id="blog-calendar" style="display:none"></div><script type="text/javascript">loadBlogDefaultCalendar();</script>						<div id="leftcontentcontainer">				<div id="blog-sidecolumn"></div><script type="text/javascript">loadBlogSideColumn();</script>			</div>					</div>	</div>	<div class="clear"></div>	</div>	<div class="clear"></div>	<div id="footer">		Copyright &copy;2017 刘哇勇	</div></div><a id="toTop" title="电梯直达顶部！" href="#home" style="position:fixed;bottom:0;right:0;display:none;opacity:.5;"><img title="" alt="" src="http://images.cnblogs.com/cnblogs_com/Wayou/399998/o_up.png"></a><div class="wanker" data-wanker><div class="wanker-content"><h1>Bingo!!</h1><p>恭喜妳发现本彩蛋， happy coding</p><p>\(^___________^)/</p></div></div></body></html>';
  
      const reg = new RegExp('', 'g');
  
  }
  
  $(document).ready(function () {
      console.log("toString" in {});
  
      // const req = new XMLHttpRequest();
      // req.onreadystatechange = function () {
      //     console.log(this.responseText);
      // };
      // req.open('GET', 'http://www.w3schools.com/js/demo_jsonp.php', true);
      // req.setRequestHeader('Access-Control-Allow-Origin', '*');
      // req.setRequestHeader('Access-Control-Allow-Credentials', 'true');
      // req.send(null);
  
  
      // $.ajax({
      //     url: 'https://gold.xitu.io',
      //     dataType: 'jsonp',
      //     crossDomain: true,
      //     success:
      //         function (data) {
      //             // console.log(data);
      //         },
      //     error:
      //         function (error) {
      //             console.log(error);
      //         }
      // });
  
      // $.getJSON('http://api.flickr.com/services/feeds/photos_public.gne?callback=',{tags: "dogs",tagmode: "any",format: "json"}, function (response) {
      //     console.log(response);
      //     document.getElementById('jsonp').innerText = response.toString();
      // });
  
      // const scriptt = document.createElement('script');
      // scriptt.src = 'https://gold.xitu.io/post/58948f1b0ce4630056f3a629?callback=jsonpTest';
      // document.body.insertBefore(scriptt, document.body.firstElementChild)
  });
  
  // function jsonpTest(response) {
  //     console.log(response);
  // }
  