代码改变世界

随笔分类 - Web

如何捕获和分析 JavaScript Error

2014-03-17 05:58 by Cat Chen, 9247 阅读, 收藏, 编辑
摘要:前端工程师都知道 JavaScript 有基本的异常处理能力。我们可以 throw new Error(),浏览器也会在我们调用 API 出错时抛出异常。但估计绝大多数前端工程师都没考虑过收集这些异常信息。反正只要 JavaScript 出错后刷新不复现,那用户就可以通过刷新解决问题,浏览器不会崩溃,当没有发生过好了。这种假设在 Single Page App 流行之前还是成立的。现在的 Single Page App 运行一段时间后状态复杂无比,用户可能进行了若干输入操作才来到这里的,说刷新就刷新啊?之前的操作岂不要完全重做?所以我们还是有必要捕获和分析这些异常信息的,然后我们就可以修改代码 阅读全文

HTTP 状态码详解

2012-06-19 09:04 by Cat Chen, 13173 阅读, 收藏, 编辑
摘要:最近看《REST in Practice》,发现 HTTP 如此之多的状态码都有各自的含义,要准确使用并不难,但现实当中很少人能够做得到。大多数人熟悉的状态码就那几个,平时也不会去阅读 RFC 2616,结果反复使用的也就是那几个状态码。其实很多 REST 中可能遇到的情况,在 HTTP 状态码中都已经有考虑到,不需要自己去发明新的状态码,也不需要在 header 或者 body 自定义错误信息。在说状态码之前,首先建议大家还是先阅读一下 RFC 2616 中的相关章节,看看已有的状态码描述都是什么。我相信有部分状态码是你看了描述也不知道用来干什么的,这时候就需要有更具体的例子来告诉你怎么用了 阅读全文

怎么样才算是 RESTful?读 REST in Practice

2012-05-09 22:08 by Cat Chen, 9377 阅读, 收藏, 编辑
摘要:最近 O’Reilly 搞活动,我就半价买了一本《REST in Practice》(Kindle 版链接)。对于 O’Reilly 的书,我通常会对比 O’Reilly 打折后的价钱和 Kindle 版的价格,通常是那家更便宜就在那家买,但图表或代码比较多的我就会坚持买 O’Reilly 的版本,因为 PDF 能够最好地保存这些格式。回到 REST 的话题上。尽管这个概念 2000 年就被提出来了,2007 年成为了一个热词,随后越来越多的服务都宣称自己是 RESTful 的,但是到底真么做才是真正的 REST 我从来没有自习学习过。由于 2007 年的时候 Ruby on Rails 也十 阅读全文

为什么 script 标签不能写成自关闭形式

2011-07-08 13:50 by Cat Chen, 5036 阅读, 收藏, 编辑
摘要:今天早上在 Stack Overflow 看到了这个问题: Why don't self-closing script tags work? 。答案给出的解释是,在 XHTML 的标准里面规定非 EMPTY 标签不能使用自关闭形式。注意这里使用的是全大写的 EMPTY ,所以我不把它翻译为「空白」。那么 EMPTY 到底是什么呢?写过 DTD 的人应该知道它是个关键字,用来指明一个标签的内容必须是空白,而不能包含文本内容或子节点。看看具体的例子就很容易明白了:<!ELEMENT img EMPTY><!ATTLIST img %attrs; src %URI; #RE 阅读全文

在 JavaScript 中监听 IME 键盘输入事件

2011-05-29 22:26 by Cat Chen, 9558 阅读, 收藏, 编辑
摘要:在 JavaScript 中监听用户的键盘输入是很容易的事情,但用户一旦使用了输入法,问题就变得复杂了。输入法应当如何触发键盘事件呢?是每一下击键都触发一次事件,还是选词完毕才触发事件呢?整句输入又该如何触发事件呢?不同的操作系统和不同的浏览器对此有不同的看法。在最糟糕的情况下,用户使用输入法后浏览器就只触发一次 keydown ,之后就没有任何的键盘事件了。这对于 Suggestion 控件的实现来说是个大问题,因为 Suggestion 控件需要监听文本输入框的变化,而事件是最准确也最节省计算资源的做法,如果换成轮询的话性能就可能受到影响。 首先,要监听启用输入法后的击键事件应当使用 ke 阅读全文

John Resig 见面会视频

