@joyzl/eno 1.1.2 → 1.1.5

package/README.md

@@ -7,13 +7,36 @@ npm install @joyzl/eno
 ```
 
 ``` javascript
-import eno from `eno`;
+import eno from '@joyzl/eno';
 ```
 
 ## 使用
 
-### sets
-将数据对象（例如从服务器获取的JSON对象）设置到HTML元素以显示数据。
+### eno.sets()
+
+eno.sets() 将数据对象（通常为JSON实例）设置到HTML标签显示。
+
+参数形式：
+* eno.sets(element, parameter);
+* eno.sets(selector, parameter);
+* eno.sets(element, selector, parameter);
+* eno.sets(element, parameter, converter);
+* eno.sets(element, selector, parameter, converter);
+
+参数含义：
+* element 元素实例/元素查找范围；
+* selector 选择器字符串；
+* parameter 数据对象/数据对象数组；
+* converter 转换函数 function(element, parameter, name){}；
+
+转换函数参数含义：
+* element 元素实例；
+* parameter 对象实例；
+* name 情形值；
+
+#### 单个对象设置到HTML显示
+
+将单个数据对象（例如从服务器获取的JSON对象）设置到HTML元素以显示数据。
 
 首先建立HTML标签元素如下所示：
 ```html
@@ -41,9 +64,193 @@ eno.sets(div, user);
 </div>
 ```
 
-### gets
-从HTML元素获取JSON对象以获得用户数据。
-与sets方法的功能正好相反。
+#### 多个对象设置到HTML显示
+
+将多个数据对象（例如从服务器获取的JSON对象数组）设置到HTML元素以显示数据；
+此时eno将自动克隆创建对应数量的HTML元素以对应多项数据。
+
+首先建立HTML标签元素如下所示：
+```html
+<div id="users">
+	<div>
+		<span name="realname"></span>
+		<span name="birthday"></span>
+	</div>
+</div>
+```
+
+将数据对象设置到HTML标签元素。
+```javascript
+let users = [{
+		realname: "小明",
+		birthday: "1992-5-27"
+	},
+	{
+		realname: "小王",
+		birthday: "1993-8-16"
+	}
+];
+eno.sets("#users", users);
+```
+
+数据对象的字段值将根据HTML标签元素指定的name属性插入到标签中；
+此时eno将 "#users" DIV 的子元素作为模板，自动克隆以显示多项数据。
+```html
+<div id="users">
+	<div>
+		<span name="realname">小明</span>
+		<span name="birthday">1992-5-27</span>
+	</div>
+	<div>
+		<span name="realname">小王</span>
+		<span name="birthday">1993-8-16</span>
+	</div>
+</div>
+```
+
+在相同元素实例多次执行eno.sets方法时，eno将自动维护对应的数量的子元素，以保持正确的显示；
+如果传入的对象数组为[]或null这将清除所有子元素，eno会通过隐藏以保留原始模板。
+
+#### 多个对象设置到HTML显示并指定模板
+
+通过模板&lt;template&gt;显示多个对象到HTML中具有更好的灵活性，eno将保留模板标签之外的HTML。
+```html
+<div id="users">
+	<div>
+		<span>用户列表</span>
+	</div>
+	<template>
+		<div>
+			<span name="realname"></span>
+			<span name="birthday"></span>
+		</div>
+	</template>
+</div>
+```
+
+执行eno.sets("#users",users)将得到如下HTML实例：
+```html
+<div id="users">
+	<div>
+		<span>用户列表</span>
+	</div>
+	<template>
+		<div>
+			<span name="realname"></span>
+			<span name="birthday"></span>
+		</div>
+	</template>
+	<div>
+		<span name="realname">小明</span>
+		<span name="birthday">1992-5-27</span>
+	</div>
+	<div>
+		<span name="realname">小王</span>
+		<span name="birthday">1993-8-16</span>
+	</div>
+</div>
+```
+eno根据"#users"中的&lt;template&gt;创建对应数量的HTML元素显示数据，
+并保留其它HTML标签（也保留&lt;template&gt;本身，因为此标签不会被显示）。
+
+#### 在HTML指示对象字段
+
+将对象通过HTML显示时，eno通过标签的"name"属性值确定对象字段（区分大小写）；
+属性值支持点语法分隔多级字段，例如："department.name"；
+
+eno确定对象字段后将根据标签类型执行默认的值设置：
+* input标签设置为value属性值；
+* img标签设置为src属性值；
+* 其它标签设置为内部文本(innerText)；
+
+```html
+<div id="users">
+	<template>
+		<div>
+			<img name="avatar"/>
+			<span name="realname"></span>
+			<span name="birthday"></span>
+			<span name="department.name"></span>
+		</div>
+	</template>
+</div>
+```
+```javascript
+let users = [{
+		realname: "小明",
+		birthday: "1992-5-27",
+		avatar: "okjniybu.png",
+		department: {
+			name: "A部"
+		}
+	},
+	{
+		realname: "小王",
+		birthday: "1993-8-16",
+		avatar: "likjudde.png",
+		department: {
+			name: "B部"
+		}
+	}
+];
+eno.sets("#users", users);
+```
+
+#### 自定义对象字段与HTML显示方式
+
+如果默认行为无法满足显示需求，例如根据状态字段更改颜色，
+可通过"case"属性值和自定义转换函数执行特殊处理；
+```html
+<div id="users">
+	<template>
+		<div>
+			<img case="url"/>
+			<span name="realname"></span>
+			<span name="birthday"></span>
+			<span name="department.name"></span>
+		</div>
+	</template>
+</div>
+```
+转换函数将在遇到的每一个"case"属性时触发，并传入三个参数
+分别为element表示"case"所在的元素实例，
+parameter表示当前数据对象，
+name指示"case"的值；
+```javascript
+let users = [...];
+eno.sets("#users", users, function(element, parameter, name){
+	if(name=="url"){
+		element.src = "http://joyzl.net/" + parameter.avatar;
+	}
+});
+```
+通过转换函数可以执行任何需要的自定义处理；
+但须注意的是，每个模板实例中的多个"case"都将调用转换函数，
+如果同时指定"name"属性，将在调用转换函数后执行默认行为。
+
+### eno.gets()
+
+从HTML元素获取用户数据以形成JSON对象实例。
+与eno.sets方法的行为正好相反，将从HTML中具有"name"属性的标签提取数据。
+
+参数形式：
+* eno.gets(element);
+* eno.gets(selector);
+* eno.gets(element, converter);
+* eno.gets(selector, converter);
+* eno.gets(element, selector, converter);
+
+参数含义：
+* element 元素实例；
+* selector 选择器字符串；
+* converter 转换函数 function(element, parameter, name){}；
+
+转换函数参数含义：
+* element 元素实例；
+* parameter 对象实例；
+* name 情形值；
+
+#### 从HTML中提取数据
 
 假设有以下HTML实例：
 ```html
