☰

JQuery DOM

Optimize JQuery experience of insert DOM.

目前为 2024-01-22 提交的版本。查看 最新版本。

此脚本不应直接安装，它是一个供其他脚本使用的外部库。如果您需要使用该库，请在脚本元属性加入：// @require https://update.cn-greasyfork.org/scripts/422934/1315442/JQuery%20DOM.js 

  1. if(typeof jQuery===`function`){
  2. 	jQuery.getDOMString=function(dom_tag,dom_attr,dom_html){
  3. 		/*
  4. 		dom_tag:string
  5. 			HTML tags, like div, input, p, button, and so on.
  6. 		dom_attr:object
  7. 			HTML attributes, struct:
  8. 			{
  9. 				id:`id`,
  10. 				class:`class1 class2` OR [`class1`,`class2`],
  11. 				style:`border:none;` OR {border:`none`},
  12. 	
  13. 				Extend attributes:
  14. 				bind:{
  15. 					click:function,
  16. 				},
  17. 			}
  18. 		dom_attr:string
  19. 			HTML inner text
  20. 		dom_html:string
  21. 			HTML inner text
  22. 		*/
  23. 	
  24. 		//属性黑名单指的是在遍历属性时直接忽略的key。
  25. 		//如果需要处理这些key但不要插入html中，则应使用allow_insert_attr，将它置为false即可。
  26. 		let attr_blacklist=[
  27. 			`bind`,`children`,
  28. 		]
  29. 		
  30. 		if(dom_tag==undefined){ //html标记为空时，直接返回空值
  31. 			return ``;
  32. 		}else if(dom_tag!=undefined && dom_attr==undefined && dom_html==undefined){ //html标记不为空、属性和内容为空时，直接返回字符串
  33. 			return dom_tag;
  34. 		}else if(dom_tag!=undefined && dom_attr!=undefined && dom_html==undefined){
  35. 			dom_html=``;
  36. 		}
  37. 	
  38. 		let dom_attr_string=[];
  39. 	
  40. 		//dom_attr is string, it will be the inner html, without attributes.
  41. 		if(typeof dom_attr==`string`){
  42. 			dom_html=dom_attr;
  43. 		}else if(typeof dom_attr==`object`){
  44. 			let allow_insert_attr;
  45. 			for(let key in dom_attr){
  46. 				allow_insert_attr=true;
  47. 				let cur_dom_attr=dom_attr[key];
  48. 				// if(key!=`bind`){
  49. 				// if(jQuery.inArray(key,attr_blacklist)<0){
  50. 				if(!attr_blacklist.includes(key)){
  51. 					//HTML属性的特殊处理
  52. 					switch(key){
  53. 						//Class数组化处理
  54. 						case `class`:
  55. 							if(typeof cur_dom_attr==`object` && cur_dom_attr.length){
  56. 								cur_dom_attr=cur_dom_attr.join(` `).trim();
  57. 							}else if(typeof cur_dom_attr==`object` && cur_dom_attr.length==undefined){
  58. 								let classList=[];
  59. 								for(let key in cur_dom_attr){
  60. 									if(cur_dom_attr[key]==true){
  61. 										classList.push(key);
  62. 									}
  63. 								}
  64. 								cur_dom_attr=classList.join(` `).trim();
  65. 							}
  66. 						break;
  67. 	
  68. 						//Style对象化处理（交给getDOMObject，因此将allow_insert_attr置为false，以跳过插入属性）
  69. 						case `style`:
  70. 							if(typeof cur_dom_attr==`object`){
  71. 								allow_insert_attr=false;
  72. 							}
  73. 						break;
  74. 	
  75. 						//Html属性转为text。此属性会覆盖dom_html参数，因此不可混用
  76. 						case `html`:
  77. 							dom_html=cur_dom_attr;
  78. 							allow_insert_attr=false;
  79. 						break;
  80. 						//tbody属性处理
  81. 						case `tbody`: case `tr`: case `td`:
  82. 							allow_insert_attr=false;
  83. 						break;
  84. 					}
  85. 	
  86. 					//cur_dom_attr为undefined、null时，不插入此属性
  87. 					if(cur_dom_attr!=undefined && cur_dom_attr!=null && allow_insert_attr){
  88. 						dom_attr_string.push(`${key.replace(/([A-Z])/g,"-$1").toLowerCase()}="${cur_dom_attr}"`);
  89. 					}
  90. 				}
  91. 			}
  92. 		}
  93. 	
  94. 		if(dom_tag==`html`){
  95. 			return `${dom_html}`;
  96. 		}
  97. 		
  98. 		return `<${dom_tag} ${dom_attr_string.join(` `)}>${dom_html}</${dom_tag}>`;
  99. 	}
  100.  
  101. 	jQuery.getDOMObject=function(dom_tag,dom_attr,dom_html, attach_type){
  102. 		//dom_tag为对象时，和普通情况一样
  103. 		if(typeof dom_tag==`object` && dom_tag.length==undefined){
  104. 			let dom_attr_fix_blacklist=[
  105. 				`tag`,`attachType`,
  106. 			]
  107. 			let dom_attr_fix_replace={
  108. 				tagName:`tag`, attrName:`attr`,tag_name:`tagName`,attr_name:`attrName`,
  109. 			}
  110. 			let dom_attr_fix={};
  111. 			if(dom_tag.attr==undefined){
  112. 				for(let key in dom_tag){
  113. 					if(!dom_attr_fix_blacklist.includes(key)){
  114. 						let key_fix=key;
  115. 						for(let origin in dom_attr_fix_replace){
  116. 							key_fix=key_fix.replace(origin,dom_attr_fix_replace[origin]);
  117. 						}
  118. 						dom_attr_fix[key_fix]=dom_tag[key];
  119. 					}
  120. 				}
  121. 			}
  122. 			dom_attr=dom_tag.attr || dom_attr_fix;
  123. 			dom_html=dom_tag.html;
  124. 			attach_type=dom_tag.attachType || attach_type;
  125. 			dom_tag=dom_tag.tag;
  126. 		}
  127.  
  128. 		try{
  129. 			let domObject=jQuery(jQuery.getDOMString(dom_tag, dom_attr, dom_html));
  130. 			if(typeof dom_attr==`object`){
  131. 				//DOM样式
  132. 				try{
  133. 					/*
  134. 					CSS Struct:
  135. 					style:{
  136. 						width:`255px`,
  137. 						height:`255px`,
  138. 					}
  139. 					*/
  140. 					if(typeof dom_attr.style==`object`){
  141. 						domObject.css(dom_attr.style);
  142. 					}
  143. 				}catch(e){
  144. 					console.error(e);
  145. 				}
  146.  
  147. 				//DOM事件绑定
  148. 				try{
  149. 					/*
  150. 					Bind Struct:
  151. 					bind:{
  152. 						click:function,
  153. 					}
  154. 					Another Struct:
  155. 					bind:{
  156. 						click:{
  157. 							data:{},
  158. 							function:function,
  159. 						}
  160. 					}
  161. 					*/
  162. 					if(typeof dom_attr.bind==`object`){
  163. 						for(let key in dom_attr.bind){
  164. 							let curBind=dom_attr.bind[key];
  165. 							domObject.unbind(key);
  166. 							if(typeof curBind==`function`){
  167. 								domObject.bind(key, curBind);
  168. 							}else if(typeof curBind==`object`){
  169. 								curBind={
  170. 									...{
  171. 										data:{},
  172. 										function(){},
  173. 									},
  174. 									...curBind,
  175. 								}
  176. 								domObject.bind(key, curBind.data, curBind.function);
  177. 							}
  178. 						}
  179. 					}
  180. 				}catch(e){
  181. 					console.error(e);
  182. 				}
  183.  
  184. 				//DOM子项
  185. 				try{
  186. 					if(typeof dom_attr.children==`object`){
  187. 						let default_children={
  188. 							tag:undefined,attr:undefined,html:undefined,attachType:`append`
  189. 						};
  190.  
  191. 						if(dom_attr.children.length==undefined){
  192. 							/*仅一个子项时，可以直接使用Object
  193. 							{
  194. 								tag:`html`,attr:{id:`id`},html:`Test`,attachType:`append`
  195. 							}
  196. 							*/
  197. 							let children={
  198. 								// ...default_children,
  199. 								...JSON.parse(JSON.stringify(default_children)),
  200. 								...dom_attr.children,
  201. 							}
  202. 							// domObject.attachDOM(children.tag,children.attr,children.html,children.attachType);
  203. 							domObject.append(jQuery.getDOMObject(children));
  204. 						}else{
  205. 							/*多个子项时，采用数组形式
  206. 							[
  207. 								{
  208. 									tag:`html`,attr:{id:`id1`},html:`Test1`,attachType:`append`
  209. 								},
  210. 								{
  211. 									tag:`html`,attr:{id:`id2`},html:`Test2`,attachType:`append`
  212. 								},
  213. 							]
  214. 							*/
  215. 							for(let i=0; i<dom_attr.children.length; i++){
  216. 								let children={
  217. 									// ...default_children,
  218. 									...JSON.parse(JSON.stringify(default_children)),
  219. 									...dom_attr.children[i],
  220. 								}
  221. 								// domObject.attachDOM(children.tag,children.attr,children.html,children.attachType);
  222. 								domObject.append(jQuery.getDOMObject(children));
  223. 							}
  224. 						}
  225. 					}
  226. 				}catch(e){
  227. 					console.error(e);
  228. 				}
  229.  
  230. 				//TBODY表格
  231. 				try{
  232. 					if(typeof dom_attr.tbody==`object` || typeof dom_attr.tr==`object`){
  233. 						let default_tr={
  234. 							tag:`tr`,attr:undefined,html:undefined,children:[],attachType:`append`
  235. 						};
  236. 						let default_td={
  237. 							tag:`td`,attr:undefined,html:undefined,children:[],attachType:`append`
  238. 						}
  239. 						let trDomObject;
  240. 						let trList=dom_attr.tbody || dom_attr.tr;
  241. 						for(let i=0; i<trList.length; i++){
  242. 							let curTr=trList[i];
  243. 							let tr={
  244. 								...JSON.parse(JSON.stringify(default_tr)),
  245. 								...curTr
  246. 							}
  247. 							// let trDomObject=domObject.attachDOM(tr.tag,tr.attr,tr.html,tr.attachType);
  248. 							trDomObject=jQuery.getDOMObject(tr);
  249. 							for(let j=0; j<curTr.td.length; j++){
  250. 								let curTd=curTr.td[j];
  251. 								if(typeof curTd==`string`){
  252. 									curTd={html:curTd};
  253. 								}
  254. 								let td={
  255. 									...JSON.parse(JSON.stringify(default_td)),
  256. 									...curTd,
  257. 								}
  258. 								// trDomObject.attachDOM(td.tag,td.attr,td.html,td.attachType);
  259. 								trDomObject.append(jQuery.getDOMObject(td));
  260. 							}
  261. 							domObject.append(trDomObject);
  262. 						}
  263. 					}
  264. 				}catch(e){
  265. 					console.error(e);
  266. 				}
  267. 			}
  268. 			return domObject;
  269. 		}catch(e){
  270. 			//对不规范写法的容错，如：只传dom_tag的情况下，直接返回字符串，而不是JQuery对象。
  271. 			return jQuery.getDOMString(dom_tag, dom_attr, dom_html);
  272. 		}
  273. 	}
  274.  
  275. 	jQuery.fn.attachDOM=function(dom_tag, dom_attr, dom_html, attach_type){
  276. 		//dom_tag为数组时，批量为母元素添加元素
  277. 		if(typeof dom_tag==`object` && dom_tag.length!=undefined){
  278. 			let default_children={
  279. 				tag:undefined,attr:undefined,html:undefined,attachType:`append`
  280. 			};
  281. 			for(let cur of dom_tag){
  282. 				cur={
  283. 					...JSON.parse(JSON.stringify(default_children)),
  284. 					...cur,
  285. 				}
  286. 				this.attachDOM(cur,undefined,undefined,attach_type);
  287. 			}
  288. 			return;
  289. 		}
  290.  
  291. 		let domObject=jQuery.getDOMObject(dom_tag, dom_attr, dom_html);
  292.  
  293. 		switch(attach_type){
  294. 			case `append`:
  295. 				this.append(domObject);
  296. 			break;
  297. 			case `prepend`:
  298. 				this.prepend(domObject);
  299. 			break;
  300. 			case `after`:
  301. 				this.after(domObject);
  302. 			break;
  303. 			case `before`:
  304. 				this.before(domObject);
  305. 			break;
  306. 			case `html`:
  307. 				this.html(domObject);
  308. 			break;
  309. 		}
  310. 		
  311. 		return domObject;
  312. 	}
  313.  
  314. 	jQuery.fn.appendDOM=function(dom_tag,dom_attr,dom_html){
  315. 		return this.attachDOM(dom_tag,dom_attr,dom_html,`append`);
  316. 	}
  317. 	jQuery.fn.prependDOM=function(dom_tag,dom_attr,dom_html){
  318. 		return this.attachDOM(dom_tag,dom_attr,dom_html,`prepend`);
  319. 	}
  320. 	jQuery.fn.afterDOM=function(dom_tag,dom_attr,dom_html){
  321. 		return this.attachDOM(dom_tag,dom_attr,dom_html,`after`);
  322. 	}
  323. 	jQuery.fn.beforeDOM=function(dom_tag,dom_attr,dom_html){
  324. 		return this.attachDOM(dom_tag,dom_attr,dom_html,`before`);
  325. 	}
  326. 	jQuery.fn.htmlDOM=function(dom_tag,dom_attr,dom_html){
  327. 		return this.attachDOM(dom_tag,dom_attr,dom_html,`html`);
  328. 	}
  329. 	jQuery.fn.getHtml=function(dom_tag,dom_attr,dom_html){
  330. 		return this.attachDOM(dom_tag,dom_attr,dom_html,`html`)[0].outerHTML;
  331. 	}
  332. 	jQuery.getDOMHtml=function(dom_tag,dom_attr,dom_html){
  333. 		return jQuery.fn.getHtml(dom_tag,dom_attr,dom_html);
  334. 	}
  335. }