摘要： 在用Fiddler调试网页的时候,可能某些频繁的ajax轮询请求会干扰我们,Fiddler居然没有比较方便的根据URL隐藏这种请求的办法,不过AutoResponder其实是支持这种功能的,只是在responder列表里默认没有*flag:ui-hide这个选项,手动写出来又很麻烦.最方便的还是把添加功能做在右键菜单里.如图.这个扩展的实现非常简单,全部代码都在下面.using System;using System.Windows.Forms;using Fiddler;public class hideURL : IFiddlerExtension{ private MenuItem... 阅读全文

摘要： 原文:http://addyosmani.com/blog/ECMAscript-6-resources-for-the-curious-javascripter/最近我花了很多时间来了解ECMAScript 6相关的知识,我意识到,如果能把这些知识收集到一个单独的页面里,会给那些对下一代ECMAScript感兴趣的朋友们提供很多帮助.目前浏览器支持哪些ES6特性?想要知道你的浏览器已经支持了哪些ECMAScript 6特性,可以看看Juriy Zaytsev统计的ES6兼容性表格: http://kangax.github.com/es5-compat-table/es6/.注意:如果你使用 阅读全文

摘要： 原文:http://www.adobe.com/devnet/html5/articles/categorizing-values-in-javascript.html本文中,我将会解释JavaScript一共有几种类型的值,以及如何判断一个值的类型.这将有助于你更好的理解JavaScript是如何工作的.也能帮你实现更高级的编程任务,比如在需要处理各种不同类型的传入值的地方,写一个完善的库进行处理.有了本文中的知识,你就能够避免因两个不同值之间存在细微的差别而引起的bug.我将会给你展示四种判断值的类型的方法:通过隐藏属性[[Class]],通过typeof运算符,通过instanceof运 阅读全文

摘要： 原文:http://www.nczonline.net/blog/2012/10/09/ecmascript-6-collections-part-2-maps/Map[1]和Set一样,也是在其他语言中经常会用到的东西.其基本思想就是把一个值映射给一个唯一的键,这样在任何时刻,都能根据这个键获取到对应的值.在过去,JavaScript开发者们一直都把常规的对象当成Map来使用(译者注:之所以说常规对象,是因为Map类型也是对象).实际上,JSON就是基于"对象是由键-值对组成的"这个前提发明的.可是,对象当作Set来使用的限制同样存在于对象当作Map使用的情况下,那就是: 阅读全文

摘要： 我经常翻译国外的文章,遇到这么个需求.如果要翻译的文章中包含了图片,那么复制到博客园的时候图片肯定是引用原网站的了.如果原网站是个人博客(任何时候域名都可能失效),或者需要通过代理软件才能访问,或者是虽然能访问,但速度很慢,这些情况下,我们就需要把外链的图片先下载下来,再上传到博客园上,这是一个很让人烦躁的过程,尤其对我这种重度鼠标手肩周炎等等患者来说.于是昨天晚上写了一个火狐扩展,让编辑器多一个功能按钮,只要把图片复制到编辑器中.点击新增按钮"上传全部外链图片".就可以了.下面是截图,我在代理环境下.测试的原网址是:http://mrale.ph/blog/2012/09 阅读全文

摘要： 北京时间今天凌晨,来自Twitter的前端工程师Angus Crol,在柏林举办的JSConf会议上,进行了题为"Break all the Rulez"的演讲,主要讲了一些我们通常认为是错误的不该使用的东西,其实是有用的.本文最下面有演讲用的slides.远在美国的JavaScript之父看了slides也说:我同意其中大部分观点(看来还是有问题?).下面我把要点简单翻译一下,不做扩展解释.with语句为什么不去使用它?1.意外的运行结果,可能隐式创建全局变量2.闭包作用域解析过多消耗3.后期编译有人说,ES5的严格模式可以防止隐式创建全局变量(不用var),这样能减少w 阅读全文

摘要： 头像姓名性别地理位置公司工作职责相关链接Erik Arvidsson男纽约GoogleChrome工程师博客:http://erik.eae.net微博:https://twitter.com/ErikArvidssonGitHub:https://github.com/arv Gavin Barraclough男AppleNebojša Ćirić男GoogleDoug Crockford男加州圣荷西eBay资深JavaScript架构师,发明了JSON博客:http://www.crockford.com微博:https://plus.google.com/1180952762216075 阅读全文

摘要： 原文:http://www.2ality.com/2012/10/proto.html本文讲一下特殊属性__proto__,通过该属性可以获取或设置一个对象的原型.想要理解这篇文章,你必须已经熟悉了JavaScript的原型继承 [1]. 1.特殊属性__proto__ECMAScript标准中规定,一个对象的内部属性[[Prototype]]指向自己的原型.在ECMAScript 5中,该属性是不能被直接读取或修改的,但是可以通过Object.getPrototypeOf()间接的读取到它.还可以使用Object.create()创建一个拥有指定原型的新对象.例如,下面的代码创建了一个对象o 阅读全文

摘要： 前两天首页上有篇文章,讲用C#生成验证码.今天又看到一篇文章,讲用python识别验证码.于是我就写了这篇文章,讲用Canvas识别验证码 我们今天要识别的是那种最最简单的验证码,只有随机颜色和随机背景,而没有随机变形,随机噪点. 为了方便试验,我从谷歌中随便搜了一个使用了这种验证码的网站,这种验证 阅读全文

摘要： 原文:http://www.2ality.com/2012/09/javascript-quine.html引用自Wikipedia:一个quine是一个计算机程序,它不接受任何输入,且唯一的输出就是自身的源代码.@cowboy (Ben Alman) 给出了一个用JavaScript写的quine程序:!function $(){console.log('!'+$+'()')}()为什么这个quine能成功运行呢? 获得源代码如果一个程序仅是由一个函数组成的,那么我们很容易获得这个函数的源代码:在大多数JavaScript引擎中,将一个函数转换成字符串就会返回 阅读全文

摘要： 原文:http://ejohn.org/blog/xpath-css-selectors最近,我做了很多工作来实现一个同时支持XPath和CSS 3的解析器,令我惊讶的是:它们俩在某些方面上非常相似,而在另一些方面上又完全不同.不同的地方有,CSS是用来配合HTML工作的,可以使用#id来根据ID获取元素,以及使用.class来根据class获取元素.这些用XPath实现的话都不会那么简洁,反过来呢,XPath可以使用..来返回到DOM树的上层节点中,还可以使用foo[bar]来获取到一个拥有bar子元素的foo元素.CSS选择器完全做不到这些,总结一下就是,和XPath比起来,CSS选择器通 阅读全文

摘要： 原文:http://asenbozhilov.com/articles/multiline-strings.html多行字符串的作用是用来提高源代码的可读性.尤其是当你处理预定义好的较长字符串时,把这种字符串分成多行书写更有助于提高代码的可读性和可维护性.在一些语言中,多行字符串还可以用来做代码注释. 大部分动态脚本语言都支持多行字符串,比如Python, Ruby, PHP. 但Javascript呢? 译者注:python中可以使用两种多行字符串的写法,一种是使用三引号,也是python中多行注释的方法,这种方法产生的多行字符串是真正的多行.也就是说,解释器会认为每行的结尾处的确有一个.. 阅读全文

摘要： 原文:http://gkz.github.com/LiveScript/blog/ten-reasons-to-switch-from-coffeescript.htmlCoffeeScript 问世已经有一段时间了,现在已经被很多开发者们使用,不少工具也依赖它.那么为什么我们还要从CoffeeScript转移到它的分支,LiveScript呢?这里有10个原因:提高可读性LiveScript支持在标识符中使用连字符,编译时可以把带连字符的标识符转换成驼峰形式,保持与JavaScript代码风格的统一.document.query-selector-all会被编译为document.query 阅读全文

摘要： 原文:http://po-ru.com/diary/rubys-magic-underscore/http://po-ru.com/diary/destructuring-assignment-in-ruby/下划线的妙用我今天发现,在把下划线作为变量名时,Ruby在对待上会和其他名称稍有不同.为了方便下面的讨论,我们假定存在一个这样的哈希值变量:people = { "Alice" => ["green", "alice@example.com"], "Bob" => ["brown&quo 阅读全文

摘要： 原文:http://asenbozhilov.com/articles/quiz.html这些题目都源自ECMA-262-3规范.Good luck!译者注:作者是根据ES3出的题,但我没发现和ES5有不同表现的地方.暂时不给出答案解释.请到http://ecma-international.org/ecma-262/5.1/找答案Function.prototype.toString.call({ name: 'F', body: 'print("Javascript is hard")'}); function F(){print(&qu 阅读全文

摘要： 最近,开发人员和设计师们可以在WebKit中尝试使用CSS区域特性了,我们认为是时候给他们一些开发工具了.最新版本的Chrome Canary中的web inspector现在已经支持下面这些功能:查找文档中所有的命名流.显示每个命名流的内容和区域链.高亮页面中的CSS区域,就像是把鼠标放在web inspector中对应的节点上一样.显示不同的标志来表明内容是否适合一个区域,是否忽略了一个区域,以及某个区域是否是空的.译者注:可以到http://dev.w3.org/csswg/css3-regions/进一步了解CSS区域.获得Chrome Canary目前只有最新版本的Chrome Ca 阅读全文

摘要： 原文:https://nicolas.perriault.net/code/2012/introducing-casperjs-toolkit-phantomjs/一段时间之前,我发表过一篇关于PhantomJS的文章,PhantomJS是一个无界面的,包含了WebKit浏览器引擎和JavaScript API的脚本解释器.于此同时,我开始编写一个用来简化PhantomJS脚本编写尤其是导航操作脚本的轻量级库.六个月过去了,这个库有了更多的功能,现在已经是一个独立的项目了,CasperJS就这样诞生了,目前,在GitHub上,该代码库已经有超过180个关注者和32个分支.Ariya Hiday 阅读全文

摘要： 原文:http://www.nczonline.net/blog/2012/09/25/ecmascript-6-collections-part-1-sets/译者注:因为英文中的collection和Set在中文中都叫集合,为了防止混淆,本文把collection翻译成集合,表示所有的集合类型,Set不译,表示Set类型,小写的set指的是一个Set类型的对象实例在JavaScript的历史中,长期以来只有一种集合类型,那就是数组(Array).在JavaScript中,数组不仅包含了其他语言中数组的功能,还可以用来模拟队列和栈.但数组也有不足:由于数组的索引只能是数字,所以在需要使用一个 阅读全文

摘要： Vanilla JSVanilla JS 是一个快速, 轻量级, 跨平台的框架,可以用来构建不可以思议的,强大的JavaScript应用程序.介绍Vanilla JS团队负责维护框架代码的每一个字节,努力让它变得小巧与直观.都有谁在使用Vanilla JS呢? 真是个好问题! 下面列举一些:FacebookGoogleYouTubeYahooWikipediaWindows LiveTwitterAmazonLinkedInMSNeBayMicrosoftTumblrApplePinterestPayPalRedditNetflixStack Overflow实际上, 使用 Vanilla.. 阅读全文

摘要： 原文:http://www.2ality.com/2011/06/ecmascript.html本文解释了JavaScript和ECMAScript之间的区别.还解释了ECMAScript.next和ECMAScript 6以及ECMAScript Harmony之间的区别.部分ECMAScript术语你应该知道下面这些与JavaScript标准化相关的术语.ECMAScript: Sun(现在的Oracle)公司持有着“Java”和“JavaScript”的商标.这就让微软不得不把自己的JavaScript方言称之为“JScript”.然后,在这门语言被标准化的时候,就必须使用一个与二者都不 阅读全文

摘要： 原文:http://blogs.adobe.com/webplatform/2012/09/21/javascript-operators/在上一篇文章中,我们讲到了JavaScript中的数据类型和类型转换.今天,我们接着讲一下JavaScript中的每个运算符到底是如何进行类型转换的.下面会依次讲解六个最常用的运算符的工作机制:typeoftypeof运算符会返回操作数类型的字符串表示.主要有两个需要注意的地方:未定义或未声明的变量将会返回"undefined", 比如.如果a没有被声明,那么typeof a将会返回"undefined".typeo 阅读全文

摘要： 原文:http://www.2ality.com/2011/05/void-operator.html语法void exprvoid运算符的作用是:计算表达式expr,并返回undefined.例子:> void 0undefined> void(0)undefined> void 4+7 // 由于void比+优先级更高,所以该表达式被解析为(void 4)+7NaN> void(4+7)undefined> var x;> x = 3;3> void(x = 5);undefined> x5void是个运算符,而不是函数,它不能被重新定义,如 阅读全文

摘要： 原文:http://www.2ality.com/2011/08/array-prototype-performance.htmlArray.prototype包含了许多的通用方法,这些通用方法可以使用在任意的类数组对象上.[]是一个常用的用来访问这些方法的快捷方式.本文要讲的就是使用这个快捷方式的优点和缺点.说明类数组(array-like)对象.JavaScript中有一些对象叫类数组对象,他们有索引访问,有length属性,和数组很像,却没有数组的方法.常见的类数组对象有:特殊值arguments(能够通过索引访问到传入一个函数调用中的所有参数)和大部分的DOM查询结果.在ECMAScr 阅读全文

摘要： 原文:http://atroche.org/post/30994290348/javascript-indentationJavaScript没有一个相当于PEP8的东西(译者注:PEP8是python官方的代码风格指南).没有官方的文档告诉我们应该如何来缩进.社区的风格指南(有很多)又没有一个统一的共识.作为一个程序员,我们又该怎么做?我写了一个脚本把GitHub上前100个最受关注的JS项目克隆了下来,看一下他们是用什么来缩进自己的.js文件的.下面是统计结果:和其他语言,比如Ruby和Python中,某种特定风格占据主导地位的情况比较而言,JavaScript中,这三种缩进风格貌似都占据 阅读全文

摘要： 原文:http://www.2ality.com/2011/12/strict-equality-exemptions.html答案是:永远不要用.本文依次否定了五种看起来可以使用==的地方,同时解释了为什么.JavaScript中有两个运算符用来判断两个值是否相等:严格相等运算符===,必须类型相同且值相同.普通的(宽容的)相等运算符==,在比较值是否严格相等之前,首先进行类型转换.给JavaScript初学者的建议是:完全忘掉==,总是使用===.实践证明,这样做是完全正确的.有五种案例看起来可以反驳这一论点,但其实没有.从现在开始,我们的指导原则是:比起简洁,我们更喜欢意图清晰的代码.记 阅读全文

摘要： 原文:http://www.2ality.com/2012/01/typeof-use-cases.htmlJavaScript中的typeof其实非常复杂,它可以用来做很多事情,但同时也有很多怪异的表现.本文列举出了它的多个用法,而且还指出了存在的问题以及解决办法.阅读本文的前提是,你现在应该已经知道原始值和对象值的区别了.1.检查一个变量是否存在,是否有值.typeof在两种情况下会返回"undefined":一个变量没有被声明的时候,和一个变量的值是undefined的时候.例如:> typeof undeclaredVariable === "und 阅读全文

摘要： 原文(被墙):http://www.2ality.com/2011/12/nodejs-shell-scripting.html你懂JavaScript吗?你需要写一个Shell脚本吗?那么你应该试一下Node.js,它很容易安装,而且很适合通过写Shell脚本来学习它.访问参数你可以通过process.argv来访问到命令行参数,它是一个包含下列内容的数组:[ nodeBinary, script, arg0, arg1, ... ]也就是说,第一个参数是从process.argv[2]开始的,你可以像下面这样遍历所有的参数:process.argv.slice(2).forEach(fun 阅读全文

摘要： 原文:http://www.2ality.com/2012/02/concat-not-generic.htmlECMAScript 5.1规范中指出,数组方法concat是通用的(generic).本文反驳了这一结论,因为实际上并不是这样的.ECMAScript 5.1规范§15.4.4.4 中说到:concat函数是有意设计成通用的;它并不要求它的this值必须得是个Array对象.因此,它可以被转移到其它类型的对象上作为方法来调用.本文中的代码都使用了[]来作为Array.prototype的快捷方式.这已经是很常用的技巧了,虽然可读性差点:你通过一个对象实例访问到了Array 阅读全文

摘要： 原文(被墙):http://www.2ality.com/2011/11/uncurrying-this.html本文主要讲了JavaScript中科里化和反科里化this的方法.话题来自于Brendan Eich(JavaScript之父)的一个tweet.1.反科里化(Uncurrying)this反科里化this的意思是:把一个签名如下的方法:obj.foo(arg1, arg2)转换成另外一个签名如下的函数:foo(obj, arg1, arg2)想要知道这么做有什么用,我们首先得了解一下通用方法.2.通用方法(Generic methods)通常情况下,某个特定的方法只能在某种特定类 阅读全文

摘要： 原文:http://www.2ality.com/2012/03/stricter-equality.html大部分JavaScript程序员都知道:应该使用严格相等(===)来代替"普通"的相等操作(==).但是,有时候你的确需要一个比严格相等===更严格的运算符,比如说:在你想检查某个值是否是NaN的时候,又或者你想区分-0和+0的时候.本文解释了相关的知识以及ECMAScript.next中的解决办法:"is"运算符.1.检测NaN在数学上,任意值x总是与自己相等:x = x 但这条规则并不适用于 === 和 NaN:> NaN === Na 阅读全文

摘要： 原文:http://www.2ality.com/2012/02/nan-infinity.html本文要讲的是两个特殊值,NaN和Infinity,返回这两个值的操作通常都应该返回正常的数字.1.NaN在JavaScript中,NaN代表了“not a number”.主要在解析字符串出现错误时会返回这个值:> Number("xyz")NaNNaN的名字是“not a number”,不过也可以说是not not a number:> NaN !== NaN true它是一个数字!类型为"number"> typeof NaN 阅读全文

摘要： 原文:http://www.2ality.com/2012/08/ids-are-global.html有人在twitter上提到了:在Chrome的JavaScript终端中,你只需要输入一个元素的ID,就可以访问到这个元素.@johnjbarton给了解释,这是因为所有的元素ID都是全局变量.本文再详细解释一下.标准规范HTML5规范文档中指出:如果一个元素符合下面两条规则中的任一条,则window对象中必须要有与之对应的一个属性,属性值就是这个对象.如果一个元素拥有ID属性,那么ID属性的属性值就会成为window对象的属性名.如果一个元素拥有name属性,那么name属性的属性值就会成 阅读全文

摘要： 原文:http://www.2ality.com/2012/03/converting-to-string.html译者注:前两天在看ES5的时候顺便出了一道题,今天看到这篇文章,刚好解释的很清楚,就翻译了一下.在JavaScript中,主要有三种方法能让任意值转换为字符串.本文讲解了每种方法以及各自的优缺点.1.转换字符串的三种方法这三种将value转换为字符串的方法是:value.toString()"" + valueString(value)第一种方法存在的问题是,它不能把null和undefined转换为字符串.还有第二种和第三种方法,这两种方法的效果基本一样.& 阅读全文

摘要： 原文:http://www.2ality.com/2012/07/apply-tricks.html本文要讲的是:使用apply方法处理数组的三个技巧.apply方法apply是所有函数都有的方法.它的签名如下:func.apply(thisValue, [arg1, arg2, ...])如果不考虑thisValue的影响,上面的调用等同于:func(arg1, arg2, ...)也就是说,apply允许我们将一个数组"解开"成为一个个的参数再传递给调用函数.让我们分别看看apply使用中的三个技巧.技巧1: 将一个数组传递给一个不接受数组作为参数的函数JavaScri 阅读全文

摘要： 原文:http://www.2ality.com/2011/08/spreading.html译者注:本文要讲的是ECMAScript 6中的知识点,如果你连ES5都不了解的话.我得说,你已经很落后了.CSS4,HTML6,甚至ES7 ES8都已经开始规划了,赶紧形动起来吧,否则淘汰!有些时候,我们需要把一个数组展开成多个元素,然后把这些元素作为函数调用的参数.JavaScript中可以使用Function.prototype.apply来实现这种展开操作,但它不能被应用在执行构造函数的情况下.本文解释了什么是展开操作以及如何在使用new运算符的同时进行展开操作.1.展开(Spreading) 阅读全文

摘要： 原文:http://www.2ality.com/2012/09/expressions-vs-statements.html本文要讲的是JavaScript中非常重要的两个知识点:表达式(expressions)和语句(statements)之间的区别.1.语句和表达式JavaScript中的表达式和语句是有区别的.一个表达式会产生一个值,它可以放在任何需要一个值的地方,比如,作为一个函数调用的参数.下面的每行代码都是一个表达式:myvar3 + xmyfunc("a", "b")语句可以理解成一个行为.循环语句和if语句就是典型的语句.一个程序是由一 阅读全文

摘要： 原文:http://www.2ality.com/2012/06/dense-arrays.html一般来说,JavaScript中的数组是稀疏的,也就是说,数组中的元素之间可以有空隙,因为一个数组其实就是一个键值映射.本文解释了如何创建稀疏数组和不稀疏的数组.1.稀疏数组创建一个指定长度的稀疏数组很简单:> var a = new Array(3);> a[ , , ]> a.length3> a[0]undefined当你遍历它时,你会发现,它并没有元素.JavaScript会跳过这些缝隙.> a.forEach(function (x, i) { conso 阅读全文

摘要： 原文:http://www.2ality.com/2012/08/instanceof-object.html问题是: 什么对象不是Object的实例?换句话说就是:变量v是什么样的值,可以让下面的三个表达式都为true?typeof v === "object"v !== null!(v instanceof Object)1.关于v,我们知道些什么?上面的表达式告诉我们关于v的两件事:它是一个对象,但他不是Object的实例.1.1 v是一个对象前两个表达式使用typeof操作符来确保v是一个对象.第二个表达式是必须的,因为typeof有个bug,那就是在操作原始值nu 阅读全文

摘要： 原文:http://www.2ality.com/2012/01/object-plus-object.html最近,Gary Bernhardt在一个简短的演讲视频“Wat”中指出了一个有趣的JavaScript怪癖:在把对象和数组混合相加时,会得到一些你意想不到的结果.本篇文章会依次讲解这些计算结果是如何得出的.在JavaScript中,加法的规则其实很简单,只有两种情况:你只能把数字和数字相加,或者字符串和字符串相加,所有其他类型的值都会被自动转换成这两种类型的值. 为了能够弄明白这种隐式转换是如何进行的,我们首先需要搞懂一些基础知识.注意:在下面的文章中提到某一章节的时候(比如 阅读全文

摘要： 原文:http://www.2ality.com/2012/09/empty-regexp.html本篇博文讲解了"空"的正则表达式(empty regular expression)."空"正则一个空正则可以匹配任意字符串. > var empty = new RegExp(""); > empty.test("abc") true > empty.test("") true译者注:我通常把这种匹配称之为"空匹配",还有很多其他的可以匹配任意字符串的正则, 阅读全文