diff --git a/README.md b/README.md index 6c3f120..9399263 100644 --- a/README.md +++ b/README.md @@ -358,4 +358,74 @@ }); ``` - + +##### 为其他框架提供模板（DOMHtml） + +- 在不依赖JQuery的情况下，仅需要引入html.dom.js即可。 + +- 例：使用DOMHtml为vue提供模板 + + - 注意： + 1. PascalCase写法将自动转换为kebab-case。 + 2. 所有的「v-」开头的key必须加引号。 + 3. 带有「:」的key必须加引号。 + 4. 不可使用带有@的key，必须改成「v-on:」或「vOn」。 + +- ```javascript + export default { + props: { + msg: String, + vtdiv: Boolean, + vtshow: Boolean, + vtbu: Boolean, + vtbus: Array, + }, + methods: { + vbutest(d) { + console.log(d); + } + }, + template: DOMHtml( + [ + { + tag: `div`,id: `div1`,class: `div`,html: `{{msg}}`, + ':class': `vtdiv`,vIf: `vtshow`, + children: [{ + tag: `div`,'v-for': `(bu, index) in vtbus`, + children: [{ + tag: `button`, + class: `vbutton`, + html: `{{index}}: {{bu.name}}`, + 'vBind:id': `'button_' + index`, + ':class': `vtbu`, + 'v-if': `index % 2 == 0`, + 'vOn:click': ` + vbutest(bu.shit); + this.$parent.vbutest(bu.name) + ` + }, ] + }, + { + tag: `button`, + class: `vbutton`, + html: `{{index}}: {{bu.name}}`, + 'vBind:id': `'button_' + index`, + ':class': `vtbu`, + 'v-for': `(bu, index) in vtbus`, + 'vOn:click': ` + vbutest(bu.shit); + this.$parent.vbutest(bu.name) + ` + }, + ] + }, + { + tag: `div`,id: `div1`,class: `div`,html: `{{msg}}`, + ':class': `vtdiv`,vIf: `vtshow`, + }, + ] + ), + } + ``` + + diff --git a/VERSION.md b/VERSION.md index 5be04dc..dce98bd 100644 --- a/VERSION.md +++ b/VERSION.md @@ -1,4 +1,7 @@ # JQuery DOM +- Version: 1.1.0 Build 20231229 + - 加入attribute PascalCase→kebab-case转换。 + - 优化DOM插入性能。 - Version: 1.0.9 Build 20231228 - 将$更名为jQuery以适配更多场合。 - 加入原生getDOMHtml功能。 diff --git a/html.dom.js b/html.dom.js index 96dd421..83fb3dd 100644 --- a/html.dom.js +++ b/html.dom.js @@ -1,4 +1,4 @@ -getDOMHtml=function(dom_tag,dom_attr,dom_html){ +getDOMHtml=DOMHtml=function(dom_tag,dom_attr,dom_html){ let domFullHtml=[]; //dom_tag为数组时，批量为母元素添加元素 if(typeof dom_tag==`object` && dom_tag.length!=undefined){ @@ -31,6 +31,7 @@ getDOMHtml=function(dom_tag,dom_attr,dom_html){ for(let origin in dom_attr_fix_replace){ key_fix=key_fix.replace(origin,dom_attr_fix_replace[origin]); } + key_fix=`${key_fix.replace(/([A-Z])/g,"-$1").toLowerCase()}`; dom_attr_fix[key_fix]=dom_tag[key]; } } diff --git a/jquery.extensions.dom.js b/jquery.extensions.dom.js index 9bd87c9..ee2a3b2 100644 --- a/jquery.extensions.dom.js +++ b/jquery.extensions.dom.js @@ -35,7 +35,7 @@ if(typeof jQuery===`function`){ dom_html=``; } - let dom_attr_string=``; + let dom_attr_string=[]; //dom_attr is string, it will be the inner html, without attributes. if(typeof dom_attr==`string`){ @@ -77,7 +77,7 @@ if(typeof jQuery===`function`){ //cur_dom_attr为undefined、null时，不插入此属性 if(cur_dom_attr!=undefined && cur_dom_attr!=null && allow_insert_attr){ - dom_attr_string+=` ${key}="${cur_dom_attr}"`; + dom_attr_string.push(`${key.replace(/([A-Z])/g,"-$1").toLowerCase()}="${cur_dom_attr}"`); } } } @@ -87,10 +87,36 @@ if(typeof jQuery===`function`){ return `${dom_html}`; } - return `<${dom_tag}${dom_attr_string}>${dom_html}`; + return `<${dom_tag} ${dom_attr_string.join(` `)}>${dom_html}`; } - - jQuery.getDOMObject=function(dom_tag,dom_attr,dom_html){ + + jQuery.getDOMObject=function(dom_tag,dom_attr,dom_html, attach_type){ + //dom_tag为对象时，和普通情况一样 + if(typeof dom_tag==`object` && dom_tag.length==undefined){ + let dom_attr_fix_blacklist=[ + `tag`,`attachType`, + ] + let dom_attr_fix_replace={ + tagName:`tag`, attrName:`attr`, + } + let dom_attr_fix={}; + if(dom_tag.attr==undefined){ + for(let key in dom_tag){ + if(!dom_attr_fix_blacklist.includes(key)){ + let key_fix=key; + for(let origin in dom_attr_fix_replace){ + key_fix=key_fix.replace(origin,dom_attr_fix_replace[origin]); + } + dom_attr_fix[key_fix]=dom_tag[key]; + } + } + } + dom_attr=dom_tag.attr || dom_attr_fix; + dom_html=dom_tag.html; + attach_type=dom_tag.attachType || attach_type; + dom_tag=dom_tag.tag; + } + try{ let domObject=jQuery(jQuery.getDOMString(dom_tag, dom_attr, dom_html)); if(typeof dom_attr==`object`){ @@ -166,7 +192,7 @@ if(typeof jQuery===`function`){ ...dom_attr.children, } // domObject.attachDOM(children.tag,children.attr,children.html,children.attachType); - domObject.attachDOM(children); + domObject.append(jQuery.getDOMObject(children)); }else{ /*多个子项时，采用数组形式 [ @@ -185,7 +211,7 @@ if(typeof jQuery===`function`){ ...dom_attr.children[i], } // domObject.attachDOM(children.tag,children.attr,children.html,children.attachType); - domObject.attachDOM(children); + domObject.append(jQuery.getDOMObject(children)); } } } @@ -202,6 +228,7 @@ if(typeof jQuery===`function`){ let default_td={ tag:`td`,attr:undefined,html:undefined,children:[],attachType:`append` } + let trDomObject; let trList=dom_attr.tbody || dom_attr.tr; for(let i=0; i