关于动态html/dom创建的过程
用过jquery的都知道下面这种用法:
make: function(tagName, attributes, content) { var el = document.createElement(tagName); if (attributes) $(el).attr(attributes); if (content) $(el).html(content); return el; },
这段代码是backbones.js View对象的方法,就是为了方便创建一个document element,以对象实行返回。
我在编程实践中弄了一个自己觉得蛮好用的一个类,对于创建dom对象很方便,尤其是有属性继承情况的。
先贴代码:
/**
* Begin class defination XHtml : Html Dom生成辅助类 */ var XHtml = Base.extend({ constructor : null, dump : '' // 避免,结尾,在IE浏览器中语义错误 },{ createFn : function(tag, attr){ return (function(tagIn, attrIn){ return function(text, attr){ attr = attr || {}; if(attrIn) $.extend(attr, attrIn); var attrStr = ''; for(key in attr) attrStr += key + '="' + attr[key] + '" '; return '<{0} {1}>{2}</{0}>'.format(tagIn, attrStr, text || ''); } })(tag, attr); }, input : function(val, attr){ val = val || ''; var attrStr = ''; if(attr){ for(key in attr) attrStr += key + '="' + attr[key] + '" '; } return '<input value="{0}" {1} />'.format(val, attrStr); }, sel : function(ll, val, attr, canBlank){ var attrStr = ''; if(attr){ for(key in attr) attrStr += key + '="' + attr[key] + '" '; } var rr = '<select {0}>'.format(attrStr); var tpl = '<option value="{0}" {2} title="{1}">{1}</option>'; var defaultLabel = '-请选择-'; if(canBlank){ rr += tpl.format('', defaultLabel, ''); } val = val || ''; var optionStr = $(ll).map(function(){ return tpl.format(this['code'], this['name'], val == this['code'] ? 'selected' : ''); }).get().join(''); return (rr + '{0}</select>').format(optionStr); }, dump : '' // 避免,结尾,在IE浏览器中语义错误 }); $.extend(XHtml, { createInput : function(attr){ return function(val, attrIn){ attrIn = attrIn || {}; if(attr) $.extend(attrIn, attr); return XHtml.input(val, attrIn); }; }, td : XHtml.createFn('td'), tr : XHtml.createFn('tr'), alink : function(txt, url, attr){ var alinkIn = XHtml.createFn('a'); attr = attr || {}; attr.href = url; return alinkIn(txt, attr); }, trJoin : function(attr){ var arg = []; for (var i = 0; i < arguments.length; i++){ if(typeof arguments[i] == 'string') arg.push(arguments[i]); } return XHtml.tr(arg.join(''), typeof attr == 'string' ? null : attr); } }); $.extend(XHtml, { radio: function(name, ll, pender, keyName, keyVal, isFirstChecked, multiple){ pender = pender || ' '; keyName = keyName || 'name'; keyVal = keyVal || 'val'; var fnRadio = XHtml.createInput({type: multiple ? 'checkbox' : 'radio', name: name}); return _.map(ll, function(item, i){ if(isFirstChecked && i == 0) return fnRadio(item[keyVal], {checked: 'true'}) + pender + item[keyName]; else return fnRadio(item[keyVal]) + pender + item[keyName]; }).join(pender); } });
思路只是简单的拼接字符串,并不是dom对象的创建和操作。
根据具体需求,可以在此基础上再封装一层,业务相关的所为所为控件的视图部分。
还比较好用。
比如创建一个table就可以以下面方式:
with(XHtml){ var fnTable = createFn('table', {class: 'table1'}); var tpl = fnTable( trJoin( td(input('A')), td(radio('testRadio', [{name: '男', val: 'M'}])), td(sel([{name: '男', val: 'M'}], null, {name: 'testSelect'})), td('')) ); $('#wrap').html(tpl); }
很有Groovy HtmlBuilder的feel啊,有些模板引擎(ruby)之类的就是这样风格,其实javascript一样可以做到的
相关推荐
luvhl 2020-08-17
liaoxuewu 2020-07-08
liaoxuewu 2020-06-26
北京老苏 2020-06-25
Lophole 2020-06-14
SIMONDOMAIN 2020-06-14
luvhl 2020-06-13
SIMONDOMAIN 2020-05-31
hyMiss 2020-05-19
liaoxuewu 2020-05-19
书虫媛 2020-05-15
liaoxuewu 2020-05-11
liaoxuewu 2020-05-10
小仙儿 2020-05-09
hyMiss 2020-05-01
liaoxuewu 2020-04-29
星星有所不知 2020-10-12