Ajax+innerHTML+Dgls=好的用户体验+高性能+高效率

为了引入Dgls，我们从创建Dom节点说起。

用JS创建Dom节点

var div = document.createElement('div');
div.className = 'gdls';
var test = document.createTextNode('zhe');
div = div.appendChild(test);

看到没，我们仅仅为了创建<div class="dgls">zhe</div>竟然写了四行代码，而且用了那么多无用的字符。

用JQ创建Dom节点

$('div',{
    'class': 'dgls',
    'id': 'dgls',
    'css':{
        'border': '1px solid green'
    },
    'html': $('<a>', {
        href: '#',
        html: 'hello world',
    })
});

这个看起来比JS的要爽多了，而且可以嵌套子节点。可是<div><a></a><a></a></div>怎么创建呢？难道要用两个html，显然是不行的。

<div></div><div></div>这个标签又怎么创建呢？也许不行吧。

用字符串创建Dom结点

'<div></div><div></div>'
'<div><a></a><a></a></div>'

我只能说这个是最简单的了，但是局限性也就大了。我要动态加个class属性，就要使用+号来连接字符串，如果我要创建一个复杂且庞大的结构，不知道要用多少个+号，不便于阅读。更严重的是+号的效率低下啊，尽管后来JS改善了+号的性能。

用Dgls创建Dom结点

_('div',
    _('a', {'href': 'www.baidu.com'}, 'baidu'),
    _('a', {'href': 'www.cnblogs.com'}, 'google')
).string();
/*
<div><a href="www.baidu.com">baidu</a><a href="www.cnblogs.com">google</a></div> 
*/

_('div', {'class': 'dgls'}, '1').concat(
_('div', {'class': 'dgls'}, '2')).string();
/*
<div class="dgls">1</div><div class="dgls">2</div> 
*/

只要是你能够想得到的结构，Dgls都能够创建！当然Dgls创建的都是字符串，只要与innerHTML结合使用就可以将字符串转化为Dom节点了，而且innerHTML性能也是不错的，甚至超过了JS，当我们要大量创建dom元素的时候。

揭开Dgls神秘的面纱

Dgls是Dynamically Generate Lable String。换句话说，也就是动态生成标签字符串的意思，刚刚大家也见识了它的魅力了。

Dgls源码

下面我就贴出Dgls的源码，欢迎大家指教！

(function(Global, undefined){
    function Dgls(tagName, tagAttr, single){
        this._name = tagName;
        this._attr = tagAttr;
        this._single = single;
        this._brother = [];
        this._children = [];
    }

    Dgls.extend = function(obj){
        var proto = this.prototype;
        for(name in obj){
            if((typeof proto[name] != 'function') && (typeof obj[name] == 'function')){
                proto[name] = obj[name];
            }else{
                throw 'The method of ' + name + ' has exsited!';
            }
        }
    };

    Dgls.extend({
        attr: function(key, value){
            var len = arguments.length;
            if(len == 2){
                if(value !== undefined){
                    this._attr[key] = value;
                }
            }else if(len == 1){
                var k;
                for(k in key){
                    if(key[k] !== undefined){
                        this._attr[k] = key[k];
                    }
                }
            }
            return this;
        },
        push: function(tag){
            this._children.push(tag);
            return this;
        },
        unshift: function(tag){
            this._children.unshift(tag);
            return this;
        },
        concat: function(tag){
            this._brother = this._brother.concat(tag);
            return this;
        },
        string: function(){
            var arr = [],
                tmp = [],
                arrlen = 0;
                arr[arrlen++] = '<';
                arr[arrlen++] = this._name;
            for(var key in this._attr){
                tmp[0] = ' ';
                tmp[1] = key;
                tmp[2] = '="';
                tmp[3] = this._attr[key];
                tmp[4] = '"';
                arr[arrlen++] = tmp.join('');
            }
            arr[arrlen++] = '>';
            if(!this._single){
                this._children.map(function(tag){
                    if(tag != undefined) {
                        if(tag instanceof Dgls){
                            arr[arrlen++] = tag.string();
                        }else if(typeof tag == 'string'){
                            arr[arrlen++] = tag;
                        }
                    }
                });
                arr[arrlen++] = '</';
                arr[arrlen++] = this._name;
                arr[arrlen++] = '>';
            }
            this._brother.map(function(tag){
                if(tag != undefined) {
                    if(tag instanceof Dgls){
                        arr[arrlen++] = tag.string();
                    }else if(typeof tag == 'string'){
                        arr[arrlen++] = tag;
                    }
                }
            });
            return arr.join('');
        },
        childs: function(){
            var arr = [],
                arrlen = 0;
            this._children.map(function(tag){
                if(tag != undefined) {
                    if(tag instanceof Dgls){
                        arr[arrlen++] = tag.string();
                    }else if(typeof tag == 'string'){
                        arr[arrlen++] = tag;
                    }
                }
            });
            return arr.join('');
        }
    });

    var dgls = function(tagName){
        var attrs = {},
            obj,
            i = 1;
        if(arguments[1] != 's'){
            if((arguments[1] instanceof Object) && !(arguments[1] instanceof Dgls)){
                attrs = arguments[1];
                i = 2;
            }
            obj = new Dgls(tagName, attrs, false);
        }else{
            i = 2;
            if((arguments[2] instanceof Object) && !(arguments[2] instanceof Dgls)){
                attrs = arguments[2];
                i = 3;
            }
            obj = new Dgls(tagName, attrs, true);
        }
        for(var length = arguments.length; i<length; i++){
            obj.push(arguments[i]);
        }
        return obj;
    };

    Global._ = dgls;
    Global.Dgls = Dgls;
})(window);

View Code