js驼峰转连字符

 vue源码的实现方式

//驼峰转连字符

    var r1 = /([a-z])([A-Z])/g;

    function parseToLink(str) {
      return str.replace(r1, function (_, g1, g2) {
        return g1 + '-' + g2.toLowerCase()
      })
    }
    console.log(parseToLink('backgroundColor'))  //background-color

Object.defineProperty 实现数据的双向绑定

function Component(opts) {
      this.opts = opts;

      this.init();
      this.render();
    }
    Component.prototype.init = function () {
      var data = this.opts.data;
      var that = this;
      //就是给this添加属性，data里面的同名属性需要有get，set

      for (var key in data) {
        (function (value) {
          Object.defineProperty(that, key, {
            get() {
              return value
            },
            set(val) {
              value = val
              that.render();
            }
          })
          Object.defineProperty(that.opts.data, key, {
            get() {
              return value
            },
            set(val) {
              value = val
              that.render();
            }
          })
        })(data[key])

      }

    }
    Component.prototype.render = function () {
      var r = /\{\{\s*(.*?)\s*\}\}/g;
      var opts = this.opts;
      var template = opts.template.replace(r, function (match, prop) {
        return opts.data[prop]
      })

      //找到容器元素
      var root = document.querySelector(opts.el)
      //添加到页面
      root.innerHTML = template;
    }

    var p = new Component({
      el: "#app",
      template: '<div style="color:red;font-size:40px">{{text}}</div>',
      data: {
        text: '这是一段文本'
      }
    })