HTMLElement muse.el(string tagName, object config) :: HTML元素构建

这算是对深表复制方法的一个很好的应用。

el : function(tagName, config){
	var _el = document.createElement(tagName)
	, defaultConfig = {
		innerHTML : 'I\'m a ' + tagName.toUpperCase() + '.',
		style : {
			width : '200px', height : '50px', backgroundColor : '#ccc'
		}, onclick : function(){
			this.innerHTML += '<hr />I\'m clicked.';
		}
	}
	muse.extend(defaultConfig, config);
	muse.extend(_el, defaultConfig);
	return _el;
}

var div = muse.el('div', {
	innerHTML : 'I\'m a DIV.',
	style : {
		width : '200px', height : '150px', backgroundColor : '#ff0', border : '1px solid #000'
	}, 
	onclick : function(){
		this.innerHTML += '<hr />I\'m clicked by a outer config.';;
	}
});
window.onload = function(){
	document.body.appendChild(div);
}
 

在配置文件中,写上dom的所有相关属性,extend会很好地把这些属性加载到dom上。

其实el在实际中要简单得多,这里是为了测试,才写了默认配置。实际应用的代码应该是:

el : function(tagName, config){
	var _el = document.createElement(tagName);
	muse.extend(_el, config);
	return _el;
}
posted @ 2010-04-05 04:18  MKing's Kindom  阅读(186)  评论(0)    收藏  举报