Designsor

很简单，做个记录，通过昨天史努比给的线索。找到了jquery的事件模拟触发代码。

http://code.google.com/p/jqueryjs/source/browse/trunk/plugins/simulate/jquery.simulate.js?r=6063

关键字2个：

dispatchEvent,fireEvent.

上述地址中的代码可见第104行-111行的dispatchEvent function。

思考一下如果我想获得下面这个容器的attributes属性长度如何办到？

<div style=”display:none” data=”test1″ data2=”test2″ id=”test”>test</div>

恩，我们可以用get方法直接取，但是如果我不知道data,data2甚至不知道他又style，我们怎么办呢？

一般思路都是会去遍历这个节点了。

document.getElementById(”test”).attributes["data"];

恩。这样也可以取到你想要的。可是如果真的放入循环里，IE下的话你可真的就虾米了。我们来查看下Attributes.length这个属性在IF下和FF下到底有什么区别。

FF：Attributes。length:4; OK是我们想要的4个节点属性style,data,data2,id

IE：Attributes.length:110;NB啊。。。居然多达100多个。

好吧，通过遍历我得知那多出来的100多个属性都是什么onclick啊，onmouseover等等等等的默认属性，IE把他们也都算进去了。我靠，那怎么办。我们该如何获取兼容浏览器的，一个未知节点属性的元素，都存在什么自定义节点属性呢？

后来在javascriptkit里找到了答案：

http://www.javascriptkit.com/dhtmltutors/domattribute2.shtml

看下面代码：
var totalattributes=0

for (i=0;i<document.getElementById(”test”).attributes.length;i++){

//if attribute is user defined

if (document.getElementById(”test”).attributes[i].specified)

totalattributes++

}
一目了然了。

看过之前写的那篇BLOG，应该都发现了一句挺有意思的话。对于DOM中的element我可以添加自定义事件。比如：

Element.prototype.show=function(){this.style.display=’block’;}

喔~然后调用之

var test=document.getElementById(’test’);

test.show();

恩，虽然在最后的最后我知道了这么写是严重的污染原型链的一种及其牛逼的反面例子。但是确实我今天要说的不是这个问题。

经过测试所有的浏览器除了IE6/7（没有测试什么360，遨游，TT什么的杯具浏览器……）其他的浏览器都对外开放Element对象，允许你对齐prototype的原型链上添加或者重写方法。

但是当你遇到了IE，那么你就也遇到了 “Element is undefine”….这个错误了。

查了好久，具体的解决办法有2个，一个是在微软官方查到的用HTC的方法对Element进行扩展自定义方法，还有一种老外的方法，那么就是重写DOM方法。

显然，第2种方法在一些社区被受到推崇，号称可以解决99%的问题。而不用恶心人的HTC，而且不需要2个文件加载那么复杂。

那么到底是如何解决的呢？

首先：Element is undefine，那么我们建立一个Element就好了。

var Element=function(){};

恩 一个构造函数容器就建立了，他自身已经拥有了prototype属性了。因为是function嘛。

然后你每次给Element扩展方法的时候其实在IE6/7下都是给这个你自己定义的Element扩展的方法。那么我们如何调用这些扩展方法呢。

回想一下我们什么场合会用到事件。喔，getElementById,getElementsByTagName,createElement也就是这三种情况了。还有什么呢？原生的JS里只有这3种方法了吧？不对 只是99%，你可以.all也可以from[0]等等其他的方法获得元素，但是最基本其实就是这3个方法了。

那么我们要重写这3个DOM方法，在每次调用的时候都继承我们自己创建的Element对象下面的自定义方法。

如何去做呢？下面是完整的代码：

(function(w, undefined){
var Element=w.Element || function(){
return {
author:’longxiao’
};
};

if (!!Element().author) {
var __createElement = document.createElement;
document.createElement = function(tagName){
var element = __createElement(tagName);
for (var key in Element.prototype)
element[key] = Element.prototype[key];
return element;
}

var __getElementById = document.getElementById;
document.getElementById = function(id){
var element = __getElementById(id);
for (var key in Element.prototype)
element[key] = Element.prototype[key];
return element;
}

var __getElementsByTagName = document.getElementsByTagName;
document.getElementsByTagName = function(tagName){
var elements = __getElementsByTagName(tagName);
for (var key in Element.prototype){
for(var i=0;i<elements.length;i++){
elements[i][key]=Element.prototype[key];
}
}
return elements;
}
};

Element.prototype.getattrlength=function(){
alert(this.attributes.length)
};

document.getElementById(’page’).getattrlength();

})(window);

