angularJS 双向绑定的应用场景

2014-09-22 23:03:11

用 angularJS(下文简称ng)的时间加起来没超过一天,但的的确确能感觉这是一个值得一试的框架。之前只是想学一下这个新奇的东西,但是在尝试过后,决定用 ng 从写公司 CMS 的后台(原为 backboneJS)。

案例1:双向绑定带来了极大的便利 刚看 ng 的时候,我实在搞不懂这个双向绑定到底是什么,感觉只是在一个地方输入文字,其他地方跟着变化而已。想不到什么应用场景,但是在移植后台编辑器这块的时候让我颇为惊喜。

需求是这样的: 后台编辑器有 3 个,可以来回切换,分别是

  • ace(代码高亮,debug 的时候用)
  • tinymce(可视化,给不懂 HTML 的用户使用)
  • text(纯文本,手机上用)。

在用 backbone 开发的时候,切换 3 个编辑器非常头疼,或者说,从 2 个编辑器变到 3 个的时候非常头疼,因为 backbnone 没有双向绑定,我们可以做的事情就是先找一个 textarea 出来,作为缓冲层。

什么时候用户点击了切换按钮,再用赋值的方式把缓冲层的代码 copy 到切换的编辑器中,如果用户切换了别的编辑器,那就再重复做这个事件。巨麻烦巨坑,以至于为了理清这些编辑器的切换逻辑我们就花了两天。

本以为用 ng 移植这个编辑器也会变得很复杂,结果前几天用 ng 重写的时候,非常顺,几行代码就完成了,把编辑器都绑一个 ng-model,初始化的时候只显示一个,别的先隐藏,点击切换的时候其实只是在做隐藏和显示的切换,这就是一切了!

巨简单,巨省心,完全不用做什么额外的工作就全都好了,结合 ui-bootstrap 的切换 tab 组件,5 分钟完成妥妥的,真让我不敢相信,太 tmd 神奇了。

另外,现在 ng 的周边组件还不多,但这并不影响用 ng 做商用开发,我觉得 ng 自带的一些特性完全可以满足“不是特别复杂”的后台开发了。

不过,对于网站前台开发可能还需要再等等,1.3 版本不支持 IE8 的确是个硬伤,如果是 Mobile 开发可以大胆使用,另外 ng 这种方式对 SEO 还是非常不利的,不晓得今后会有什么对策出来解决这个问题。

- EOF -