2011年3月 文章归类

自己的js框架YQ还没有添加DOMReady代码，今天看到国外js牛人Dustin Diaz的文章，得到了一份最短的DOMReady代码，分享出来：

function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}

Dustin Diaz放弃了使用IE的document.documentElement.doScroll('left')（这也是多数框架的方法，详细介绍）。使用了setTimeout来定时检测document.readyState，document.readyState有以下五种状态：
继续阅读全文……

前些日子在博客园上看到的一篇文章（现在搜索不到了，尽转载的），介绍了下WinHttp.WinHttpRequest.5.1。自己也查了一些资料，写了个vbscript脚本，来添加新浪微博好友。WinHttp.WinHttpRequest的介绍可以去微软官方查看，也有个介绍的网站：http://www.neilstuff.com/winhttp/。感兴趣的可以移步去围观一下。

简单看一下我改的博客园文章的代码，用于新浪微博自动添加好友，因为是前些日子写的。申请离职之后，害怕自己的以前的一些代码丢失，特发到网上来备案一下。简单解释在代码中，加上之前的php的curl函数，WinHttp.WinHttpRequest.5.1应该对以后一些研究会有帮助。而且WinHttp.WinHttpRequest也可以设置refer，cookie，user-agent，proxy……，关键是他可以在cmd里面跑，感觉比较酷（当然php也可以做到，但是不熟悉php的可以用js写出来代替curl）。不废话了，直接上代码。

function RemoteCall(method, url, param, header){  
    var obj = new ActiveXObject("WinHttp.WinHttpRequest.5.1");  
    obj.Open(method||"GET", url, false);  
    obj.Option(4) = 13056;  
    obj.Option(6) = false;  
    obj.setRequestHeader("Cookie", "string");//先设置一个cookie，防止出错，见官方文档
    obj.setRequestHeader("Cookie","你的新浪微博cookie");
    obj.setRequestHeader("Host","t.sina.com.cn");
    obj.setRequestHeader("Accept","text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8");
    obj.setRequestHeader("User-Agent","Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8 QQDownload/1.7 FirePHP/0.5");
    obj.Send(param);  
    return obj;  
}
function post(url,param){
    var obj = new ActiveXObject("WinHttp.WinHttpRequest.5.1");  
    obj.Open("POST", url, false);  
    obj.Option(4) = 13056;  
    obj.Option(6) = false;  
    obj.setRequestHeader("Cookie", "string");
    obj.setRequestHeader("Cookie","你的新浪微博cookie");
    obj.setRequestHeader("Host","t.sina.com.cn");
    obj.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
    obj.setRequestHeader("Accept","text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8");
    obj.setRequestHeader("User-Agent","Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8 QQDownload/1.7 FirePHP/0.5");
    obj.Send(param);  
    return obj; 
}

继续阅读全文……

对！是我要换工作了，希望路过的朋友帮忙推荐下。

我现在在青岛一家从事分类信息网站做前端开发，主要负责地图公交开发和项目维护，希望在北京找份前端工作。

1. 2 年网站前端设计开发经验，熟悉前端 (x)HTML ， CSS ，了解 W3C 标准及 (x)HTML 语义化
2. 熟练掌握 JavaScript ， jQuery 框架，熟悉 Ajax 技术原理
3. 熟练掌握 PHP+mysql ，熟悉 MVC 开发，可以独立开发 PHP 程序
4. 善于解决页面和 JS 的浏览器兼容问题，能独立解决技术问题
5. 熟悉前端页面性能及优化
6. 了解产品策划，用户体验，交互设计等领域相关知识 ，可以使用 Axure 画简单原型图和流程图
7. 熟练操作 Linux 操作系统，熟悉 LAMP 配置
8. 良好的沟通能力、团队合作精神和人际关系能力
9. 项目开发采用敏捷开发流程，熟悉 scrum 需求管理、程序开发及测试流程

