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 0return Reflect.set(target, prop, 0); }
});account.balance = 5800;
console.log(account.balance); // 5,800bank.balance = 5400;
console.log(account.balance); // 0 (the bank is doing anything)
复制代码

模仿angular语法实现双向绑定

• angular的语法

<div ng-controller="InputController"><!-- "Hello World!" --><input ng-bind="message"/>   <input ng-bind="message"/>
</div><script type="javascript">function InputController () {this.message = 'Hello World!';}angular.controller('InputController', InputController);
</script>
复制代码

• 说明

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

实现步骤

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

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

var controllers = {};
var addController = function (name, constructor) {// Store controller constructorcontrollers[name] = {factory: constructor,instances: []};// Look for elements using the controllervar element = document.querySelector('[ng-controller=' + name + ']');if (!element){return; // No element uses this controller}// Create a new instance and save itvar 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 */
<div ng-controller="InputController"><input ng-bind="message"/>   <input ng-bind="message"/>   <button onclick="onButtonClick()">Click!</button>
</div>
/* Framework code */
(function () {var controllers = {};var addController = function (name, constructor) {// Store controller constructorcontrollers[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 itvar ctrl = new controllers[name].factory();controllers[name].instances.push(ctrl);// Get elements bound to propertiesvar 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 setvar 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 propertyObject.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 windowthis.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代理