更多关于原型链的问题在我自己研究明白了之后再来分享……

今天参加了入职培训，正式加入了淘宝这个大团队，在淘宝的开放办公区拿到了电脑，得知了花名，认识了师兄和师傅还有新的杭州的同事，还在培训签合同时认识了2个川大的做java开发和算法的同学，一切都在往着好的方向发展啊，明天开始要学习一些流程方面和团队方面的细节事情了，不知道会不会很难，不知道了，加油就好了。

好些日子不写代码了，手痒，唔，come on……我来了，我在杭州一切都好。

：）

9个月的京旅在今天就和小爝说结束了，而下一个要去的城市-杭州，对于我来说，它既熟悉又陌生。

我知道我不能如标题一样潇洒的离开，虽然北京这段时日只是我人生中短暂的停留，但这记忆恐怕却非常难忘。

很多事情转瞬又漫长，一切都像是昨天刚刚发生。

谢谢博文同学半年多的照顾，也祝福他以后在译言的工作越来越好，哥们，你行的……：）。

谢谢兔子同学在单位一直对我的默默无闻的照顾…才能让我安心的进入这行，得到成长与进步。兔哥一直担负着我以前公司的交互和设计重任，以后一定要照顾好自己和强哥哈…：）。

也谢谢那个一直陪我度过4个多月幸福时光的小狮子，虽然最后……总之，以后的路……加油，平安。：）

还有在北京这段时间认识的白羊伟男同学，天蝎胡罗同学，豆瓣js小组的金牛迈克同学和史努比同学，蛋哥等等……谢谢你们对我的帮助和鼓励。

感谢在北京的这段时间里我曾拥有你们。拜拜了，北京，但我们依然在路上。

很久很久，没有发和前端无关的东西了，好吧，其实这玩意也是photoshop画的。那么也算沾边？累死我了，10张描边~唔。。。。不是我画的，但是感觉还好，多可爱啊，想起小时候。丑丑的，但是很真实。

看成果吧~帮朋友做的，印T恤去啦。

哈哈哈哈，看来我还是鼠绘不老啊~

为什么要优化for循环呢。先看下下面的图吧：

导致这图的代码很简单，就是一个很大的for循环：

for(var i=0;i<99999999999;i++){
$(’body’).prepend(i);
}

额，关于for循环，其实一直想写这么个东西。之前看到的相关文章是163 ued的BLOG其中一篇，详细地址是：

http://www.ued163.com/?p=672

他用的方法很值得推荐，今天自己也写了份，在Michael的指导下，写个小函数，感觉又学到了点东西。

function each(i,j,fun){
fun(i);
i++;
if(i<j) setTimeout(function(){each(i,j,fun)},10);
}
each(0,999999999999,function(i){
$(’body’).prepend(i);
});

同样的，用递归加时间控制就可以避免浏览器的锁死。新手值得学习……又补了个基础。V~

最近开始恶补基础知识，弥补自己的基础薄弱的问题。

haslayout是什么？

“Layout” 是 IE 的一个私有属性，并不是W3C标准。它决定了一个对象（就是一个标签div、li等）在内容中如何显示、与周围对象的位置关系、以及怎样响应程序或用户产生的事件。

这个属性可以被一些css强制激活。一些HTML标签默认具有haslayout。

下面这些标签默认拥有haslayout属性：

• <html><body>
• <table><tr><th><td>
• <img>
• <hr>
• <input><button><select><textarea><fieldset><legend>
• <iframe><embed><object><applet>
• <marquee>

怎样激活layout？

position: absolute

设置绝对定位可能会引发新的问题。

float: left|right

IE下的浮动也会产生一些莫名其妙的问题。

display: inline-block

当一个内联元素需要haslayout属性时就需要用它，但是IE本身不支持inline-block的，只是表现得像标准里说的inline-block。

width: 除’auto’外的任意值

优先考虑使用该属性。

height: 除’auto’外的任意值

对 IE6 及更早版本来说很常用，该方法被称为霍莉破解(Holly hack)，即设定这个元素的高度为 1% (height:1%;)。但是要注意，当这个元素的 overflow 属性被设置为 visible 时，这个方法就失效了。

zoom: 除’normal’外的任意值

