伴随着第四届D2前端技术论坛专题（专题地址：http://www.d2forum.org/d2/4/）的完成，正式开始了本届D2的报名，报名地址：http://www.d2forum.org/d2/4/sign_up.html

报名截止：2009年12月14日 0点0分0秒

特别提醒：D2报名系统基于google 文档，如果发现无法报名，可能被墙（GFW），请尝试翻墙使用报名页面提供的源链接进行报名。

如何获知您是否被邀请？

1. 所有报名者都会收到邮件告之是否被邀请（嗯。此邮件可能躺在你的垃圾邮件夹里，敬请留意）；
2. 如果您获得邀请函，请务必记得携带邀请函打印件，作为您进入会场的唯一凭证，否则将不能进入会场，敬请合作。

--------------------
原文 http://www.d2forum.org/2009/12/05/topic-pages-of-the-fourth-d2-forum/

谈谈实现吧, 首先, 宝淘是一个纯javascript开发的一个站, 没有任何后端技术, 就一纯净的html. 怎么实现TOP查询跟展现呢. 首先是TOP的签名, 我看看为代码就知道怎么实现了. md5这些, 用php.js 就可以搞定了. 再用YQL去查询. 这样就完全没有难点了. 剩下的就是交互的实现了.

说说界面吧, 很多人一看, 就问我界面哪抄的, 说实话, 界面确是抄的, 我没有能力设计这么帅的, 抄的是一个第三方twitter的web客户端http://hootsuite.com/, 只是抄设计, 所有的实现都是自己按自己的思路写的, 我有洁癖, 一直以为改别人的东西还不如自己重新写来的快. 不过有些地方还是参考了, 比如class的命名. 当然日后我会找人设计一套皮肤.

还有更新计划, 目前只是简单的实现按标签检索的方式, 分页等, 那接下去会实现:

1. 本地存储, 用来保存用户浏览过的标签(其实我的interface.js里, 已经存在接口了.);
2. 搜索功能 (搜索的交互都做完的了, 但宝淘存在意义是让那些没有购物目的人找到购物目的. 后来就去掉了)
3. 优化交互(很多交互都很生硬, 不流畅.)
4. 整合Twitter, 边看宝贝, 边发Tweet

最后, 还有贡献者, 本来把项目寄放在GAE, 无奈, 某东东发飙, 访问的很不稳定. 幸亏有 小脚儿 贡献的空间, 这里还是谢谢他的贡献...
如果您有什么意见, 请联系xiaomacji[at]gmail.com, 或者 直接 发twitter给@ibaotao. 如果您愿意贡献独立的设计, 创新的交互形式, 优雅的代码, 也请联系xiaomacji[at]gmail.com.

-------------分割线

目前淘宝UED广招web前端开发工程师, 欢迎发简历. 有简历, 有机会.

update:

2009-10-13 20:30

• 支持IE6(由于女友公司用的是IE6, 被她说了好几次, 支持了IE6)
• 本地存储, 保存浏览过的tab, 默认定位到最后一次浏览的tab
• 分页自动滚动. 数据加载好, 自动滚动

嗯, 这里介绍如何通过基于firefox的javascript去获取淘宝API提供的数据, 其实很简单. 获取数据需要签名和相关API方法, 具体请看API文档.

签名方式为 md5(appsecret + key + value .... key + value)然后转大写字母,其中key,value对是除签名和图片外的所有请求参数按key做的升序排列, value无需编码。

通过服务器端比如php, ruby, python等很容易实现签名方式, 但基于浏览器的javascript貌似望而却步, 但是mozilla提供了javascript的本地扩展, 让你用javascript也能实现更复杂的功能, 比如基于firefox的多线程下载工具. 下面给出简单的签名方式.

//去alisoft申请个app，会给他一个ID和CERT_CODE, 签名的时候需要
API_URL = 'http://sip.alisoft.com/sip/rest/',
APP_NAME = 'baotao', 
APP_ID = '22183',
CERT_CODE = 'cebc9bf0031411de8baffe67f4df8a7b';

