我看过的书：
-
近期文章
近期评论
- Neo 发表在《Android shell 没有 cp 命令的解决方法》
- allenm 发表在《Mac 在无法启动的情况下备份数据》
- nani 发表在《Mac 在无法启动的情况下备份数据》
- allenm 发表在《2011个人总结》
- allenm 发表在《2011个人总结》
文章归档
友链
链接表
分类目录
功能
分类目录归档：WEB
jQuery deferred 对象的 promise 方法
jQuery 从 1.5 版本引入了 deferred 对象，这是一个基于 CommonJS Promises/A 的设计，为了方便异步操作，大家都知道，在 js 中，异步代码是非常的多。 这篇博客不是来详细讲解 $.Dererred 的，阮一峰 的博客里有一篇博客详细介绍了这个。但是在这篇博客中，关于 promise() 这个方法的讲解却是错误的，我发现这个是因为我徒弟去学习这个的时候，看了这篇文章，然后我让他给我讲述的时候，发现了这个错误。所以我想写篇 blog 来说明下。 update(2012.1.2): 我针对此问题给一峰发了 email, 他已经针对下面的问题进行了更新，下面的引用来自他最初的版本。现在他博客中对 promise() 的讲解是正确的，如果想了解整个 Deferred 对象，建议直接移步他的博客中学习。同时感谢阮一峰发现的我这篇博客中的一个小错误，最后面的那段代码，现在已经修复。 下面是引用自阮一峰的博客: 这里有两个地方需要注意。 首先，最后一行不能直接返回dtd，必须返回dtd.promise()。原因是jQuery规定，任意一个deferred对象有三种执行状态—-未完成，已完成和已失败。如果直接返回dtd，$.when()的默认执行状态为”已完成”，立即触发后面的done()方法，这就失去回调函数的作用了。dtd.promise()的目的，就是保证目前的执行状态—-也就是”未完成”—-不变，从而确保只有操作完成后，才会触发回调函数。 下面是 jQuery 的官方文档： The deferred.promise() method allows an asynchronous function to prevent other code from … 继续阅读
发表在 javascript, Jquery
留下评论
WebSocket Protocol 介绍与实现
今天在方凳会上分享了 websocket protocol以及简单实现，PPT 和代码都放出来，有兴趣的可以围观 Websocket protocol overview View more presentations from allenmeng 然后用 python 简单的实现了 websocket server，代码如下。在网上找的很多代码，都不再兼容 websocket draft 10, 因为 websocket 的草案进化太快，下面的代码是按照 draft10 写的。 chrome 14+ , firefox 7/8 都没有问题。 关于 websocket 草案，请阅读 http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-10 另外推荐一个 Python 的 websocket … 继续阅读
localStorage in HTML5（1）
HTML5 中的 localStorage 我相信 web developer 们，都听说过了吧。目前 chrome,firefox,opera,safari, IE8 都支持此属性，注意 IE8 也支持，那就是说，如果你的网站用户不是太低端，起码有一半以上的用户的浏览器是支持 localStorage 特性的。各个浏览器分配给每个“源(region)”的 localStorage 空间至少为 5M（具体数值请看稍后讨论），对于想开始使用 HTML5 的人们来说，这个是个不错的开始。 localStorage 使用方式也非常简单，有 setItem, getItem, removeItem,key, clear 5个方法，和 length 一个属性。定义如下： interface Storage { readonly attribute unsigned long length; DOMString key(in unsigned long … 继续阅读
chrome.tabs.create 的 callback 不执行？
在写 chrome 插件的过程中，不知道你有没有遇到使用 chrome.tabs.create 创建一个新的 tab，但是这个方法的 callback 却不执行，具体说来，在调试的时候是可以执行的，关掉 chrome 的 DEBUG 工具后，就不可以了。 前几天我也遇到了这个麻烦，可能出现这种问题的情况为：在点击浏览器上插件的图标后，打开一个 popup 的页面，在这个页面里点击某按钮后执行 chrome.tabs.create 方法新建一个新的 tab 页，关掉 DEBUG 工具后，此方法的 callback 函数就无法执行。 我们先来观察这种 popup 的页面的行为，随便找一个会 popup 页面的扩展，点击，让页面弹出，然后你切换下浏览器上已经打开的 tab 页，看看发生了什么？是不是这个 popup 出来的页面会关闭掉？然后在那个扩展上右键，选择“审查弹出内容”，再切换下 tab，发现了什么？是不是这个弹出的页面依然打开？ 这就是问题所在了，默认情况下，chrome.tabs.create 创建新的 tab 后，会自动切换到那个新建的 tab，在不打开 DEBUG 工具的情况下，原先弹出的页面会关闭，也就是被 … 继续阅读
使用SVN hook 让前端BUG少一点
你有没有发生过，发布的代码中含有 console ，然后在 IE 下报错？或者代码中有调试用的alert，用户点击某个东西后，就会弹出来？ 这种错误 ，我相信前端开发者或多或少都会犯，要避免这类的BUG ，需要非常非常小心，但是人总会有疏忽的时候，这样的事情交给机器办比较合适，因为机器会按照指定的规则来检查你提交的代码，每次都完全按照规则来。 版本管理软件一般都有预置的hook，我们可以写一些脚本在我们对代码仓库做操作的时候来执行，这里，我将给出一个 TortoiseSVN 可以使用的 client side hook 脚本来做这种检测。 这个是目前我在实际生产环境使用过一段时间的，因为我们这里使用的 SVN 做版本控制，SVN 标准只需要 server 端实现 hook script，客户端不需要，由于大公司server端不那么容易去更改，恰巧 TortoiseSVN 实现了 clientside hook ，那就用这个来实现吧。 按照官方文档给的 pre commit hook script 修改而来，使用前，先要检查你的windows 是否用 WScript 关联了 .js 文件，绝大部分前端开发人员都关联了某个编辑器吧。 检测方法：随便新建一个 … 继续阅读
Magic canvas & PNG
用 canvas 配合 PNG 可以做出什么好玩的东西呢？ 昨天阿里中文站的方凳会，我为大家分享了这个主题。这是我第一次在方凳会上做大分享，也算迈出了这一步，以后会努力多在这个舞台上表现。 主要讲了运用 canvas 来做动态 favicon 和用 PNG 来打包字符串（js) 然后前端通过 js 对这个图片解码。 PPT 在 http://share.allenm.me/fd/ ,有兴趣的同学可以来看，我就不在这里重复一遍内容了。
使用google closure 压缩合并 js 文件的 python 脚本
google很早就推出了 google closure ，但是是JAVA的，你需要安装 JAVA的运行环境、配置等等。另外虽然google 也推出了WEB版的closure，但是用起来也是比较麻烦的，操作步骤比较多。如果你想使用 google closure，又懒得配置，又喜欢命令行的方便，现在有了另外的选择，google closure 提供了 API，这样我们就可以用其他的方式来压缩合并文件了。 我根据google 的python 事例，做了一些小修改，来方便压缩合并文件。这基本上算是我第一次写python，并放出来让人使用，python我只懂皮毛，大家看了代码不要笑话我。 项目地址：http://github.com/allenm/js-css-compressor 使用方式详见README 目前默认压缩级别是：SIMPLE_OPTIMIZATIONS 将来会有选项让用户选择压缩级别。 另外项目名称虽然是 js-css-compressor。但是目前没有 css 压缩的功能，因为 closure 不提供CSS的压缩，这个将来我会使用其他方式实现。 我把这个脚本放在VPS上来压缩合并我博客上的JS文件，准备一步步的优化这个博客的性能，拿这个作为试验田。 欢迎给我提意见和建议，联系方式在博客的About me 页面。
HTML DEMO中例图自动生成器
我们在制作HTML DEMO 的过程中，往往需要制作页面中需要的尺寸的例图，很多时候我们是通过 photoshop 来做，但是这样多烦啊，这种很机械的工作还是交给机器来做吧。 我写了一个简单的例图生成器，访问 http://img-api.allenm.me 有简单说明。在应该放例图的位置，只需要在 img 的 src 属性中写类似 ”http://img-api.allenm.me/200-300.png” 这样就可以了。其中200代表宽度，300代表高度，上面的代码显示如下： 实现方法很简单，用 php的 GD 库，配合服务器的 url rewrite 功能。把所有的以 .png 结尾的文件到 rewrite 到 index.php中，然后用正则来获取高度和宽度。现在代码还有一些地方需要修改，暂时不放出来，有兴趣的可以和我交流一下。现在兼容 Apache和 nginx，其他的 http 服务器我没玩过，不会配置，不过原理应该都一样。 如果有前端从业人员需要，建议自己搭建内部的这个服务，因为我的这个服务稳定性保证不了。
touchstart, touchend, touchmove 与移动互联网开发
你为移动互联网准备好了吗？ 大家都可以感受到iPhone,Android,iPad带来了移动互联网革命，前端程序员们，大家准备好了吗？移动互联网早已不是那个WAP的时代，WAP基本被淘汰了，新一代的智能移动终端，都具有了标准的HTML,CSS,JS的解析能力，但是又和桌面不同，比如这样的终端是没有光标的，也就是我们平时经常用到的 mouseover这些光标相关的东西，在这些终端上是没有作用的。同时，这些终端又具有一些他们自己的特色，比如 touch 事件，因为操作全是 touch ，所以这个事件如果好好利用，在移动互联网开发中会发挥大用处的。 正好现在手里有个 Android 设备，做毕设用的，现在也想为毕设搞点新鲜内容，所以就做了对 Android 浏览器的 touch 事件的测试。说了这么多，是因为这个东西很简单，不说点废话撑下门面，那这个博文就太短了。 touth相关的事件有 touchstart,touchend,touchmove。这三个事件最重要的属性是 pageX和 pageY,表示X,Y坐标。 其中 touchstart 在开始触摸的时间激发， touchend 在触摸结束的时间激发， touchmove 这个事件比较奇怪，按道理在触摸到过程中不断激发这个事件才对，但是在我的 Android 1.5 中，在 touchstart 激发后激发一次，然后剩余的都和 touchend 差不多同时激发。 这三个事件都都有一个 timeStamp 的属性，查看 timeStamp 属性，可以看到顺序是 touchstart -> touchmove … 继续阅读
WEB前端优化
刚刚读完了《高性能网站建设指南》，作者给出了网站前端优化的14条建议，第一次系统的了解到了前端性能优化需要做的事情。 简单说来，这14条建议是下面这些： 减少HTTP请求(因为HTTP1.1协议规定同一域名下默认有两个HTTP同时下载，这条是最基本的，最应该去做的） 使用内容发布网络（主要是针对静态内容，具体请搜索CDN） 添加Expires头。（告诉浏览器来缓存那些不容易变化的内容，来加快“回头客”的访问速度） 压缩组件。（使用gzip来压缩组件降低数据传输量） 将样式表放在顶部（避免白屏和闪屏等情况发生） 将脚本放在底部（脚本会阻塞并行下载，所以某些脚本可以放到底部，让页面先显示出来） 避免CSS表达式（CSS表达式计算频繁，用其他方式来实现需要CSS表达式的效果） 使用外部JavaScript和CSS（利用缓存来减少这些组件的下载） 减少DNS查找（DNS查询是要耗时间的，减少DNS查找和增加并行下载是相悖的，这点需要权衡一下） 精简JavaScript（使用工具删掉不必要的空格，注释等） 避免重定向（redirect需要耗时间，尽量避免这种方式） 移除重复脚本（大网站，开发人员多，可能会带来重复脚本的问题，可以借助服务端程序来消除） 配置ETag（ETag经常会破坏缓存规则，他比Expires头权限高。合理配置或者禁用之） 使Ajax可缓存（分析Ajax请求，缓存可以缓存的，同时合理使用一些主动Ajax，以及参照前面指导原则优化Ajax请求） 作为前端开发人员，应该具有前端优化的技能，这些优化花不了多少成本，却相当有效，比改进后台代码的某个算法带来的性能增强性价比要高多了。 网站打开速度快才是王道，速度是用户接触到这个网站的第一体验！！！ 上面这些指导原则在实际生产的时候都是需要好好分析的，看自己的网站适合怎么样。