又一个ie私有属性，不兼容标准。zoom:1可以在测试或者不追求标准的情况下使用，效果不错。

writing-mode: tb-rl

ie私有属性，不推荐用。

IE7 还有一些额外的属性：

min-height: (任意值)

max-height: (除 none 外任意值)

min-width: (任意值)

max-width: (除 none 外任意值)

overflow: (除 visible 外任意值)

overflow-x: (除 visible 外任意值)

overflow-y: (除 visible 外任意值)

position: fixed

重置haslayout.

在没有其它属性激活layout的情况下，使用下面的css可以重置haslayout属性：

• width, height (设为 “auto”)
• max-width, max-height (设为 “none”)(在 IE 7 中)
• position (设为 “static”)
• float (设为 “none”)
• overflow (设为 “visible”) (在 IE 7 中)
• zoom (设为 “normal”)
• writing-mode (从 “tb-rl” 设为 “lr-t”)

display 属性的不同：当用”inline-block”激活了haslayout 属性时，就算在一条独立的规则中覆盖这个属性为”block”或”inline”，haslayout 这个标志位也不会被重置为 false。

把 mid-width, mid-height 设为它们的默认值”0″仍然会赋予 hasLayout，但是 IE 7 却可以接受一个不合法的属性”auto”来重置 hasLayout。

当一个对象的layout被激活时，它以及它的子对象的定位和尺寸计算将独立进行，不受附近对象的干扰。也就是说它拥有一个独立的布局（layout）。 因此浏览器要花费更多的代价来处理拥有haslayout的对象。为了提高性能，微软增加了layout这个IE私有的概念。

啊，群里为了帮助我提高js水平，出了道比较考察基础的题目，他们说蝴蝶书里有答案，我确实忘记了，也不知道写的对不对，但是测试了下，代码还算完善。

题是这样的：

/*
Whyme 14:49:13
JS中假如Function.prototype.call不存在
但Function.prototype.apply存在
试用后者实现前者.(其余js 1.5特性也具备)
*/

我写了2个版本，第一个有点错，就不发了。。第2个发出来看下：

Function.prototype.call=function(){
var type=typeof arguments[0] == ‘function’ || typeof arguments[0] == ‘object’;
switch (arguments.length){
case 0:
return this.apply();
break;
case 1:
if(type){
return this.apply(arguments[0]);
}else{
throw new Error(arguments[0]+’ is not provide’);
}
break;
default:
if(type){
var ary = [];
for (var i = 0; i < arguments.length; i++) {
ary.push(arguments[i + 1]);
}
return this.apply(arguments[0], ary);
}else{
throw new Error(arguments[0]+’ is not provide’);
}
};
};

简单的测试了下……再简化我就不知道怎么写了。。。

经过又20分钟的思考。得到下面精简版本- -||

Function.prototype.call = function(){
var type=typeof arguments[0] == ‘function’ || typeof arguments[0] == ‘object’ || arguments[0]!=’undefined’;
if (type){
var ary = [];
for (var i = 0; i < arguments.length; i++) {
ary.push(arguments[i + 1]);
}
return this.apply(arguments[0], ary);
}else{
throw new Error(arguments[0]+’ is undefined’);
}
};

期待更精简的。特此记录。。。

史努比的：（没经测试……）

Function.prototype.call = (function() {
var slice = Array.prototype.slice;
return function () {
var args = slice.apply(arguments)
, context = args.shift();
return this.apply(context, args);
}
})();

确实比我的短……哎- -忘记用array对象里的那几个方法了……//但是我认为他没对thisObj做检查，应该可能是个隐患- -？

最后的结果是没有类型检查半毛钱关系，异常全部交给apply处理，截取参数数组使用array对象的方法，完事。我想太多了。。。不好意思- -||

前端开发这个职业是最近几年才兴起的，很早之前我们统一叫美工，有高级的，有低级的，现在都改叫前端开发，或者页面仔，再有了JavaScript的辅助之后，页面仔的技术含量又大幅度提高，随着胖客户端应用的bs系统越来越多，客户端编程哪怕只是CSS HTML JS都越来越急迫的需要一个开发环境，预期善其事，必先利其器。

开发环境说白了，我个人认为包含以下几个方面：良好的项目管理方法，代码管理方法，发布与测试的方法，调试与debug的工具，代码的测试和发布工具，一些便利的第三方开发工具，如果有需要还要安装项目的服务器环境。