我的网上简历地址：两年web前端开发经验 应聘web前端开发职位 简历打包下载

趁着中午休息，发篇文章。不管怎样，从周末开始折腾重构爱墙昨天上了（地址：http://lovewall.js8.in，老版：http://love.js8.in），昨天由于局域网的DNS没有更新，所以也没访问，今天看了下还算比较正常，就是空间速度有点挫，国外的，你懂的！

新版爱墙程序变化：

1. 程序全部重构，php采用公司同事开发的rareMVC框架
2. 前端重写，采用html5+css3，所以推荐使用chrome或者FF3.6+体验
3. javascript代码全部重写，采用了自己的简单框架YQ（暂命名）
4. 添加表情功能

为啥重构爱墙？：

1. 熟悉php面向对象开发，MVC开发
2. 实践html5+css3
3. 测试自己的框架YQ（源码）
4. 打发周末时间

这个版本的爱墙程序兼容IE6+，chrome，Firefox，主要是练手用的，不再继续维护开发。此程序前端代码全部未压缩处理，欢迎观摩指导

ps：今天看了下浏览记录，发现谷歌搜索“jsonp”我的一篇文章竟然排了第一，甚是欣慰~O(∩_∩)O哈哈~

“变则通，通则达”，在coding的时候也要做到，有时候思路往往太过于局限性，拿今天写自己的js框架（暂定名为YQ吧，以后文章通用）对浏览器判断方法的实例，来说说代码思路的转变。

navigator.userAgent分析

关于javascript对浏览器的判断，很早之前我写过一篇文章《js判断浏览器的函数，可区分chrome，safari》。YQ框架中也是采用的这个方法，可是后来想到了有位网友说判断火狐的版本号会错误，这是因为火狐的version的判断走了正则，而没有考虑到firefox的，其实不止firefox有这个bug。首先来看看火狐的navigator.userAgent:
这个是我的firefox（3.6.15，却显示3.6.8，不知何解，查看关于也是这个问题：版本不统一）

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8 QQDownload/1.7

根据正则的写法，火狐的版本号应该这样写/Firefox[\/]([\w.]+)/
而safari的确是类似的：

……Version/3.1 Safari/525.13

其中Version为实际的版本号，也是我们常称呼的版本号。

琢磨

开始写js判断浏览器的，跟jQuery的$.browser一样，可是版本号会出现问题，只不过是加了个chrome判断而已。开始想解决方法，初步想得是通过一个正则对象把浏览器的名称和版本号统一匹配出来，正则对象设置如下：

var browserRegExp = {
			ie:/(msie)[ ]([\w.]+)/,
			firefox:/(firefox)[ |\/]([\w.]+)/,
			chrome:/(chrome)[ |\/]([\w.]+)/,
			safari:/version[ |\/]([\w.]+)[ ](safari)/,
			opera:/(opera)[ |\/]([\w.]+)/
		}

继续阅读全文……

公司一直使用jQuery框架，一些小的项目还是觉得jQuery框架太过于强大了，于是自己周末有空琢磨着写个自己的框架。谈到js的设计模式，不得不说说js的类继承机制，javascript不同于PHP可以轻松的实现类继承，不过javascript的类继承方法还是有的，常见的有构建函数、原型扩展、综合……，也有一些专门写类的函数，例如jQuery的作者有个类继承函数。关于类继承写法可以简单看看这篇文章。

我自己写的框架也不知道叫什么名字，刚开始写的时候随手写了个W（姓拼音，之前写过jQuery弹出框插件wBox），现在写这篇文章重新整理了一下思想，换了YQ（名字拼音，你懂的~）。

核心代码

框架设计的时候尽量做到了支持链式写法，也就是返回this，可以$(selector).handler1().handler2()……无限写下去，只要不是有返回值的就可以继续。包括了event，dom，css，还有fadeIn，fadeOut动画（因为再重构爱墙[html5+css3]版，所有顺手加上了这个功能）。如果配合sizzle选择器就更牛了！

