generator-draw/index.js

用来生成真实元素和元素转换成对象

/* 编译对象元素为真实元素 element object */
		var generator = function generator(eot) {
			/* 判读类型，不正确则抛出异常 */
			if(Object.prototype.toString.call(eot) !== '[object Object]'){ throw TypeError('parameter must be an object') }
			if(!eot.type){throw Error('Type must have a value')}
			
			/* 判读对象是否是文本节点 */
			var type = eot.type !== 'text';
			/* 根据判断结果来创建节点 */
			var element = document[type?'createElement':'createTextNode']( type ? (eot.type) : (eot.text) );
			if(type){
				/* 保存对象的描述属性 */
				var props = eot.props || {};
				/* 遍历每个属性 */
				for(var _i = 0 , _keys = Object.keys(props); _i < _keys.length; _i ++){
					/* 创建属性节点 */
					var attr = document.createAttribute(_keys[_i]);
					/* 设置属性节点内容 */
					attr.nodeValue = props[_keys[_i]];
					/* 插入到元素上 */
					element.attributes.setNamedItem(attr);
					
				}
				
				/* 读取子节点 */
				var children = eot.children || [];
				/* 是否有子节点 */
				if(children.length){
					/* 遍历子节点 */
					for(var _i = 0, _len = children.length; _i < _len; _i++){
						/* 添加到当前元素的内部 */
						(element.append || element.appendChild).call(element,generator(children[_i]));
					}
				}
			}
			
			/* 绑定事件 */
			var events = eot.events || {};
			var keys = Object.keys(events)
			/* 是否有事件 */
			if(keys.length){
				/* 遍历事件种类 */
				for(var _i = 0, _len= keys.length; _i < _len; _i++){
					var eventKey = keys[_i]
					var typeEvent = events[eventKey]
					var addEvent = element.addEventListener || function(){}
					/* 是否是多个事件函数 */
					if(typeof typeEvent === 'function'){
						addEvent.call(element,eventKey,typeEvent)
					}else{
						/* 连续邦绑定同个事件 */
						for(var _index = 0 ,_length = typeEvent.length; _index < _length; _index++){
							addEvent.call(element,eventKey,typeEvent[_index])
						}
					}
				}
			}
					
			/* 返回元素 */
			return element
		}
		
		
		/* 提取真实元素为对象元素 */
		var draw = function draw(omt) {
			/* 传递的值不是元素抛出异常 */
			if(!(omt instanceof Element)){ throw TypeError('parameter must be an element')}
			/* 返回给外部的数据 */
			var element = {
				type:null ,
				props:{} ,
				children:[],
				text:null
			};
			/* 添加元素的标签名 */
			element.type = (omt.tagName||omt.nodeName).toLowerCase();
			/* 添加元素的属性 */
			var attributes = omt.attributes;
			/* 遍历元素上的属性 */
			for(var _i = 0, _len = attributes.length; _i < _len ; _i++ ){
				/* 保存单个属性 */
				var attr = attributes[_i];
				/* 赋给对象 */
				element.props[ attr.name || attr.nodeName ] = attr.value || attr.nodeValue;
			}
			/* 获取传入元素的子节点 */
			var childNodes = omt.childNodes
			/* 遍历每一个节点包括文本节点 */
			for(var _i =0, _len = childNodes.length; _i < _len; _i++){
				var chid = childNodes[_i]
				/* 文本节点没有子节点，不需要深入 */
				if(typeof chid.data === 'string'){
					/* 判断是否是空文本，否则不需要添加到对象里 */
					if(!!chid.data.trim()){
						/* 保存到对象的childre里 */
						element.children.push({
							type:chid.nodeName.slice(1),
							text:chid.data
						})
					}
				}else{
					/* 递归挖掘内部标签 */
					element.children.push(draw(chid))
				}
				
			}
			/* 返回元素对象 */
			return element;
		}


export default { generator , draw }