JS学习笔记

     最近一直在研究JS，还是有点小收获，总结如下吧：
     看了JavaScript DOM 高级程序设计以后，萌生了一个写自己库的想法，虽然明白自己的能力有限，但还是想大胆一试。
     一直认为EXT框架的架构很好，兴许是今天突然心血来潮了吧，想自己封装一个JS的数据请求器和处理器。当然开发前期也没做太多的思考，就只准备了JSON数据处理的模块。
     提前说下目前库也写了1200行代码，基本功能还是能支持些。
     继续说数据处理框架吧，首先我想到了了EXT的Grid类,它是采取的AJAX加载数据来填充表格的。而且一般我们应用的是JSON数据，类中有一个ds属性负责接收数据源。看到这里我对框架有了一个大体思路了。
      我的框架叫做JFaith
      声明在了一个命名空间中如下：

    (function(){
        if(!window.JFaith){window["JFaith"] = {}}
    })()

现在由于是数据处理框架所以另外建立了文件——jfaith.data.js

    (function(f){
        //建立命名空间
        f.ns('JFaith.data');
    })(JFaith)

下面附上几个用到的比较重要的代码
f.ns是一个命名空间声明函数
extends负责继承吧

(function(){
    if(!window.JFaith){window["JFaith"] = {}}
      
    /*---------------------------------------------
		JFaith 声明命名空间的方法
	---------------------------------------------*/
	function ns(){
		var o,d;
		JFaith.each(arguments,function(v){
			d = v.split('.');
			o = window[d[0]] = window[d[0]] || {};
			JFaith.each(d.slice(1),function(v2){
				o = o[v2] = o[v2] || {};
			});
		});
		return o;
	}
	window["JFaith"]["ns"] = ns;
	/*---------------------------------------------
			JFiath 迭代方法
	---------------------------------------------*/
	function each(){
		for(var i = 0; i < arguments[0].length; i++){
			arguments[1](arguments[0][i]);
		}
	}
	window["JFaith"]["each"] = each;
	/*--------------------------------
    	 JS实现继承的方法	
		 @introduce:寄生组合继承改动版	  	     
	--------------------------------*/
	// 私有方法原型式继承
	function _object(o){
		function F(){};
		F.prototype = o;
		return new F();
	}
	// 私有方法寄生式继承
	function _inheritPrototype(subClass, superClass){
		// 复制了一次父类的原型
		var prototype = _object(superClass.prototype);
		prototype.constructor = subClass;
		subClass.prototype = prototype;
	}
	// parasitic combination inheritance
	// 寄生组合继承改动版
	function extend(subClass, superClass){
		// 子类构造函数调用父类构造函数
		// 以实现子类继承父类属性的目地
		subClass.superClass = superClass.prototype;
		
		_inheritPrototype(subClass, superClass);
		
		if(superClass.prototype.constructor == Object.prototype.constructor){
			superClass.prototype.constructor == superClass;
		}
	}
	window["JFaith"]["extend"] = extend;	
})()