• 首先是md5的实现, 其实javascript也实现md5, 网上有现成的算法, 没仔细研究, 拿来直接用, 发现md5中文后, 有问题, 估计是编码问题, 后来找到mozilla开发者中心的一段javascript实现md5的代码, 对其进行简单封装, 用convertFromUnicode对字符进行转码,再md5.
  
  

  
  /**
   * md5
   * @return String
   */
  var md5 = function(str){
  	   var getHexStringFromBinary = function(str){
  	  	    var hexchars = '0123456789abcdef';
  	   	   var hexrep = new Array(str.length * 2);
  	   	   var i;
  	   	   for (i = 0; i < str.length; ++i)
  	  	    {
  			    hexrep[i * 2] = hexchars.charAt((str.charCodeAt(i) >> 4) & 15);
  			    hexrep[i * 2 + 1] = hexchars.charAt(str.charCodeAt(i) & 15);
  	  	    }
  	   	   return hexrep.join('');
  	   }
  	  var hashMd5Hex = function(str){
  	   	   var hash_engine = Components.classes["@mozilla.org/security/hash;1"].createInstance().QueryInterface(Components.interfaces.nsICryptoHash);
  	   	   hash_engine.init(hash_engine.MD5);
  	   	   var charcodes = new Array();
  	   	   for (var i = 0; i < str.length; i++)
  	   	   {
  	   		 charcodes.push(str.charCodeAt(i));
  	   	   }
  	   	   hash_engine.update(charcodes, str.length);
  	   	   return getHexStringFromBinary(hash_engine.finish(false));
  	   }
  	   return hashMd5Hex(convertFromUnicode('UTF-8', str));
  }

• 升序排序，其实就是把key拿出来排序，再放回去，php.js (via)
  

  
  /**
   * ksort
   * @return Array
   */
  var ksort = function (array){
  	var tmp_arr = {}, keys = [], key_num = 0, key = '', i = 0;
  
  	for (key in array) {
  		keys[key_num++] = key;
  	}
  	keys = keys.sort();
  	for (i = 0; i < key_num; i++) {
  		key = keys[i];
  		tmp_arr[key] = array[key];
  	}
  	
  	return tmp_arr;
  };

• urlencode，做转码用，也是来自php.js
  

  
  /**
   * urlencode
   * @return String
   */
  var urlencode = function(s){
  	var SAFECHARS = "0123456789" +					// Numeric
  					"ABCDEFGHIJKLMNOPQRSTUVWXYZ" +	// Alphabetic
  					"abcdefghijklmnopqrstuvwxyz" +
  					"-_.!~*'()";					// RFC2396 Mark characters
  	var HEX = "0123456789ABCDEF";
  
  	var encoded = "";
  	for (var i = 0; i < s.length; i++ ) {
  		var ch = s.charAt(i);
  		if (ch == " ") {
  			encoded += "+";				// x-www-urlencoded, rather than %20
  		} else if (SAFECHARS.indexOf(ch) != -1) {
  			encoded += ch;
  		} else {
  			var charCode = ch.charCodeAt(0);
  			if (charCode > 255) {
  				alert( "Unicode Character '" 
  						+ ch 
  						+ "' cannot be encoded using standard URL encoding.\n" +
  						  "(URL encoding only supports 8-bit characters.)\n" +
  						  "A space (+) will be substituted." );
  				encoded += "+";
  			} else {
  				encoded += "%";
  				encoded += HEX.charAt((charCode >> 4) & 0xF);
  				encoded += HEX.charAt(charCode & 0xF);
  			}
  		}
  	} // for
  	return encoded;
  };
  

• 此方法返回url就是签名后的url，在chrome级别里可直接用XMLHttpRequest请求
  

  
  /**
   * getParameterStr
   * @return String
   */
  var getParameterStr = function(arr){
  	var s = '', c = 'cebc9bf0031411de8baffe67f4df8a7b';
  	arr = ksort(arr);
  	
  	for(var i in arr){
  		if('' != arr[i]){
  			if(i == 'sip_timestamp'){
  				s += i + '=' + urlencode(arr[i]) + '&';
  			}else{
  				s += i + '=' + encodeURIComponent(arr[i]) + '&';
  				
  			}
  			c += i + arr[i];
  		}
  	}
  
  	s += 'sip_sign=' +  md5(c).toUpperCase();
  	return s;
  }
  

• 最后去初始化相关参数，fields字段请参考api说明
  

  
  return {
  	init: function(q, pageNo){
  		var arr = parameters;
  		arr['sip_timestamp'] = GetDate.init();	
  		arr['sip_apiname'] = 'taobao.items.get';
  		arr['cid'] = '';
  		arr['q'] = q || 'mac';
  		
  		arr['fields'] = "iid,title,nick,type,cid,pic_path,delist_time,price,post_fee";
  		arr['page_no'] = pageNo || 1;
  		arr['page_size'] = 50;
  
  		return API_URL + '?' + getParameterStr(arr);				
  	}
  }
  

