关于Polymer的双向绑定的实现的探究（更新中）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u011456337/article/details/51148296

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

从上面顺序中我们可以看出有些方法被调用了两次“`

大体思路清晰了，接着研究这些方法之间相互之间是怎么引用和值的获取传递的。接着推敲作者的思想路线是啥，为啥这小哥要这样设计。
更新中。。。