探究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);

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

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