TOP签名还是挺麻烦的，源代码请下载宝淘扩展查看吧。https://addons.mozilla.org/zh-CN/firefox/addon/11309

界面是抄Mac下的Quicksilver, 那几个字是自己画的, 自己觉得都很漂亮, 哇哈哈.., 不过windows下文字太大了, 有点失真

看预览图吧, 很漂亮滴...

怎么用? 首先下载https://addons.mozilla.org/zh-CN/firefox/addon/11309, 安装后, 右下角会出来一个"淘"的icon, 按ALT+Q呼出, 按TAB或者option+S(Mac), ALT+I(Windows)键入关键字搜索, 然后按方向键左右切换商品, 按方向键"DOWN", 进入商品详情页.

大家反映快捷键不好用, 恩, 用的人多, 这个小玩具下个版本就有自定义快捷键了. 赶快下载试用吧.

换主机, 也把WP换成Typecho, 我貌似什么都没做, 空帷 全帮我搞定了. 上周就换了, 一直没时间也懒得弄blog了, 这周休假在家, 想起blog了, 就给它重新写了个皮肤, 设计是抄的(抄自fofronline), 自己稍微改了一下, 代码自己重构了, mac下看起来是比较的漂亮, windows下字体不是很舒服, 也懒得去弄了. 另外不是很了解Typeho, 一些原来blog上的功能都没加, 等了解了再加上去. 另外我厚脸皮的, 把这个皮肤命名为: Enter

如果你有f'irebug之类的工具, 可以看到, 结构中, 没有几个div了, 基本上都换成html5了. 不支持IE浏览器. 去掉css, 看起来也是比较的"完美"了.

因为这不是WP的皮肤, 也没多少人用Typeho, 所以就不提供下载了, 如果你喜欢, 直接看源码和http://labs.macji.com/assets/style.css, 对了, 我已经完全屏蔽IE内核的浏览器了, 也就是说这个皮肤是完全不支持IE内核的浏览器的,  既然你能看到这个页面, 说明你没有用IE. 也不多说了.

恩, 新的系统, 新的皮肤, 新的开始, 每次换blog系统, 我都会这么说, 最近更新blog也很慢, 主要还是太忙了, 忙的累了, 也懒的去更新了. 接下来要克服这个毛病, 还是得坚持更新, 坚持分享.

...
if(httpStatus >= 200 && httpStatus < 300 || httpStatus === 1223){
//
}
...

但事实上，并没有发生失败事件，浏览器会再发一次ajax请求到302的地址，如果还是发生302，一直请求，直到完成请求或者请求跨域失败为止。对于js来说，301 302这种跳转是透明的，无法处理。
测试地址（请用firebug， 打开控制台，查看数据，一目了然）

那到底如何当ajax正确处理302呢，这是浏览器级别的问题，也就是说没有浏览器能正确处理302。对于我们前端来说，正确的验证ajax回来的数据，并给出提示，那也不友好（比如服务器端希望我们去登录页面）。更友好的处理是当服务器端发生302，那ajax就当"错误"处理，也做302跳转。

//success的时候 不是你想要的数据后，做如下验证
if(-1 != data.indexOf('x')){//x为302后页面特定的字符
	var LOGIN_DOMAIN = 'xxx';//302地址
	window.location = LOGIN_DOMAIN;
	return true;
}

//当302跳转后，ajax发生跨域，可以在failure处理，但 ie返回的是o.status 是 0
failure: function(o){
	if(302 == o.status){
		//
	}
}

嗯，08年4月，结束了我人生的第一份工作，被前老板称之为美工，我不懂设计，不懂美学。我更喜欢的是敲敲代码，研究点我不明白的东西。正如我08年初所说的，我如愿的进入了UED部门，感谢小马哥带我进入淘宝UED，成为一位web前端开发者，这比美工要好听多了，为了对得起这title，我正努力的学习着。

2008年，工作很忙，但正是忙才能让我有所进步。

2008年，感谢小马，安排有意思的工作给我，当我反馈工作给你时，你总是说这不行，那不行，正是你说的不，才让我想的更多，思考的更多，进步的更多。完美主义的你，让我学到很多很多。但总觉得有点抱歉，每次去你家吃饭，白吃白喝，打麻将还赢你们钱，我在这里表示抱歉啦。

