资讯频道 → Web前端
阅读更多

10顶
0踩

Web前端

转载新闻 从一行CSS调试代码中学到的JavaScript知识

2015-02-11 16:00 by 副主编 mengyidan1988 评论(5) 有7174人浏览
javascript css
现在到处都是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进制，它就是这样工作的。
原文地址：arqex.com
10
顶
0
踩
评论 共 5 条 请登录后发表评论
5 楼 2007202070 2015-03-03 15:19
<script>alert();</script>
4 楼 bhj626 2015-02-12 08:48
<script>alert(/xss/)</script>
3 楼 bhj626 2015-02-12 08:47
<script>alert();</script>
2 楼 bhj626 2015-02-12 08:46
1
2fsddddddddd
1 楼 bhj626 2015-02-12 08:46
alert();

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 把firefox从1.5.0.7顺利升级到2.0

    惴惴不安的把firefox1.5.0.7升级到了firefox2.0 。很顺利。最担心的scrapbook 插件没有出问题。 我是把fx2安装到另外一个目录，然后在快捷方式里面把profile指向原来1.5的profile目录下，fx2启动的时候就会check ...

  • UBUNTU教程之菜鸟飞飞

    本文转自 ...本人尽力解释 为准备本文，收集了很多资料，前几日，在ubuntu论坛看到有热心网友把一切都总结的很好了，虽然是在8.10基础上写的，但对于9.04也同样适用，为&lt;br /

  • 百度笔试题面试题集总

    如果必须从网页中区分出一部分"重要网页"（例如在 10 亿中选 8 亿），比其他网页更值得展现给用户，请 提出一种方案。 4）此题 40 分 假设有 10 亿网页已经被我们存下来，并提供如下信息：网页全文（即网页的源码）...

  • C/C++笔试题（很多）

    通过调用门，从ring3到ring0，中断从ring3到ring0，进入vm86等等 11．如果只想让程序有一个实例运行，不能运行两个。像winamp一样，只能开一个窗口，怎样实现？ 用内存映射或全局原子（互斥变量）、...

  • c++笔试题

    通过调用门，从ring3到ring0，中断从ring3到ring0，进入vm86等等 11．如果只想让程序有一个实例运行，不能运行两个。像winamp一样，只能开一个窗口，怎样实现？ 用内存映射或全局原子（互斥变量）...

  • C/C++笔试题

    通过调用门，从ring3到ring0，中断从ring3到ring0，进入vm86等等 11．如果只想让程序有一个实例运行，不能运行两个。像winamp一样，只能开一个窗口，怎样实现？ 用内存映射或全局原子（互斥变量）、...

  • Substrate Tutorials：Start a Private Network (multi-node)

    还有一些浏览器，特别是Firefox，不会从https网站连接到本地节点。一个简单的解决方法是尝试另外的浏览器，比如Chromium。或者，您可以在本地托管此接口。 上面提供的链接包含 rpc URL参数，该参数指示 Apps UI 连接...

  • c/c++笔试题

    通过调用门，从ring3到ring0，中断从ring3到ring0，进入vm86等等 11．如果只想让程序有一个实例运行，不能运行两个。像winamp一样，只能开一个窗口，怎样实现？ 用内存映射或全局原子（互斥变量）、...

  • 转自 静心梦工厂

    PowerDesigner 把Comment写到name中 和把name写到Comment中 pd7以后版本可用 转自：http://www.cnblogs.com/cxd4321/archive/2009/03/07/1405475.html 在使用PowerDesigner对数据库进行概念模型和物理模型设计时，...

  • C/C++ 笔试题

    ring3到ring0，中断从ring3到ring0，进入vm86等等 11 ．如果只想让程序有一个实例运行，不能运行两个。像 winamp一样，只能开一个窗口，怎样实现？ 用内存映射或全局原子（互斥变量）、查找窗口句柄 .....

  • 软件更新

    温馨提醒：　1、软件下载站采用防盗链技术，各位在下载前，请务必使用FlashGet(网络快车)或Thunder(迅雷)下载，以确保下载顺利！　2、为了确保您的电脑安全，请在下载后第一时间内进行杀毒操作！　3、本人所发布内容...

  • 【java毕业设计】智慧社区教育服务门户.zip

    有java环境就可以运行起来 ,zip里包含源码+论文+PPT, 系统设计与功能： 文档详细描述了系统的后台管理功能，包括系统管理模块、新闻资讯管理模块、公告管理模块、社区影院管理模块、会员上传下载管理模块以及留言管理模块。 系统管理模块：允许管理员重新设置密码，记录登录日志，确保系统安全。 新闻资讯管理模块：实现新闻资讯的添加、删除、修改，确保主页新闻部分始终显示最新的文章。 公告管理模块：类似于新闻资讯管理，但专注于主页公告的后台管理。 社区影院管理模块：管理所有视频的添加、删除、修改，包括影片名、导演、主演、片长等信息。 会员上传下载管理模块：审核与删除会员上传的文件。 留言管理模块：回复与删除所有留言，确保系统内的留言得到及时处理。 环境说明： 开发语言：Java 框架：ssm，mybatis JDK版本：JDK1.8 数据库：mysql 5.7及以上 数据库工具：Navicat11及以上 开发软件：eclipse/idea Maven包：Maven3.3及以上

  • 基于selenium的携程机票爬虫资料齐全+详细文档+高分项目+源码.zip

    【资源说明】 基于selenium的携程机票爬虫资料齐全+详细文档+高分项目+源码.zip 【备注】 1、该项目是个人高分项目源码，已获导师指导认可通过，答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用，也可作为毕业设计、课程设计、作业、项目初期立项演示等，当然也适合小白学习进阶。 4、如果基础还行，可以在此代码基础上进行修改，以实现其他功能，也可直接用于毕设、课设、作业等。 欢迎下载，沟通交流，互相学习，共同进步！

  • 【java毕业设计】智慧社区宠物管理系统（源代码+论文+PPT模板）.zip

    zip里包含源码+论文+PPT,有java环境就可以运行起来 ,功能说明： 文档开篇阐述了随着计算机技术、通信技术和网络技术的快速发展，智慧社区门户网站的建设成为了可能，并被视为21世纪信息产业的主要发展方向之一 强调了网络信息管理技术、数字化处理技术和数字式信息资源建设在国际竞争中的重要性。 指出了智慧社区门户网站系统的编程语言为Java，数据库为MYSQL，并实现了新闻资讯、社区共享、在线影院等功能。 系统设计与功能： 文档详细描述了系统的后台管理功能，包括系统管理模块、新闻资讯管理模块、公告管理模块、社区影院管理模块、会员上传下载管理模块以及留言管理模块。 系统管理模块：允许管理员重新设置密码，记录登录日志，确保系统安全。 新闻资讯管理模块：实现新闻资讯的添加、删除、修改，确保主页新闻部分始终显示最新的文章。 公告管理模块：类似于新闻资讯管理，但专注于主页公告的后台管理。 社区影院管理模块：管理所有视频的添加、删除、修改，包括影片名、导演、主演、片长等信息。 会员上传下载管理模块：审核与删除会员上传的文件。 留言管理模块：回复与删除所有留言，确保系统内的留言得到及时处理。

  • 免费下载：Civil War (Stuart Moore)_xVBgd.zip

    免费下载：Civil War (Stuart Moore)_xVBgd.zip

  • JSP基于WEB的图书馆借阅系统的设计与实现(源代码+论文)(2024pw).7z

    1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于计算机科学与技术等相关专业，更为适合；

  • 免费下载：Spider-Man (Stefan Petrucha)_2pBuA.zip

    免费下载：Spider-Man (Stefan Petrucha)_2pBuA.zip

  • jj视频合并程序代码QZQ.txt

    jj视频合并程序代码QZQ

  • 【java毕业设计】智慧社区会员等级提升系统（源代码+论文+PPT模板）.zip

    zip里包含源码+论文+PPT,有java环境就可以运行起来 ,功能说明： 文档开篇阐述了随着计算机技术、通信技术和网络技术的快速发展，智慧社区门户网站的建设成为了可能，并被视为21世纪信息产业的主要发展方向之一 强调了网络信息管理技术、数字化处理技术和数字式信息资源建设在国际竞争中的重要性。 指出了智慧社区门户网站系统的编程语言为Java，数据库为MYSQL，并实现了新闻资讯、社区共享、在线影院等功能。 系统设计与功能： 文档详细描述了系统的后台管理功能，包括系统管理模块、新闻资讯管理模块、公告管理模块、社区影院管理模块、会员上传下载管理模块以及留言管理模块。 系统管理模块：允许管理员重新设置密码，记录登录日志，确保系统安全。 新闻资讯管理模块：实现新闻资讯的添加、删除、修改，确保主页新闻部分始终显示最新的文章。 公告管理模块：类似于新闻资讯管理，但专注于主页公告的后台管理。 社区影院管理模块：管理所有视频的添加、删除、修改，包括影片名、导演、主演、片长等信息。 会员上传下载管理模块：审核与删除会员上传的文件。 留言管理模块：回复与删除所有留言，确保系统内的留言得到及时处理。

  • jsp医院病区管理系统(论文+中期检查表+任务书+综合材料）(20242g).7z

    1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于计算机科学与技术等相关专业，更为适合；

Global site tag (gtag.js) - Google Analytics