Closed x-shadow-x closed 5 years ago
文章中在介绍设置元素属性的时候提到使用正则表达式来区分什么时候使用setAttribute,其中正则表达式const domPropsRE = /\W|^(?:value|checked|selected|muted)$/中\W是出于什么考虑,应该只要后半部分^(?:value|checked|selected|muted)$就可以了吧?另外文章中有提到带大写字母的属性都会采用el[key] = xxx的方式将其添加到 DOM 元素上,不过测试发现带大写字母的属性正则匹配为假,这时不应该是使用setAttribute去设置么? 对应代码片段:
const domPropsRE = /\W|^(?:value|checked|selected|muted)$/
\W
^(?:value|checked|selected|muted)$
el[key] = xxx
setAttribute
const domPropsRE = /\W|^(?:value|checked|selected|muted)$/ function mountElement(vnode, container, isSVG) { // 省略... const data = vnode.data if (data) { for (let key in data) { switch (key) { case 'style': for (let k in data.style) { el.style[k] = data.style[k] } break case 'class': el.className = data[key] break default: if (domPropsRE.test(key)) { // 当作 DOM Prop 处理 el[key] = data[key] } else { // 当作 Attr 处理 el.setAttribute(key, data[key]) } break } } } // 省略... }
正则测试结果: 求问
fix: https://github.com/HcySunYang/vue-design/commit/b1e1a6f1520aa177550b14b4c9691f6295934995
收到回复,谢谢!
fix: b1e1a6f
改成/\[A-Z]|^(?:value|checked|selected|muted)$/的正则也不对呀... 少删除了一个\,应该改为:/[A-Z]|^(?:value|checked|selected|muted)$/
/\[A-Z]|^(?:value|checked|selected|muted)$/
\
/[A-Z]|^(?:value|checked|selected|muted)$/
文章中在介绍设置元素属性的时候提到使用正则表达式来区分什么时候使用setAttribute,其中正则表达式
const domPropsRE = /\W|^(?:value|checked|selected|muted)$/
中\W
是出于什么考虑,应该只要后半部分^(?:value|checked|selected|muted)$
就可以了吧?另外文章中有提到带大写字母的属性都会采用el[key] = xxx
的方式将其添加到 DOM 元素上,不过测试发现带大写字母的属性正则匹配为假,这时不应该是使用setAttribute
去设置么? 对应代码片段:正则测试结果: 求问