{{name}}我们页面上有如上代码,那怎么实现js中直接修改nam..."> {{name}}我们页面上有如上代码,那怎么实现js中直接修改nam..."> Object.defineProperty()方法的使用
 个人随笔
目录
Object.defineProperty()方法的使用
2021-05-07 18:32:59

Object.defineProperty()方法中有两个方法,一个是get,一个是set,当变量读取的时候会自动执行get方法,当变量设置值的时候会自动执行set方法,比如在vue这种双向绑定的框架中,源码实现就用了Object.defineProperty()来进行劫持。举个例子

  1. <div id="test">
  2. {{name}}
  3. </div>

我们页面上有如上代码,那怎么实现js中直接修改name的值让页面上的值也自动变化呢?这里我们就要借用牛逼的Object.defineProperty()

  1. var Book = {}
  2. var name='';
  3. Object.defineProperty(Book, 'name', {
  4. set: function (value) {
  5. console.log('你取了一个书名叫做' + value);
  6. var test = document.getElementById("test");
  7. var value1 = test.innerHTML;
  8. value1 = value1.replace("{{name}}",value);
  9. test.innerHTML=value1;
  10. name=value1;
  11. },
  12. get: function () {
  13. return '获取了值'+name
  14. }
  15. });
  16. Book.name = 'vue权威指南'; // 会触发set方法
  17. console.log(Book.name); //会触发get方法

完整代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. </head>
  6. <body>
  7. <div id="test">
  8. {{name}}
  9. </div>
  10. </body>
  11. <script>
  12. var Book = {}
  13. var name='';
  14. Object.defineProperty(Book, 'name', {
  15. set: function (value) {
  16. console.log('你取了一个书名叫做' + value);
  17. var test = document.getElementById("test");
  18. var value1 = test.innerHTML;
  19. value1 = value1.replace("{{name}}",value);
  20. test.innerHTML=value1;
  21. name=value1;
  22. },
  23. get: function () {
  24. return '获取了值'+name
  25. }
  26. });
  27. Book.name = 'vue权威指南'; // 会触发set方法
  28. console.log(Book.name); //会触发get方法
  29. </script>
  30. </html>

执行就可以看到效果

 90

啊!这个可能是世界上最丑的留言输入框功能~


当然,也是最丑的留言列表

有疑问发邮件到 : suibibk@qq.com 侵权立删
Copyright : 个人随笔   备案号 : 粤ICP备18099399号