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

Dgls项目

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

有关Dgls的更多用法以及Dgls的扩展，请参见项目中的README。

欢迎大家来Fork!与参与。