博客园_George Wing 的学习笔记

[公告]这儿就停止了

2011-05-27T10:41:00Z

以后所有在网上发表的技术文章全在http://w3er.com/ (是多人发表的blog)上发表。我也懒得维护多个blog。因为同时还要在公司UED内部写blog。请各位重新订阅下~谢谢支持~

本文链接

折腾 JavaScript PC 模拟器

2011-05-18T10:23:00Z

http://bellard.org/jslinux/

这是满足JS程序员口味的linux模拟器。系统启动后，黑屏白字的命令行操作，让程序员的我们感觉就是舒服！

习惯的，输入 ls 看看里面有什么东东：

hello.c

输入vi hello.c 用 VIM 看看 hello.c 的源码。惊！还真的进入了VIM编辑器！

输入 i 进行 VIM 的插入模式，来随便修改下源代码。把字符串 "hello world" 改为 "hello George Wing"。然后按 Esc 键退出插入模式，输入:wq 保存所做的修改。再输入 :quit! 退出VIM。

输入 tcc -o hello hello.c 对 hello.c 编译一遍。输入 tcc -run hello.c运行看看：

显示了： hello George Wing

哈哈，这个模拟器实现得太强大了。对 linux 的有些命令操作就可以在这个 Web 应用程序上做做练习了。开发作者真是神一样的存在啊！

(完)

本文链接

用 rake 合并多个 JS 文件，并且用 Google Closure Compiler 压缩代码

2011-05-16T07:49:00Z

使用一款自动化的构建工具，已经成为专业的JS程序员的必备技能之一。在国内，每个前端团队都学会了用 Ant 来自动生成一系列构建的任务。但是由于 Ant 对 XML的依赖，这一大关键缺点，使得 Ant 脚本既难写又难读，也难进行重构，甚至难进行 diff。所以，rake(用Ruby编程的构建工具)越来越流行了。

下面的代码是合并多个 JS 文件的 rake 任务：

namespace :js do
desc "合并多个 JS 文件"
task :concatenate do
filename3 = "E:\\all.js"
logfile = File.new(filename3, 'w');
joinFiles = ["E:\\a.js", "E:\\b.js"];
for files in joinFiles
if File.exists?(files)
file = File.new(files, 'r')
file.each_line do |line1|
logfile.puts(line1)
end
end
end
end
end

如何执行 rake呢？

假如 Ruby 源代码文件为 build.rb，那么在 windows 命令行中输入命令：

rake –f build.rb js:concatenate

然后回车。

可能就会有人问了：可以结合 Google Closure Compiler 使用来进行代码压缩吗？答案是肯定的！

下面是带传参的调用 GCC 的 rake 任务：

desc "用 Google Closure Compiler 进行编译"
task :gcc, :compiled_path, :needs => :concatenate do |t, args|
require 'rubygems'
require 'win32/open3'

cmd = "java -jar D:\\compiler\\compiler.jar --js " + concatenateFilename + " --js_output_file " + args.compiled_path
Open3.popen3(cmd)
end

在 windows 命令行中输入命令：

rake –f build.rb "js:gcc[E:\all-min.js]"

然后回车。

对JS程序员来说，使用rake的唯一缺点是学习Ruby的成本了。所以，用nodeJS来实现相同的功能也是在国内前端界同行们越来越流行的趋势。

(完)

本文链接

HTML 5 就是 Web Application

2011-04-16T18:12:00Z

周末赶早与同事们一起参加了“拥抱HTML5”技术大会，为的是抢个好位置，8点半准时到了会场，抢了个第2排的位置(第1排是嘉宾的座位)。

如果说上次的“HTML 5来敲门”技术沙龙被“洗脑”被“灌输”的理念是：今年是HTML 5的发展年，明年就是HTML 5的爆发年。那么这次的是：HTML 5 就是 Web Application。

也就是说，HTML 5 不是简单的从HTML 4 升级到 5 而已。因为 HTML 5 就是 Web Application。随着 Web 的发展，HTML 5 使我们前端的业务需求变得有趣起来。以前，我们只是做些不太复杂的事情，还没有涉及游戏开发、音视频的处理技术、存储技术、云计算等等。

现在，HTML 5 作为 Web Application 的品牌的建立，让人们觉得用这个技术很拽很有格。在 HTML 5 技术的背后，应看到对桌面系统的 Web 开发人员而言还有很多的不足(兼容性、技术支持冲突等等)，不过对移动系统的 web 开发人员而言，今年你该布局了！

在晚餐时，有位 CTO 表示他们的用户使用 ipad 的数量仅次于桌面系统，但他们的产品对 ipad 的支持还很不够。(晚餐聚会都是些高层、大牛，本人表示压力很大)

在回去的地铁上，一直在看译者阮一峰亲笔签名的《黑客与画家：硅谷创业之父Paul Graham文集》。

(完)

本文链接

JS程序员的一天

2011-04-08T12:29:00Z

5:53，正睡得迷糊，突然门铃响了，室友 webIM 项目 team 的同事通宵加班回来了，我回房间继续睡觉。

8:17 自己煮了市值超过8元的炒码面条，成本估计不到2元。

骑自行车上班，9:15 之前到了公司，然后打开自带的笔记本电脑，开始一天的工作。先喝瓶“日加满”。

打开 Jasmine 网站上的文档，继续学习研究 BDD和 Jasmine。为以后前端 team 用 Jasmine 做测试驱动开发包括JS单元测试做准备。

上午有场公司内部培训，关于 PhotoShop 内容的。是由重构 team 做的分享。讲解了如何用切片工具来导出多个格式的图片，如何用钢笔工具点亮灯泡，演示用渐变工具调灯泡的光亮。

