从一行CSS调试代码中学到的JavaScript知识

标签: css 调试 代码 | 发表时间:2015-02-11 10:28 | 作者:tw_wangzhengquan
出处:http://www.iteye.com

http://www.iteye.com/news/30221

http://arqex.com/939/learning-much-javascript-one-line-code?utm_source=ourjs.com

现在到处都是JavaScript,每天都能知道点新东西。一旦你入了门,你总能从这里或是那里领悟到很多知识。 

一旦我发现一些有意思的东西,我喜欢去感觉他们的源代码,看一看它是怎么办到的。 

今天我想分享Addy Osmani的 一行代码,这行代码对于你调试你的CSS是很有用的。为了可读性,我把它变成了3行。 

注* Addy Osmani 是Google Chrome开发工程师,他前几天开发的 字符串解析模板,马上被兼容最新ES6标准的io.js采纳。 

[].forEach.call($$("*"),function(a){
  a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
})

 

尝试在你浏览器的Console(F12)中运行一下,你会发现页面被不同的颜色块高亮了,这个方法非常简单,但是你自己写的话可能产生非常多的代码,让我们来研究一下它是怎么实现的。 

选择一个页面上的所有元素 

我们首先需要选择页面上的所有元素。Addy使用了只能在console调试工具中使用的$$函数,你可以在console中输入$$('a')自己试一下。它会返回当前页面的所有anchor(链接)元素。 

$$与document.querySelectorAll是等价的。所以$$('*')与 document.querySelectorAll('*')是等价的,有兴趣的话可以看看 $$和$选择器的历史。 

对于我来说,$$的使用已经让我学到了很多。但是选择页面上的所有元素的知识还有很多。Mathias Bynens就在评论中指出document.all 其实也能选取选用元素,而且兼容所有主流浏览器。 
遍历所有的元素 

现在我们有了一个所有元素的节点列表(NodeList),现在我们想遍历它们,并给他们加上有颜色的边框。我们先看看能从这行代码里发现什么: 

Js代码 
  1. [].forEach.call( $$('*'), function( element ) { /* And the modification code here */ });  


NodeList看起来像一个Array(数组),你可以使用中括号来访问他们的节点,而且你还可以通过length属性知道它有多少元素。但是它并没有实现Array的所有接口,因此使用 $$('*').forEach 会返回错误,在JavaScript的世界里,有一堆看起来像Array但其实不是的对象。如function中的arguments对象。因此在他们身上通过call和apply来应用数组的方法是非常有用的。我之前写过一篇文章来解析它们的用法,下面是一个例子: 

Js代码 
  1. function say(name) {  
  2.  console.log( this + ' ' + name );  
  3. }  
  4.    
  5. say.call( 'hola', 'Mike' );  
  6. // 打印输出 'hola Mike'  


之前的一行代码使用 [].forEach.call 代替 Array.prototype.forEach.call 减少了代码的编写量 ( 另外一个很有意思的地方 );如果$$('*')返回是个数组的话,它与$$('*').forEach是等价的。 

如果你看看评论,还有人使用for(i=0;A=$$('*');)让代码变得更短,但是它在全局对象中注入了变量。 

你可以带上var声明,如 

Js代码 
  1. for(var i=0,B=document.querySelectorAll('*');A=B[i++];){ /* your code here */ }  


其中i和B将只声明在console的上下文中。 

改变元素的颜色 

让元素有一个漂亮的边框,这行代码使用了CSS的outline属性。有一点你可能不知道,在CSS渲染的盒子模型(Box Model)中,outline并不会改变元素及其布局的位置。因此这比使用border属性要好得多,所以这一部分其实并不难理解 

Js代码 
  1. a.style.outline="1px solid #" + color  


怎样定义颜色值其实是比较有意思的 

Js代码 
  1. ~~(Math.random()*(1<<24))).toString(16)  


我不是特别懂位运算,因此我最喜欢这一段。 

我们想构造的其实是一个16进制的颜色值,像白色FFFFFF,蓝色0000FF等等。 

首先我们学到了可以使用数字类型的toString方法进行十进制到16进制的转换。 

其实你可以用它进行任意进制的转换 

Js代码 
  1. (30).toString();   // "30"  
  2. (30).toString(10); // "30"  
  3. (30).toString(16); // "1e" 16进制  
  4. (30).toString(2); // "11110" 二进制  
  5. (30).toString(36); // "u" 36 是最大允许的进制  


因此16进制中的ffffff其实是 parseInt("ffffff", 16) == 16777215,16777215是2^24 - 1的值 

因此左位移操作乖以一个随机数 Math.random()*(1<<24) 可以得到一个0 到 16777216之间的值 

但是还不够,Math.random返回的是一个浮点数字,我们只需要整数部,这里使用了“~”操作符(按位取反操作)。 

这行代码并不关心正负值。因此通过两次取返就可以得到纯整数部,我们还可以将~~视为parseInt的简写: 