2008年，感谢正淳，你的热心，接触过你的人，都知道你是多么的热心，拜托你的事，准没问题。听到你的声音，就知道你有多么的爱淘宝，爱工作。从最底层看问题，让我也了解到问题的另一面。你说我能教你的，就是那点经验。这话不是一般人能听得到的，感动ing。

2008年，最要感谢我的师傅 圆心，让我重新认识技能上的东东，你的学习方法，你的学习态度，你看问题的方式，做的你徒弟，我学到的太多了，唯一没学到的就是你的体重=.=，我没有在骂人哦，说实在话，谢谢你在这一年中带着我，你不烦耐心的跟我讲解着这个问题那个问题，09年，我会加油的。

2008年，要感谢的人太多了，感谢UED前端组，也感谢我自己。

2009年，该做点什么呢，提高效率。工作为什么很忙，效率是一方面，当然经验是效率的瓶颈。要好好记录工作最花时间的地方，总结原因。希望09年少加班，按时回家，然后做一些自己喜欢做的事。希望借着牛年，让我自己变得牛气冲天。

2009年，87年的我，多多少少也有点年纪了，看着UED进来比我年轻的人，感叹年轻真好，后生可畏。当然我也没有资格说这些话，我还是挺年轻的。嗯，比猥琐男，比学术男，比腔调男要年轻多。好好努力，好好去对得起这个年纪，对的起我的title。

娟娟，你真的太好了，我是一个不会说话的人，很多肉麻的话，我都没说出来。在新年之际，我要在这里好好谢谢你。时间过得真快，一年这么快就过去了，这一年中你从东边跟着我到西边，这些苦，这些累，你从来不说；这一年我们在欢声笑语中，让给我们更懂得了生活是平淡的，但我们让平淡的生活，变得非常的缤纷多彩；在这一年，我加班没时间陪你，你总是很体贴我，我加班回来，你总是会给我烧蛋炒饭，紫菜汤，我累了，你会给我按摩。我有这么好的一个老婆，我骄傲啊。在09年，我要做到逛街不喊累，吃辣不喊辣，吃醋不喊酸。其实还有很多话要说，这些全都是只属于我们俩的。

2009年，结果，结果，结果，让我们的结果牛气冲天。

this 关键字很好用，很灵活，正因为很灵活，所以一不小心你就会掉进陷阱，所以你要注意以下几点：

1. 元素对象的this，始终指向该元素，如事件绑定。
2. 全局的this或者window的相关方法的this始终指向window对象，如setTimeout(function(){alert(this);}, 10)。
3. 自己创建的对象（{}, new function等）里的this指向自己对象，如var obj = {xxx: function(){alert(this);}}
4. 匿名函数的this，始终指向window对象，如(function(){alert(this);})();
5. 想不到还有什么了，望达人补充。

遇到在某function里不能正常使用this时，可以用call或者在其正常的作用域里var _this = this;然后用_this，最鹾的就是直接用对象名来调用。

另给自己定义的对象都应该创建一个属于该对象的 toString方法。

请用IE查看：

http://labs.macji.com/yui-rich-text-editor-for-ie.html

它的作者是这样回答这个滴。。：

http://sourceforge.net/tracker/?func=detail&atid=836476&aid=2052000&group_id=165715

确实，在中国的环境下，很少有人会用这个编辑器。。。

需求：做一个tab，要求当用户禁止javascript后，tab还能照样使用。

貌似不能实现，可仔细想想是可以实现的，连这个都能实现，何况一个tab呢。。。

1. 首先我们写html结构
   
   

   
   <div id="tab" class="mj">
   	<ul class="mj-nav">
   		<li class="first"><a href="#"><span>类目1</span></a></li>
   		<li><a href="#"><span>类目2</span></a></li>
   		<li><a href="#"><span>类目3</span></a></li>
   	</ul>
   	<div class="panel">
   		这是类目1
   	</div>
   	<div class="panel">
   		这是类目2
   	</div>
   	<div class="panel">
   		这是类目3
   	</div>
   </div>
   
   

   
   
   测试地址一
