@joyzl/eno 1.1.6 → 1.2.1

package/index.js

@@ -1,6 +1,5 @@
-// HTML5 Node Element
-// Easy Node Object
 // 提供HTML标签元素处理与数据对象之间的互操作支持。
+// 用于简化 HTMLElement 与 JS JSON/Object 之间的互操作。
 
 export default {
 	create,
@@ -14,74 +13,95 @@ export default {
 	hide,
 	toggle,
 
+	get,
 	gets,
+	set,
 	sets,
 
 	bind,
 	entity,
-	action,
 	element,
 
 	query
 }
 
 // 这个临时标签用于解析HTML字符串
-const TEMP = document.createElement("div");
+const TEMPLATE = document.createElement("template");
 
 /**
  * HTML字符串创建标签元素实例
- * @param {String} html HTML字符串
- * @return {Element} 创建的单个/多个标签元素
+ * @example eno.create(html);
+ * @param {String|HTMLElement} html 要创建为标签元素实例的HTML字符串
+ * @return {HTMLElement|HTMLElement[]|null} 创建的单个或多个标签元素
  */
 function create(html) {
-	// 创建元素
-	TEMP.innerHTML = html;
-	let element;
-	if (TEMP.childElementCount == 1) {
-		element = TEMP.children[0];
-		element.remove();
-	} else
-	if (TEMP.childElementCount > 1) {
-		element = new Array();
-		do {
-			element.push(TEMP.children[0]);
-			TEMP.children[0].remove();
-		} while (TEMP.childElementCount > 0);
-	}
-	return element;
-
 	// DocumentFragment
+	// 插入文档即便多个标签也仅触发一次重渲染
+	// 插入后实例为空集合
+	// Element.innerHTML
+
+	if (html) {
+		if (html.trim) {
+			// 创建新元素
+			TEMPLATE.innerHTML = html;
+			if (TEMPLATE.content.childElementCount == 1) {
+				return TEMPLATE.content.firstElementChild;
+			} else
+			if (TEMPLATE.content.childElementCount > 1) {
+				return Array.from(TEMPLATE.content.children);
+			}
+		} else
+		if (html.tagName) {
+			// 已为元素实例
+			// 添加到临时集合以便渲染
+			TEMPLATE.innerHTML = "";
+			TEMPLATE.appendChild(html);
+			return html;
+		} else
+		if (html instanceof DocumentFragment) {
+			// 已为元素实例
+			// 添加到临时集合以便渲染
+			TEMPLATE.innerHTML = "";
+			TEMPLATE.appendChild(html);
+			return Array.from(TEMPLATE.content.children);
+		}
+	}
+	return null;
 }
 
 /**
  * 创建并添加标签元素
- * @param {Element} element 标签元素
- * @param {String} html HTML字符串
- * @return {Element} 创建的单个/多个标签元素
+ * @param {HTMLElement} element 父标签元素
+ * @param {String} selector 选择器字符串
+ * @param {HTMLElement|String} html 要添加的标签元素实例或HTML字符串
+ * @return {HTMLElement|HTMLElement[]|null} 创建的单个/多个标签元素/null
+ * @example eno.append(html); //添加到文档尾部
+ * @example eno.append(element,html); // 添加到指定标签尾部
+ * @example eno.append(element,selector,html); // 添加到指定标签中匹配选择器的标签尾部
  */
-function append(element, html) {
+function append(element, selector, html) {
 	if (arguments.length == 1) {
 		// append(html);
-		html = element;
+		html = create(element);
 		element = document.body;
 	} else
 	if (arguments.length == 2) {
+		// append(element,selector); 无效
 		// append(element,html);
+		// append(selector,html);
 		element = select(element);
+		html = create(selector);
+	} else
+	if (arguments.length == 3) {
+		// append(element,selector,html)
+		element = select(element, selector);
+		html = create(html);
 	} else {
 		return null;
 	}
-	if (element) {
-		if (html.trim) {
-			html = create(html);
-		}
-		if (Array.isArray(html)) {
-			for (let i = 0; i < html.length; i++) {
-				element.appendChild(html[i]);
-			}
-		} else {
-			element.appendChild(html);
-		}
+
+	if (element && html) {
+		element.appendChild(TEMPLATE.content);
 		return html;
 	}
 	return null;
@@ -89,673 +109,760 @@ function append(element, html) {
 
 /**
  * 创建并替换为标签元素
- * @param {Element} element 标签元素
- * @param {String} html HTML字符串
- * @return {Element} 创建的单个/多个标签元素
+ * @param {HTMLElement} element 目标标签元素
+ * @param {String} selector 选择器字符串
+ * @param {HTMLElement|String} html 用于替换的标签元素或HTML字符串
+ * @return {HTMLElement|HTMLElement[]|null} 创建的单个/多个标签元素/null
+ * @example eno.replace(element,html);
+ * @example eno.replace(element,selector,html);
  */
-function replace(element, html) {
+function replace(element, selector, html) {
 	if (arguments.length == 2) {
+		// replace(element,html);
+		// replace(selector,html);
 		element = select(element);
+		html = create(selector);
+	} else
+	if (arguments.length == 3) {
+		// replace(element,selector,html);
+		element = select(element, selector);
+		html = create(html);
 	} else {
 		return null;
 	}
-	if (element) {
-		if (html.trim) {
-			html = create(html);
-		}
-		if (element.parentElement) {
-			if (Array.isArray(html)) {
-				let item;
-				for (let i = 0; i < html.length; i++) {
-					item = html[i];
-					if (element.className) {
-						item.className += " " + element.className;
-					}
-					if (element.style.cssText) {
-						item.style.cssText += element.style.cssText;
-					}
-				}
-				element.replaceWith(html);
-			} else {
-				if (element.className) {
-					html.className += " " + element.className;
-				}
+
+	if (element && html) {
+		// 转移属性
+		if (Array.isArray(html)) {
+			for (let i = 0; i < html.length; i++) {
+				// TODO 需要测试验证
+				html[i].classList.add(element.classList);
 				if (element.style.cssText) {
-					html.style.cssText += element.style.cssText;
+					html[i].style.cssText += element.style.cssText;
 				}
-				element.parentElement.replaceChild(html, element);
+			}
+		} else {
+			// TODO 需要测试验证
+			html.classList.add(element.classList);
+			if (element.style.cssText) {
+				html.style.cssText += element.style.cssText;
 			}
 		}
+		element.replaceWith(TEMPLATE.content);
 		return html;
 	}
 	return null;
 }
 
 /**
- * 在指定范围内/整个文档查找
- * @param {Element} element 标签元素
- * @param {String} selector 筛选字符
- * @return {Element} 匹配的单个标签元素
+ * 在指定范围内/整个文档查找标签元素
+ * @example eno.select(selector);
+ * @example eno.select(element,selector);
+ * @param {HTMLElement} element 要在其中查找的父标签元素
+ * @param {String} selector 选择器字符串
+ * @return {HTMLElement|null} 匹配的单个标签元素，如果匹配多个仅返回第一个
  */
 function select(element, selector) {
 	if (arguments.length == 1) {
 		// 仅指定1个参数
-		// select(element/selector);
+		// select(element);
+		// select(selector);
+		if (element.tagName) {
+			return element;
+		} else
 		if (element.trim) {
-			element = document.querySelectorAll(element);
-			if (element.length == 0) {
-				return null;
-			}
-			if (element.length == 1) {
-				return element[0];
-			}
-			return Array.from(element);
+			return document.querySelector(element);
 		} else
-		if (element.nodeType) {
-			return element;
+		if (element.length) {
+			// NodeList,HTMLCollection
+			return element[0];
 		}
 	} else
 	if (arguments.length == 2) {
 		// 指定了2个参数
 		// select(element, selector);
-		if (element.trim) {
-			element = document.querySelectorAll(element);
-			if (element.length == 0) {
-				return null;
-			}
-		} else
-		if (element.nodeType) {
-			element = element.querySelectorAll(selector);
-			if (element.length == 0) {
-				return null;
-			}
-			if (element.length == 1) {
-				return element[0];
-			}
-			return Array.from(element);
+		if (element.tagName) {
+			return element.querySelector(selector);
 		} else
-		if (Array.isArray(element)) {
-			if (element.length == 0) {
-				return null;
-			}
-		}
-		// element[]
-		let nodes, items = new Array();
-		for (let i = 0; i < element.length; i++) {
-			nodes = element[i].querySelectorAll(selector);
-			for (let n = 0; n < nodes.length; n++) {
-				items.push(nodes[n]);
+		if (element.trim) {
+			element = document.querySelector(element);
+			if (element) {
+				return element.querySelector(selector);
 			}
 		}
-		if (items.length == 0) {
-			return null;
-		}
-		if (items.length == 1) {
-			return items[0];
-		}
-		return items;
+		// 不支持element参数为数组或集合
+		// 应用场景极少且让程序难以理解
 	}
+	return null;
 }
 
 /**
- * 在指定范围内/整个文档查找
- * @param {Element} element 标签元素
- * @param {String} selector 筛选字符
- * @return {[Element]} 匹配的多个标签元素
+ * 在指定范围内/整个文档查找标签元素
+ * @example eno.selects(selector);
+ * @example eno.selects(element,selector);
+ * @param {HTMLElement} element 要在其中查找的父标签元素
+ * @param {String} selector 选择器字符串
+ * @return {HTMLElement[]|null} 匹配的多个标签元素，仅匹配一个也返回数组
  */
 function selects(element, selector) {
 	if (arguments.length == 1) {
 		// 仅指定1个参数
-		// selects(element/selector);
+		// selects(selector);
+		if (element.tagName) {
+			// 仅提供元素参数
+			return [element];
+		} else
 		if (element.trim) {
 			// 仅提供字符串参数
 			element = document.querySelectorAll(element);
-			if (element.length == 0) {
-				return null;
+			if (element.length > 0) {
+				return Array.from(element);
 			}
-			return Array.from(element);
 		} else
-		if (element.nodeType) {
-			// 仅提供元素参数
-			return [element];
+		if (element.length) {
+			// NodeList,HTMLCollection
+			return Array.from(element);
 		}
 	} else
 	if (arguments.length == 2) {
 		// 指定了2个参数
 		// select(element, selector);
-		if (element.trim) {
-			element = document.querySelectorAll(element);
-			if (element.length == 0) {
-				return null;
-			}
-		} else
-		if (element.nodeType) {
+		if (element.tagName) {
 			element = element.querySelectorAll(selector);
-			if (element.length == 0) {
-				return null;
+			if (element.length > 0) {
+				return Array.from(element);
 			}
-			return Array.from(element);
 		} else
-		if (Array.isArray(element)) {
-			if (element.length == 0) {
-				return null;
-			}
-			// element[]
-			let nodes, items = new Array();
-			for (let i = 0; i < element.length; i++) {
-				nodes = element[i].querySelectorAll(selector);
-				for (let n = 0; n < nodes.length; n++) {
-					items.push(nodes[n]);
+		if (element.trim) {
+			element = document.querySelector(element);
+			if (element) {
+				element = element.querySelectorAll(selector);
+				if (element.length > 0) {
+					return Array.from(element);
 				}
 			}
-			if (items.length == 0) {
-				return null;
-			}
-			return items;
 		}
+		// 不支持element参数为数组或集合
+		// 应用场景极少且让程序难以理解
 	}
+	return null;
 }
 
 /**
- * 从文档移除
- * @param {Element} element 标签元素
- * @param {String} selector 筛选字符
- * @return {Element} 移除的单个/多个标签元素
+ * 从文档移除标签元素
+ * @param {HTMLElement} element 要在其中查找的父标签元素
+ * @param {String} selector 选择器字符串
  */
 function remove(element, selector) {
 	if (arguments.length == 1) {
-		element = select(element);
+		element = selects(element);
 	} else
 	if (arguments.length == 2) {
-		element = select(element, selector);
+		element = selects(element, selector);
 	} else {
 		return;
 	}
-	if (element) {
-		if (Array.isArray(element)) {
-			for (let i = 0; i < element.length; i++) {
-				element[i].remove();
-			}
-		} else {
-			element.remove();
+
+	if (element && element.length) {
+		for (let i = 0; i < element.length; i++) {
+			element[i].remove();
 		}
 	}
-	return element;
 }
 
 /**
- * 隐藏单个/多个元素
- * @param {Element} element 标签元素
- * @param {String} selector 筛选字符
- * @return {Element} 隐藏的单个/多个标签元素
+ * 隐藏标签元素
+ * @param {HTMLElement} element 要在其中查找的父标签元素
+ * @param {String} selector 选择器字符串
  */
 function hide(element, selector) {
 	if (arguments.length == 1) {
-		element = select(element);
+		element = selects(element);
 	} else
 	if (arguments.length == 2) {
-		element = select(element, selector);
+		element = selects(element, selector);
 	} else {
 		return;
 	}
-	if (element) {
-		if (Array.isArray(element)) {
-			let e;
-			for (let i = 0; i < element.length; i++) {
-				e = element[i];
-				if (e.hidden) {} else {
-					e.hidden = true;
-					e.__DISPLAY = e.style.display
-					e.style.display = "none";
-				}
-			}
-		} else {
-			if (element.hidden) {} else {
-				element.hidden = true;
-				element.__DISPLAY = element.style.display;
-				// display:flex 导致 hidden 属性失效而不会隐藏
-				element.style.display = "none";
-			}
+
+	if (element && element.length) {
+		for (let i = 0; i < element.length; i++) {
+			hideElement(element[i]);
 		}
 	}
-	return element;
 }
 
 /**
- * 显示单个/多个元素
- * @param {Element} element 标签元素
- * @param {String} selector 筛选字符
- * @return {Element} 显示的单个/多个标签元素
+ * 显示标签元素
+ * @param {HTMLElement} element 要在其中查找的父标签元素
+ * @param {String} selector 选择器字符串
  */
 function show(element, selector) {
 	if (arguments.length == 1) {
-		element = select(element);
+		element = selects(element);
 	} else
 	if (arguments.length == 2) {
-		element = select(element, selector);
+		element = selects(element, selector);
 	} else {
 		return;
 	}
-	if (element) {
-		if (Array.isArray(element)) {
-			let e;
-			for (let i = 0; i < element.length; i++) {
-				e = element[i];
-				if (e.hidden) {
-					e.hidden = false;
-					e.style.display = e.__DISPLAY;
-				}
-			}
-		} else
-		if (element.hidden) {
-			element.hidden = false;
-			element.style.display = element.__DISPLAY;
+
+	if (element && element.length) {
+		for (let i = 0; i < element.length; i++) {
+			showElement(element[i]);
+		}
+	}
+}
+
+function hideElement(element) {
+	if (element.hidden) {
+		if (element.__ENO_DISPLAY !== undefined) {
+			return;
+		}
+	} else {
+		element.hidden = true;
+	}
+	// display:flex 导致 hidden 属性失效而不会隐藏
+	element.__ENO_DISPLAY = element.style.display;
+	element.style.display = "none";
+}
+
+function showElement(element) {
+	if (element.hidden) {
+		element.hidden = false;
+		if (element.__ENO_DISPLAY !== undefined) {
+			element.style.display = element.__ENO_DISPLAY;
 		}
 	}
-	return element;
 }
 
 /**
  * 切换指定元素显示，同级其余元素隐藏；
- * 如果指定样式类名，则当前原始添加样式类，其余元素移除样式类
- * @param {Element} element 标签元素
- * @param {String} selector 筛选字符
- * @param {String} applyClass 添加类名称，必须同时提供otherClass参数
- * @param {String} otherClass 移除类名称，必须同时提供applyClass参数
- * @return {Element} 显示的单个/多个标签元素
+ * 如果指定样式类名，则当前元素添加样式类，其余元素移除样式类，样式类名区分大小写
+ * @param {HTMLElement} element 要在其中查找的父标签元素
+ * @param {String} selector 选择器字符串
+ * @param {String} applyClass 添加类名称，必须同时提供otherClass参数，可指定""/null表示无具体类名
+ * @param {String} otherClass 移除类名称，必须同时提供applyClass参数，可指定""/null表示无具体类名
+ * @return {HTMLElement|HTMLElement[]|null} 显示的单个/多个标签元素
  */
 function toggle(element, selector, applyClass, otherClass) {
 	if (arguments.length == 1) {
 		// toggle(element)
-		element = select(element);
+		element = selects(element);
+		if (element) {
+			toggleElements(element);
+			return element;
+		}
 	} else
 	if (arguments.length == 2) {
 		// toggle(element,selector)
-		element = select(element, selector);
+		// toggle(element,applyClass) 无效
+		element = selects(element, selector);
+		if (element) {
+			toggleElements(element);
+			return element;
+		}
 	} else
 	if (arguments.length == 3) {
+		// toggle(element,selector,applyClass) 无效
 		// toggle(element,applyClass,otherClass)
-		element = select(element);
-		otherClass = applyClass;
-		applyClass = selector;
+		element = selects(element);
+		if (element) {
+			toggleClasses(element, selector, applyClass);
+			return element;
+		}
 	} else
 	if (arguments.length == 4) {
 		// toggle(element,selector,applyClass,otherClass)
-		element = select(element, selector);
-	} else {
-		return;
+		element = selects(element, selector);
+		if (element) {
+			toggleClasses(element, applyClass, otherClass);
+			return element;
+		}
 	}
-	if (element) {
-		const parent = element.parentElement;
-		if (applyClass) {
-			for (let i = 0; i < parent.children.length; i++) {
-				if (element == parent.children[i]) {
-					parent.children[i].classList.remove(otherClass);
-					parent.children[i].classList.add(applyClass);
-				} else {
-					parent.children[i].classList.remove(applyClass);
-					parent.children[i].classList.add(otherClass);
+	return null;
+}
+
+function toggleElement(element) {
+	const parent = element.parentElement;
+	for (let i = 0; i < parent.children.length; i++) {
+		if (element !== parent.children[i]) {
+			hideElement(parent.children[i]);
+		}
+	}
+	showElement(element);
+}
+
+function toggleElements(elements) {
+	// 这些元素可能不在同级
+	let element, parent, i;
+	for (let e = 0; e < elements.length; e++) {
+		element = elements[e];
+		if (element.parentElement !== parent) {
+			parent = element.parentElement;
+			for (i = 0; i < parent.children.length; i++) {
+				if (element !== parent.children[i]) {
+					hideElement(parent.children[i]);
 				}
 			}
-		} else {
-			for (let i = 0; i < parent.children.length; i++) {
-				if (element == parent.children[i]) {
-					show(parent.children[i]);
-				} else {
-					hide(parent.children[i]);
+		}
+		showElement(element);
+	}
+}
+
+function toggleClass(element, apply, other) {
+	const parent = element.parentElement;
+	for (let i = 0; i < parent.children.length; i++) {
+		if (element !== parent.children[i]) {
+			parent.children[i].classList.remove(apply);
+			parent.children[i].classList.add(other);
+		}
+	}
+	element.classList.remove(other);
+	element.classList.add(apply);
+}
+
+function toggleClasses(elements, apply, other) {
+	// 这些元素可能不在同级
+	let element, parent, i;
+	for (let e = 0; e < elements.length; e++) {
+		element = elements[e];
+		if (element.parentElement !== parent) {
+			parent = element.parentElement;
+			for (i = 0; i < parent.children.length; i++) {
+				if (element !== parent.children[i]) {
+					parent.children[i].classList.remove(apply);
+					parent.children[i].classList.add(other);
 				}
 			}
 		}
+		element.classList.remove(other);
+		element.classList.add(apply);
 	}
-	return element;
 }
 
 // 默认转换函数
-function defaultConverter(element, parameter, name) {}
+function defaultConverter(element, entity, name) {}
 
 /**
- * 从指定元素获取值以JSON对象返回{name:value}
- * @param {Element} element 标签元素
- * @param {String} selector 筛选字符
- * @param {Function} converter 转换
- * @return {Object} {name1:value1,name2:value2,...}
+ * 从指定元素获取值以实体对象返回
+ * @param {HTMLElement} element 要在其中查找的父标签元素
+ * @param {String} selector 选择器字符串
+ * @param {Function} converter 转换方法
+ * @return {Object} 包含数据的实体对象实例
+ */
+function get(element, selector, converter = defaultConverter) {
+	if (arguments.length == 1) {
+		// get(element)
+		// get(selector)
+		element = select(element);
+	} else
+	if (arguments.length == 2) {
+		// get(element,selector)
+		// get(element,converter)
+		if (selector instanceof Function) {
+			element = select(element);
+			converter = selector;
+		} else {
+			element = select(element, selector);
+		}
+	} else
+	if (arguments.length == 3) {
+		// get(element,selector,converter)
+		element = select(element, selector);
+	} else {
+		return null;
+	}
+
+	if (element) {
+		let entity = {};
+		getEntity(element, entity, converter);
+		return entity;
+	}
+	return null;
+}
+
+/**
+ * 从指定元素获取值以JSON对象返回
+ * @param {HTMLElement} element 要在其中查找的父标签元素
+ * @param {String} selector 选择器字符串
+ * @param {Function} converter 转换方法
+ * @return {Object[]} 包含数据的实体对象实例
  */
 function gets(element, selector, converter = defaultConverter) {
 	if (arguments.length == 1) {
 		// gets(element)
 		// gets(selector)
-		element = select(element);
+		element = selects(element);
 	} else
 	if (arguments.length == 2) {
 		// gets(element,selector)
 		// gets(element,converter)
-		if (selector.trim) {
-			element = select(element, selector);
-		} else {
-			element = select(element);
+		if (selector instanceof Function) {
+			element = selects(element);
 			converter = selector;
+		} else {
+			element = selects(element, selector);
 		}
 	} else
 	if (arguments.length == 3) {
 		// gets(element,selector,converter)
-		element = select(element, selector);
+		element = selects(element, selector);
 	} else {
-		return;
+		return null;
 	}
+
 	if (element) {
-		if (Array.isArray(element)) {
-			let parameter = {},
-				parameters = new Array();
-			for (let i = 0; i < element.length; i++) {
-				get(element[i], parameter, converter);
-				if (Object.keys(parameter).length) {
-					parameters.push(parameter);
-					parameter = {};
-				}
-			}
-			return parameters;
-		} else {
-			let parameter = {};
-			get(element, parameter, converter);
-			return parameter;
+		let entity, entities = new Array();
+		for (let i = 0; i < element.length; i++) {
+			entity = {};
+			getEntity(element[i], entity, converter);
+			entities.push(entity);
 		}
+		return entities;
 	}
+	return null;
 }
 
 /**
- * 从指定JSON对象设置元素值，以name属性作为标识
- * @param {Element} element 标签元素
- * @param {String} selector 筛选字符
- * @param {Object} parameter 数据对象
- * @param {Function} converter 数据转换
- * @return {Element} 设置的单个/多个标签元素
+ * 实体对象设置到标签元素显示，以name属性作为标识
+ * @param {HTMLElement} element 要在其中查找的父标签元素
+ * @param {String} selector 选择器字符串
+ * @param {Object} entity 数据实体对象
+ * @param {Function} converter 数据转换方法
+ * @return {HTMLElement} 设置或创建的标签元素
  */
-function sets(element, selector, parameter, converter = defaultConverter) {
+function set(element, selector, entity, converter = defaultConverter) {
+	// 仅对单个标签元素目标
+	// 多个标签元素目标难以理解
+
 	if (arguments.length == 2) {
-		// sets(element,parameter)
-		// sets(selector,parameter)
+		// set(element,entity)
+		// set(selector,entity)
 		element = select(element);
-		parameter = selector;
+		entity = selector;
 	} else
 	if (arguments.length == 3) {
-		// sets(element,selector,parameter)
-		// sets(element,parameter,converter)
-		if (selector.trim) {
-			element = select(element, selector);
+		// set(element,selector,entity)
+		// set(element,entity,converter)
+		if (entity instanceof Function) {
+			element = select(element);
+			converter = entity;
+			entity = selector;
 		} else {
+			element = select(element, selector);
+		}
+	} else
+	if (arguments.length == 4) {
+		// set(element,selector,entity,converter)
+		element = select(element, selector);
+	} else {
+		return null;
+	}
+
+	if (element) {
+		// Object -> Element
+		if (Array.isArray(entity)) {
+			entity = entity[0];
+		}
+
+		setEntity(element, entity, converter);
+		element.__ENO_ENTITY = entity;
+		return element;
+	}
+}
+
+/**
+ * 实体对象设置到标签元素显示，以name属性作为标识
+ * @param {HTMLElement} element 要在其中查找的父标签元素
+ * @param {String} selector 选择器字符串
+ * @param {Object} entity 数据实体对象
+ * @param {Function} converter 数据转换方法
+ * @return {HTMLElement} 设置或创建的标签元素
+ */
+function sets(element, selector, entity, converter = defaultConverter) {
+	// 仅对单个标签元素目标
+	// 多个标签元素目标难以理解
+	// entity为数组时返回数组
+
+	if (arguments.length == 2) {
+		// sets(element,entity)
+		// sets(selector,entity)
+		element = select(element);
+		entity = selector;
+	} else
+	if (arguments.length == 3) {
+		// sets(element,selector,entity)
+		// sets(element,entity,converter)
+		if (entity instanceof Function) {
 			element = select(element);
-			converter = parameter;
-			parameter = selector;
+			converter = entity;
+			entity = selector;
+		} else {
+			element = select(element, selector);
 		}
 	} else
 	if (arguments.length == 4) {
-		// sets(element,selector,parameter,converter)
+		// sets(element,selector,entity,converter)
 		element = select(element, selector);
 	} else {
-		return;
+		return null;
 	}
+
 	if (element) {
-		if (parameter) {
-			if (Array.isArray(parameter)) {
-				// Object[] -> Element.children
-				let i = 0;
-				// 利用ENO_SET记录并判定是否首次
-				if (element.__ENO_SETS) {} else {
-					element.__ENO_SETS = {};
-					// before...<template>...after
-					// 只有<template>模板具有content属性
-					// 记录模板前后已有标签元素数量
-					// before数量包括模板本身
-					for (; i < element.childElementCount; i++) {
-						if (element.children[i].content) {
-							element.__ENO_SETS.template = element.children[i];
-							element.__ENO_SETS.before = ++i;
-							element.__ENO_SETS.after = element.childElementCount - i;
-							break;
-						}
+		// Object[] -> Element.children
+		let i = 0;
+		// 利用ENO_SET缓存模板并判定是否首次
+		if (element.__ENO_SETS === undefined) {
+			if (element.childElementCount) {
+				element.__ENO_SETS = {};
+				// 查找模块和位置
+				// before...<template>...after
+				// 只有<template>模板具有content属性
+				// 记录模板前后已有标签元素数量
+				// before数量包括模板本身
+				for (i = 0; i < element.childElementCount; i++) {
+					if (element.children[i].content) {
+						element.__ENO_SETS.fragment = element.children[i].content;
+						element.__ENO_SETS.before = ++i;
+						element.__ENO_SETS.after = element.childElementCount - i;
+						break;
 					}
 				}
-
-				if (element.__ENO_SETS.template) {
-					// 已定义模板
-					if (parameter.length) {
-						let node, n;
-						// 构造填充元素
-						for (i = 0; i < parameter.length; i++) {
-							if (element.__ENO_SETS.before + i < element.childElementCount - element.__ENO_SETS.after) {
-								// 重用已有元素
-								for (n = 0; n < element.__ENO_SETS.template.content.childElementCount; n++) {
-									node = element.children[element.__ENO_SETS.before + i + n];
-									set(node, parameter[i], converter);
-									node.userData = parameter[i];
-								}
-							} else {
-								// 克隆新的元素(DocumentFragment)
-								// node = element.template.content.cloneNode(true);
-								node = document.importNode(element.__ENO_SETS.template.content, true);
-								for (n = 0; n < node.childElementCount; n++) {
-									set(node.children.item(n), parameter[i], converter);
-									node.children.item(n).userData = parameter[i];
-								}
-								element.insertBefore(node, element.children[element.__ENO_SETS.before + i * node.childElementCount]);
-							}
-						}
-						// 移除多余元素
-						n = i * element.__ENO_SETS.template.content.childElementCount;
-						i = element.__ENO_SETS.before + element.__ENO_SETS.after;
-						while (element.childElementCount > i + n) {
-							element.children[element.__ENO_SETS.before + n].remove();
-						}
-						return element;
-					} else {
-						// 移除多余元素
-						i = element.__ENO_SETS.before + element.__ENO_SETS.after;
-						while (element.childElementCount > i) {
-							element.children[element.childElementCount - element.__ENO_SETS.after - 1].remove();
-						}
-						return element;
-					}
-				} else {
-					// 未使用模板
-					if (parameter.length) {
-						let node;
-						// 构造填充元素
-						for (i = 0; i < parameter.length; i++) {
-							if (i < element.childElementCount) {
-								// 重用已有元素
-								node = element.children[i];
-							} else if (node) {
-								// 克隆新的元素
-								node = element.appendChild(node.cloneNode(true));
-							} else {
-								// 干不了
-								// 此情形出现于没有任何子标签元素
-								continue;
-							}
-							set(node, parameter[i], converter);
-							node.userData = parameter[i];
-							node.hidden = false;
-						}
-						// 移除多余元素
-						while (element.childElementCount > i) {
-							element.children[i].remove();
-						}
-						return element;
-					} else {
-						// 移除多余元素，保留模板
-						element.children[0].userData = null;
-						element.children[0].hidden = true;
-						while (element.childElementCount > 1) {
-							element.children[1].remove();
-						}
-						return element;
+				// 未定义模板<template>
+				// 子元素视为模板
+				if (element.__ENO_SETS.fragment === undefined) {
+					element.__ENO_SETS.fragment = new DocumentFragment();
+					while (element.childElementCount > 0) {
+						element.__ENO_SETS.fragment.appendChild(element.children[0]);
 					}
+					element.__ENO_SETS.before = 0;
+					element.__ENO_SETS.after = 0;
 				}
 			} else {
-				// Object -> Element
-				if (Array.isArray(element)) {
-					for (let i = 0; i < element.length; i++) {
-						set(element[i], parameter, converter);
-						element[i].userData = parameter;
+				// 没有可用模板
+				return null;
+			}
+		}
+		if (entity) {
+			if (!Array.isArray(entity)) {
+				entity = [entity];
+			}
+
+			let node, n;
+			// 构造填充元素
+			for (i = 0; i < entity.length; i++) {
+				if (element.__ENO_SETS.before + i < element.childElementCount - element.__ENO_SETS.after) {
+					// 重用已有元素
+					for (n = 0; n < element.__ENO_SETS.fragment.childElementCount; n++) {
+						node = element.children[element.__ENO_SETS.before + i + n];
+						setEntity(node, entity[i], converter);
+						node.__ENO_ENTITY = entity[i];
 					}
 				} else {
-					set(element, parameter, converter);
-					element.userData = parameter;
+					// 克隆新的元素(DocumentFragment)
+					node = element.__ENO_SETS.fragment.cloneNode(true);
+					for (n = 0; n < node.childElementCount; n++) {
+						setEntity(node.children[n], entity[i], converter);
+						node.children[n].__ENO_ENTITY = entity[i];
+					}
+					element.insertBefore(node, element.children[element.__ENO_SETS.before + i * node.childElementCount]);
 				}
-				return element;
+			}
+			// 移除多余元素
+			n = i * element.__ENO_SETS.fragment.childElementCount;
+			i = element.__ENO_SETS.before + element.__ENO_SETS.after;
+			while (element.childElementCount > i + n) {
+				element.children[element.__ENO_SETS.before + n].remove();
 			}
 		} else {
 			// null / undefine -> Element
-			if (element.__ENO_SETS) {
-				if (element.__ENO_SETS.template) {
-					const i = element.__ENO_SETS.before + element.__ENO_SETS.after;
-					while (element.childElementCount > i) {
-						element.children[element.childElementCount - element.__ENO_SETS.after - 1].remove();
-					}
-				} else {
-					element.children[0].userData = null;
-					element.children[0].hidden = true;
-					while (element.childElementCount > 1) {
-						element.children[1].remove();
-					}
-				}
-			} else {
-				if (Array.isArray(element)) {
-					for (let i = 0; i < element.length; i++) {
-						set(element[i], null, converter);
-						element[i].userData = null;
-					}
-				} else {
-					set(element, null, converter);
-					element.userData = null;
-				}
+			i = element.__ENO_SETS.before + element.__ENO_SETS.after;
+			while (element.childElementCount > i) {
+				element.children[element.childElementCount - element.__ENO_SETS.after - 1].remove();
 			}
-			return element;
 		}
+		return element;
 	}
 }
 
 /**
- * 获取元素值
+ * 获取实体从标签元素
  * <input name="AAA" value="123"/>
  * <span name="AAA">123</span>
  * <img name="AAA" src="123"/>
  * <i case="AAA"></i>
  */
-function get(element, parameter, converter) {
+function getEntity(element, entity, converter) {
 	let name = element.getAttribute("case");
 	if (name && name.length) {
-		converter(element, parameter, name);
+		converter(element, entity, name);
 	}
 	name = element.getAttribute("name");
 	if (name && name.length) {
 		if (element.type) {
-			valu(parameter, name, element.value);
+			// 所有控件具有type属性
+			// 所有控件具有disabled属性
+			// <select> <textarea> 没有checked属性，其余均有
+			if (!element.disabled) {
+				if (element.type === "number" || element.type === "range") {
+					if (!isNaN(element.valueAsNumber)) {
+						setValue(entity, name, element.valueAsNumber);
+					}
+				} else
+				if (element.type === "checkbox" || element.type === "radio") {
+					if (element.checked) {
+						setValue(entity, name, element.value);
+					}
+				} else {
+					if (element.value) {
+						setValue(entity, name, element.value);
+					}
+				}
+			}
 		} else
 		if (element.src) {
-			valu(parameter, name, element.src);
+			// img
+			setValue(entity, name, element.src);
 		} else {
-			valu(parameter, name, element.innerText);
+			setValue(entity, name, element.innerText);
 		}
 	}
 	if (element.childElementCount) {
 		for (let i = 0; i < element.children.length; i++) {
-			get(element.children[i], parameter, converter);
+			getEntity(element.children[i], entity, converter);
 		}
 	}
 }
 
 /**
- * 设置元素值
+ * 设置实体到标签元素
  * <input name="AAA" value="123"/>
  * <span name="AAA">123</span>
  * <img name="AAA" src="123"/>
  * <i case="AAA"></i>
  */
-function set(element, parameter, converter) {
+function setEntity(element, entity, converter) {
 	let name = element.getAttribute("case");
 	if (name && name.length) {
-		converter(element, parameter, name);
+		converter(element, entity, name);
 	}
 	name = element.getAttribute("name");
 	if (name && name.length) {
 		if (element.type) {
-			element.value = text(vale(parameter, name));
+			// 所有控件具有type属性
+			if (element.type === "checkbox" || element.type === "radio") {
+				// Radio / Check
+				element.checked = element.value == getValue(entity, name);
+			} else {
+				// OTHER
+				element.value = text(getValue(entity, name));
+			}
 		} else
-		if (element.src) {
-			element.src = text(vale(parameter, name));
+		if (element.src !== undefined) {
+			// <img />
+			if (element.__ENO_SRC === undefined) {
+				// 记录默认图像
+				element.__ENO_SRC = element.src;
+			}
+			element.src = text(getValue(entity, name));
+			if (element.src.length == 0) {
+				element.src = element.__ENO_SRC;
+			}
 		} else {
-			element.innerText = text(vale(parameter, name));
+			if (element.__ENO_TEXT === undefined) {
+				// 原始内容作为默认值
+				element.__ENO_TEXT = element.innerText;
+				// 是否已有title
+				// 如果用于已设置title则不在自动设置
+				element.__ENO_TITLE = element.title ? false : true;
+			}
+			element.innerText = text(getValue(entity, name));
+			if (element.innerText.length == 0) {
+				element.innerText = element.__ENO_TEXT;
+			}
+			if (element.__ENO_TITLE) {
+				// 设置title实现文本提示
+				element.title = element.innerText;
+			}
 		}
 	}
 	if (element.childElementCount) {
 		for (let i = 0; i < element.children.length; i++) {
-			set(element.children[i], parameter, converter);
+			setEntity(element.children[i], entity, converter);
 		}
 	}
 }
 
 /**
- * 根据名称获取对象值
- * @param {Object} o 对象
- * @param {Object} name 名称 "Device.Type.Text"
- * @returns {Object} value 值
+ * 根据名称获取实体对象值
+ * @param {Object} entity 要获取值的实体对象
+ * @param {Object} name 字段名称 "Device.Type.Text" 区分大小写
+ * @returns {Object} 获取的值
  */
-function vale(o, name) {
+function getValue(entity, name) {
 	name = name.split(".");
 	for (let i = 0; i < name.length; i++) {
-		if (o) {
-			if (Array.isArray(o)) {
+		if (entity) {
+			if (Array.isArray(entity)) {
 				const items = new Array();
-				for (let a = 0; a < o.length; a++) {
-					if (o[a]) {
-						items.push(o[a][name[i]]);
+				for (let a = 0; a < entity.length; a++) {
+					if (entity[a]) {
+						items.push(entity[a][name[i]]);
 					}
 				}
-				o = items;
+				entity = items;
 			} else {
-				o = o[name[i]];
+				entity = entity[name[i]];
 			}
 		} else {
 			break;
 		}
 	}
-	return o;
+	return entity;
 }
 
 /**
- * 根据名称设置对象值
- * @param {Object} o
- * @param {Object} name "Device.Type.Text"
- * @param {Object} value
+ * 根据名称设置实体对象值
+ * @param {Object} entity 要设置值的实体对象
+ * @param {Object} name 字段名称 "Device.Type.Text" 区分大小写
+ * @param {Object} value 要设置的值
  */
-function valu(o, name, value) {
+function setValue(entity, name, value) {
 	name = name.split(".");
 	let i = 0;
 	for (; i < name.length - 1; i++) {
-		if (o) {
-			if (o[name[i]]) {
-				o = o[name[i]];
-			} else {
-				o = o[name[i]] = {};
-			}
+		if (entity[name[i]]) {
+			entity = entity[name[i]];
+		} else {
+			entity = entity[name[i]] = {};
+		}
+	}
+	// 点语法最后的名称
+	name = name[i];
+	// 相同name多次出现应数组化
+	if (entity[name] === undefined) {
+		entity[name] = value;
+	} else {
+		if (Array.isArray(entity[name])) {
+			entity[name].push(value);
+		} else {
+			entity[name] = [entity[name], value];
 		}
 	}
-	o[name[i]] = value;
-	return o;
 }
 
 /**
  * 转换为字符串值
- * @param {Object} o
+ * @param {any} value
  */
-function text(o) {
-	if (Array.isArray(o)) {
+function text(value) {
+	if (Array.isArray(value)) {
 		// 数组值合并（逗号分割）
-		return o.join(',');
+		return value.join(',');
 	}
-	if (o != undefined) {
-		return o.toString();
+	if (value !== undefined && value !== null) {
+		return value.toString();
 	}
 	return "";
 }
@@ -773,56 +880,58 @@ function text(o) {
 function bind(element, selector, eventName, listener) {
 	if (arguments.length == 3) {
 		// bind(element,eventName,listener);
-		element = select(element);
+		// bind(selector,eventName,listener);
+		element = selects(element);
 		listener = eventName;
 		eventName = selector;
 	} else
 	if (arguments.length == 4) {
 		// bind(element,selector,eventName,listener);
-		element = select(element, selector);
+		element = selects(element, selector);
 	} else {
-		return;
+		return null;
 	}
-	if (element) {
-		if (Array.isArray(element)) {
-			for (let i = 0; i < element.length; i++) {
-				element[i].addEventListener(eventName, listener);
-			}
-		} else {
-			element.addEventListener(eventName, listener);
+
+	if (element && element.length) {
+		for (let i = 0; i < element.length; i++) {
+			element[i].addEventListener(eventName, listener);
 		}
+		return element;
 	}
-	return element;
+	return null;
 }
 
 /**
- * 根据事件或元素获取由sets关联的实体对象
+ * 根据事件或标签元素获取由eno.sets()对应的实体对象
+ * @param {Event|HTMLElement} e 事件或标签元素
+ * @param {String} selector 选择器字符串
+ * @return {Object} 标签元素对应的实体对象
  * @example entity(event);
  * @example entity(element);
  * @example entity(element,selector);
- * @return {Object} 标签元素关联的数据对象
  */
 function entity(e, selector) {
 	if (arguments.length == 1) {
 		// entity(event);
-		if (e.nodeType) {
-			e = e;
-		} else
-		if (e && e.target) {
+		if (e.target) {
 			e = e.target;
 		} else
-		if (e && e.srcElement) {
+		if (e.srcElement) {
 			e = e.srcElement;
+		} else {
+			e = select(e);
 		}
 	} else
 	if (arguments.length == 2) {
 		// entity(element,selector);
 		e = select(e, selector);
+	} else {
+		return null;
 	}
 
 	while (e) {
-		if (e.userData) {
-			return e.userData;
+		if (e.__ENO_ENTITY) {
+			return e.__ENO_ENTITY;
 		} else {
 			e = e.parentElement;
 		}
@@ -831,32 +940,68 @@ function entity(e, selector) {
 }
 
 /**
- * 根据事件获取绑定实体的元素
- * @param {Event} e
- * @return {Element} 标签元素关联的数据对象
+ * 根据事件或标签元素获取由eno.sets()对应标签元素
+ * @param {Event|HTMLElement} e 事件或标签元素
+ * @return {HTMLElement} 实体对象对应的标签元素
  */
 function element(e) {
-	if (e && e.target) {
-		e = e.target;
-	} else
-	if (e && e.srcElement) {
-		e = e.srcElement;
+	if (e) {
+		if (e.target) {
+			e = e.target;
+		} else
+		if (e.srcElement) {
+			e = e.srcElement;
+		} else {
+			e = select(e);
+		}
+
+		while (e) {
+			if (e.userData) {
+				return e;
+			} else {
+				e = e.parentElement;
+			}
+		}
 	}
+	return null;
+}
 
-	while (e) {
-		if (e.userData) {
-			return e;
-		} else {
-			e = e.parentElement;
+function target(event, name, value) {
+	if (arguments.length == 1) {
+		// target(event);
+		return event.target || event.srcElement;
+	} else
+	if (arguments.length == 2) {
+		// target(event, name);
+		let element = event.target || event.srcElement;
+		while (element && element !== event.currentTarget) {
+			if (element.hasAttribute(name)) {
+				return element;
+			}
+			element = element.parentElement;
+		}
+	} else
+	if (arguments.length == 3) {
+		// target(event, name, value);
+		let element = event.target || event.srcElement;
+		while (element && element !== event.currentTarget) {
+			if (element.getAttribute(name) == value) {
+				return element;
+			}
+			element = element.parentElement;
 		}
 	}
 	return null;
 }
 
 /**
- * 读取 URL 中的 Query String 参数值
+ * 获取 URL 中的 Query String 指定名称的参数值或包含所有参数的实体对象
+ * @param {String} url URL
  * @param {String} name 参数名
  * @return {String} 参数值
+ * @example eno.query(url);
+ * @example eno.query(name);
+ * @example eno.query(url,name);
  */
 function query(url, name) {
 	if (arguments.length == 0) {
@@ -888,10 +1033,13 @@ function query(url, name) {
 		} else {
 			return null;
 		}
+	} else {
+		return null;
 	}
 
 	if (url) {
 		if (name) {
+			// 查找指定参数值
 			let start = url.indexOf(name);
 			if (start >= 0) {
 				start += name.length;
@@ -905,6 +1053,7 @@ function query(url, name) {
 				}
 			}
 		} else {
+			// 获取所有参数值
 			// ?name1=value1&name2=value2
 			let start = 1;
 			let index = 1;
@@ -931,28 +1080,4 @@ function query(url, name) {
 		}
 	}
 	return null;
-}
-
-/**
- * 根据事件或元素获取属性指定的动作
- * @param {Event} e
- * @param {String} a
- * @deprecated 1.1.3
- */
-function action(e, a) {
-	if (e.target) {
-		e = e.target;
-	} else
-	if (e.srcElement) {
-		e = e.srcElement;
-	}
-
-	while (e) {
-		if (e.hasAttribute(a)) {
-			return true;
-		} else {
-			e = e.parentElement;
-		}
-	}
-	return false;
 }