Macji Pro²⁰¹⁰

淘宝开放平台项目（TOP： taobao open platform）是淘宝（中国）软件公司面向3rd app开发者，提供API接口和相关开发环境的平台。

嗯, 这里介绍如何通过基于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

如果我们的web应用有大量的异步请求，而这些异步请求是在web服务器认证的情况下，那当我们请求发生在服务器认证失效下，服务器自动302到登录页面，那我们异步获取的是登录页面的数据。我们看YUI代码，当ajax请求发生301 302属于失败事件。

...
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){
		//
	}
}

this指向当前作用域的对象，如果找不到，往上一层找，直到window。

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方法。

最近项目中用到YUI Rich Text Editor，有个比较严重的问题是在IE下的设置 document.domain后，将导致YUI Rich Text Editor不能工作，这也是YUI Rich Text Editor的一个bug，那如何解决呢，不设置document.domain或者等待Rich Text Editor更新吧。

请用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

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

有这么一个需求：CMS在页面一容器内输出50个a标签（该容器为display:none），要我随机从这容器取出10个a，放到另一容器内。

本能反应：建立一个随机数组，然后clone节点，放到另一容器去。但这样会把重复的a节点放进去。

随机数不重复，那就得用生成一个随机数，放到数组去，再生成一个和之前的数组一个一个比过去，如果重复就重新生成。我的最初想法。

(function(){
	var obj = $("hotClick");//容器，里面有个隐藏的p，他里面有50个a
	var links = obj.getElementsByTagName("a"), r = [], temp;
	var randomNum = function(n, p){
		var p = p || -1, newNum = Math.floor(Math.random() * (n + 1));
		for(var i = 0; i < r.length; i++){
			if(r[i] == newNum)
				return randomNum(n, newNum);
			}
			return newNum;
		}
	}
	for (var i = 0; i < 10; i++){
		r.push(randomNum(50));
		temp = links[r[i]].cloneNode(true);
		obj.appendChild(temp);
	};
})();

虽然这样可行，但效率比较差劲，于是google了一下，看到无忧脚本的一个帖子。于是我想到了，先生成0到50的数组，然后对数组随机排序，最后取输出的0到10拿出来用。太帅了。我对帖子上的方法简单的修改。

(function(){
	Array.prototype.riffle = function(){
		this.sort(function(){
			return Math.random() > 0.5 ? -1 : 1;
		});
	}
	var obj = $("hotClick");
	var links = obj.getElementsByTagName("a"), r = [], temp;
	for(var i = 0; i <= 50; i++)r[i] = i;
	r.riffle();
	for (i = 0; i < 10; i++){
		temp = links[r[i]].cloneNode(true);
		obj.appendChild(temp);
	}
})();