@@ -56,11 +263,15 @@ eno.sets(div, user);
 执行gets方法获取数据对象：
 ```javascript
 let values = eno.gets(element);
-//{
-//	realname: "小明",
-//	birthday: "1992-5-27"
-//}
+// values 实例字段如下
+// {
+//		realname: "小明",
+//		birthday: "1992-5-27"
+// }
 ```
+eno.gets将普通标签获取内部普通文本内容(innetText)。
+
+#### 从表单中提取数据
 
 获取表单输入值，gets将识别传入参数是否表单。
 ```html
@@ -73,52 +284,271 @@ let values = eno.gets(element);
 执行gets方法获取form数据对象：
 ```javascript
 let values = eno.gets(element);
-//{
-//	realname: "小张",
-//	birthday: "1982-10-30"
-//}
+// values 实例字段如下
+// {
+//		realname: "小张",
+//		birthday: "1982-10-30"
+// }
 ```
+eno.gets将表单标签获取控件值内容(control.value)。
+
+#### 自定义数据提取方式
 
+与eno.sets方法相同，eno.gets也支持同样参数的数据转换函数用于自定义提取方式。
+```javascript
+let values = eno.gets(element, function(element, parameter, name){
+	if(name=="url"){
+		parameter.avatar = element.src.replace("http://joyzl.net/","");
+	}
+});
+// values 实例字段如下
+// {
+//		realname: "小张",
+//		birthday: "1982-10-30",
+//		avatar: "okjniybu.png"
+// }
+```
 
-### query
-获取指定URL或当前URL中的查询字符串参数。
+### eno.create()
+
+eno.create() 用于将字符串形式的HTML标签创建为HTML实例。
+
+参数形式：
+* eno.create(html);
+
+参数含义：
+* html 字符串；
 
 ```javascript
