js 双向绑定

 

//双向绑定实例  <input name="" ng-bind-123="name" />
    function DataBinder( object_id ) {
        // Create a simple PubSub object
        var pubSub = {
            callbacks: {},
            on: function( msg, callback ) {
              this.callbacks[ msg ] = this.callbacks[ msg ] || [];
              this.callbacks[ msg ].push( callback );
            },

            publish: function( msg ) {
              this.callbacks[ msg ] = this.callbacks[ msg ] || []
              for ( var i = 0, len = this.callbacks[ msg ].length; i < len; i++ ) {
                this.callbacks[ msg ][ i ].apply( this, arguments );
              }
            }
          },
          data_attr = "ng-bind-" + object_id,
          message = object_id + ":keyup",

          changeHandler = function( evt ) {
            var target = evt.target || evt.srcElement, // IE8 compatibility
                prop_name = target.getAttribute( data_attr );

            if ( prop_name && prop_name !== "" ) {
              pubSub.publish( message, prop_name, target.value );
            }
          };

          // Listen to change events and proxy to PubSub
          if ( document.addEventListener ) {
            document.addEventListener( "keyup", changeHandler, false );
          } else {
            // IE8 uses attachEvent instead of addEventListener
            document.attachEvent( "onkeyup", changeHandler );
          }

          // PubSub propagates changes to all bound elements
          pubSub.on( message, function( evt, prop_name, new_val ) {
            var elements = document.querySelectorAll("[" + data_attr + "=" + prop_name + "]"),
                tag_name;

            for ( var i = 0, len = elements.length; i < len; i++ ) {
              tag_name = elements[ i ].tagName.toLowerCase();

              if ( tag_name === "input" || tag_name === "textarea" || tag_name === "select" ) {
                elements[ i ].value = new_val;
              } else {
                elements[ i ].innerHTML = new_val;
              }
            }
        });

        return pubSub;
    }
    
    function User( uid ) {
      // ...
      var binder = new DataBinder( uid ),

      user = {
        // ...
        attributes: {},
        set: function( attr_name, val ) {
          this.attributes[ attr_name ] = val;
          // Use the `publish` method
          binder.publish( uid + ":keyup", attr_name, val, this );
        },
        get: function( attr_name ) {
          return this.attributes[ attr_name ];
        }
      }
      
      binder.on( uid + ":keyup", function( evt, attr_name, new_val, initiator ) {
        if ( initiator !== user ) {
          user.set( attr_name, new_val );
        }
      });

      return user;
    }
    
    // javascript
    var user = new User( 'test');
    user.set( "name", "binding" );