前端冷知识课堂

2016-06-24

WEB

HTML篇

浏览器地址栏运行JS代码

在浏览器地址栏可以直接运行JS代码，做法是以javascript:开头后跟要执行的语句。比如:

1	javascript:alert('alert from the address bar :)');

将以上代码贴到浏览器地址栏回车后执行，alert弹出一个窗口

需要注意的是如果是通过复制粘贴代码到浏览器地址栏的话，IE及Chrome会自动去掉代码开头的javascript:，所以需要手动添加起来才能正确执行，而Firefox中虽然不会自动去掉，但它根本就不支持在地址栏运行JS代码，so :(

浏览器地址栏运行HTML代码

在非IE内核的浏览器地址栏可以直接运行HTML代码，比如在地址栏输入以下代码然后回车运行，会出现指定的页面内容

1	data:text/html,<h1>Hello, world!</h1>

效果如下:

浏览器变成编辑器

将以下代码贴到地址栏运行后浏览器变成了一个原始而简单的编辑器，跟windows记事本效果一样

1	data:text/html, <html contenteditable>

主要是因为HTML5中新加了contenteditable属性，当元素指定了该属性后，元素的内容成为可编辑状态。举一反三，将以下代码在控制台执行后，整个页面变成可编辑状态，肆意玩耍吧

1	document.body.contentEditable='true';

利用a标签自动解析URL

如果我们有从一个URL中提取域名、查询关键字、变量参数值等的需求，就需要写正则去对查询url进行获取，而浏览器却可以很方便地帮我们完成这一任务。JS代码里先创建一个a标签然后将需要解析的URL赋值给a的href属性，然后就可以很简单的得到我们想要的了

1
2
3

var a = document.createElement('a');
a.href = 'https://blog.h5demo.xyz/2016/06/24/webfront-dont-know/';
console.log(a.host);

效果如下:

利用这一原理，稍微进行一下扩展，就可以获得一个解析URL各部分的通用方法

function parseURL(url) {
    var a =  document.createElement('a');
    a.href = url;
    return {
        source: url,
        protocol: a.protocol.replace(':',''),
        host: a.hostname,
        port: a.port,
        query: a.search,
        params: (function(){
            var ret = {},
                seg = a.search.replace(/^\?/,'').split('&'),
                len = seg.length, i = 0, s;
            for (;i<len;i++) {
                if (!seg[i]) { continue; }
                s = seg[i].split('=');
                ret[s[0]] = s[1];
            }
            return ret;
        })(),
        file: (a.pathname.match(/\/([^\/?#]+)$/i) || [,''])[1],
        hash: a.hash.replace('#',''),
        path: a.pathname.replace(/^([^\/])/,'/$1'),
        relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [,''])[1],
        segments: a.pathname.replace(/^\//,'').split('/')
    };
}

效果如下:

页面拥有ID的元素会创建全局变量

在一个HTML页面中，所有设置了ID属性的元素会在JS的执行环境中创建对应的全局变量，这意味着document.getElementById显得多余了，但实际项目中还是该怎么写就怎么写，这样出错的概率就小的多，比如我的主页中有一个id为fancyBox的a元素，我们可以这么获取

加载CDN文件时，可以省掉HTTP前缀

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

1	<script src="//cdn.domain.com/path/of/script.js"></script>

利用script标签保存任意信息

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

<script type="text" id="template">
	<h1>Hello World!</h1>
</script>
var text = document.getElementById('template').innerHTML

CSS篇

CSS恶作剧

相信你看了以下代码，应该知道接下来会发生什么 :)

1
2
3

*{
    cursor: none!important;
}

简单的文字模糊效果

以下两行简单的CSS代码可达到将文字模糊化的效果，有点像使用PS的滤镜，it’s awesome！

p {
    color: transparent;
    text-shadow: #111 0 0 5px;
}

效果图:

多重边框

利用重复指定box-shadow来达到多个边框的效果

div {
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2);
    height: 200px;
    margin: 50px auto;
    width: 400px
}

效果图:

实时编辑CSS

通过设置style标签的display:block样式可以让页面的style标签显示出来，并且加上contentEditable属性后可以让样式成为可编辑状态，更改后的样式效果也是实时更新呈现的,不过此技巧在IE下无效

<!DOCTYPE html>
<html>
    <body>
        <style style="display:block" contentEditable>
            body { color: red }
        </style>
    </body>
</html>

CSS中也可以做简单运算

通过CSS中的calc方法可以进行一些简单的运算，从而达到动态指定元素样式的目的

1
2
3

.container{
    width: calc(100% - 50px);
}

注:减号前后有两个空格

JS篇

生成随机字符串

利用Math.random和toString生成随机字符串，这里的技巧是利用了toString方法可以接收一个基数作为参数的原理，这个基数取值为2到36，如果不指定，默认基数是10，表示十进制
效果图:

整数的操作

JS中是没有整型概念的，但利用好位操作符可以轻松处理，同时获得效率上的提升,|0和~~是很好的一个例子，使用这两者可以将浮点转成整型且效率方面要比同类的parseInt、Math.round要高

1 2	var foo = (13.14 / 5.20) \| 0;//结果为2 var bar = ~~(13.14 / 5.20);//结果为2

注意:请谨慎使用，具体原因请参考快速（但危险）的取整方法
顺便说句，!!将一个值方便快速转化为布尔值!!window===true

重写原生方法以实现新功能

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

(function() {
    var oldAlert = window.alert,
        count = 0;
    window.alert = function(a) {
        count++;
        oldAlert(a + "\n 天啊！你已经弹窗" + count + " 次了，别再弹了，ok？");
    };
})();
alert("Hello World");

console恶作剧

Chrome的console.log是支持对文字添加样式的，甚至图片都可以，我们可以重写掉默认的log方法，把将要log的文字应用CSS的模糊效果，这样当有人试图调用console.log()的时候，log出来的是模糊不清的文字

var _log = console.log;
console.log = function() {
  _log.call(console, '%c' + [].slice.call(arguments).join(' '), 'color:transparent;text-shadow:0 0 2px rgba(0,0,0,.5);');
};

效果图:

不声明第三个变量的值交换

交换两个变量值的常规做法，那就是声明一个中间变量来暂存,而不声明第三个变量的值交换的方法如下:

1	var a=1,b=2;a=[b,b=a][0];

JS一切皆对象

JS的世界，一切皆对象。除了null和undefined，其他基本类型数字、字符串和布尔值都有对应有包装对象。对象的一个特征是你可以在它身上直接调用方法，对于数字基本类型，当试图在其身上调用toString方法会失败，但用括号括起来后再调用就不会失败了，内部实现是用相应的包装对象将基本类型转为对象。所以(1).toString()相当于new Number(1).toString()。因此，你的确可以把基本类型数字、字符串、布尔等当对象使用，只是需要注意语法要得体。
同时我们知道，JS中数字是不分浮点型和整型的，所有数字其实均是浮点类型，只是把小数点省略了而以，比如你看到的1可以写成1.，这也就是为什么当你试图1.toString()时会报错，所以正确的写法应该是这样：1..toString()，或者如上面所述加上括号，这里括号的作用是纠正JS解析器，不要把1后面的点当成小数点。内部实现如上面所述，是将1.用包装对象转成对象再调用方法

If语句的变形

当你需要写一个if语句的时候，不妨尝试用JS中的逻辑运算符来代替

var day=(new Date).getDay()===0;
//传统if语句
if (day) {
	alert('Today is Sunday!');
};
//运用逻辑与代替if
day&&alert('Today is Sunday!');

比如上面的代码，首先得到今天的日期，如果是星期天，则弹窗，否则什么也不做。我们知道逻辑操作存在短路的情况，对于逻辑与表达式，只有两者都真才结果才为真，如果前面的day变量被判断为假了，那么对于整个与表达式来说结果就是假，所以就不会继续去执行后面的alert了，如果前面day为真，则还要继续执行后面的代码来确定整个表达式的真假。利用这点达到了if的效果。
对于传统的if语句，如果执行体代码超过了1条语句，则需要加花括号，而利用逗号表达式，可以执行任意条代码而不用加花括号