最近一直在研究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。不过刚刚大三吧，以后会更努力研究的
分享到：
相关推荐
html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习...
本学习笔记将深入探讨JavaScript的核心概念，包括变量、数据类型、操作符、控制流程、函数、对象、数组、原型链、闭包等，并结合实际示例，如my.js、order.js、login.js等文件，来讲解其在实际项目中的应用。...
个人Javascript学习笔记 精华版 本资源为个人Javascript学习笔记的精华版，涵盖了Javascript的基础知识、事件处理、对象和系统函数、浏览器对象等方面的内容。下面是对每个知识点的详细说明： 1. 什么是JavaScript...
html+css+js学习笔记html+css+js学习笔记html+css+js学习笔记html+css+js学习笔记 html+css+js学习笔记html+css+js学习笔记html+css+js学习笔记html+css+js学习笔记 html+css+js学习笔记html+css+js学习笔记...
JavaScript学习笔记是一本关于JavaScript编程语言的教材，该教材通过丰富的实例，系统地介绍了JavaScript的基础知识和实际应用技巧，帮助读者一步步掌握客户端编程技术。本书共分为九章，每一章都有其特定的主题，...
### JavaScript学习笔记精要 #### JavaScript简介 JavaScript是一种强大的、多用途的脚本语言，用于增强网站的交互性和用户体验。它是由Netscape公司的Brendan Eich在1995年发明的，并且迅速成为了Web开发的标准之...
JavaScript学习笔记讲解版参考.pdf是一份详尽的教程，涵盖了从基础到进阶的JavaScript知识。这份笔记首先从CSS样式表开始，引导读者理解网页样式的设置与应用。 1. CSS（Cascading Style Sheets）样式表是用于控制...
JavaScript是一种广泛应用于网页和网络应用开发的...理解这些基础知识对于深入学习JavaScript至关重要，因为它们构成了JavaScript程序的基础。通过熟练掌握这些概念，开发者可以编写出动态、交互性强的网页和应用程序。
这份“javascript学习笔记整理知识点整理”是针对初学者的一份宝贵资料，涵盖了JavaScript的基础知识，旨在帮助新手快速入门并掌握这门语言的核心概念。 一、变量与数据类型 在JavaScript中，变量用于存储数据。...
本压缩包“JavaScript学习笔记_js常用函数封装_js包.zip”包含了对JavaScript基础及进阶技巧的学习资料，特别关注了函数封装和模块化开发实践。 首先，`tool.js`可能是一个实用工具函数集合，封装了一些常见的...
这些只是JavaScript学习笔记的一部分，深入理解并熟练运用这些概念，将为JavaScript编程打下坚实的基础。随着学习的深入，还会接触到更多高级特性和框架，如闭包、原型链、AJAX、jQuery、Vue.js、React.js等，这些都...
JavaScript 学习笔记集和代码库JavaScript 学习笔记集和代码库JavaScript 学习笔记集和代码库JavaScript 学习笔记集和代码库JavaScript 学习笔记集和代码库JavaScript 学习笔记集和代码库JavaScript 学习笔记集和...
"Javascript学习笔记（传智播客视频学习笔记+代码）"是一份全面介绍JavaScript基础知识的学习资源，适用于初学者。这份笔记结合了传智播客的web前端培训视频内容，提供了丰富的理论讲解和实践代码，帮助读者从零开始...
JavaScript基础知识点总结 JavaScript是一种高级的、动态的、基于对象的客户端脚本语言。它是在网页上执行的脚本语言，能实现网页的交互功能。下面是该资源中的重要知识点总结： 一、 JavaScript 基本概念 * ...
javascript学习笔记，包括基本语法、面向对象、正则表达式、dom的所有操作
Javascript学习笔记PPTJavascript学习笔记PPTJavascript学习笔记PPTJavascript学习笔记PPTJavascript学习笔记PPTJavascript学习笔记PPTJavascript学习笔记PPTJavascript学习笔记PPTJavascript学习笔记PPTJavascript...
标题《JS学习笔记》暗示了这是一份关于JavaScript编程语言的学习材料，包含了一系列的学习要点。描述信息与标题相同，没有提供额外的信息。标签为空，意味着没有预设的分类或标签信息。部分内容则提供了一些...