2010-11-23 00:28 by Cat Chen, 3340 阅读, 收藏, 编辑
摘要:上个星期 John Resig 来到了中国,谋智网络跟 CSDN 组织了一场 John Resig 见面会。 John Resig 在大会上介绍了 jQuery 的两个新特性(暂时还是插件): Data Link 以及 Templates 。引入这两个插件后,前端的数据呈现及交互将变得更简单,开发数据驱动型 Web 应用的成本也会随之而降低,估计将来我们能够见到更多基于 jQuery 的数据交互型... 阅读全文

如何让你的网站支持 IE9 Pinned Site (Part 2 - 实战)

2010-11-17 00:02 by Cat Chen, 3048 阅读, 收藏, 编辑
摘要:该如何展示 IE9 Pinned Site 呢?我可以写一个新的应用,完全是为了展示 Pinned Site 的特性,但这样就像是为了实现这些特性而利用这些特性。所以我想还是升级一个现有的网站好了,这样更能说明 Pinned Site 是如何起到优化用户体验的作用的。我选择了 hack 现在的百度地图。由于 IE9 正式版还没有发布,所以我 hack 的代码暂时也不能发布到线上,只能私下玩玩。在这... 阅读全文

如何让你的网站支持 IE9 Pinned Site (Part 1 - 理论)

2010-11-16 19:19 by Cat Chen, 3587 阅读, 收藏, 编辑
摘要:Windows 7 任务栏有何不同自从 Windows 95 开始,任务栏就一直没什么变化,都是一个个长条表示正在运行的应用程序,直到 Windows 7 。 Windows 7 的任务栏发生了巨大的变化,这个变化其实就是更像 Mac OS X 的 Dock 了。无论是否在运行的应用程序,都可以在任务栏上占一个位置,并且这个位置可以固定下来,让用户可以更方便的操作这个应用程序。从此,任务栏由单向地... 阅读全文

能承载移动 Web 应用的唯一浏览器: Mobile Safari

2010-01-30 14:02 by Cat Chen, 5011 阅读, 收藏, 编辑
摘要:最近拿 iPhone 、 Android 、 Windows Mobile 这三个平台上的内置浏览器来做了一番对比,结果是只有 iPhone 的 Mobile Safari 能够承载现代化的移动 Web 应用,其他移动浏览器的设计思路还停留在上个世纪──能看网页就行,不存在移动应用一说。我用来做对比的平台是 iPhone 2.0 、 Android 2.0 、 Window... 阅读全文

编写 iPhone Friendly 的 Web 应用程序 (Part 7 - 多点触击)

2009-11-24 22:33 by Cat Chen, 3371 阅读, 收藏, 编辑
摘要:这个系列的上一篇文章差不多是两年之前的事情了,在这两年里Mobile Safari并非停滞不前,从iPhone 2.0开始Mobile Safari就加入了对多点触击的支持,现在我们就来看一下我们可以利用它来干什么。相信很多人都看过WPF为Surface设备做的一个简单demo,也就是在桌面上显示若干张照片,你可以通过单点触击拖放,也可以通过多点触击缩放和旋转。这在iPhone上能够做到,甚至在M... 阅读全文

十分钟内学会:控制浏览器是否缓存网页状态

2009-10-09 14:59 by Cat Chen, 7394 阅读, 收藏, 编辑
摘要:Question在Firefox等浏览器中,如果你打开一个页面并进行若干操作,例如在文本框进行输入,甚至点击按钮进行Ajax操作更新页面局部,这些操作的结果都会被缓存下来。在你点击链接离开这个页面后,如果你通过后退按钮回到这个页面,你会发现它仍出于你离开时的状态,而非页面刚刚加载好后的初始状态。在一些情况下,这样的缓存方式是符合我们预期的;但在另外一些情况下,我们更希望页面恢复到初始状态,或者说让... 阅读全文

你的网站「被兼容」了吗?

2009-09-17 15:35 by Cat Chen, 4840 阅读, 收藏, 编辑
摘要:一般情况下,我们只会讨论我们的网站如何主动兼容某某浏览器,被动地等待浏览器来兼容我们的网站是不切实际的幻想——哪个浏览器会那么伟大,原意主动为一个不兼容的网站而作出改变呢?IE8就是这样一个伟大的浏览器,Microsoft就是一家这样伟大的企业。故事是这样的,我们有一小段JavaScript依赖于userAgent属性,同样是用IE8进行浏览,在测试环境上userAgent... 阅读全文

jQuery is DSL (Part 2 - jQuery)

2009-08-17 00:01 by Cat Chen, 4460 阅读, 收藏, 编辑
摘要:jQuery的Internal DSL形式在上一篇文章里面,我们了解到了Internal DSL的具体形式,形如:/* Method Chaining */computer() .processor() .cores(2) .i386() .disk() .size(150) .disk() .size(75) .speed(7200) .sata() .end();然后我们在看看一段... 阅读全文

