##探究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下面的正则表达式处理,当然这位置也是一个切入点,但是无法看到回调的效果,搁置可一段时间没去继续考究,水平不够经验不足,
今天老王指点了探究入口从数据改变的地方监听位置下手,果然好方法,两个月前没有想到!只想过关键字搜索啊!好失败。
总结自己想不到的原因:
两个月前我还不知道回调函数的调用栈这回事。这令我想到了日志记录链式记录追踪
方式:
-
使用组建iron-input这个比较简单的组建下手
-
对input的绑定变量添加监听器,加入debugger,
-
在值变化的时候会进入断点,查看回调函数则可以慢慢推敲出其中的实现原理
添加测试文件结构描述如下
代码
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);
从上面顺序中我们可以看出有些方法被调用了两次```
大体思路清晰了,接着研究这些方法之间相互之间是怎么引用和值的获取传递的。接着推敲作者的思想路线是啥,为啥这小哥要这样设计。
更新中。。。