Ajax组件(wagang版)之无依赖化

前文讲到Ajax的功能与代码,本文补叙一下Ajax的无依赖化。
基本的ajax.js与业务逻辑无关,它是基于QWrap开发的。但是,QWrap好像是个不知名的框架,对于不用QWrap框架的公司来说,没必要为了用这个js而引入一个所谓的QWrap框架。
没问题,我们可以依赖QWrap开发Ajax,而发布出一个无依赖的Ajax。

ajax.js的最前面有一段代码:
var mix=QW.ObjectH.mix,
encodeURIJson
=QW.ObjectH.encodeURIJson,
encodeURIForm
=QW.NodeH.encodeURIForm,
CustEvent
=QW.CustEvent;
它是一段适配代码。----QWrap提供一系列静态方法,在开发组件时用这些静态方法,发布时可以抽取出来。
QWrap提供了一个代码抽取的简易工具(js版的):
http://dev.qwrap.com/resource/js/_tools/combojsfiles/_examples/Solo.html

将适配代码粘贴到该页面的“硬性代码”框中,点击“依赖抽取”按钮。
会依次弹出以下几个框:
1。分析硬性代码,解析出依赖为:{"ObjectH":{"mix":{},"encodeURIJson":{}},"NodeH":{"encodeURIForm":{}},"CustEvent":{}}
2。依赖这个不可细折的模块//    document.write('<script type="text/javascript" src="' + srcPath + 'core/custevent.js"><\/script>');
3。所有的直接或间接依赖:{"ObjectH":{"mix":{},"encodeURIJson":{},"isWrap":{},"isArray":{}},"NodeH":{"encodeURIForm":{}},"CustEvent":{"prototype":{},"createEvents":{}},"DomU":{"create":{}},"ArrayH":{"indexOf":{}},"error":{},"HelperH":{"methodize":{}},"CustEventTargetH":{"createEvents":{}},"CustEventTarget":{"prototype":{}},"FunctionH":{"methodize":{}}}
之后会将抽取将果显示在下面的“结果”文本框里。

尽管比QWrap整个库来说,代码已经少了很多,但是,代码还是有点多。
最主要的原因如第二个弹框所言:依赖这个不可细折的模块:custevent.js
CustEvent是参考dom标准事件实现的一套用户自定义事件的组件。由于会在大量组件中用到,所以放在了QWrap的核心库。它拥有强大的多头事件功能,不过,在实际中,Ajax支持独占事件就差不多够用了,在对Ajax进行无依赖化时,可以考虑把它简化成一个只支持单头事件的简单功能。按Ajax的需求,适配代码可以简化成如下:
var mix=QW.ObjectH.mix,
encodeURIJson
=QW.ObjectH.encodeURIJson,
encodeURIForm
=QW.NodeH.encodeURIForm,
CustEvent
={
createEvents:
function(obj){
obj.fire
= function (sEvent) {
var key = 'on' + sEvent;
return this[key] && this[key]();
}
}
};

