Skip to content

Commit

Permalink
- Version: 1.1.0 Build 20231229
Browse files Browse the repository at this point in the history 
	- 加入attribute PascalCase→kebab-case转换。
	- 优化DOM插入性能。
  • Loading branch information
@road0001
road0001 committed Dec 29, 2023
1 parent e83a441 commit a2cd8c5
Show file tree
Hide file tree
Showing 4 changed files with 113 additions and 38 deletions.
72 changes: 71 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`,
},
]
),
}
```


3 changes: 3 additions & 0 deletions VERSION.md
View file
Original file line number Diff line number Diff line change
@@ -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功能。
Expand Down
3 changes: 2 additions & 1 deletion html.dom.js
View file
Original file line number Diff line number Diff line change
@@ -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){
Expand Down Expand Up @@ -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];
}
}
Expand Down
73 changes: 37 additions & 36 deletions jquery.extensions.dom.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`){
Expand Down Expand Up @@ -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}"`);
}
}
}
Expand All @@ -87,10 +87,36 @@ if(typeof jQuery===`function`){
return `${dom_html}`;
}

return `<${dom_tag}${dom_attr_string}>${dom_html}</${dom_tag}>`;
return `<${dom_tag} ${dom_attr_string.join(` `)}>${dom_html}</${dom_tag}>`;
}

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`){
Expand Down Expand Up @@ -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{
/*多个子项时，采用数组形式
[
Expand All @@ -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));
}
}
}
Expand All @@ -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<trList.length; i++){
let curTr=trList[i];
Expand All @@ -210,7 +237,7 @@ if(typeof jQuery===`function`){
...curTr
}
// let trDomObject=domObject.attachDOM(tr.tag,tr.attr,tr.html,tr.attachType);
let trDomObject=domObject.attachDOM(tr);
trDomObject=jQuery.getDOMObject(tr);
for(let j=0; j<curTr.td.length; j++){
let curTd=curTr.td[j];
if(typeof curTd==`string`){
Expand All @@ -221,10 +248,10 @@ if(typeof jQuery===`function`){
...curTd,
}
// trDomObject.attachDOM(td.tag,td.attr,td.html,td.attachType);
trDomObject.attachDOM(td);
trDomObject.append(jQuery.getDOMObject(td));
}
domObject.append(trDomObject);
}

}
}catch(e){
console.error(e);
Expand Down Expand Up @@ -253,32 +280,6 @@ if(typeof jQuery===`function`){
return;
}

//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;
}

let domObject=jQuery.getDOMObject(dom_tag, dom_attr, dom_html);

switch(attach_type){
Expand Down

0 comments on commit a2cd8c5

Please sign in to comment.