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]();
                }
            }
        };

再把这段适配代码当作硬性代码来抽取一次，抽取结果就变成这样的了：

//    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