前端冷知识

版权声明:本文为博主原创文章,未经博主允许不得转载。

 

前言

来点前端小知识,冷知识

浏览器地址栏运行JavaScript代码

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

有些浏览器直接复制粘贴会干掉前面的javascript,所以需要手动加上

浏览器地址栏运行HTML代码

1
data:text/html,<h1 style="color:red">Hello, Midaoi!</h1>

浏览器变身编辑器

1
data:text/html, <html contenteditable>

页面可编辑

1
控制台输入document.body.contentEditable='true';

id默认可执行

我们都知道想操作dom,必须获取dom,例如document.getElementById

但事实上我们不获取其实也可以用哦!

1
2
3
4
5
6
<div id="demo"></div>
<script type="text/javascript">
demo.onclick = function(){
alert(1)
}
</script>

当然实际项目中不要应用这些偏门,总会出现一些你意想不到的bug

加载CDN文件时,可以省掉HTTP标识

现在很多静态资源都托管到cdn上,有些是http协议有些是https协议,其实我们可以忽略协议部分

1
<script src="//apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>

script标签保存信息

将script标签的type设置为text,可以很方便的保存信息,读取信息

1
2
3
4
5
<script type="text" id="content">
<h1>Hello Midaoi</h1>
</script>

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

where is my mouse?

1
*{cursor:none !important}

上面的css代码意思是在所有元素中隐藏鼠标,!important-权重最高级 这样网页上的鼠标就会消失不见

文字模糊

1
2
3
4
* {
color: transparent;
text-shadow: #000 0 0 5px;
}

以上效果可以让文字模糊,什么?你觉得这是css3新增效果没什么稀奇的?那下面的呢~

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

重写console.log让控制台打印出的文字也全都是模糊效果,这下总该有点意思了吧!

html编辑css

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<body>
<style style="display:block" contentEditable>
body { background: blue }
</style>
</body>
</html>

看过上面的同学可能会很熟悉了,contentEditable 又是它,对没错,style加上也一样可以编辑

整数转换

1
2
3
4
5
6
7
8
var foo = (0.3) | 0;//结果为0
var foo = (0.5) | 0;//结果为0
var foo = (0.9) | 0;//结果为0
var bar = ~~(0.3);//结果为0
var bar = ~~(0.5);//结果为0
var bar = ~~(0.9);//结果为0
类似parseInt()但并不相同
!!window===true //!!快速转换为布尔值

重写原生

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
(function() {
var oldAlert = window.alert,
count = 0;
window.alert = function(a) {
count++;
oldAlert(a + "\n You've called alert " + count + " times now. Stop, it's evil!");
};
})();
alert("Hello World");

可以记录弹出次数

window.alert = function(name) {
var iframe = document.createElement("IFRAME");
iframe.style.display = "none";
iframe.setAttribute("src", 'data:text/plain,');
document.documentElement.appendChild(iframe);
window.frames[0].window.alert(name);
iframe.parentNode.removeChild(iframe);

取消弹框默认显示的地址

变量交换

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

万物皆对象

在js语言中,万物皆对象,当然只是夸张的一个意思,undefined显然就不是对象,我们都知道string有length属性可以获取长度,string并不是object,为什么可以有诸如length的属性,toString这样的方法呢?内部实现其实是 new String 调用后销毁。对于数字,1.toString()会失败,new Number(1).toString()是可以的,前者失败原因是因为js不分浮点和整形1可以写成1.所以当你试图1.toString()的时候就会报错,如果写成1..toString()就没问题啦~

操作符判断

1
2
3
4
5
6
if(fn){
fn();
}

我们可以简写成
fn&&fn();

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

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

控制台表格输出

1
2
var data = [{'名字': '李雷', '英语': 99}, {'名字': '韩梅梅', '英语': 98}];
console.table(data);

参考文献 :
http://web.jobbole.com/83473/

总结

有意思的例子可能还有很多,以后遇到再加上,像~~ | 0 这些几乎没有可读性,知道就好,不要为了炫酷在实际项目中使用,没什么实际意义,一个好的项目,可读性还是非常重要的。