-// 从当前URL获取参数
-let token = eno.query("token");
+let element = eno.create("<div><a href='http://www.joyzl.com'>joyzl</a></div>");
+```
 
-// 从指定URL获取参数
-let url = "http://www.joyzl.net/test?name=value";
-let value = eno.query(url, "name");
+注意：此时创建的标签实例未插入文档中，因此不会在浏览器网页呈现。
+
+### eno.append()
+
+eno.append() 用于将字符串形式的HTML标签创建为HTML实例，并插入文档指定的位置尾部。
+
+参数形式：
+* eno.append(element, html);
+* eno.append(selector, html);
+
+参数含义：
+* element 元素实例；
+* selector 选择器字符串；
+* html 字符串；
+
+```javascript
+// 添加到<body>中尾部
+let element1 = eno.append("<div><a href='http://www.joyzl.com'>joyzl</a></div>");
+
+// 添加到指定元素中尾部
+let parent = document.getElementById("main");
+let element2 = eno.append(parent, "<div><a href='http://www.joyzl.com'>joyzl</a></div>");
 ```
 
-### select
-获取符合指定选择器字符串的第一个元素。
+### eno.replace()
+
+eno.replace() 用于将字符串形式的HTML标签创建为HTML实例，并替换指定的元素。
+
+参数形式：
+* eno.replace(element, html);
+* eno.replace(selector, html);
+
+参数含义：
+* element 元素实例；
+* selector 选择器字符串；
+* html 字符串；
 
-在整个文档实例范围中查找：
 ```javascript
-let element = eno.select("#user");
+let element = document.getElementById("customer-define");
+element = eno.replace(element, "<div><a href='http://www.joyzl.com'>joyzl</a></div>");
 ```
 
-在指定元素实例范围中查找：
+### eno.select()
+
+eno.select() 用于在文档或指定范围查找元素。
+
+参数形式：
+* eno.select(selector);
+* eno.select(element, selector);
+
+参数含义：
+* element 元素实例；
+* selector 选择器字符串；
+
 ```javascript
-let form = eno.select("form");
-let user = eno.select(form, "#user");
+// 在整个文档中查找
+let element = eno.select("#id");
+
+// 在指定元素中查找
+element = eno.select(element, "div");
 ```
 
+支持标准的CSS选择器字符串，如果匹配多个元素将以数组返回结果集，仅匹配单个时仅返回匹配的元素实例。 
+
+### eno.remove()
+
+eno.remove() 用于移除文档中的指定元素。
+
+参数形式：
+* eno.remove(element);
+* eno.remove(selector);
+* eno.remove(element, selector);
+
+参数含义：
+* element 元素实例；
+* selector 选择器字符串；
+
+### eno.hide()
+
+eno.hide() 用于隐藏元素。
+
+参数形式：
+* eno.hide(element);
+* eno.hide(selector);
+* eno.hide(element, selector);
+
+参数含义：
+* element 元素实例；
+* selector 选择器字符串；
+
+### eno.show()
+
+eno.show() 用于显示元素。
+
+参数形式：
+* eno.show(element);
+* eno.show(selector);
+* eno.show(element, selector);
+
+参数含义：
+* element 元素实例；
+* selector 选择器字符串；
+
+### eno.toggle()
+
+eno.toggle() 用于切换元素显示或样式类。
+调用此方法仅指定元素或选择器参数，指定或匹配的元素将显示，其余同级元素全部隐藏；
+如果指定了样式类参数(applyClass, otherClass)，则匹配的元素将应用applyClass，其余同级元素应用otherClass样式类。
 
-### selects
-获取符合指定选择器字符串的所有元素。
+参数形式：
+* eno.toggle(element);
+* eno.toggle(selector);
+* eno.toggle(element, selector);
+* eno.toggle(element, applyClass, otherClass);
+* eno.toggle(element, selector, applyClass, otherClass);
 
+参数含义：
+* element 元素实例；
+* selector 选择器字符串；
+* applyClass 当前元素应用的样式类；
+* otherClass 其它元素应用的样式类；
 
-在整个文档实例范围中查找：
+此功能可用于层叠卡片显示切换或选中项高亮。
+
+
+
+### eno.bind()
+
+eno.bind() 用于绑定元素的事件。
+
+参数形式：
+* eno.bind(element, eventName, listener);
+* eno.bind(selector, eventName, listener);
+* eno.bind(element, selector, eventName, listener);
+
+参数含义：
+* element 元素实例；
+* selector 选择器字符串；
+* eventName 事件名称 "click"、"submit" ...；
+* listener 事件处理函数 function(event){}；
+
+处理函数参数含义：
+* this 元素实例；
+* event 事件实例；
+
+此方法的事件绑定与DOM API并无任何差异，其行为与Element.addEventListener()完全相同。
+
+#### eno.sets()的事件处理
+
+对于通过eno.sets()方法生成并填充值的元素，如果要监听每个元素的事件，
+可通过eno.bind()配合eno.entity()和eno.element()方法优化事件处理，而无须为每个子元素绑定事件；
+
+具体方法如下：
++ 容器绑定所需事件；
++ 在处理函数中通过eno.element()获取目标元素实例；
++ 在处理函数中通过eno.entity()获取目标对象实例；
+
+示例代码：
 ```javascript
