• 如何实现两个input框的同步更新


     1 class MVVM {
     2     constructor(options) {
     3         this.$options = options;
     4         this.$el = options.el;
     5         this.$data = options.data;
     6         this.observe(this.$data);
     7         new Compile(this);
     8     }
     9     observe(data) {
    10         if (!data || typeof data !== 'object') {
    11             return;
    12         }
    13         Object.keys(data).forEach(key => {
    14             this.defineReactive(data, key, data[key]);
    15         })
    16     }
    17     defineReactive(data, key, value) {
    18         let dep = new Dep();
    19         Object.defineProperty(data, key, {
    20             configurable: false,
    21             enumerable: true,
    22             get: () => {
    23                 Dep.target && dep.add(Dep.target);
    24                 return value;
    25             },
    26             set: (newVal) => {
    27                 if (newVal === value) { return; }
    28                 value = newVal;
    29                 dep.notify();
    30             }
    31         })
    32     }
    33 }
    34 class Dep {
    35     constructor() {
    36         this.deps = [];
    37     }
    38     add(dep) {
    39         this.deps.push(dep);
    40     }
    41     notify() {
    42         this.deps.forEach(dep => {
    43             dep.update();
    44         })
    45     }
    46 }
    47 class Watcher {
    48     constructor(vm, cb) {
    49         this.vm = vm;
    50         this.cb = cb;
    51         Dep.target = this;
    52         this.vm.$data['word'];
    53         Dep.target = null;
    54     }
    55     update() {
    56         this.cb.call(this.vm, this.vm.$data['word']);
    57     }
    58 }
    59 class Compile {
    60     constructor(vm) {
    61         this.vm = vm;
    62         this.changeInputValue(vm);
    63     }
    64     changeInputValue(vm) {
    65         let inputs = document.querySelectorAll('input');
    66         Array.from(inputs).forEach(input => {
    67             this.update(input,vm);
    68             input.addEventListener('input', (e) => {
    69                 vm.$data['word'] = e.target.value;
    70             }, false)
    71         })
    72     }
    73     update(input,vm) {
    74         input.value = vm.$data['word'];
    75         new Watcher(vm, function (value) {
    76             input.value = value;
    77         })
    78     }
    79 }
  • 相关阅读:
    mybatisplus-分页配置
    mybatisplus-逻辑删除配置
    python-字符串r、b、u、f
    python-pydantic-一个解析库
    python-class-一个type实例对象
    python-函数式编程&面向对象编程
    python-实例访问类属性的一个问题
    jmeter-取样器
    PSP总结报告
    20181204-1 每周例行报告
  • 原文地址:https://www.cnblogs.com/yinping/p/11714775.html
Copyright © 2020-2023  润新知