jQuery is DSL (Part 1 - DSL)

2009-08-10 23:47 by Cat Chen, 6546 阅读, 收藏, 编辑
摘要:jQuery刚刚出来的时候,我没有太多关注它,觉得这不过是Yet Another JavaScript Library。早期的jQuery专注于DOM节点的筛选与操作,不提供众多的基础类扩展,更不提供UI组件,因此体积能够做到很小。然而,我实在看不出它和我熟悉的Prototype比有什么明显的优势——jQuery能做的各项独立的操作,Prototype都能做。后来用jQue... 阅读全文

让 JavaScript 轻松支持函数重载 (Part 2 - 实现)

2009-07-02 15:51 by Cat Chen, 4226 阅读, 收藏, 编辑
摘要:在上一篇文章里,我们设计了一套能在JavaScript中描述函数重载的方法,这套方法依赖于一个叫做Overload的静态类,现在我们就来看看如何实现这个静态类。识别文本签名我们先来回顾一下上一篇文章中提到的Overload用例: var extend = Overload .add("*, ...", function(target) { }) .add("Boolean, *, ...", ... 阅读全文

让 JavaScript 轻松支持函数重载 (Part 1 - 设计)

2009-07-02 09:18 by Cat Chen, 7309 阅读, 收藏, 编辑
摘要:JavaScript支持重载吗?JavaScript支持函数重载吗?可以说不支持,也可以说支持。说不支持,是因为JavaScript不能好像其它原生支持函数重载的语言一样,直接写多个同名函数,让编译器来判断某个调用对应的是哪一个重载。说支持,是因为JavaScript函数对参数列表不作任何限制,可以在函数内部模拟对函数重载的支持。实际上,在很多著名的开源库当中,我们都可以看到函数内部模拟重载支持的... 阅读全文

写个 JavaScript 异步调用框架 (Part 6 - 实例 & 模式)

2009-07-01 21:59 by Cat Chen, 3855 阅读, 收藏, 编辑
摘要:我们用了5篇文章来讨论如何编写一个JavaScript异步调用框架(问题 & 场景、用例设计、代码实现、链式调用、链式实现),现在是时候让我们看一下在各种常见开发情景中如何使用它了。封装Ajax设计Async.Operation的最初目的就是解决Ajax调用需要传递callback参数的问题,为此我们先把Ajax请求封装为Async.Operation。我在这里使用的是jQuery,当然无... 阅读全文

写个 JavaScript 异步调用框架 (Part 5 - 链式实现)

2009-06-30 23:36 by Cat Chen, 3869 阅读, 收藏, 编辑
摘要:在上一篇文章里面,我们为异步调用框架设计了一种链式调用方式,来增强异步调用队列的代码可读性,现在我们就来编写实现这部分功能的代码。调用入口链式调用存在Async.go方法和Async.chain方法两个入口,这两个入口本质上是一致的,只是Async.chain方法在调用时先不提供初始参数,而Async.go方法在调用时提供了初始参数并启动异步调用链。Async.chain = function()... 阅读全文

写个 JavaScript 异步调用框架 (Part 4 - 链式调用)

2009-05-09 23:46 by Cat Chen, 3528 阅读, 收藏, 编辑
摘要:我们已经实现了一个简单的异步调用框架,然而还有一些美中不足,那就是顺序执行的异步函数需要用嵌套的方式来声明。现实开发中,要按顺序执行一系列的同步异步操作又是很常见的。还是用百度Hi网页版中的例子,我们先要异步获取联系人列表,然后再异步获取每一个联系人的具体信息,而且后者是分页获取的,每次请求发送10个联系人的名称然后取回对应的具体信息。这就是多个需要顺序执行的异步请求。为此,我们需要设计一种新的操... 阅读全文

写个 JavaScript 异步调用框架 (Part 3 - 代码实现)

2009-05-07 14:54 by Cat Chen, 3472 阅读, 收藏, 编辑
摘要:在上一篇文章里,我们说到了要实现一个Async.Operation类,通过addCallback方法传递回调函数,并且通过yield方法返回回调结果。现在我们就来实现这个类吧。类结构首先我们来搭一个架子,把需要用到的似有变量都列出来。我们需要一个数组,来保存回调函数列表;需要一个标志位,来表示异步操作是否已完成;还可以学IAsyncResult,加一个state,允许异步操作的实现者对外暴露自定义... 阅读全文