阅读更多

10顶
0踩

Web前端
现在到处都是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、本人所发布内容...

  • 物业公司绩效考核制度.doc

    物业公司绩效考核制度

  • 2025最新小学数学义务教育课程标准(2022年版)必考题库附含答案.docx

    2025最新小学数学义务教育课程标准(2022年版)必考题库附含答案.docx

  • SDL-1.2.15-17.el7.x64-86.rpm.tar.gz

    1、文件内容:SDL-1.2.15-17.el7.rpm以及相关依赖 2、文件形式:tar.gz压缩包 3、安装指令: #Step1、解压 tar -zxvf /mnt/data/output/SDL-1.2.15-17.el7.tar.gz #Step2、进入解压后的目录,执行安装 sudo rpm -ivh *.rpm 4、安装指导:私信博主,全程指导安装

  • 软件研发绩效考核办法.doc

    软件研发绩效考核办法

  • FactoryIO液位PID仿真程序入门指南:使用TIA Portal V15与FactoryIO 2.4.0的梯形图编程,factoryio液位PID仿真程序 使用简单的梯形图编写,通俗易懂,起到抛

    FactoryIO液位PID仿真程序入门指南:使用TIA Portal V15与FactoryIO 2.4.0的梯形图编程,factoryio液位PID仿真程序 使用简单的梯形图编写,通俗易懂,起到抛砖引玉的作用,比较适合有动手能力的入门初学者。 软件环境: 1、西门子编程软件:TIA Portal V15(博图V15) 2、FactoryIO 2.4.0 内容清单: 1、FactoryIO中文说明书+场景模型文件 2、博图V15PLC程序(源码)。 ,核心关键词:FactoryIO液位PID仿真程序; 梯形图编写; 通俗易懂; 入门初学者; 西门子编程软件; TIA Portal V15(博图V15); FactoryIO 2.4.0; FactoryIO中文说明书; 场景模型文件; PLC程序(源码)。,"FactoryIO液位控制:梯形图PID仿真程序"

  • 微信自动锁定2.0为保护日常隐私3分钟不操作鼠标和键盘自动锁定微信.rar

    # 微信自动锁定:您的隐私保护神器在当今数字化时代,隐私安全日益重要。微信作为我们日常沟通和信息交流的重要工具,其中的隐私保护不容忽视。为了满足大家对微信隐私保护的需求,我们特别推出了“微信自动锁定”软件。 1. **自动锁定**:这是软件的核心功能。当您在使用微信的过程中,若3分钟内没有任何鼠标和键盘操作,软件会自动锁定微信。这一功能有效防止了他人在您离开电脑时,未经授权访问您的微信,保护您的聊天记录、个人信息等隐私不被泄露。 2. **便捷的托盘操作**:程序启动后,会自动收纳到电脑右下角的托盘中,不占用过多屏幕空间,也不会干扰您的正常工作和使用。当您需要退出程序时,只需右键点击托盘图标,选择“退出”即可,操作简单便捷。 3. **灵活的托盘图标设置**:托盘图标支持两种设置方式。您可以选择指定路径的图片作为托盘图标,按照自己的喜好进行个性化设置;也可以使用base64编码的图标,满足不同用户的多样化需求。

  • 基于Python 的BP神经网络的高频金融时间序列分析毕业设计

    【作品名称】:基于Python 的BP神经网络的高频金融时间序列分析【毕业设计】 【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】: This project includes three sections. GetData Data crawling. Responsible for crawling and processing the high frequency data of stock transcation in recent years. And the data format would be converted to an appropriate format. predict Core algorithm. Implement the Back Propagation Neural Networks 【资源声明】:本资源作为“参考资料”而不是“定制需求”,代码只能作为参考,不能完全复制照搬。需要有一定的基础看懂代码,自行调试代码并解决报错,能自行添加功能修改代码。

  • PackageKit-gtk3-module-1.1.10-2.el7.centos.x64-86.rpm.tar.gz

    1、文件内容:PackageKit-gtk3-module-1.1.10-2.el7.centos.rpm以及相关依赖 2、文件形式:tar.gz压缩包 3、安装指令: #Step1、解压 tar -zxvf /mnt/data/output/PackageKit-gtk3-module-1.1.10-2.el7.centos.tar.gz #Step2、进入解压后的目录,执行安装 sudo rpm -ivh *.rpm 4、安装指导:私信博主,全程指导安装

  • 三相PWM整流器的双闭环控制与C语言实现的PI控制及SVPWM模块技术解析,三相PWM整流器,采用双闭环控制,用C语言实现PI控制,SVPWM等模块 ,核心关键词:三相PWM整流器;双闭环控制;C语

    三相PWM整流器的双闭环控制与C语言实现的PI控制及SVPWM模块技术解析,三相PWM整流器,采用双闭环控制,用C语言实现PI控制,SVPWM等模块。 ,核心关键词:三相PWM整流器;双闭环控制;C语言实现;PI控制;SVPWM模块;,三相PWM整流器双闭环PI控制与SVPWM模块实现

Global site tag (gtag.js) - Google Analytics