angular双向绑定简单实现

angular双向绑定简单实现

双向绑定原理

• 声明一个新组件时，将使用代理设计模式来代理每个属性（getter和setter）。因此，它将能够从代码和用户输入中检测属性值变化

代理proxy：

• Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。
• 示例

var account = {
	balance: 5000
}

// get方法拦截
var bank = new Proxy(account, {
    get: function (target, prop) {
    	return 9000000;
    }
});

console.log(account.balance); // 5,000 (your real balance)
console.log(bank.balance);    // 9,000,000 (the bank is lying)
console.log(bank.currency);   // 9,000,000 (the bank is doing anything)

// set方法拦截
var bank = new Proxy(account, {
    set: function (target, prop, value) {
        // Always set property value to 0
        return Reflect.set(target, prop, 0); 
    }
});

account.balance = 5800;
console.log(account.balance); // 5,800

bank.balance = 5400;
console.log(account.balance); // 0 (the bank is doing anything)
复制代码

模仿angular语法实现双向绑定

• angular的语法

"InputController">
    
    "message"/>   
    "message"/>



复制代码

• 说明

根据angular的语法，首先定义具有属性的controller。然后在模板中使用此控制器。最后，使用ng-bind属性启用与元素值的双重绑定。
复制代码

实现步骤

1. 解析模板并实例化控制器（controller)

• 要使属性绑定，我们需要获得一个位置（也称为控制器）来声明这些属性。因此，有必要定义一个控制器并将其引入我们的框架。
• 在控制器声明期间，框架将查找具有ng-controller属性的元素。
• 如果它匹配其中一个声明的控制器，它将创建该控制器的新实例。此控制器实例仅负责此特定模板。

var controllers = {};
var addController = function (name, constructor) {
    // Store controller constructor
    controllers[name] = {
        factory: constructor,
        instances: []
    };
    
    // Look for elements using the controller
    var element = document.querySelector('[ng-controller=' + name + ']');
    if (!element){
       return; // No element uses this controller
    }
    
    // Create a new instance and save it
    var ctrl = new controllers[name].factory;
    controllers[name].instances.push(ctrl);
    
    // Look for bindings.....
};

addController('InputController', InputController);
复制代码

2. 查找具有使用控制器属性的绑定的元素

var bindings = {};

// Note: element is the dom element using the controller
Array.prototype.slice.call(element.querySelectorAll('[ng-bind]'))
    .map(function (element) {
        var boundValue = element.getAttribute('ng-bind');

        if(!bindings[boundValue]) {
            bindings[boundValue] = {
                boundValue: boundValue,
                elements: []
            }
        }

        bindings[boundValue].elements.push(element);
    });
复制代码

3. 使用代理检测代码中的更新

// Note: ctrl is the controller instance
var proxy = new Proxy(ctrl, {
    set: function (target, prop, value) {
        var bind = bindings[prop];
        if(bind) {
            // Update each DOM element bound to the property  
            bind.elements.forEach(function (element) {
                element.value = value;
                element.setAttribute('value', value);
            });
        }
        return Reflect.set(target, prop, value);
    }
});
复制代码

4. 对元素事件做出反应:

• 最后要做的是对用户交互做出反应。DOM元素在检测到值更改时触发事件。侦听这些事件并使用事件中的新值更新绑定属性。绑定到同一属性的所有其他元素将由于代理而自动更新。

Object.keys(bindings).forEach(function (boundValue) {
  var bind = bindings[boundValue];
  
  // Listen elements event and update proxy property   
  bind.elements.forEach(function (element) {
    element.addEventListener('input', function (event) {
      proxy[bind.boundValue] = event.target.value; // Also triggers the proxy setter
    });
  })  
});
复制代码

全部代码整合

/* html code */
"InputController">
    "message"/>   
    "message"/>   
    "onButtonClick()">Click!

/* Framework code */
(function () {
    var controllers = {};
    var addController = function (name, constructor) {
            // Store controller constructor
    controllers[name] = {
        factory: constructor,
        instances: []
    };
        
    // Look for elements using the controller 
    var element = document.querySelector('[ng-controller=' + name + ']');
    if (!element){   
        return;
    }
        
    // Create a new instance and save it
    var ctrl = new controllers[name].factory();
    controllers[name].instances.push(ctrl);
        
        // Get elements bound to properties
        var bindings = {};
        Array.prototype.slice.call(element.querySelectorAll('[ng-bind]'))
            .map(function (element) {
                var boundValue = element.getAttribute('ng-bind');
            
                if (!bindings[boundValue]) {
                    bindings[boundValue] = {
                      boundValue: boundValue,
                      elements: []
                    }
                }
            
                bindings[boundValue].elements.push(element);
                });    
            
        // Update DOM element bound when controller property is set
        var proxy = new Proxy (ctrl, {
            set: function (target, prop, value) {    
                var bind = bindings[prop];
                if (bind) {  
                      bind.elements.forEach(function (element) {
                        element.value = value;
                        element.setAttribute('value', value);
                      });
                }
                return Reflect.set(target, prop, value);
            }
        });
            
        // Listen DOM element update to set the controller property
        Object.keys(bindings).forEach(function (boundValue) {
            var bind = bindings[boundValue];
            bind.elements.forEach(function (element) {
                element.addEventListener('input', function (event) {
                      proxy[bind.boundValue] = event.target.value;
                });
            })  
        });
            
        // Fill proxy with ctrl properties
        // and return proxy, not the ctrl !
        Object.assign(proxy, ctrl);
        return proxy;
    }
        
    // Export framework in window
    this.angular = {
        controller: addController
    }
})();
          
/* User code */
function InputController () {
    this.message = 'Hello World!';
}
        
var myInputController = angular.controller('InputController', InputController);
        
function onButtonClick () {
    myInputController.message = 'Clicked!';   
}
复制代码

参考链接

• 如何通过编写自己的Web开发框架来提高您的JavaScript技能
• 阮一峰-es6代理