Js代码 
  1. var a = 12.34, // ~~a = 12  
  2.     b = -1231.8754, // ~~b = -1231  
  3.     c = 3213.000001 // ~~c = 3213  
  4. ;  
  5.    
  6. ~~a == parseInt(a, 10); // true  
  7. ~~b == parseInt(b, 10); // true  
  8. ~~c == parseInt(c, 10); // true  


如果你仔细看评论你会知道使用 按位或 "|"操作符也可以得到相同的结果。 

Js代码 
  1. ~~a == 0|a == parseInt(a, 10)  
  2. ~~b == 0|b == parseInt(b, 10)  
  3. ~~c == 0|c == parseInt(c, 10)  


我们最终得到了一个 0 到 16777216之间的随机数,然后使用toString(16)转换成16进制,它就是这样工作的。



已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [css 调试 代码] 推荐:

从一行CSS调试代码中学到的JavaScript知识

- - JavaScript - Web前端 - ITeye博客
现在到处都是JavaScript,每天都能知道点新东西. 一旦你入了门,你总能从这里或是那里领悟到很多知识. 一旦我发现一些有意思的东西,我喜欢去感觉他们的源代码,看一看它是怎么办到的. 今天我想分享Addy Osmani的 一行代码,这行代码对于你调试你的CSS是很有用的. 注* Addy Osmani 是Google Chrome开发工程师,他前几天开发的 字符串解析模板,马上被兼容最新ES6标准的io.js采纳.

在线调试并共享HTML,CSS,JS

- Albert - [米随随] s5s5
如题,以后同人讲代码时可以用到. 2004年04月9日 -- MSN中文专业站 (0). 2006年06月5日 -- 读“疲倦的博客们”有感 (9). 2005年07月20日 -- 基于web2.0的网站创意 (33).

CSS代码检查工具推荐:CSS Lint

- - 标点符
CSS Lint是一个开源的校验CSS文件质量的工具,最初是由 Nicholas C. Zakas和 Nicole Sullivan编写的,最初版本在Velocity会议上于2011年6月发布. CSS Lint的检测规则包括错误的和警告,当选择器或属性书写不正确、漏掉了大括号、多写了分号等时,会提示解析错误,解析错误优先提示.

优秀的 HTML 和 CSS 代码规范

- - SHTION官方网站
HTML 和 CSS 代码规范究竟是怎么样的. 做网站时, HTML 和 CSS 代码有什么要求. HTML 和 CSS 代码的写法是否影响网站的SEO. 写好  HTML 和 CSS 代码需要注意些什么. 一般大型WEB站点开发设计人员,要求使用者具有一定的 HTML、CSS基础知识,对原代码具有较强的控制能力.

python代码调试

- - 阿里古古
【转自: http://blog.csdn.net/luckeryin/article/details/4477233】. 本文讨论在没有方便的IDE工具可用的情况下,使用pdb调试python程序. 例如,有模拟税收计算的程序:. debug_demo函数计算4500的入账所需的税收. 在需要插入断点的地方,加入红色部分代码:如果_DEBUG值为True,则在该处开始调试(加入_DEBUG的原因是为了方便打开/关闭调试).

推荐三十款CSS样式选择器代码

- 小伟 - UED TEAM,用户体验设计,web前端开发
你也许已经掌握了id、class、后台选择器这些基本的css选择器. 下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题. 掌握了它们,才能真正领略css的巨大灵活性. 星状选择符会在页面上的每一个元素上起作用. web设计者经常用它将页面中所有元素的margin和padding设置为0.

前端代码标准最佳实践:CSS

- - CSDN博客推荐文章
上一篇《 前端代码标准最佳实践:javascript》发表后,大家讨论还是很热烈,从侧面体现了前端工程师对写标准的前端代码的重视程度很高. 这些最佳标准实践并不是那个权威组织发布的,而是由大量的前端工程师们在实践过程中的经验总结,目的在于提高代码的可读性,可维护性和性能. 那么接着上一篇,我们再来谈谈CSS代码的一些标准实践.

非常有用的50个CSS代码片段

- - CSDN博客Web前端推荐文章
原文: 50 Useful CSS Snippets Every Designer Should Have.          面对每年如此多的 新趋势 ,保持行业的领先是个很困难问题.  网站设计者和前端工程师都已经全面的使用  CSS3 properties, 决定这些的是 浏览器支持 和新的特性.

Emmet v1.0 发布,快速编写 HTML/CSS 代码

- - 开源中国社区最新新闻
Emmet 宣布 v1.0 发布了,这是从 Zen Coding 变身过来之后发布的首个版本. 该版本在 Zen Coding 基础上做了不少的调整,详情请看 发行说明. Emmet 是一组专门用来提高书写HTML和CSS代码速度的便利工具. 将它整合进文本编辑器,可以提供一些功能和快捷方式,加快开发速度.

100个惊人的CSS、JS代码技术

- - 设计达人
最近在Codepen看到Top Pens of 2013这个专题,专题内容为2013年上最优秀的前100个CSS、HTML5和Javascript Pens,在惊叹技术人员的创造力同时我们还能学习这些技术,对交互设计师而言还能获取灵感哦. Top Pens of 2013专题地址: http://codepen.io/2013/popular.