-let elements = eno.selects("#user");
+const element = eno.append(`
+<div id="users">
+	<div>
+		<span>用户列表</span>
+	</div>
+	<template>
+		<div>
+			<span name="realname"></span>
+			<span name="birthday"></span>
+		</div>
+	</template>
+</div>
+`);
+eno.bind(element,"click",function(event){
+	// 获取数据对象实例
+	eno.entity(event)
+	
+	// 获取元素对象实例
+	eno.element(event);
+});
+eno.sets(element,data);
 ```
 
+### eno.entity()
+
+eno.entity() 用于获取通过eno.sets()方法填充元素的数据对象。
+
+参数形式：
+* eno.entity(event);
+* eno.entity(element);
+* eno.entity(element, selector);
+
+参数含义：
+* event 事件实例；
+* element 元素实例；
+* selector 选择器字符串；
+
+### eno.element()
+
+eno.element() 用于获取通过eno.sets()方法填充元素的实例。
+
+参数形式：
+* eno.element(event);
+
+参数含义：
+* event 事件实例；
+
+### eno.query()
+
+eno.query() 用于获取指定URL或当前URL中的查询字符串参数。
+
+参数形式：
+* eno.query();
+* eno.query(url);
+* eno.query(name);
+* eno.query(url, name);
+
+参数含义：
+* url 字符串，如果未指定则默认当前页面URL；
+* name 参数名字符串，区分大小写；
+
 
-在指定元素实例范围中查找：
 ```javascript
