OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

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


分享到
分类 JS学习   关键字 JavaScript   发布 ourjs  1421740696508
注意 转载须保留原文链接,译文链接,作者译者等信息。  
现在到处都是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),现在我们想遍历它们,并给他们加上有颜色的边框。我们先看看能从这行代码里发现什么:

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

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

function say(name) {
 console.log( this + ' ' + name );
}
 
say.call( 'hola', 'Mike' );
// 打印输出 'hola Mike'

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

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

你可以带上var声明,如

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

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

改变元素的颜色


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

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

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

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

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

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

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

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

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

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

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

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

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

var a = 12.34, // ~~a = 12
    b = -1231.8754, // ~~b = -1231
    c = 3213.000001 // ~~c = 3213
;
 
~~a == parseInt(a, 10); // true
~~b == parseInt(b, 10); // true
~~c == parseInt(c, 10); // true

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

~~a == 0|a == parseInt(a, 10)
~~b == 0|b == parseInt(b, 10)
~~c == 0|c == parseInt(c, 10)

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



原文地址: 点此
社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 2014年最受欢迎的前十大语言:JavaScript、PHP、Java排前三
  2. 主流JavaScript MVC框架性能比较测试:Angular vs Backbone vs Ember
  3. AngularJS在大型单页面应用中的性能优化(一)
  4. CSS3实现的响应式字体:自适应视图窗口大小的新单位
  5. 5个现在就该使用的数组Array方法: indexOf/filter/forEach/map/reduce详解
  6. AngularJS在大型单页面应用中的性能优化(二)
  7. WebPack:更优秀的模块依赖管理工具,及require.js的缺陷
  8. 在nodejs中使用Redis缓存和查询数据及Session持久化(Express)
  9. 中国互联网2014大事记
  10. javaScript 依赖管理
  11. AirJD-简单好用的免费建站工具

 相关阅读 - JS学习
  1. 在nodejs中使用Redis缓存和查询数据及Session持久化(Express)
  2. 在ExpressJS(NodeJS)中设置二级域名跨域共享Cookie
  3. 在(Raspberry Pi)树莓派上安装NodeJS
  4. 使用NodeJS将XML解析成JSON及性能比较
  5. 5个现在就该使用的数组Array方法: indexOf/filter/forEach/map/reduce详解
  6. AngularJS在大型单页面应用中的性能优化(二)
  7. AngularJS在大型单页面应用中的性能优化(一)
  8. WebPack:更优秀的模块依赖管理工具,及require.js的缺陷
  9. 在JavaScript的Array数组中调用一组Function方法
  10. 2015年的JavaScript:Angular之类的框架将被库取代

 关键字 - JavaScript
  1. 7个最新的实用性 JavaScript MV*框架
  2. 抛弃jQuery,深入原生的JavaScript
  3. WebPack:更优秀的模块依赖管理工具,及require.js的缺陷
  4. 5个现在就该使用的数组Array方法: indexOf/filter/forEach/map/reduce详解
  5. 用HTML5原生实现拖放或排序
  6. 少年,不要滥用箭头函数啊:JS中lambda表达式的优缺点和使用场景
  7. 用原生HTML5控件实现输入框自动提示(下拉列表补全)功能
  8. OnceIO模块开发:模块注册、模块路由、静态文件重定向以及如何开发与设计一个功能扩展模块
  9. JavaScript中NaN的秘密
  10. 从一行CSS调试代码中学到的JavaScript知识

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号