下面说说框架的核心代码，等完善了之后跟新版html5爱墙一起放出，主要的代码如下：
继续阅读全文……

优秀的Stoyan Stefanov在他的新书中（《Javascript Patterns》）介绍了很多编写高质量代码的技巧，比如避免使用全局变量，使用单一的var关键字，循环式预存长度等等。

这篇文章不仅仅从代码本身来考虑如何优化编码，也从代码的设计阶段来考虑，包括书写API文档，同事的review，使用JSLint。这些习惯都能帮助你编写更加高质量的、更易于理解的、可维护的代码（让你的代码在多年之后仍使你引以为傲）。

编写可维护的代码

软件的BUG修复需要花费大量的精力。尤其当代码已经发布之后，随着时间的增长，维护的成本愈发的高。当你一发现BUG的时候，就立即去修复，这时候你的代码还是热乎的，你也不需要回忆，因为就是刚刚写好的。但是当你做了其他任务，几乎完全忘记了这份代码，这时候就需要：

1. 重新学习和理解问题
2. 理解代码是如何解决问题的

另外一个问题是，在大项目或者大公司里面，经常是解决BUG的人不是产生BUG的人，而且也不是发现BUG的人。所以减少理解代码的时间就是最重要的问题，无论这个代码是你自己以前写的还是团队中的其他成员写的，因为我们都想去搞搞新的有意思的东西，而不是去维护那些个陈旧的代码。

还有一个开发中的普遍问题就是，往往读代码的时间比写代码的时间还要多。有时候你钻研一个问题，可以花整整一个下午的时间来考虑代码的编写。这个代码当时是可以工作的，但是随着开发的进行，其他东西发生了很大的变化，这时候也就需要你自己来重新审查修改编写代码。比如：

1. 还有BUG没有解决
2. 添加了新的功能
3. 程序需要在新的环境中运行（比如一个新上市的浏览器）
4. 代码有问题
5. 代码需要重写因为修改了架构甚至要使用另一个语言

因为这些原因，也许你当时一个下午写好的代码，后面需要花费几周的时间来阅读。所以编写可维护的代码对于软件的成功至关重要。

可维护的代码包括：

1. 可读性
2. 连续性
3. 预见性
4. 看起来是一个人写的
5. 有文档
6. 最少化全局变量

Javascript使用函数来约定作用域。一个在函数内部声明的变量在外部是不可见的。所以，全局变量也就是声明在任何函数之外的或者没有被声明的变量。

Javascript中，在任何函数之外有个可访问的全局对象，每一个你创建的全局变量都是这个对象的一个属性。在浏览器中，为了方便，通常用window来指代这个全局变量。下面的代码就是说明如何创建一个全局变量：

myglobal = "hello"; // antipattern
console.log(myglobal); // "hello"
console.log(window.myglobal); // "hello"
console.log(window["myglobal"]); // "hello"
console.log(this.myglobal); // "hello

全局变量的问题

全局变量的问题在于，他在你的所有代码或者一个页面中都共享。他们在同一个命名空间下面，这通常会造成变量名冲突–两个同名的变量，但是确实不同的用处。

通常在一些页面中需要引入一些其他人的代码，比如：

1. 第三方的JS库
2. 广告伙伴的脚本
3. 第三方的用户行为分析或者统计脚本
4. 不同的组件、按钮等等

加入其中一个第三方组件定义了一个全局变量：result。然后在你的程序中，也定义了一个全局变量result。最后的这个result会覆盖点之前的result，这样第三方的脚本就会停止工作。

所以，为了对其他的脚本友好，在一个页面中使用越少的全局变量越好。在后面会有一些方法来告诉你如何减少全局变量，比如使用命名空间，或者自执行的匿名函数，但是最好的避免全局变量的方法就是使用var关键字来声明变量。
继续阅读全文……