通过Safari调试iOS 6上浏览器内容的页面

On

前端开发调试工具非常方便,Firefox下有Firebug,Google Chrome和Safari下有Web inspector。 但是手机上的浏览器调试一直还没有特别好的工具。随着iOS 6的退出,这一现象得到了很大的改变。现在可以通过桌面Safari的Web inspector直接调试,iOS 6上浏览器里的网页内容了,几乎跟调试桌面浏览器里的页面一样快,一样方便。唯一的遗憾是,似乎还只有Mac下的Safari 6支持这个功能,Windows下的Safari版本还不行。也许这也是Apple促销Mac的一个手段吧。 调试iOS 6上浏览器里的页面的具体步骤如下 在iOS 6上的Safari设置里开启Web inspector选项。并把设备通过数据线连接到Mac。 打开Mac上的桌面Safari,在Develop菜单下将会出现连接了的iOS 6设备。选择这个设备下要调试的页面。 在桌面Web inspector上选取Html元素,手机上将高亮显示 当然除了高亮显示,其他修改、查看页面加载过程,调试Javascript等一样也不少 update 一篇很全面的关于如何使用手机模拟器和远程调试手机页面的文章: Testing Mobile: Emulators, Simulators And Remote Debugging

前端开发MVC框架backbone.js

On

最近学习了一下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,实现了两个小应用:4Blocks和9Blocks。 4Blocks,在Todos的基础上把任务列表复制成了4个,结合《高效人士的7个习惯》里的把任务划分为轻重缓急的概念而来。可以作为自己日常的Task管理器。 9Blocks,则把Todos的任务列表复制了9个,结合Business Model Generation的商业模式画板,可以用来做简单的商业模式分析工具。

Javascript的字符串里神奇的逗号与数组

On

先看这行代码: 挺神奇,哈? 这里有两件事情,首先当然是“==”这家伙引起了类型转换。 转换的规则是当两个对象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了。 同样的道理下面这行代码就不难理解了。 再看个变态点的: 其实这里主要是使用了逗号操作符的原因。MDN上时这样说逗号操作符的,从左往右计算,并返回右面的值。 所以(null,’cool’,false,NaN,4)的返回值就是4, 然后这个例子就变成,前面一个例子了。WTFJS。

Javascript的最大值(max)比最小值(min)小

On

Javascript有很多很好的特性,Douglas Crockford的JavaScript: The Good Parts是Javascript之美的最好的书籍。同时Javascript由于设计仓促,也有很多从语言角度来说非常傻b的现象。 网站WTFJS收集各种有趣的Javascript错误,供程序员茶余饭后谈资,未尝不是另一种美。 下面这段代码展示了Javascript对最大最小值的处理,导致了最大值比最小值小的现象。 看上去不错,只要你真拿他们来跟其他数值进行比较。但是用作不比较,还真不知道最大最小值有什么用途? 推荐书目:

javascript里delete操作符什么时候能成功删除变量?

On

ECMAScript里关于delete操作符的解释晦涩的很, 实在不是我能理解的. 有兴趣你可以去看看. 实际中使用中, 经常会碰到Javascript变量有时候能成功删除, 有时候却不掉成功删除的情况. 这篇Understanding delete牛文详细解释了, 为什么会这样, 什么样的变量能成功delete, 什么样的不能成功delete. 简而言之, 就是通过”声明“方式创建的变量不能成功删除, 通过”赋值“方式创建的变量能成功删除; 一但一个变量创建后, 它能不能被删除的属性将不会改变. 一个特例是通过eval()函数执行动态代码创建出来的变量,都是可以删除的. 如下面这段代码在Firefox/Chrome/Nodejs里的运行结果如下: Firebug的console里直接定义的变量(不包括在函数里定义的变量), 似乎是因为以eval()的方式在运行代码. 所以通过在Firebug的console里输入代码创建出来的变量,是可以删除的. Chrome等webkit系的浏览器的开发工具没有这个问题. 这一点在调试代码时可能会引起奇怪的现象.

对象赋值时的Javascript prototype chain

On

