Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

嵌套 update 应该阻止并抛出错误,以及未来集成zone.js的设想 #63

Closed
leeluolee opened this issue Nov 24, 2015 · 0 comments

Comments

@leeluolee
Copy link
Member

其实 regularjs 的$update 和 angularjs 的$apply 类似, 但是之前regularjs一直允许 在 一次脏检查周期中允许另外一此$update, 这可能导致一些性能上的损耗。

<input ref='xx' value={name}>
<div  on-click={this.change()}> change</div>

var component = Regular.extend({
  change: function(){
    this.data.name = Math.random();
    this.$update(); // 原版本是允许的, 并且会被同步到view中.
    this.$refs.xx.value === this.data.name // true
  }
}) 

0.4.2版本处理了这个情况,即不允许这种尝试, 即此时你去从dom获取xx.value 发现与this.data.name并不一致, 这是因为regularjs主动的禁止了这种行为。这种措施本来应该没有问题, 但是问题就是之前版本是允许这种行为, 但0.4.2版本时,却静默的阻止了, 这将导致开发者产生迷惑

所以与田翔同学讨论了许久后, 决定与angularjs一致, 如果你在更新周期内又调用了另外一次$update, regularjs会主动抛出一个错误来进行提示。

这个更新除了可以让我们不必要的脏检查更少之外, 还有一个巨大的优势就是为未来引入zone.js 做铺垫(解决$update的方案之一, 另一个方案是常规的Object.defineProperty). 可以查看下

code pen的DEMO

  var Component = Regular.extend({
    template: `
      <button on-click={this.show()} >start</button>
      <button on-click={this.end()} >end</button>
      <div> {num} </div>
    `,
    config: function(){
      this.data.num = 1000;
    },
    show: function(title){
      var data = this.data;

      this.tid = setInterval(function(){
        data.num = Math.random()
      },100)

    },

    end: function(){
      clearInterval(this.tid)
    }
  })

我们发现,神奇的不需要$update, 但是setInterval回调的数据改动, 仍然可以进行更新到view. 当然这仍然是脏检查, 只是框架接管了你手动调用$update的可能

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants