Leon's blog

每天活的有趣一点

正在浏览标签为 javascript 的文章

前端开发调试工具非常方便,Firefox下有Firebug,Google Chrome和Safari下有Web inspector。 但是手机上的浏览器调试一直还没有特别好的工具。随着iOS 6的退出,这一现象得到了很大的改变。现在可以通过桌面Safari的Web inspector直接调试,iOS 6上浏览器里的网页内容了,几乎跟调试桌面浏览器里的页面一样快,一样方便。唯一的遗憾是,似乎还只有Mac下的Safari 6支持这个功能,Windows下的Safari版本还不行。也许这也是Apple促销Mac的一个手段吧。

调试iOS 6上浏览器里的页面的具体步骤如下

  1. 在iOS 6上的Safari设置里开启Web inspector选项。并把设备通过数据线连接到Mac。

iOS 6 Safari inspector-1

  1. 打开Mac上的桌面Safari,在Develop菜单下将会出现连接了的iOS 6设备。选择这个设备下要调试的页面。

iOS 6 Safari inspector-2

  1. 在桌面Web inspector上选取Html元素,手机上将高亮显示

iOS 6 Safari inspector-3

  1. 当然除了高亮显示,其他修改、查看页面加载过程,调试Javascript等一样也不少

iOS 6 Safari inspector-4

update

最近学习了一下backbone.js。这是一个只有不到6k的一个前端javascript框架,力图解决全端开发时常见的代码松散,不够模块化的问题。backbone.js号称是MVC框架,但是最强大的就是Model/Collection和View部分,C在backbone.js其实主要是对URL hash对界面功能进行router。

感觉backbone.js确实解决了很大的问题,使得前端的开发更加模块化,更有利于开发相对复杂些的单页面应用、webapp和手机native+Html5的混合应用。典型的成功案例有Linkedin的手机应用、教育网站Khan Academy,团购网站Groupon Now!,任务管理应用Trello等。

我也学着backbone.js的著名例子Todos,试验了一些。简单修个Todos,实现了两个小应用:4Blocks9Blocks

4Blocks,在Todos的基础上把任务列表复制成了4个,结合《高效人士的7个习惯》里的把任务划分为轻重缓急的概念而来。可以作为自己日常的Task管理器。
4Blocks

9Blocks,则把Todos的任务列表复制了9个,结合Business Model Generation的商业模式画板,可以用来做简单的商业模式分析工具。
drawsomething businessmodel

先看这行代码:

new Array([],null,undefined,null) == ",,,"; // true

挺神奇,哈?
这里有两件事情,首先当然是“==”这家伙引起了类型转换。 转换的规则是当两个对象a和b作比较时,如果一方是简单类型(假设是b吧),另一方是对象(假设是a);则把a类型转换成b的类型。前面的代码b(”,,,”)是字符串,简单类型,所以要求a(typeof Array是对象对吧)作类型转换到字符串。
另一件事情就是Array的类型转换,转换成字符串时,数组大概就是这样做的:首先把每一个元素转换成字符串,然后调用数组的join方法。既是本上a对象经历了这样的转变:
1. Array([],null,undefined,null)
2. Array(“”,””,””,””)
3. Array(“”,””,””,””).join()
4. “,,,”
最后变成了”,,,”,自然就返回true了。

同样的道理下面这行代码就不难理解了。

",,," == new Array(4); // true

再看个变态点的:

",,," == Array((null,'cool',false,NaN,4)); // true

其实这里主要是使用了逗号操作符的原因。MDN上时这样说逗号操作符的,从左往右计算,并返回右面的值。
所以(null,’cool’,false,NaN,4)的返回值就是4, 然后这个例子就变成,前面一个例子了。WTFJS。

Javascript有很多很好的特性,Douglas Crockford的JavaScript: The Good Parts是Javascript之美的最好的书籍。同时Javascript由于设计仓促,也有很多从语言角度来说非常傻b的现象。
网站WTFJS收集各种有趣的Javascript错误,供程序员茶余饭后谈资,未尝不是另一种美。

下面这段代码展示了Javascript对最大最小值的处理,导致了最大值比最小值小的现象。

Math.max();
// -Infinity

Math.min();
// Infinity

看上去不错,只要你真拿他们来跟其他数值进行比较。但是用作不比较,还真不知道最大最小值有什么用途?

console.log(9 < Math.max());
//false
console.log(9 < Math.min());
//true
Math.min() < Math.max();
//false

推荐书目:
JavaScript: The Good Parts

ECMAScript里关于delete操作符的解释晦涩的很, 实在不是我能理解的. 有兴趣你可以去看看.

实际中使用中, 经常会碰到Javascript变量有时候能成功删除, 有时候却不掉成功删除的情况.
这篇Understanding delete牛文详细解释了, 为什么会这样, 什么样的变量能成功delete, 什么样的不能成功delete.

简而言之, 就是通过”声明“方式创建的变量不能成功删除, 通过”赋值“方式创建的变量能成功删除; 一但一个变量创建后, 它能不能被删除的属性将不会改变. 一个特例是通过eval()函数执行动态代码创建出来的变量,都是可以删除的.
如下面这段代码在Firefox/Chrome/Nodejs里的运行结果如下:

(function(global){
    var aaa = "aaa";
    bbb = "bbb";
    global.ccc = "ccc";
    eval("var ddd='ddd';");
    console.log(delete aaa);
    console.log(delete bbb);
    console.log(delete ccc);
    console.log(delete ddd);
}(this));

scrn2011-12-31 12 04 18

Firebug的console里直接定义的变量(不包括在函数里定义的变量), 似乎是因为以eval()的方式在运行代码. 所以通过在Firebug的console里输入代码创建出来的变量,是可以删除的. Chrome等webkit系的浏览器的开发工具没有这个问题. 这一点在调试代码时可能会引起奇怪的现象.

//在console里粘贴运行下面的代码
var aaa = "aaa";
console.log(delete aaa); 
//在Chrome的开发工具里返回是false, 在Firebug的console里返回是true.

scrn2011-12-31 12 13 13