Object.defineProperty理解及运用

最新推荐文章于 2022-12-05 19:53:11 发布

白小纯!

最新推荐文章于 2022-12-05 19:53:11 发布

阅读量429

点赞数 1

分类专栏：前端 - 小玩意文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_40243950/article/details/108531717

版权

前端 - 小玩意专栏收录该内容

2 篇文章 0 订阅

订阅专栏

目前阶段，国内前端’基础框架 - vue’异常火热，不论是面试、工作运用都不可或缺，其便利之处就在于页面内容随数据变化而自动变化，在此记录使用defineProperty自动渲染的示例，并根据此例来加深对于自动渲染的的理解

defineProperty & defineProperties

作用： 直接在一个对象上定义一个(多个)新属性，或者修改一个(多个)对象的现有属性，并返回此对象

value: 绑定属性的数值

writable: 是否可重写数据

enumerable: 是否可枚举对象键名(是否可被Object.keys())

configurable: 对象属性是否可被删除

defineProperty与defineProperties的区别就在于各自绑定属性的数量，defineProperties可同时绑定多个，而defineProperty绑定一个属性：

function Test1() {
      let obj = {},
          name = ''
      Object.defineProperty(obj, 'name', {
        // enumerable: false,
        // value: '伽罗',
        // writable: false,
        // configurable: false,
        get() {
          console.log('Test1: get new value(name): ' + name);
          return name;
        },

        set(newVal) {
          name = newVal;
          console.log('Test1: set new value(name): ' + newVal);
        }
      })
      return obj;
    }
    let t1 = new Test1()
    t1.name = '张三'

function Test2() {
      let obj = {},
          name= '',
          age = 18
      Object.defineProperties(obj, {
        name: {
          get() {
            console.log('Test2: get new value(name): ' + name);
            return name;
          },
          set(newVal) {
            name = newVal;
            console.log('Test2: set new value(name): ' + newVal);
          }
        },

        age: {
          get() {
            console.log('Test2: get new value(age): ' + age);
            return age;
          },
          set(newVal) {
            age = newVal;
            console.log('Test2: set new value(age): ' + newVal);
          }
        }
      })
      return obj;
    }
    let t2 = new Test2()
    t2.name = '张三'
    t2.age = 20

通过上述两个小例子可以看出各自的运用方式，但需要注意的一点是：
getter、setter和value、writable属性不能同时存在，否则会显示 Uncaught TypeError: Invalid property descriptor. Cannot both specify accessors and a value or writable attribute

想要查看详细信息可点击Object.defineProperty前往查看详情
后续是借助此功能编写的计算器功能，能够直接复制到本地运行查看效果
html内容：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>计算器</title>
  <style>
    body{
      padding: 10px 20px;
    }
    input{
      height: 30px;
      outline: none;
      display: block;
      border: none;
      border-radius: 4px;
      box-shadow: 0 0 5px #cccccc;
      margin-bottom: 10px;
      padding-left: 5px;
    }
    button{
      width: 30px;
      height: 30px;
      border-radius: 4px;
      text-align: center;
      cursor: pointer;
      margin-right: 10px;
      outline: none;
      border: none;
      box-shadow: 0 0 5px #cccccc;
      user-select: none;
    }
    .result{
      color: #999999;
      font-size: 13px;
    }
    .result .num{
      color: #333333;
      font-size: 14px;
    }
    .btn-group .active{
      background: rgb(247, 163, 67);
      color: #ffffff;
    }
  </style>
</head>
<body>
  <div class="calculator">
    <p class="result">运算结果: <span class="num">0</span></p>
    <input class="f-input" type="number" value="0" />
    <input class="s-input" type="number" value="0" />
    <div class="btn-group">
      <button data-field="plus" class="active">+</button>
      <button data-field="minus">-</button>
      <button data-field="mul">*</button>
      <button data-field="div">/</button>
    </div>
  </div>
  
  <script src="./js/calculator.js"></script>
</body>
</html>

calculator.js：

// 算数运算类
class Compute {
  plus(a, b) {
    return a + b;
  }

  minus(a, b) {
    return a - b;
  }

  mul(a, b) {
    return a * b;
  }

  div(a, b) {
    if(a % b === 0) {
      return a / b;
    }else if(a / b) {
      return (a / b).toFixed(3) || 0;
    }else {
      return 0;
    }
    
  }
}

// 计算器类
class Calculator extends Compute {
  constructor(doc) {
    super();
    const oCal = doc.querySelector('.calculator');

    this.fInput = oCal.querySelector('.f-input');
    this.sInput = oCal.querySelector('.s-input');
    this.oBtnGroup = oCal.querySelector('.btn-group');
    this.oBtnItems = this.oBtnGroup.querySelectorAll('button');
    this.oResult = oCal.querySelector('.result .num');

    this.data = this.defineData();
    this.btnIdx = 0;
  }

  // 初始化
  init() {
    this.bindEvent();
  }

  // 绑定、监听元素
  bindEvent() {
    this.oBtnGroup.addEventListener('click', this.onFieldBtnClick.bind(this), false);
    this.fInput.addEventListener('input', this.onNumberInput.bind(this), false);
    this.sInput.addEventListener('input', this.onNumberInput.bind(this), false);
  }

  // 点击计算按钮
  onFieldBtnClick(ev) {
    const e = ev || window.event,
          tar = e.target || e.srcElement,
          tagName = tar.tagName.toLowerCase();
    tagName === 'button' && this.fieldUpdate(tar);
  }

  // 计算文字变化
  onNumberInput(ev) {
    const e = ev || window.event,
          tar = e.target || e.srcElement,
          className = tar.className,
          val = Number(tar.value.replace(/\s+/g, '')) || 0;
    
    switch(className) {
      case 'f-input':
        this.data.fNumber = val;
        break;
      case 's-input':
        this.data.sNumber = val;
        break;
      default:
        break;
    }
  }

  // 监听 - 切换运算符选中
  fieldUpdate(target) {
    this.oBtnItems[this.btnIdx].className = '';
    this.btnIdx = [].indexOf.call(this.oBtnItems, target);
    target.className += ' active';
    this.data.field = target.getAttribute('data-field');
  }

  // 渲染计算结果
  computeResult(fNumber, sNumber, field) {
    this.oResult.innerText = this[field](fNumber, sNumber);
  }

  // 数据监听
  defineData() {
    let _obj = {},
        fNumber = 0,
        sNumber = 0,
        field = 'plus';
    const _self = this;
    
    Object.defineProperties(_obj, {
      fNumber: {
        get() {
          return fNumber;
        },
        set(newVal) {
          fNumber = newVal;
          _self.computeResult(fNumber, sNumber, field);
        }
      },

      sNumber: {
        get() {
          return sNumber;
        },
        set(newVal) {
          sNumber = newVal;
          _self.computeResult(fNumber, sNumber, field);
        }
      },

      field: {
        get() {
          return field;
        },
        set(newVal) {
          field = newVal;
          _self.computeResult(fNumber, sNumber, field);
        }
      }
    })
    return _obj;
  }
}

new Calculator(document).init();