關於Polymer的雙向綁定的實現的探究

##探究polymer雙向綁定和單向綁定的實現
個人測試github：https://github.com/lufei222/PolymerElements

---

遇到的問題：
1、雙向綁定的探究從哪裏下手？直接源碼中搜索[[]]和{{}}？
2、基於原始版的polymer.html下面並不能直接使用組件實現雙向綁定？

---

博客更新內容順序
1、研究雙向綁定的實現**（√+ing）**
2、研究單向綁定的實現
3、自定義組件在原生polymer.html上面改裝使原生polymer加入實現雙向/單向綁定的方法
4、總結polymer團隊設計思路
5、分析改設計思路的優缺點
6、對比angularjs的雙向綁定和avalon雙向綁定的優缺點
7、自己設計雙向綁定的簡單框架

---

ps:
這個github項目是我fork的，在原有的基礎上添加自己的研究測試文件。
之前有探究過，但是只是在源碼中搜索[[]]和{{}}所以無從下手，因爲搜索[[或者{{的話進去的是polymer下面的正則表達式處理，當然這位置也是一個切入點，但是無法看到回調的效果，擱置可一段時間沒去繼續考究，水平不夠經驗不足，
今天老王指點了探究入口從數據改變的地方監聽位置下手，果然好方法，兩個月前沒有想到！只想過關鍵字搜索啊！好失敗。

總結自己想不到的原因：
兩個月前我還不知道回調函數的調用棧這回事。這令我想到了日誌記錄鏈式記錄追蹤

方式：

1. 使用組建iron-input這個比較簡單的組建下手

2. 對input的綁定變量添加監聽器，加入debugger，

3. 在值變化的時候會進入斷點，查看回調函數則可以慢慢推敲出其中的實現原理

---

添加測試文件結構描述如下

代碼
form4-test.html
markdown對這代碼轉譯有問題，用圖片代替了

            <link rel="import" href="iron-input.html">

            <input is="iron-input" bind-value="{{myEntity}}">

					        Polymer({
			            is: 'form4-test',
			            properties: {},
			            observers: ["__myEntityChange(myEntity)"],
			            __myEntityChange: function (id) { //
			                debugger
			                console.log("雙向");
			            },
			        });

實現原理分析：
回調順序

---

分別是

fn.apply(this, args);

fn.call(this, property, value, fx.effect, old, fromAbove);

effects.forEach(function (fx) { var fn = Polymer.Bind[’_’ + fx.kind +
‘Effect’]; if (fn) { fn.call(this, property, value, fx.effect, old,
fromAbove); }

this._effectEffects(property, value, effects, old, fromAbove); var
setter = function (value) { this._propertySetter(property, value,
effects); }; this[path] = target[property]; return fn.call(this, e,
e.target); node.dispatchEvent(event);

this.fire(‘bind-value-changed’, {value: this.bindValue});

fn.call(this, value, old);

fn.call(this, property, value, fx.effect, old, fromAbove);

effects.forEach(function (fx) { var fn = Polymer.Bind[’_’ + fx.kind +
‘Effect’]; if (fn) { fn.call(this, property, value, fx.effect, old,
fromAbove); }

this._effectEffects(property, value, effects, old, fromAbove);

this._propertySetter(property, value, effects);

this.bindValue = this.value;
host[methodName](e, e.detail);

從上面順序中我們可以看出有些方法被調用了兩次```

大體思路清晰了，接着研究這些方法之間相互之間是怎麼引用和值的獲取傳遞的。接着推敲作者的思想路線是啥，爲啥這小哥要這樣設計。
更新中。。。