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] = window] || {};JFaith.each(d.slice(1),function(v2){o = o = o || {};});});return o;}window["JFaith"]["ns"] = ns;/*---------------------------------------------JFiath 迭代方法---------------------------------------------*/function each(){for(var i = 0; i < arguments.length; i++){arguments(arguments);}}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);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 namespacef.ns('JFaith.data'); /*** ==========================================================*A Base Class Duty Is Store Data* ==========================================================*/f.data.DataStore = function(config){// declaer request url and data readerif(config.url && config.reader){this.url = config.url;this.reader = config.reader;this.whichReader = "";}};// initialization methodf.data.DataReader.initialization = function(){if(this.reader instanceof f.data.JsonReader){this.whichReader = 'jsonReader';}}// load function duty is load dataf.data.DataStore.prototype.load = function(params){// data objectvar data = {};var options = {};// select readerswitch(this.whichReader){case 'jsonReader' :options.jsonResponseListener = this.reader;break;default :break;}// do ajax operationdata = 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。不过刚刚大三吧，以后会更努力研究的
页:
[1]