午餐是自己带的在家做的饭菜，和同事 asins 一起去公司餐厅吃的，讨论了从生宝宝到吃饭成本的问题。

下午研发了几种类的实例在类式继承中的实现，做到4点多完成后，去买了瓶可乐，上来后在RTX上与重构工程师交流沟通后，试着用 PhotoShop 做切片导出图片的批处理的问题。

5点多与同事讨论交流如何在 WOYO JS 框架上构建地图类，为以后建立 Google 与百度的地图类的API 设计接口做编程思想上的准备。

6点钟，写工作周报，准时下班和同事们一起骑着车回家。

晚上，在家吃完自己煮的水饺后，给老婆打电话，然后一边看湖南卫视的天天向上，一边做了做室内运动，上床准备睡觉。

(完)

本文链接

Google Map 类实例在类式继承中的实现

2011-04-07T09:42:00Z

众所周知，程序的实现不可能会是完美的。下面是google Map类在继承实现的写法。首先是照抄《JavaScript设计模式》中的类式继承：

上面的google地图在页面中显示不了，说明代码是有问题的。下面是对上面实现的改写：

嗯，这种继承实现的写法google地图在页面中显示得很好。

(完)

本文链接

写入 cookie 的过期时间时在GMT或UTC时间格式上的兼容问题

2011-03-17T08:33:00Z

用 JavaScript中的 Date 类，可以得到格式为“年/月/日时:分:秒”的当前本地时间。这种格式是合法的，可以用静态方法 Date.parse() 解析的,否则返回NaN的话，说明格式为非法，不能解析。

从北京时间转换成GMT/UTC时间有8个小时的时间差。计算方法为：

UTC时间 + 时间差(+8) = 本地时间

兼容问题为：

在 web 浏览器中写入cookie的过期时间的实现是不同的。Google chrome 浏览器会把转换成GMT/UTC后的时间写入cookie的过期时间，而IE和FF浏览器还是把本地时间写入cookie的过期时间，toGMTString()/toUTCString()没有起作用了。

写入cookie的函数JS代码如下：
function setCookie(key, val, expires, domain, path, secure){
if (!path) path = '/';

document.cookie =
key + '=' + encodeURIComponent(val)
+ (expires ? '; expires=' + expires : '')
+ (domain ? '; domain=' + domain : '')
+ (path ? '; path=' + path : '')
+ (secure ? '; secure' : '');
}

写入cookie的代码如下：

var dat = new Date();
var dateTime = dat.getFullYear()+'/'+(dat.getMonth()+1)+'/'+(dat.getDate()+1)+ ' 8:00:00';
setCookie('bookInfoCounts', counts, new Date(Date.parse(dateTime)).toUTCString());

(完)

本文链接

“当 HTML 5 来敲门”专题沙龙(上海)活动

2011-02-26T14:45:00Z

今天2月26日受邀一同参加了在盛大创新院举办的“当 HTML 5 来敲门”专题沙龙(上海)活动。

首先由周裕波介绍“W3C、W3C中国和HTML 5”。

接着是携程网的祝君：《HTML 5 开发成本》。呃，我们公司woyo的UED重构也进行了用 HTML 5 重构的工作，但是本人主要是研发JS框架，没有关注网站页面的重构。

Spilgames Asia CEO 陈琦：《HTML 5 游戏的发展》。呃，讲得很给力，至少让大伙有了使用HTML5开发游戏的冲动！

HP WebOS 的巍子钧：《HTML 5 在2D游戏的应用》。呃，活跃气氛，让人不犯困，并且讲得很有料，感觉本人入了点门。

盛大研究院的Hax：《HTML 5 本地存储的应用》。呃，牛人就是牛人啊，有了 localStorage 在手，一上午就想出了个新的 idea：在 google chorme 浏览器中在多个tab页中切换随心选播的音乐而互不干扰。

上海网客信息有限公司 CTO 章鑫杰：《HTML 5 在LBS社区中的应用》。呃，不好意思，本人对这款 web 应用在中国大陆的市场不太看好，所以没有认真听了。

最后，现场照一枚(单击进原始大图)：

在会上有句话讲得不错：“今年是 HTML 5 的发展年，明年将会是 HTML 5 的爆发年！”让我们前端工程师们一起拥抱 HTML 5 吧。

资源：活动的视频

(完)

本文链接

PHP 的 Smarty 模板页中分离JS并避开literal标签的解决方法

2011-02-25T09:23:00Z

在 Smartry 模板中，如何分离而做到避开{literal}呢？

本人的解决方法是：

在<script>标签中先定义一部分用包含了{}符号的JS变量。示例如下：

然后，再引用后面的JS文件：

这样，后端与前端可以同时开发，tpl 模板文件只作为了前后端之间公共的部分。

(完)

本文链接

Google Maps(Google 地图) V3 在 IE7 浏览器中拖放其容器时图块被覆盖的 bug

2011-01-20T14:24:00Z

在个人空间项目的开发中，布局在页面中的模块是可以自由拖放它的位置的，在名叫“人脉地图”的模块中，包含了 Google 地图对象的实例。我们使用了 Google Maps V3 提供的 API 服务。

在对其容器进行鼠标拖放操作时，在IE7中，遇到了一个 bug：地图部分的图块会被父级的body的背景及背景图片覆盖掉。这是由于在拖放事件处理函数中，JS会操作页面渲染，被拖放的容器使用了CSS滤镜对IE进行半透明的效果。这样造成了地图部分的图块被覆盖的 bug。于是，解决方法是：对IE7不使用半透明效果，也就是说，IE7不使用该CSS滤镜，对 web 浏览器做到“优雅降级”。

(完)

本文链接