再把这段适配代码当作硬性代码来抽取一次,抽取结果就变成这样的了:
View Code
// document.write('<script type="text/javascript" src="' + srcPath + 'core/core_base.js"><\/script>');
(function() {
var QW = {
};
window.QW
= QW;
}());
// document.write('<script type="text/javascript" src="' + srcPath + 'core/object.h.js"><\/script>');
(function() {
function getConstructorName(o) {
return o != null && Object.prototype.toString.call(o).slice(8, -1);
}
var ObjectH = {
isArray:
function(obj) {
return getConstructorName(obj) == 'Array';
},
isWrap:
function(obj, coreName) {
return !!(obj && obj[coreName || 'core']);
},
mix:
function(des, src, override) {
if (ObjectH.isArray(src)) {
for (var i = 0, len = src.length; i < len; i++) {
ObjectH.mix(des, src[i], override);
}
return des;
}
for (i in src) {
if (override || !(des[i] || (i in des))) {
des[i]
= src[i];
}
}
return des;
},
encodeURIJson:
function(json){
var s = [];
for( var p in json ){
if(json[p]==null) continue;
if(json[p] instanceof Array)
{
for (var i=0;i<json[p].length;i++) s.push( encodeURIComponent(p) + '=' + encodeURIComponent(json[p][i]));
}
else
s.push( encodeURIComponent(p)
+ '=' + encodeURIComponent(json[p]));
}
return s.join('&');
}
};
QW.ObjectH
= ObjectH;
}());
// document.write('<script type="text/javascript" src="' + srcPath + 'dom/dom.u.js"><\/script>');
(function() {
var DomU = {
create: (
function() {
var temp = document.createElement('div'),
wrap
= {
option: [
1, "<select multiple='multiple'>", "</select>" ],
optgroup: [
1, "<select multiple='multiple'>", "</select>" ],
legend: [
1, "<fieldset>", "</fieldset>" ],
thead: [
1, "<table>", "</table>" ],
tbody: [
1,"<table>", "</table>" ],
tfoot : [
1,"<table>", "</table>"],
tr: [
2, "<table><tbody>", "</tbody></table>" ],
td: [
3, "<table><tbody><tr>", "</tr></tbody></table>" ],
th: [
3, "<table><tbody><tr>", "</tr></tbody></table>" ],
col: [
2, "<table><tbody></tbody><colgroup>", "</colgroup></table>" ],
_default: [
0, "", "" ]
},
tagName
= /<(\w+)/i;
return function(html, rfrag, doc) {
var dtemp = (doc && doc.createElement('div')) || temp,
root
= dtemp,
tag
= ( tagName.exec( html ) || ["",""] )[1],
wr
= wrap[ tag ] || wrap[ '_default' ],
dep
= wr[0];
dtemp.innerHTML
= wr[1] + html + wr[2];
while( dep-- ) {
dtemp
= dtemp.firstChild;
}
var el = dtemp.firstChild;
if (!el || !rfrag) {
while (root.firstChild) {
root.removeChild(root.firstChild);
}
//root.innerHTML = '';
return el;
}
else {
doc
= doc || document;
var frag = doc.createDocumentFragment();
while (el = dtemp.firstChild) {
frag.appendChild(el);
}
return frag;
}
};
}())
};
QW.DomU
= DomU;
}());
// document.write('<script type="text/javascript" src="' + srcPath + 'dom/node.h.js"><\/script>');
(function() {
var ObjectH = QW.ObjectH,
DomU
= QW.DomU;
var g = function(el, doc) {
if ('string' == typeof el) {
if (el.indexOf('<') == 0) {return DomU.create(el, false, doc); }
return (doc || document).getElementById(el);
}
else {
return (ObjectH.isWrap(el)) ? arguments.callee(el.core) : el;
}
};
var NodeH = {
encodeURIForm:
function(el, filter) {
el
= g(el);
filter
= filter || function(el) {return false; };
var result = [],
els
= el.elements,
l
= els.length,
i
= 0,
push
= function(name, value) {
result.push(encodeURIComponent(name)
+ '=' + encodeURIComponent(value));
};
for (; i < l; ++i) {
el
= els[i];
var name = el.name;
if (el.disabled || !name || filter(el)) {continue; }
switch (el.type) {
case "text":
case "hidden":
case "password":
case "textarea":
push(name, el.value);
break;
case "radio":
case "checkbox":
if (el.checked) {push(name, el.value); }
break;
case "select-one":
if (el.selectedIndex > -1) {push(name, el.value); }
break;
case "select-multiple":
var opts = el.options;
for (var j = 0; j < opts.length; ++j) {
if (opts[j].selected) {push(name, opts[j].value); }
}
break;
}
}
return result.join("&");
}
};
QW.NodeH
= NodeH;
}());
其中encodeURIForm里有一句“el=g(el);”,这个是为了兼容id字符串变成html元素,可以去掉本句。
去掉后再点击“修改结果后再次抽取”就得到了以下代码:
// document.write('<script type="text/javascript" src="' + srcPath + 'core/core_base.js"><\/script>');
(function() {
var QW = {
};
window.QW
= QW;
}());
// document.write('<script type="text/javascript" src="' + srcPath + 'core/object.h.js"><\/script>');
(function() {
function getConstructorName(o) {
return o != null && Object.prototype.toString.call(o).slice(8, -1);
}
var ObjectH = {
isArray:
function(obj) {
return getConstructorName(obj) == 'Array';
},
mix:
function(des, src, override) {
if (ObjectH.isArray(src)) {
for (var i = 0, len = src.length; i < len; i++) {
ObjectH.mix(des, src[i], override);
}
return des;
}
for (i in src) {
if (override || !(des[i] || (i in des))) {
des[i]
= src[i];
}
}
return des;
},
encodeURIJson:
function(json){
var s = [];
for( var p in json ){
if(json[p]==null) continue;
if(json[p] instanceof Array)
{
for (var i=0;i<json[p].length;i++) s.push( encodeURIComponent(p) + '=' + encodeURIComponent(json[p][i]));
}
else
s.push( encodeURIComponent(p)
+ '=' + encodeURIComponent(json[p]));
}
return s.join('&');
}
};
QW.ObjectH
= ObjectH;
}());
// document.write('<script type="text/javascript" src="' + srcPath + 'dom/node.h.js"><\/script>');
(function() {
var NodeH = {
encodeURIForm:
function(el, filter) {
filter
= filter || function(el) {return false; };
var result = [],
els
= el.elements,
l
= els.length,
i
= 0,
push
= function(name, value) {
result.push(encodeURIComponent(name)
+ '=' + encodeURIComponent(value));
};
for (; i < l; ++i) {
el
= els[i];
var name = el.name;
if (el.disabled || !name || filter(el)) {continue; }
switch (el.type) {
case "text":
case "hidden":
case "password":
case "textarea":
push(name, el.value);
break;
case "radio":
case "checkbox":
if (el.checked) {push(name, el.value); }
break;
case "select-one":
if (el.selectedIndex > -1) {push(name, el.value); }
break;
case "select-multiple":
var opts = el.options;
for (var j = 0; j < opts.length; ++j) {
if (opts[j].selected) {push(name, opts[j].value); }
}
break;
}
}
return result.join("&");
}
};
QW.NodeH
= NodeH;
}());

是的,它就是Ajax的适配代码对QWrap的依赖了。
当然,mix还可以简化,那就是纯手工可以完成的事了,略过不提…………………………

附:QWrap网址:http://www.qwrap.com

posted on 2011-05-19 20:24  JKisJK  阅读(...)  评论(...编辑  收藏

导航