一些冷门的前端姿势

po主刷各种网站的时候看到的,链接在这里,看完涨了不少姿势,其中po主验证过的放出来跟大家分享下。

浏览器相关(无视ie)

浏览器地址栏运行js代码

这个并不新鲜,在地址栏输入:

javascript:alert('hello world');

弹出了hello word

 

浏览器地址栏运行html代码

这个po主以前还真不知道

地址栏输入

data:text/html,

Hello, world!

哇塞,好神奇

浏览器地址栏运行html

 

神马!浏览器可以当编辑器用

依然在地址栏,输入

data:text/html, 

浏览器做文本编辑器

 

这个主要是由于html5的contenteditable属性

于是,如果在console里输入

document.body.contentEditable='true';

于是整个网页都可以编辑了

亮点自寻

 

 

css相关

布局调试
* { background-color: rgba(255,0,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }

这是神马破代码,妈妈说过,不要用*选择器!!

先看看效果吧

据说可以看到dom层级,以及dom大小和margin padding

调试布局用,但素po主觉得还不是很直观额,dom层级很明显倒是

如何让一个dom保持一定长宽比

比如在浏览器窗口变化的时候,让一个div保持宽高比为5:1,代码如下

原理是什么,padding-bottom:20%;是相对于width而言的,而不是div的height,是不是很惊讶

 这里有个更直观的demo 

让css可以实时编辑

上面看过将浏览器变成编辑器

我们看看怎样可以实时编辑css,并且编辑效果可以立即生效

 

css里也可以进行数学计算
background-position: calc(100% - 50px) calc(100% - 20px);

如下图:

css里的计算

 

多层边框

例子见这里,不多说了

 

 

 

js相关

解析url

以往我们肿么解析url里的东东,一般是正则,或者一系列字符串操作

来看看这个

var url='http://item.taobao.com/item.htm?id=8174107295';

var a = document.createElement('a');

a.href = url;

// any property of window.location works here:

alert('The hostname of ' + url + ' is ' + a.hostname);

 

弹出The hostname of http://item.taobao.com/item.htm?id=8174107295 is item.taobao.com

不过,对于参数,还是要正则的说- -,这篇文章写了个解析url中各个部分的函数

 

html里有id的dom,都会创建一个同名的全局变量

例子如图

还是淘宝首页

 

用script标签保存任意信息

<script type=”text” id=”template”>
<h1>This won’t display</h1>
</script>

然后这样取

var text = document.getElementById(‘template’).innerHTML

大部分模版引擎就是利用了script标签

 

将JSON字符串解析为obj

有字符串

var str='{“name”:”韩小麦”}’;

我们知道

eval(‘( ‘+ str +’ )’);是可以的

还有种方法

var jsonobject = new Function(‘return ‘ + str )();

jsonobject.name;

 

 

生成随机字符串

利用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);

}

 

 

 

 

 

码字好累,休息休息,待续。。。

参考文献

http://flippinawesome.org/2013/12/23/45-useful-javascript-tips-tricks-and-best-practices/

 

One Response

  1. 漂泊er说道:

    前端貌似很深奥啊