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!与参与。