2. 写上css
   
   

   
   .mj{
   	width:500px;
   	padding:10px 0;
   	border:solid 1px #bfbfbf;
   }
   .mj-nav, .mj-nav *{
   	background:url(cat_selector.png) no-repeat 100px 100px;
   }
   
   /* tab 导航条 */
   .mj .mj-nav{
   	height:25px;
   	padding:0 10px;
   	line-height:25px;
   	background-position:0 0;
   }
   .mj-nav li{
   	float:left;
   }
   .mj-nav a{
   	float:left;
   	padding-left:20px;
   }
   .mj-nav span{
   	display:block;
   	padding-right:20px;
   }
   .mj-nav a{
   	background-position:-500px 0;
   }
   .mj-nav .first a{
   	background-position:100px 100px;
   }
   .mj-nav .selected{
   	position:relative;
   	margin:0 -1px 0 0;
   }
   .mj-nav .selected a{
   	background-position:0 -25px;
   }
   .mj-nav .selected span{
   	background-position:100% -25px;
   }
   
   

   
   
   测试地址二
3. 引入js，这里直接用Tbar，
   
   

   
   <script src="http://assets.taobaocdn.com/js/tbra/tbra-widgets.js?t=20081028.js" type="text/javascript"></script>
   <script type="text/javascript">
   TB.widget.SimpleTab.decorate('tab', {eventType:'click', currentClass:'selected'});
   </script>
   
   

   
   
   测试地址三
4. ok，到这里我们的tab就算完成了。只要浏览器支持javascript，那么就可以使用我们的tab，但是，如果用户禁止了javascript，那后果该是怎样的呢？惨不忍睹。测试地址四
5. 我们都知道锚点(url#xxx)，定位到页面的位置。如果我们的锚点都在一个容器里面(div)，并且这个容器只有100像素高(height:100px;overflow:hidden)，然后我们锚点到它的字容器(字容器都是height:100px)，那该是怎么样的呢？答案是可行的，可惜只有Opera不支持这种机制。
   

   
   //在原来的css基础上加上
   .panels{
   	height:50px;
   	overflow:hidden;
   }
   .panel{
   	height:50px;
   }
   
   <div id="tab" class="mj">
   	<ul class="mj-nav">	
   		<li class="first"><a href="#panel1"><span>类目1</span></a></li>
   		<li><a href="#panel2"><span>类目2</span></a></li>
   		<li><a href="#panel3"><span>类目3</span></a></li>
   	</ul>
   	<div class="panels">
   		<div id="panel1" class="panel">这是类目1</div>
   		<div id="panel2" class="panel">这是类目2</div>
   		<div id="panel3" class="panel">这是类目3</div>
   	</div>
   </div>
   
   
   

   
   
   我们只要再做一点点，就能让用户在没有javascript的情况下，也能使用tab，可乐而不为呢？测试地址五
6. 但是，当页面很长时，点击切换后，我们tab导航看不到了，测试地址六
7. 其实，我们只要在css上，调整一下就可以了。
   

   
   .mj{
   	position:relative;
   	width:500px;
   	padding:10px 0;
   	border:solid 1px #bfbfbf;
   }
   .mj-nav, .mj-nav *{
   	background:url(cat_selector.png) no-repeat 100px 100px;
   }
   /* tab 导航条 */
   .mj .mj-nav{
   	position:absolute;
   	left:0;
   	top:10px;
   	width:480px;
   	height:25px;
   	padding:0 10px;
   	line-height:25px;
   	background-position:0 0;
   }
   

   
   
   测试地址七
8. 这时，javascript可以出场了。我们给其加上脚本。测试地址八
9. 可恨的firefox 3，在有锚点，又有脚本，错位了。测试地址九
10. 写上obj.scrollTop = 0;就可以了。
    
    

    
    var TabSelector = (function(){
    	var el = $D.get('tab');
    	if ( !el ) return false;
    	return {
    		init: function(){
    			$E.on(el.getElementsByTagName('ul')[0], 'click', function(){
    				$E.stopEvent(ev);
    			});
    			TB.widget.SimpleTab.decorate('tab', {
    				eventType:'click',
    				tabPanelClass:'panel',
    				currentClass:'selected'
    			});
    			$D.getLastChild(el).scrollTop = 0;
    		}
    	}
    })();
    $E.onDOMReady(TabSelector.init);
    
    

    
    
    比较完美的tab，测试地址十，如果再渐进增强，比如键盘事件，盲人触摸等，更极端的，当css失效时，但我没疯。

其实到第三步，一个tab就做好了，也不需要考虑这么多了，但考虑下去，不是很难，疯一次也是不错的。