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);

Dgls項目

項目地址：https://github.com/ysyfff/Dgls

有關Dgls的更多用法以及Dgls的擴展，請參見項目中的README。

歡迎大家來Fork!與參與。