前端有什么改变元素响应其值的变化交互的更好的解决办法?

Question

比方说上图，改变滑动此图下部分不同的商品，此图上部分会监测响应其详细的值，有没有更好的解决办法可复用健壮的办法解决包括不限于框架，模板引擎等。

Answer 1

可以试试angularJs的双向绑定

Answer 2

写个方法检测某个类的变化， 然后在互相对应的元素上加上匹配的属性， 去更新另外一个类上对应的属性。 不知道有没有描述清楚。 框架的话angular啊，vue啊， 如果只有这个功能的话引入那种框架是没什么意思的。

Answer 3

//copy from 《设计模式》
var Observer = (function () {
    //防止消息队列暴漏而被篡改,所以讲消息容器作为静态私有变量保存
    var _messages = {};
    return {
      //注册消息接口
      regist:function (type,fn) {
        //如果此消息不存在,则创建一个该消息类型
        if(typeof _messages[type]==='undefined'){
          //将动作推入该消息对应的动作执行队列中
          _messages[type] = [fn];

          //如果消息不存在
        }else{
          //将动作方法推入该消息对应的动作执行序列中
          _messages[type].push(fn);
        }
        return this;
      },
      //发布消息接口
      fire:function (type,args) {
        //如果该消息没有被注册,则返回
        if(!_messages[type])
          return;
        //定义消息信息
        var events = {
              type:type,
              args:args||{}
            },
            i = 0,
            len = _messages[type].length;
        //遍历消息信息
        for(;i<len;i++){
          //依次执行注册的消息对应的动作序列
          _messages[type][i].call(this,events);
        }
        return this;
      },
      //移除信息接口
      remove:function (type,fn) {
        //如果消息动队列存在
        if(_messages[type] instanceof Array){
          //从最后一个消息动作遍历
          var i = _messages[type].length - 1;
          for(;i >= 0;i--){
            //如果存在改动作则在消息动作序列中移除相应动作
            _messages[type][i] === fn && _messages[type].splice(i,1);
          }
        }
        return this;
      }
    }
  })();

自己写一个好了，方便，自由度高

Answer 4

个人更喜欢React那种单向绑定的思路，即数据改变视图，数据怎么变视图就怎么变，由于用户交互引起的视图变化改变的是数据。 我们要做的就是为每个视图绑定其关心的数据字段就行了。

贴一下单向数据绑定的伪代码：

实现：

class Store {
    private properties: any = {};
    private emitter: EventEmitter;

    public setValue(name: string, value: any): void {
        this.properties[name] = value;
        this.emitter.fire('did-change');
    }

    public getValue(name: string): any {
        return this.properties[name];
    }

    public observe(name: string, callback: (newValue: any) => void): IDisposable {
        callback(this.getValue(name));
        return this.onDidChange(name, (event) => {
            return callback(event.newValue);
        });
    }

    public onDidChange(name: string, callback: (value: { oldValue: any, newValue: any }) => void): IDisposable {
        let oldValue = this.getValue(name);
        return this.emitter.addListener('did-change', () => {
            let newValue = this.getValue(name);
            if (!objects.equals(oldValue, newValue)) {
                let event = {
                    oldValue: oldValue,
                    newValue: newValue
                };
                oldValue = newValue;
                return callback(event);
            }
        });
    }
}

用法：

let store = new Store();
let textArea = <HTMLTextAreaElement>document.querySelector('textarea');

textArea.onchange = () => {
    store.setValue('text', textArea.value);
};

store.observe('text', value => {
    textArea.value = value;
});