-let forms = eno.selects("form");
-let users = eno.selects(form, "#user");
+// 从当前URL获取参数
+let token = eno.query("token");
+
+// 从指定URL获取参数
+let url = "http://www.joyzl.net/test?name=value";
+let value = eno.query(url, "name");
 ```

package/index.js

@@ -6,6 +6,7 @@ export default {
 	create,
 	append,
 	replace,
+	selects,
 	select,
 	remove,
 
@@ -68,19 +69,22 @@ function append(element, html) {
 		// append(element,html);
 		element = select(element);
 	} else {
-		return;
-	}
-	if (html.trim) {
-		html = create(html);
+		return null;
 	}
-	if (Array.isArray(html)) {
-		for (let i = 0; i < html.length; i++) {
-			element.appendChild(html[i]);
+	if (element) {
+		if (html.trim) {
+			html = create(html);
 		}
-	} else {
-		element.appendChild(html);
+		if (Array.isArray(html)) {
+			for (let i = 0; i < html.length; i++) {
+				element.appendChild(html[i]);
+			}
+		} else {
+			element.appendChild(html);
+		}
+		return html;
 	}
-	return html;
+	return null;
 }
 
 /**
@@ -93,42 +97,45 @@ function replace(element, html) {
 	if (arguments.length == 2) {
 		element = select(element);
 	} else {
-		return;
+		return null;
 	}
-	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) {
+		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) {
-					item.className += element.className;
+					html.className += " " + element.className;
 				}
 				if (element.style.cssText) {
-					item.style.cssText += element.style.cssText;
+					html.style.cssText += element.style.cssText;
 				}
+				element.parentElement.replaceChild(html, element);
 			}
-			element.replaceWith(html);
-		} else {
-			if (element.className) {
-				html.className += element.className;
-			}
-			if (element.style.cssText) {
-				html.style.cssText += element.style.cssText;
-			}
-			element.parentElement.replaceChild(html, element);
 		}
+		return html;
 	}
-	return html;
+	return null;
 }
 
 /**
  * 在指定范围内/整个文档查找
  * @param {Element} element 标签元素
  * @param {String} selector 筛选字符
- * @return {Element} 匹配的单个/多个标签元素
+ * @return {Element} 匹配的单个标签元素
  */
 function select(element, selector) {
 	if (arguments.length == 1) {
@@ -190,6 +197,65 @@ function select(element, selector) {
 	}
 }
 
+/**
+ * 在指定范围内/整个文档查找
+ * @param {Element} element 标签元素
+ * @param {String} selector 筛选字符
+ * @return {[Element]} 匹配的多个标签元素
+ */
+function selects(element, selector) {
+	if (arguments.length == 1) {
+		// 仅指定1个参数
+		// selects(element/selector);
+		if (element.trim) {
+			// 仅提供字符串参数
+			element = document.querySelectorAll(element);
+			if (element.length == 0) {
+				return null;
+			}
+			return Array.from(element);
+		} else
+		if (element.nodeType) {
+			// 仅提供元素参数
+			return [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) {
+			element = element.querySelectorAll(selector);
+			if (element.length == 0) {
+				return null;
+			}
+			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 (items.length == 0) {
+				return null;
+			}
+			return items;
+		}
+	}
+}
+
 /**
  * 从文档移除
  * @param {Element} element 标签元素
@@ -234,16 +300,22 @@ function hide(element, selector) {
 	}
 	if (element) {
 		if (Array.isArray(element)) {
+			let e;
 			for (let i = 0; i < element.length; i++) {
-				element[i].hidden = true;
-				element[i].__DISPLAY = element[i].style.display
-				element[i].style.display = "none";
+				e = element[i];
+				if (e.hidden) {} else {
+					e.hidden = true;
+					e.__DISPLAY = e.style.display
+					e.style.display = "none";
+				}
 			}
 		} else {
-			element.hidden = true;
-			element.__DISPLAY = element.style.display
-			// display:flex 导致 hidden 属性失效而不会隐藏
-			element.style.display = "none";
+			if (element.hidden) {} else {
+				element.hidden = true;
+				element.__DISPLAY = element.style.display;
+				// display:flex 导致 hidden 属性失效而不会隐藏
+				element.style.display = "none";
+			}
 		}
 	}
 	return element;
@@ -266,11 +338,16 @@ function show(element, selector) {
 	}
 	if (element) {
 		if (Array.isArray(element)) {
+			let e;
 			for (let i = 0; i < element.length; i++) {
-				element[i].hidden = false;
-				element[i].style.display = element[i].__DISPLAY;
+				e = element[i];
+				if (e.hidden) {
+					e.hidden = false;
+					e.style.display = e.__DISPLAY;
+				}
 			}
-		} else {
+		} else
+		if (element.hidden) {
 			element.hidden = false;
 			element.style.display = element.__DISPLAY;
 		}
@@ -283,32 +360,41 @@ function show(element, selector) {
  * 如果指定样式类名，则当前原始添加样式类，其余元素移除样式类
  * @param {Element} element 标签元素
  * @param {String} selector 筛选字符
- * @param {String} className 类名称
+ * @param {String} applyClass 添加类名称，必须同时提供otherClass参数
+ * @param {String} otherClass 移除类名称，必须同时提供applyClass参数
  * @return {Element} 显示的单个/多个标签元素
  */
-function toggle(element, selector, className) {
+function toggle(element, selector, applyClass, otherClass) {
 	if (arguments.length == 1) {
-		// toggle(element) 
+		// toggle(element)
 		element = select(element);
 	} else
 	if (arguments.length == 2) {
 		// toggle(element,selector)
-		// toggle(element,className)
 		element = select(element, selector);
 	} else
 	if (arguments.length == 3) {
-		// toggle(element,selector,className)
+		// toggle(element,applyClass,otherClass)
+		element = select(element);
+		otherClass = applyClass;
+		applyClass = selector;
+	} else
+	if (arguments.length == 4) {
+		// toggle(element,selector,applyClass,otherClass)
 		element = select(element, selector);
 	} else {
 		return;
 	}
 	if (element) {
 		const parent = element.parentElement;
-		if (className) {
+		if (applyClass) {
 			for (let i = 0; i < parent.children.length; i++) {
-				parent.children[i].classList.remove(className);
 				if (element == parent.children[i]) {
-					parent.children[i].classList.add(className);
+					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);
 				}
 			}
 		} else {
@@ -337,6 +423,7 @@ function defaultConverter(element, parameter, name) {}
 function gets(element, selector, converter = defaultConverter) {
 	if (arguments.length == 1) {
 		// gets(element)
+		// gets(selector)
 		element = select(element);
 	} else
 	if (arguments.length == 2) {
@@ -386,6 +473,7 @@ function gets(element, selector, converter = defaultConverter) {
 function sets(element, selector, parameter, converter = defaultConverter) {
 	if (arguments.length == 2) {
 		// sets(element,parameter)
+		// sets(selector,parameter)
 		element = select(element);
 		parameter = selector;
 	} else
@@ -409,71 +497,71 @@ function sets(element, selector, parameter, converter = defaultConverter) {
 	if (element) {
 		if (parameter) {
 			if (Array.isArray(parameter)) {
+				// Object[] -> Element.children
 				let i = 0;
 				// 利用ENO_SET记录并判定是否首次
-				if (element.ENO_SETS) {
-					element.ENO_SETS = element.ENO_SETS + 1;
-				} else {
-					element.ENO_SETS = 1;
-					// ...<template>...
-					for (; i < element.children.length; i++) {
-						// 只有<template>模板具有content属性
+				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.template = element.children[i];
-							element.a = ++i;
-							element.b = element.children.length - i;
+							element.__ENO_SETS.template = element.children[i];
+							element.__ENO_SETS.before = ++i;
+							element.__ENO_SETS.after = element.childElementCount - i;
 							break;
 						}
 					}
 				}
 
-				if (element.template) {
+				if (element.__ENO_SETS.template) {
 					// 已定义模板
-					if (parameter.length) { // [a,b]
+					if (parameter.length) {
 						let node, n;
 						// 构造填充元素
 						for (i = 0; i < parameter.length; i++) {
-							if (element.a + i < element.children.length - element.b) {
+							if (element.__ENO_SETS.before + i < element.childElementCount - element.__ENO_SETS.after) {
 								// 重用已有元素
-								for (n = 0; n < element.template.content.childElementCount; n++) {
-									node = element.children[element.a + i + n];
-									node.userData = parameter[i];
+								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.hidden = false;
+									node.userData = parameter[i];
 								}
 							} else {
 								// 克隆新的元素(DocumentFragment)
-								node = element.template.content.cloneNode(true);
+								// node = element.template.content.cloneNode(true);
+								node = document.importNode(element.__ENO_SETS.template.content, true);
 								for (n = 0; n < node.childElementCount; n++) {
-									node.children.item(n).userData = parameter[i];
 									set(node.children.item(n), parameter[i], converter);
-									node.children.item(n).hidden = false;
+									node.children.item(n).userData = parameter[i];
 								}
-								element.insertBefore(node, element.children[element.a + i * node.childElementCount]);
+								element.insertBefore(node, element.children[element.__ENO_SETS.before + i * node.childElementCount]);
 							}
 						}
 						// 移除多余元素
-						n = i * element.template.content.childElementCount;
-						i = element.a + element.b;
-						while (element.children.length > i + n) {
-							element.children[element.a + n].remove();
+						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 { // []
+					} else {
 						// 移除多余元素
-						i = element.a + element.b;
-						while (element.length > i) {
-							element[element.a + 1].remove();
+						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) { // [a,b]
+					if (parameter.length) {
 						let node;
 						// 构造填充元素
 						for (i = 0; i < parameter.length; i++) {
-							if (i < element.children.length) {
+							if (i < element.childElementCount) {
 								// 重用已有元素
 								node = element.children[i];
 							} else if (node) {
@@ -481,59 +569,68 @@ function sets(element, selector, parameter, converter = defaultConverter) {
 								node = element.appendChild(node.cloneNode(true));
 							} else {
 								// 干不了
+								// 此情形出现于没有任何子标签元素
 								continue;
 							}
-							node.userData = parameter[i];
 							set(node, parameter[i], converter);
+							node.userData = parameter[i];
 							node.hidden = false;
 						}
 						// 移除多余元素
-						while (element.children.length > i) {
+						while (element.childElementCount > i) {
 							element.children[i].remove();
 						}
 						return element;
-					} else { // []
-						if (element.children.length) {
-							// 保留模板
-							element.children[0].hidden = true;
-							// 移除多余元素
-							while (element.children.length > 1) {
-								element.children[1].remove();
-							}
+					} else {
+						// 移除多余元素，保留模板
+						element.children[0].userData = null;
+						element.children[0].hidden = true;
+						while (element.childElementCount > 1) {
+							element.children[1].remove();
 						}
 						return element;
 					}
 				}
-			} else { // Object
-				if (element.nodeType) {
-					element.userData = parameter;
-					set(element, parameter, converter);
-					return element;
-				}
-				if (element.length) {
-					for (let node, i = 0; i < element.length; i++) {
-						node = element[i];
-						node.userData = parameter;
-						set(node, parameter, converter);
+			} 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 element;
+				} else {
+					set(element, parameter, converter);
+					element.userData = parameter;
 				}
-			}
-		} else { // null / undefine
-			if (element.nodeType) {
-				element.userData = null;
-				set(element, null, converter);
 				return element;
 			}
-			if (element.length) {
-				// 保留模板
-				element[0].hidden = true;
-				// 移除多余元素
-				while (element.length > 1) {
-					element[1].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;
 				}
-				return element;
 			}
+			return element;
 		}
 	}
 }
@@ -582,7 +679,7 @@ function set(element, parameter, converter) {
 	}
 	name = element.getAttribute("name");
 	if (name && name.length) {
-		if (element.form) {
+		if (element.type) {
 			element.value = text(vale(parameter, name));
 		} else
 		if (element.src) {
@@ -733,29 +830,6 @@ function entity(e, selector) {
 	return null;
 }
 
-/**
- * 根据事件或元素获取属性指定的动作
- * @param {Event} e
- * @param {String} a
- */
-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;
-}
-
 /**
  * 根据事件获取绑定实体的元素
  * @param {Event} e
@@ -785,16 +859,30 @@ function element(e) {
  * @return {String} 参数值
  */
 function query(url, name) {
-	if (arguments.length == 1) {
-		// getQueryString(name)
-		name = url;
+	if (arguments.length == 0) {
+		// query()
 		// window.location.search 返回从问号?开始的URL查询部分
-		// ?name1=value1&name2=value2
 		url = window.location.search;
-	}
+	} else
+	if (arguments.length == 1) {
+		// query(url)
+		// query(name)
+		if (url.startsWith("http://") || url.startsWith("https://")) {
+			let index = url.indexOf("?");
+			if (index > 0) {
+				url = url.substring(index);
+			} else {
+				return null;
+			}
+		} else {
+			name = url;
+			// window.location.search 返回从问号?开始的URL查询部分
+			url = window.location.search;
+		}
+	} else
 	if (arguments.length == 2) {
-		// getQueryString(url, name)
-		let index = url.indexof("?");
+		// query(url, name)
+		let index = url.indexOf("?");
 		if (index > 0) {
 			url = url.substring(index);
 		} else {
@@ -803,18 +891,68 @@ function query(url, name) {
 	}
 
 	if (url) {
-		let start = url.indexOf(name);
-		if (start >= 0) {
-			start += name.length;
-			if (url.charAt(start) == '=') {
-				start++;
-				let end = url.indexOf('&', start);
-				if (end >= 0) {
-					return url.substring(start, end);
+		if (name) {
+			let start = url.indexOf(name);
+			if (start >= 0) {
+				start += name.length;
+				if (url.charAt(start) == '=') {
+					start++;
+					let end = url.indexOf('&', start);
+					if (end >= 0) {
+						return url.substring(start, end);
+					}
+					return url.substring(start);
+				}
+			}
+		} else {
+			// ?name1=value1&name2=value2
+			let start = 1;
+			let index = 1;
+			let name, parameter = {};
+			while (index >= 0 && index < url.length) {
+				start = url.indexOf("=", index);
+				if (start >= 0) {
+					name = url.substring(start, index);
+					start = ++index;
+
+					index = url.indexOf("&", index);
+					if (index >= 0) {
+						parameter[name] = url.substring(start, index);
+						start = ++index;
+					} else {
+						parameter[name] = url.substring(start);
+						break;
+					}
+				} else {
+					break;
 				}
-				return url.substring(start);
 			}
+			return parameter;
 		}
 	}
 	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;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@joyzl/eno",
-	"version": "1.1.2",
+	"version": "1.1.5",
 	"description": "Easy Node Object",
 	"main": "index.js",
 	"scripts": {