在Web程序员应该知道的Javascript prototype原理里,说到了prototype chain. 但是有一点要特别注明一下, 那就是prototype chain只在对对象的方法和属性调用和读取时有效, 遵循沿着prototype查找方法和属性的规律; 但是在对对象属性进行赋值时, 并不遵循这一规律. 在对Javascript对象的属性进行赋值时, 原则是这样的: 1. 如果该对象本身有这个属性, 则对该属性赋值 2. 如果该对象本身没有这个属性, 则在该对象上新建一个该属性, 并进行赋值. (这时不会通过__proto__属性, 找该对象的prototype, 检查prototype上有没有该属性, 然后在prototype的属性上赋值.) 举个简单的例子: 看console里打出了的对象应该比较清楚. 用对象的数组写法可能更容易理解些.

Web程序员应该知道的Javascript prototype原理

On

有同事问了我几个和Javascript的类继承的小问题,我在也不太理解的情况下,胡诌了一通. 回来以后有些内疚, 反省一下, 整理整理Javascript的prototype的原理, 自己清楚点, 也希望对别人也有帮助. 首先js里面没有类这回子事情, 虽然class是js的保留字, 但是到现在也没派上任何用场. 在js里面, 几乎所有的东西都是对象, 函数也是对象, 所以函数可以赋值给别的变量. 另外js对象也可以用数组的方式访问, 也就是说访问obj1.something, 也可以写成obj1[‘something’]. 在js里虽然没有类, 但是有一个在类编程里常用的的概念, Constructor构造器, 或者叫构造函数. 语法上Constructor跟普通的js函数没有区别, 但是Constructor前面加上new关键字就可以产生新的对象. 那么”new Constructor()”这样调用时到底做了什么事情呢? 1. js运行环境首先创建一个空对象 2. 把this变量指向这个对象 3. 把__proto__指向这个构造器的prototype属性 4. 通过this把属性和方法加在这个对象上 5. 最后会把this指向的对象return出来(当然你也可以显示的return别的对象,这是情况跟我讨论的有点不一样) 这里有2个概念比较重要, 第一是Constructor的prototype属性, 它是Constructor的一个保持共享属性和方法的对象. 二通过该Constructor生成的对象的__proto__属性, 它指向了那个prototype对象. 对象的Constructor可以通过该对象的constructor属性获得. 我们定义一个简单的Constructor Demo(),…

SlideShare的新UI: bigfoot

On

昨天为了看SlideShare比较清爽些,刚弄了个改变SlideShare ppt缺省大小的Bookmarklet,没想到今天就看到SlideShare在测试更大的ppt画面的新UI设计, bigfoot. 我马上去试了一下,还是不太满意: ppt大小是固定大小(728x562px), 广告位还是很多. 最后我还是bigfoot关掉了,继续使用这个小Bookmarklet.

给我个干净的SlideShare界面

On

SlideShare是个很好的资料网站,那里你总能找到符合你胃口的的ppt. 可惜缺省的ppt大小比较小(598×481),有的时候连字也看不清楚.切换成全屏吧,又太招摇,桌面上的消息也不太容易看到. 如果提供个大一点的ppt选项就好了,这就是下面这段Bookmarklet的由来.把它拖到浏览器的收藏夹,以后你在SlideShare上看ppt的时候,单击一下这个Bookmarklet,就会把广告什么的隐藏掉了,ppt的宽度大概是屏幕宽度的70%. 这是点击前和点击后的展示效果:

Log.io: 浏览器里的tail -f

On

前段时间提到过基于node.js的一个挺好玩的应用TermKit. 现在又碰到一个基于node.js的有意思的应用Log.io. Log.io的目标是在浏览器里实现实时监控日志文件.这跟很多人喜欢在终端上通过tail -f来实时监控日志文件类似. 不过通过node.js的良好的异步模式, Log.io把这个功能很好的在浏览器里搞定了. Log.io由两部分组成, harvester和server. harvester负责监视具体的日志文件,当文件有变化是通知server. harvester可以有多个运行实例, 在不同的机器上收集日志. server则负责处理与使用浏览器监视日志的用户的交互. server只有一个运行实例. Log.io的安装步骤如下. 好了,现在可以访问http://”log.io server所在地址”:8998 来看看效果了. 左侧列表按照harvester分组列出来所有监视的日志文件. 右侧上边是当前选中实时监视的日志,支持通过正则表达式搜索. 右侧下面可以显示某个日志文件的历史内容. 看不到图的请看这里, flickr上新上传的图片怎么都看不到呢?!