前端冷知识集锦

原文：http://www.cnblogs.com/Wayou/p/things_you_dont_know_about_frontend.html

1.加载CDN文件时，可以省掉HTTP标识

现在很流行的CDN即从专门的服务器加载一些通用的JS和CSS文件，出于安全考虑有的CDN服务器使用HTTPS方式连接，而有的是传统的HTTP，其实我们在使用时可以忽略掉这个，将它从URL中省去。

<script src="//domain.com/path/to/script.js"></script>

这一点在之前一篇译文博客《jQuery编程最佳实践》中也有提到。

2.利用script标签保存任意信息

将script标签设置为type='text'然后可以在里面保存任意信息，之后可以在JavaScript代码中很方便地获取。

<script type="text" id="template">
    <h1>This won't display</h1>
</script>

var text = document.getElementById('template').innerHTML

3.利用a标签自动解析URL

很多时候我们有从一个URL中提取域名，查询关键字，变量参数值等的需要，而万万没想到可以让浏览器方便地帮我们完成这一任务而不用我们写正则去抓取。方法就在JS代码里先创建一个a标签然后将需要解析的URL赋值给a的href属性，然后就得到了一切我们想要的了。一般我们可以使用location对象的host,hostname,pathname,search,hash属性获取，但是也可以使用a标签来获取。

var a = document.createElement('a');
 a.href = 'http://www.cnblogs.com/wayou/p/';
 console.log(a.host);

利用这一原理，稍微扩展一下，就得到了一个更加健壮的解析URL各部分的通用方法了。下面代码来自James的博客。

4.禁止别人以iframe加载你的页面

下面的代码已经不言自明并，没什么好多说的。

if (window.location != window.parent.location) window.parent.location = window.location;

5.万物皆对象

在JavaScript的世界，万物皆对象，因为对象的一个特征是你可以在它身上直接调用方法。对于数字基本类型，当试图在其身上调用toString方法会失败，但用括号括起来后再调用就不会失败了，内部实现是用相应的包装对象将基本类型转为对象。所以(1).toString()相当于new Number(1).toString()。因此，你的确可以把基本类型数字，字符串，布尔等当对象使用的，只是注意语法要得体。

同时我们注意到，JavaScript中数字是不分浮点和整形的，所有数字其实均是浮点类型，只是把小数点省略了而以，比如你看到的1可以写成1.，这也就是为什么当你试图1.toString()时会报错，所以正确的写法应该是这样：1..toString()，内部实现如上面所述，是将1.用包装对象转成对象再调用方法。

6.重写原生浏览器方法以实现新功能

下面的代码通过重写浏览器的alert让它可以记录弹窗的次数。

(function() {
    var oldAlert = window.alert,
        count = 0;
    window.alert = function(a) {
        count++;
        oldAlert(a + "
 You've called alert " + count + " times now. Stop, it's evil!");
    };
})();
alert("Hello World");

7.Math.floor的高效替代方案

利用好位操作符可以让我们获得效率上的提升，同时显得高端大气上档次。

|0和~~是很好的一个例子，使用这两者可以完美替代Math.floor。在处理像素及动画位移等效果的时候会很有用，因为我们需要整数，而此方法比Math.floor或parseInt效率都要高。性能比较见此。

var foo = (12.4 / 4.13) | 0;//结果为3
var bar = ~~(12.4 / 4.13);//结果为3

顺便说句，!!将一个值方便快速转化为布尔值 !!window===true 。

8.生成随机字符串

利用Math.random和toString生成随机字符串，来自前一阵子看到的一篇博文。这里的技巧是利用了toString方法可以接收一个基数作为参数的原理，这个基数从2到36封顶。如果不指定，默认基数是10进制。略屌！

function generateRandomAlphaNum(len) {
    var rdmString = "";
    for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
    return rdmString.substr(0, len);
}

REFERENCE

What are the most interesting HTML/JS/DOM/CSS hacks that most web developers don't know about?

45 Useful JavaScript Tips, Tricks and Best Practices

10 Small Things You May Not Know About Javascript