基本操作有了下面是Ajax操作:
下面的代码参考子JS DOM高级程序设计
基本思路根据具AJAX的操作，和服务器响应类型
来处理request.responseText
这里主要处理类型为‘application/json’的

	  // 设置XMLHttpRequest对象的各个不同的部分
	  function getRequestObject(url,options){
		  // 初始化请求对象
		  var req = false;
		  if(window.XMLHttpRequest){
			  var req = new window.XMLHttpRequest();
		  }else if(window.ActiveXObject){
		  	  var req = new window.ActiveXObject('MicroSoft.XMLHTTP');
		  }
		  
		  if(!req){ return false; }
		  
		  // 定义默认的选项
		  options = options || {};
		  options.method = options.method || 'GET';
		  options.send = options.send || null;
		  
		  // 为请求的每个阶段定义不同的侦听器
		  req.onreadystatechange = function(){
			  switch(req.readyState){
				  case 1 :
				  	// 载入中
					if(options.loadListener){
						options.loadListener.apply(req,arguments);
					}
					break;
				  case 2 :
				  	// 载入完成
					if(options.loadactiveListener){
						options.loadactiveListener.apply(req,arguments);
					}
					break;
				  case 3 :
				  	// 交互
				  	if(options.ineractiveListener){
						options.ineractiveListener.apply(req,arguments);
					}
					break;
				  case 4 :
				  	// 完成
					// 如果失败抛出错误
					try{
				  		if(req.status && req.status == 200){
							// 针对content-type的特殊事件侦听器
							// 由于content-type头部中可能包含字符集，如：
							// content-type:text/html; charset = ISO-8859-1
							// 因此通过正则表达式提取所需要的部分
							var contentType = req.getResponseHeader('Content-Type');
							var mimeType = contentType.match(/\s*([^;]+)\s*(;|$)/i)[1];
							switch(mimeType) {
							case 'text/javascript':
							case 'application/javascript':
								// 响应是JavaScript,因此以 
								// req.responseText 作为回调的参数
								if(options.jsResponseListener) {
									options.jsResponseListener.call(
										req,
										req.responseText
									);
								}
								break;
							case 'application/json':
								// 响应是JSON,因此要用匿名函数对  
								// req.responseText 进行解析
								// 以返回作为回调哦函数的JSON对象
								// 返回处理好的JSON对象
								if(options.jsonResponseListener) {
									try {
										var json = parseJSON(
											req.responseText
										);
									} catch(e) {
										var json = false;
									}
									return options.jsonResponseListener.call(
										req,
										json
									);
								}
								break;
							case 'text/xml':
							case 'application/xml':
							case 'application/xhtml+xml':
								// 响应是XML,因此以
								// req.responseXML 作为
								// 回调参数
								// 此时是document对象
								if(options.xmlResponseListener) {
									options.xmlResponseListener.call(
										req,
										req.responseXML
									);
								}
								break;
							case 'text/html':
								// 响应是XML,因此以
								// req.responseText 作为
								// 回调的参数
								if(options.htmlResponseListener) {
									options.htmlResponseListener.call(
										req,
										req.responseText
									);
								}
								break;
						}
					
						// 针对响应成功完成的侦听器
						if(options.completeListener) {
							options.completeListener.apply(req,arguments);
						}
	
					} else {
						// 响应完成但却存在错误
						if(options.errorListener) {
							options.errorListener.apply(req,arguments);
						}
					}
					
				} catch(e) {
					//忽略错误
					//alert('Response Error: ' + e);
				}
				break;
			 }
		  }
		  // 开启请求
		  req.open(options.method,url,true);
		  // 添加特殊的头部信息以标识请求
		  req.setRequestHeader('X-JFaith-Ajax-Request','AjaxRequest');
		  return req;
	  }
	  window["JFaith"]["getRequestObject"] = getRequestObject;
	  
	  function ajaxRequest(url,options){
	  	  var req = getRequestObject(url,options);
		  return req.send(options.send);
	  }
	  window["JFaith"]["ajaxRequest"] = ajaxRequest;

然后定义了JFaith.data.js文件中的代码

(function(f){
	// declare a namespace
	f.ns('JFaith.data');
   /**
	* ==========================================================
	*	A Base Class Duty Is Store Data
	* ==========================================================
	*/
	f.data.DataStore = function(config){
		// declaer request url and data reader
		if(config.url && config.reader){
			this.url = config.url;
			
			this.reader = config.reader;
			
			this.whichReader = "";
		}
	};
	
	// initialization method
	f.data.DataReader.initialization = function(){
		if(this.reader instanceof f.data.JsonReader){
			this.whichReader = 'jsonReader';
		}
	}
	
	// load function duty is load data
	f.data.DataStore.prototype.load = function(params){
		// data object
		var data = {};
		var options = {};
		// select reader
		switch(this.whichReader){
			case 'jsonReader' :
				options.jsonResponseListener = this.reader;
				break;
			default :
				break;
		}
		// do ajax operation
		data = f.getRequestObject(this.url,options);
		
		return data;
	};
   /**
	* ==========================================================
	* 	A Base Data Class Named DataReader 
	* ==========================================================
	*/
	f.data.DataReader = function(){
			
	};
	
	/**
	 * =========================================================
	 *	A Function Class Named JSONReader
	 * =========================================================
	 */
	 f.data.JsonReader = function(meta,recordType){
             f.data.JsonReader.superClass.constructor.apply(f.data.JsonReader,
                  arguments);
	 };

	 // extend the base class dataReader  
	 f.extend(f.data.JsonReader,f.data.DataReader);

	 // fill data
	 f.data.JsonReader.prototype.fillData = function(req,json){

	 };
})(JFaith);

说来惭愧由于能力不够，还有之前没有设计好写到这里就写不下去了，只有个基本架子，又一次折服于EXT。不过刚刚大三吧，以后会更努力研究的