下面就一一介绍一下我个人理解的上面几点，并且分享一下我的这些环境是如何搭建的，需要些什么东西。（由于目前没有一个统一的标准，所以很可能每个开发者都会有一套属于自己的开发环境和工具，根据个人情况吧。）

1.1，项目的管理，所谓项目管理，哪怕你就是只做HTML页面，也需要创建一个项目，根据我平时的经验基本会到一家公司就创建一个fq或者xiaojue的项目，然后根据公司的不同项目再向下级分清楚自己的文件夹结构，最开始入门的时候用的是Dreamweaver里的站点创建，因为F11可以调取和查看文件夹树，现在是用aptana来创建一个project来管理文件夹树。方便自己使用也方便日后查找，条理清晰。

1.2，如果你的开发环境需要具备服务器能力，最好把上面2者和你的服务器环境进行统一协调，就我个人例子来说，公司开发使用java，我个人在本地又假设了个apache的php服务器环境，然后我捆绑的服务器开发环境就是php的，因为我熟嘛，至于java的servers环境就让同事java程序员帮助建立一个，以便日后的时候集成了HTML JS CSS的项目依然需要本地调试时使用。双管齐下……自己的PHP环境是为了方便自己做些JavaScript方面的东西，自己模拟些数据，并拥有一个本地的服务器端口而已。

2，代码管理，这个是从构建可扩展站点那本书上看到的，就是那本热带鱼书。之前我们对代码编写都是ctrl+z,ctrl+y来进行管理的……但是页面保存之后关闭了，再想恢复以前的某个历史版本，Dreamweaver是办不到了，需要使用别的，1，自己弄个vss或者弄个google的svn来进行代码版本的管理，但是需要你得能连上网或者自己有能创建vss的能力。我的解决办法是用eclipse或者aptana里项目自带的history来实现的，至少可以保障一个月内的代码版本自己可以查询追溯，对代码的控制能力大大加强，这也是文本编辑器和ide工具的巨大差别吧。

3，发布与测试的解决,新版本的Dreamweaver cs5里有了选择预览浏览器型号的功能，自己安装各个不同系列的浏览器当然是必须的了，ie tester，opera，firefox，chrome，safari当然都是必备的了。至于代码的压缩发布，cssmin和jsmin的在线工具有很多，在最下面会一一列出。

4，至于调试工具，目前我的环境还是基于ie和firefox下的调试，可能某些同事还需要调试其他浏览器，但是目前我的项目中没太需要到。至于ie和firefox的调试，推荐companion.js当做ie下的debug工具，firebug肯定是ff下的调试工具了，再安装一个web developer在FF下就很强大了。然后再在ie和ff的快捷方式里加入jash的mark按钮。调试和测试的工具环境差不多搞定了。

5，代码的测试，jsunit和qunit自己下载一套安装在自己的项目环境下即可，但是这个仅仅是针对js的，css方面和html方面的用ff的web developer插件可以直接测试是否符合w3c标准，不需要全部符合标准，以网页不变形为保障，以没有错误代码为基准，切忌不要当学究。最后还有就是yslow和page speed对于性能方面的测试工具也必须安装，控制台下对http请求的监控辅助ajax的编码。

6，便利的第三方开发工具，Photoshop，Fireworks，Illustrator，Flash肯定就都得有了。算图形辅助，然后就是word，excel，Adobe Reader，notepad算文档和办公辅助，一套包括完整的js html css 各个方面的CHM手册，算代码储备辅助，ff下的插件工具还有FSCapture这个工具算是屏幕视图的辅助了，包含了吸色截屏尺子放大镜等功能。最后推荐的是google桌面和有道词典，前者是快速搜索相关知识，后者是对于我这样英语不好的人，快速解决了给变量起名字这种恶心事的尴尬……

差不多说到这里应该都明白了，其实前端开发的环境大部分都是基于一些小功能，小浏览器插件和一些很奇怪的小工具外加一些必备的ide工具攒起来的那么个东西。但是麻雀虽小五脏俱全吧，方便开发工作和提高开发效率才是王道。今天整理一下，留作日后查询。相关工具的下载地址本想一起发的，但是想想，还是看客们自己搜索，把握的才会更牢固吧。我也就不浪费多余的时间了，而且大部分都是些常用工具而已。

如果有什么遗漏疑问，欢迎喷我……或者留言给我。