☰

JQuery DOM

Optimize JQuery experience of insert DOM.

当前为 2021-03-09 提交的版本，查看 最新版本。

此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.cn-greasyfork.org/scripts/422934/908887/JQuery%20DOM.js 

  1. // ==UserScript==
  2. // @name         JQuery DOM
  3. // @namespace    https://greasyfork.org/
  4. // @version      1.0.5
  5. // @description  Optimize JQuery experience of insert DOM.
  6. // @author       JMRY
  7. // @include      *://*
  8. // @grant        none
  9. // ==/UserScript==
  10. /*
  11. 	JQuery Extensions DOM
  12. 	(c) 2020-2021 JMRY
  13. 	MIT Licensed.
  14.  
  15. 	Version: 1.0.5 Build 20210301
  16. 	Version: 1.0.4 Build 20200908
  17.  
  18. 	Feature:
  19. 		Optimize JQuery experience of insert DOM.
  20. 		Use object to instead string to generate HTML DOM string or objects.
  21.  
  22. 	How to use:
  23. 		Get the DOM string:
  24. 			$.getDOMString(`div`,{id:`div`,class:`div`},`This is a DIV.`);
  25. 		Insert element:
  26. 			$(`body`).appendDOM(`div`,{id:`div`,class:`div`},`This is a DIV.`);
  27. 			$(`body`).prependDOM(`div`,{id:`div`,class:`div`},`This is a DIV.`);
  28. 			$(`body`).beforeDOM(`div`,{id:`div`,class:`div`},`This is a DIV.`);
  29. 			$(`body`).afterDOM(`div`,{id:`div`,class:`div`},`This is a DIV.`);
  30. 			$(`body`).htmlDOM(`div`,{id:`div`,class:`div`},`This is a DIV.`);
  31. 		
  32. 		Events bind:
  33. 			$(`body`).appendDOM(`div`,{
  34. 				id:`div`,class:[`div`,`div2`],
  35. 				bind:{
  36. 					click(e){
  37. 						console.log(`test`);
  38. 					}
  39. 				}
  40. 			},`This is a DIV.`);
  41.  
  42. 			The bind events can also push the data:
  43. 				$(`body`).appendDOM(`div`,{
  44. 					id:`div`,class:`div`,
  45. 					bind:{
  46. 						click:{
  47. 							data:{index:1},
  48. 							function(e){
  49. 								console.log(e.data.index);
  50. 							}
  51. 						}
  52. 					}
  53. 				},`This is a DIV.`);
  54. 			
  55. 		Styles with JQuery css object struct:
  56. 			$(`body`).appendDOM(`div`,{
  57. 				id:`div`,class:[`div`,`div2`],
  58. 				style:{
  59. 					backgrundColor:`#FFF`,
  60. 					opacity:0,
  61. 				}
  62. 			},`This is a DIV.`);
  63.  
  64. 		Children elements:
  65. 		You can direct insert multi-children in one element, and supports cascade.
  66. 			$(`body`).appendDOM(`div`,{
  67. 				id:`div`,class:[`div`,`div2`],
  68. 				children:[
  69. 					{
  70. 						tag:`div`,
  71. 						attr:{
  72. 							id:`div_child_1`,class:[`div`,`div_child`],
  73. 							children:{
  74. 								tag:`div`,
  75. 								attr:{
  76. 									id:`div_grandson`,class:[`div`,`div_child`,`div_grandson`]
  77. 								},
  78. 								html:`This is a grandson DIV.`
  79. 							}
  80. 						},
  81. 						html:`This is a child DIV.`
  82. 					},
  83. 					{
  84. 						tag:`div`,
  85. 						attr:{
  86. 							id:`div_child_2`,class:[`div`,`div_child`],
  87. 						},
  88. 						html:`This is a child DIV.`
  89. 					}
  90. 				]
  91. 			},`This is a DIV.`);
  92.  
  93. 		HTML string in attributes without dom_html param:
  94. 			Notice: the priority of HTML string in attributes is higher than dom_html param.
  95. 			$(`body`).appendDOM(`div`,{
  96. 				id:`div`,class:[`div`,`div2`],
  97. 				html:`This is a DIV.`,
  98. 				children:{
  99. 					tag:`div`,
  100. 					attr:{
  101. 						id:`div_child_1`,class:[`div`,`div_child`],
  102. 						html:`This is a child DIV.`
  103. 					}
  104. 				}
  105. 			});
  106.  
  107. 		You can also insert element without attributes:
  108. 			$(`body`).appendDOM(`div`,`This is a DIV.`);
  109.  
  110. 		Use object to insert element:
  111. 			$(`body`).appendDOM({
  112. 				tag:`div`,
  113. 				attr:{
  114. 					id:`div`,class:[`div`,`div2`],
  115. 					html:`This is a DIV.`,
  116. 					children:{
  117. 						tag:`div`,
  118. 						attr:{
  119. 							id:`div_child_1`,class:[`div`,`div_child`],
  120. 							html:`This is a child DIV.`
  121. 						}
  122. 					}
  123. 				}
  124. 			})
  125.  
  126. 		Batch insert elements:
  127. 			$(`body`).appendDOM([
  128. 				{
  129. 					tag:`div`,
  130. 					attr:{
  131. 						id:`div1`,class:[`div`,`div1`],
  132. 						html:`This is a DIV 1.`,
  133. 						children:{
  134. 							tag:`div`,
  135. 							attr:{
  136. 								id:`div_child_1`,class:[`div`,`div_child`],
  137. 								html:`This is a child DIV 1.`
  138. 							}
  139. 						}
  140. 					}
  141. 				},
  142. 				{
  143. 					tag:`div`,
  144. 					attr:{
  145. 						id:`div2`,class:[`div`,`div2`],
  146. 						html:`This is a DIV 2.`,
  147. 						children:{
  148. 							tag:`div`,
  149. 							attr:{
  150. 								id:`div_child_1`,class:[`div`,`div_child`],
  151. 								html:`This is a child DIV 2.`
  152. 							}
  153. 						}
  154. 					}
  155. 				},
  156. 			])
  157. */
  158.  
  159. $.getDOMString=function(dom_tag,dom_attr,dom_html){
  160. 	/*
  161. 	dom_tag:string
  162. 		HTML tags, like div, input, p, button, and so on.
  163. 	dom_attr:object
  164. 		HTML attributes, struct:
  165. 		{
  166. 			id:`id`,
  167. 			class:`class1 class2` OR [`class1`,`class2`],
  168. 			style:`border:none;` OR {border:`none`},
  169.  
  170. 			Extend attributes:
  171. 			bind:{
  172. 				click:function,
  173. 			},
  174. 		}
  175. 	dom_attr:string
  176. 		HTML inner text
  177. 	dom_html:string
  178. 		HTML inner text
  179. 	*/
  180.  
  181. 	//属性黑名单指的是在遍历属性时直接忽略的key。
  182. 	//如果需要处理这些key但不要插入html中，则应使用allow_insert_attr，将它置为false即可。
  183. 	let attr_blacklist=[
  184. 		`bind`,`children`,
  185. 	]
  186. 	
  187. 	if(dom_tag==undefined){ //html标记为空时，直接返回空值
  188. 		return ``;
  189. 	}else if(dom_tag!=undefined && dom_attr==undefined && dom_html==undefined){ //html标记不为空、属性和内容为空时，直接返回字符串
  190. 		return dom_tag;
  191. 	}else if(dom_tag!=undefined && dom_attr!=undefined && dom_html==undefined){
  192. 		dom_html=``;
  193. 	}
  194.  
  195. 	let dom_attr_string=``;
  196.  
  197. 	//dom_attr is string, it will be the inner html, without attributes.
  198. 	if(typeof dom_attr==`string`){
  199. 		dom_html=dom_attr;
  200. 	}else if(typeof dom_attr==`object`){
  201. 		let allow_insert_attr;
  202. 		for(let key in dom_attr){
  203. 			allow_insert_attr=true;
  204. 			let cur_dom_attr=dom_attr[key];
  205. 			// if(key!=`bind`){
  206. 			if($.inArray(key,attr_blacklist)<0){
  207. 				//HTML属性的特殊处理
  208. 				switch(key){
  209. 					//Class数组化处理
  210. 					case `class`:
  211. 						if(typeof cur_dom_attr==`object`){
  212. 							cur_dom_attr=cur_dom_attr.join(` `);
  213. 						}
  214. 					break;
  215.  
  216. 					//Style对象化处理（交给getDOMObject，因此将allow_insert_attr置为false，以跳过插入属性）
  217. 					case `style`:
  218. 						if(typeof cur_dom_attr==`object`){
  219. 							allow_insert_attr=false;
  220. 						}
  221. 					break;
  222.  
  223. 					//Html属性转为text。此属性会覆盖dom_html参数，因此不可混用
  224. 					case `html`:
  225. 						dom_html=cur_dom_attr;
  226. 						allow_insert_attr=false;
  227. 					break;
  228. 				}
  229.  
  230. 				//cur_dom_attr为undefined、null时，不插入此属性
  231. 				if(cur_dom_attr!=undefined && cur_dom_attr!=null && allow_insert_attr){
  232. 					dom_attr_string+=` ${key}="${cur_dom_attr}"`;
  233. 				}
  234. 			}
  235. 		}
  236. 	}
  237.  
  238. 	if(dom_tag==`html`){
  239. 		return `${dom_html}`;
  240. 	}
  241. 	
  242. 	return `<${dom_tag}${dom_attr_string}>${dom_html}</${dom_tag}>`;
  243. }
  244.  
  245. $.getDOMObject=function(dom_tag,dom_attr,dom_html){
  246. 	try{
  247. 		let domObject=$($.getDOMString(dom_tag, dom_attr, dom_html));
  248. 		if(typeof dom_attr==`object`){
  249. 			//DOM样式
  250. 			try{
  251. 				/*
  252. 				CSS Struct:
  253. 				style:{
  254. 					width:`255px`,
  255. 					height:`255px`,
  256. 				}
  257. 				*/
  258. 				if(typeof dom_attr.style==`object`){
  259. 					domObject.css(dom_attr.style);
  260. 				}
  261. 			}catch(e){
  262. 				console.error(e);
  263. 			}
  264.  
  265. 			//DOM事件绑定
  266. 			try{
  267. 				/*
  268. 				Bind Struct:
  269. 				bind:{
  270. 					click:function,
  271. 				}
  272. 				Another Struct:
  273. 				bind:{
  274. 					click:{
  275. 						data:{},
  276. 						function:function,
  277. 					}
  278. 				}
  279. 				*/
  280. 				if(typeof dom_attr.bind==`object`){
  281. 					for(let key in dom_attr.bind){
  282. 						let curBind=dom_attr.bind[key];
  283. 						domObject.unbind(key);
  284. 						if(typeof curBind==`function`){
  285. 							domObject.bind(key, curBind);
  286. 						}else if(typeof curBind==`object`){
  287. 							curBind={
  288. 								...{
  289. 									data:{},
  290. 									function(){},
  291. 								},
  292. 								...curBind,
  293. 							}
  294. 							domObject.bind(key, curBind.data, curBind.function);
  295. 						}
  296. 					}
  297. 				}
  298. 			}catch(e){
  299. 				console.error(e);
  300. 			}
  301.  
  302. 			//DOM子项
  303. 			try{
  304. 				if(typeof dom_attr.children==`object`){
  305. 					let default_children={
  306. 						tag:undefined,attr:undefined,html:undefined,type:`append`
  307. 					};
  308.  
  309. 					if(dom_attr.children.length==undefined){
  310. 						/*仅一个子项时，可以直接使用Object
  311. 						{
  312. 							tag:`html`,attr:{id:`id`},html:`Test`,type:`append`
  313. 						}
  314. 						*/
  315. 						let children={
  316. 							...default_children,
  317. 							...dom_attr.children,
  318. 						}
  319. 						domObject.attachDOM(children.tag,children.attr,children.html,children.type);
  320. 					}else{
  321. 						/*多个子项时，采用数组形式
  322. 						[
  323. 							{
  324. 								tag:`html`,attr:{id:`id1`},html:`Test1`,type:`append`
  325. 							},
  326. 							{
  327. 								tag:`html`,attr:{id:`id2`},html:`Test2`,type:`append`
  328. 							},
  329. 						]
  330. 						*/
  331. 						for(let i=0; i<dom_attr.children.length; i++){
  332. 							let children={
  333. 								...default_children,
  334. 								...dom_attr.children[i],
  335. 							}
  336. 							domObject.attachDOM(children.tag,children.attr,children.html,children.type);
  337. 						}
  338. 					}
  339. 				}
  340. 			}catch(e){
  341. 				console.error(e);
  342. 			}
  343. 		}
  344. 		return domObject;
  345. 	}catch(e){
  346. 		//对不规范写法的容错，如：只传dom_tag的情况下，直接返回字符串，而不是JQuery对象。
  347. 		return $.getDOMString(dom_tag, dom_attr, dom_html);
  348. 	}
  349. }
  350.  
  351. $.fn.attachDOM=function(dom_tag, dom_attr, dom_html, attach_type){
  352. 	//dom_tag为数组时，批量为母元素添加元素
  353. 	if(typeof dom_tag==`object` && dom_tag.length!=undefined){
  354. 		let default_children={
  355. 			tag:undefined,attr:undefined,html:undefined,type:`append`
  356. 		};
  357. 		for(let cur of dom_tag){
  358. 			cur={
  359. 				...default_children,
  360. 				...cur,
  361. 			}
  362. 			this.attachDOM(cur);
  363. 		}
  364. 		return;
  365. 	}
  366.  
  367. 	//dom_tag为对象时，和普通情况一样
  368. 	if(typeof dom_tag==`object` && dom_tag.length==undefined){
  369. 		dom_attr=dom_tag.attr;
  370. 		dom_html=dom_tag.html;
  371. 		attach_type=dom_tag.type;
  372. 		dom_tag=dom_tag.tag;
  373. 		
  374. 	}
  375.  
  376. 	let domObject=$.getDOMObject(dom_tag, dom_attr, dom_html);
  377.  
  378. 	switch(attach_type){
  379. 		case `append`:
  380. 			this.append(domObject);
  381. 		break;
  382. 		case `prepend`:
  383. 			this.prepend(domObject);
  384. 		break;
  385. 		case `after`:
  386. 			this.after(domObject);
  387. 		break;
  388. 		case `before`:
  389. 			this.before(domObject);
  390. 		break;
  391. 		case `html`:
  392. 			this.html(domObject);
  393. 		break;
  394. 	}
  395. 	
  396. 	return domObject;
  397. }
  398.  
  399. $.fn.appendDOM=function(dom_tag,dom_attr,dom_html){
  400. 	return this.attachDOM(dom_tag,dom_attr,dom_html,`append`);
  401. }
  402. $.fn.prependDOM=function(dom_tag,dom_attr,dom_html){
  403. 	return this.attachDOM(dom_tag,dom_attr,dom_html,`prepend`);
  404. }
  405. $.fn.afterDOM=function(dom_tag,dom_attr,dom_html){
  406. 	return this.attachDOM(dom_tag,dom_attr,dom_html,`after`);
  407. }
  408. $.fn.beforeDOM=function(dom_tag,dom_attr,dom_html){
  409. 	return this.attachDOM(dom_tag,dom_attr,dom_html,`before`);
  410. }
  411. $.fn.htmlDOM=function(dom_tag,dom_attr,dom_html){
  412. 	return this.attachDOM(dom_tag,dom_attr,dom_html,`html`);
  413. }