diff --git a/README.react.md b/README.react.md index ac5f26e..6cd4933 100644 --- a/README.react.md +++ b/README.react.md @@ -171,13 +171,13 @@ - 使用model传递state和onChange的handle函数,从而更加方便地实现双向绑定。 - - model为数组时,model[0]为value,model[model.length-1]为handle函数,model[1]~model[model.length-1]为扩展数据(如radio的默认选中值)。 + - model为数组时,model[0]为value,model[model.length-1]为handle函数,model[1]~model[model.length-1]为扩展数据(如radio的默认选中值)。一般为[value, onChange]格式。 - model为对象时,将在dom_attr中解构,因此其内部字段与dom_attr保持一致。 - 在model中,checkbox的checked属性将被自动映射为model[0]:boolean。 - - 组件使用model时,需要接收value、onChange两个props。 + - 组件使用model时,需要接收value、onChange两个props,如果有扩展数据,则按顺序写入extend prop中。 - ```javascript function ModelRoot(){ @@ -212,11 +212,12 @@ ...radioList.map((r,i)=>({tag:`input`, type:`radio`, model:[r, changeRadio], checked:r==radio, title:r})), ...radioList.map((r,i)=>({tag:`input`, type:`radio`, value:r, onChange:changeRadio, checked:r==radio, title:r})), // 以上四个radio项的意义完全一致。 - {tag:ModelComponent, model:[input, inputChange]}, + {tag:ModelComponent, model:[input, extend1, extend2, inputChange]}, ]); } - function ModelComponent({value, onChange}){ + function ModelComponent({value, onChange, extend}){ // 组件相关代码 + //上述组件传入的props:value=input, onChange=inputChange, extend=[extend1, extend2] } ``` @@ -246,6 +247,8 @@ - 子元素的tag、attr、html分别对应dom_tag、dom_attr、dom_html,同样支持上述单层对象写法。 +- 如果没有为子元素指定key,则默认传入index作为key。 + - ```javascript return reactDOMHtml({ tag:`div`, diff --git a/VERSION.md b/VERSION.md index 4f2f3b2..220e092 100644 --- a/VERSION.md +++ b/VERSION.md @@ -1,5 +1,10 @@ # JQuery DOM +- Version: 1.1.12 Build 20240124 + - 优化dom_attr的处理逻辑和性能。 + - 优化dom_attr传入规则,防止传入无效字段。 + - 优化Model双向绑定结构,去除不必要的字段。 + - Version: 1.1.11 Build 20240122 - 加入Model双向绑定结构。 diff --git a/jquery.extensions.dom.js b/jquery.extensions.dom.js index 3c50a3f..2ea457c 100644 --- a/jquery.extensions.dom.js +++ b/jquery.extensions.dom.js @@ -104,18 +104,19 @@ if(typeof jQuery===`function`){ let dom_attr_fix_blacklist=[ `tag`,`attachType`, ] - let dom_attr_fix_replace={ - tagName:`tag`, attrName:`attr`,tag_name:`tagName`,attr_name:`attrName`, - } + let dom_attr_fix_replace=new Map([ + [`tagName`,`tag`],[`tag_name`,`tagName`], + [`attrName`,`attr`],[`attr_name`,`attrName`], + ]); 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]); + if(dom_attr_fix_replace.get(key)){ + key_fix=dom_attr_fix_replace.get(key_fix); } - dom_attr_fix[key_fix]=dom_tag[key]; + dom_attr_fix[key_fix]=dom_attr[key]; } } } diff --git a/react.extensions.dom.js b/react.extensions.dom.js index 8250de0..1fc17b2 100644 --- a/react.extensions.dom.js +++ b/react.extensions.dom.js @@ -16,7 +16,7 @@ function reactDOMHtml(dom_tag,dom_attr,dom_html,dom_html_after){ let default_children={ tag:undefined,attr:undefined,html:undefined, }; - for(let cur of dom_tag){ + for(let [index, cur] of dom_tag.entries()){ if(typeof cur==`object` && cur.$$typeof){ domFullObject.push(cur); // 已被React.createElement封装的情况下,不再重新封装 }else if(cur && typeof cur==`object`){ @@ -54,6 +54,10 @@ function reactDOMHtml(dom_tag,dom_attr,dom_html,dom_html_after){ modelObject.value=dom_attr.model[0]; modelObject.extend=dom_attr.model.slice(1,dom_attr.model.length-1); modelObject.onChange=dom_attr.model[dom_attr.model.length-1]; + + if(modelObject.extend.length<=0){ + delete modelObject.extend; + } }else{ modelObject=dom_attr.model; } @@ -66,7 +70,7 @@ function reactDOMHtml(dom_tag,dom_attr,dom_html,dom_html_after){ break; case `radio`: dom_attr.value=modelObject.value; - if(typeof modelObject.extend==`object` && modelObject.extend.length>0){ + if(typeof modelObject.extend==`object` && modelObject.extend.length>0){ //处理默认选项 dom_attr.checked=modelObject.extend[0]; delete modelObject.extend; }else if(modelObject.checked!=undefined){ @@ -86,19 +90,18 @@ function reactDOMHtml(dom_tag,dom_attr,dom_html,dom_html_after){ let dom_attr_fix_blacklist=[ `tag`,`html`,`htmlAfter`,`model`, ] - let dom_attr_fix_replace={ - tagName:`tag`, attrName:`attr`, modelName:`model`, - tag_name:`tagName`,attr_name:`attrName`, model_name:`modelName`, - class:`className`, for:`htmlFor`, - } + let dom_attr_fix_replace=new Map([ + [`tagName`,`tag`],[`tag_name`,`tagName`], + [`attrName`,`attr`],[`attr_name`,`attrName`], + [`modelName`,`model`],[`model_name`,`modelName`], + [`class`,`className`],[`for`,`htmlFor`], + ]); let dom_attr_fix={}; for(let key in dom_attr){ - if(!dom_attr_fix_blacklist.includes(key)){ + if(!dom_attr_fix_blacklist.includes(key) && dom_attr[key]!=undefined){ let key_fix=key; - for(let origin in dom_attr_fix_replace){ - if(origin == key_fix){ - key_fix=key_fix.replace(origin,dom_attr_fix_replace[origin]); - } + if(dom_attr_fix_replace.get(key)){ + key_fix=dom_attr_fix_replace.get(key_fix); } dom_attr_fix[key_fix]=dom_attr[key]; } @@ -143,7 +146,7 @@ function reactDOMHtml(dom_tag,dom_attr,dom_html,dom_html_after){ if(dom_html){ reactDOMChildren.push(dom_html); } - for(let children of dom_children){ + for(let [index, children] of dom_children.entries()){ if(typeof children==`object`){ reactDOMChildren.push(reactDOMHtml(children)); }else if(typeof children==`string`){