HcySunYang / vue-design

📖 master分支:《渲染器》
http://hcysun.me/vue-design/zh/
6k stars 916 forks source link

Attributes 和 DOM Properties正则判断问题 #258

Closed x-shadow-x closed 5 years ago

x-shadow-x commented 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)$/
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
      }
    }
  }

  // 省略...
}

正则测试结果: image 求问

HcySunYang commented 5 years ago

fix: https://github.com/HcySunYang/vue-design/commit/b1e1a6f1520aa177550b14b4c9691f6295934995

x-shadow-x commented 5 years ago

收到回复,谢谢!

realgeoffrey commented 4 years ago

fix: b1e1a6f

改成/\[A-Z]|^(?:value|checked|selected|muted)$/的正则也不对呀... 少删除了一个\,应该改为:/[A-Z]|^(?:value|checked|selected|muted)$/