Ember.js 学习心得 about aralejs.github.io HOT 7 CLOSED

题外话，从研发模式上，我们希望能有三种方式：

1. 纯展现型的 web pages，希望能由设计师设计好后，通过工具或外包化的手段，快速搭建上线。
2. 重体验型的 web apps. 希望能由后端提供 REST 接口，前端一站式搞定。
3. 重功能型的 web apps. 希望能由前端提供 widget 等组件，后端一站式搞定。

基本原则是：让最合适的人做最合适的事，把事情做到最好。

from aralejs.github.io.

The Ember Object Model

用 Ember.Object.extend 创建 Model, 用 Model.create 得到实例对象，支持 _super 语法糖。

属性的获取和设置必须用 get 和 set.

create 的实例化方式，不如 new XX() 直白

Subclassing Classes

用 extend 实现

Reopening Classes and Instances

reopen 这个 api 命名不太好，其实就是 implement / addMembers
reopenClass 就是 addStatics

这两个 api 坑爹，只看名称，会蒙住，未做到见名知意

Computed Properties (Getters)

Computed Properties (Setters)

computed properties 可以建立属性之间的关联，是自动的

Observers

可监听任何属性的变化：

person.addObserver('fullName', function() {
  // deal with the change
});

语法糖：

Person.reopen({
  fullNameChanged: Ember.observer(function() {
    // this is an inline version of .addObserver
  }, 'fullName')
});

Changes in Arrays

这个设计感觉有点复杂，hacky 味很浓

from aralejs.github.io.

Bindings

Ember 可以绑定任何两个对象的属性。

App.wife = Ember.Object.create({
  householdIncome: 80000
});

App.husband = Ember.Object.create({
  householdIncomeBinding: 'App.wife.householdIncome'
});

App.husband.get('householdIncome'); // 80000

// Someone gets raise.
App.husband.set('householdIncome', 90000);
App.wife.get('householdIncome'); // 90000

One-Way Bindings

App.user = Ember.Object.create({
  fullName: "Kara Gates"
});

App.userView = Ember.View.create({
  userNameBinding: Ember.Binding.oneWay('App.user.fullName')
});

What Do I Use When?

Ember 的 Model 对象属性，总结起来有三个特征：可计算、可绑定、可监听。

请在最合适的场景下使用它们。

from aralejs.github.io.

Creating a Namespace

window.App = Ember.Application.create({
  rootElement: '#sidebar'
});

Describing Your UI with Handlebars

Handlebars

最有意思的部分来了，看 Ember 是如何描述 View 层的：采用 Handlebars.

Ember.View

<script type="text/x-handlebars" data-template-name="say-hello">
      Hello, <b>{{name}}</b>
</script>

var view = Ember.View.create({
  templateName: 'say-hello',
  name: "Bob"
});

view.appendTo('#container');
view.append();
view.remove();

Handlebars Basics

这部分不多说，可阅读 http://handlebars.com/, 很简洁清晰的文档。

非常有特色的部分：

<div id="logo">
  <img {{bindAttr src="logoUrl"}} alt="Logo">
</div>

默认的 Handlebars 需要写成：

<div id="logo">
  <img {{#if logoUrl}} src="{{logoUrl}}" {{/if}} alt="Logo">
</div>

Ember.js 定义了一个 bindAttr 的 helper：

Handlebars.registerHelper('bindAttr', function(options) {
  var out = "";
  var hash = options.hash;
  var context = this;

  for(var p in hash) {
    var v = this[hash[p]];

    if (typeof v === 'boolean') {
      out += ' ' + p;
    } else {
      out += ' ' + p + '="' + this[hash[p]] + '"'; 
    }
  }

  return new Handlebars.SafeString(out);
});

Ember 的实现更复杂，还考虑了 class 等情况。

Handlebars 的 registerHelper 太强大了。

Handling Events with {{action}}

这是我对 Ember 最感兴趣的部分，可以直接在 template 中，指明关联的事件：

<a href="#" {{action "edit" on="click"}}>Edit</a>

同理，也是定义了一个强大的 Handlebars helper.

Building a View Hierarchy

定义了一个 view 的 helper

.....（省略 n 多）

小结：Ember.View 的核心是依赖 Handlebars 管理模板，使用 Handlebars.registerHelper 来做 bindAttr 和 action , view 等扩展，同时使用 Ember.Object 来管理 Model

from aralejs.github.io.

Included Views

这是 Ember 默认提供的一些 view，包括：

1. Ember.Button
2. Ember.Select
3. Ember.TextArea
4. Ember.Checkbox
5. Ember.TextField

利用这些内置的 view，可以大大简化模板的书写，比如 select 不用写循环了，也不用写 {{#each array}} 这种了。不过总感觉这些内置的 view，意义好像并不是很大，使用上却并不简单，要理解一堆参数，还不如定义几个 list, bool 等 helpers 实在。

from aralejs.github.io.

Views In-Depth

Render Pipeline 挺好，提供了自定义的机会。

The Ember Enumerable API

这是给原生对象扩展了 map, filter 等方法。越来越觉得 es5 补丁会很成为很多类库的标配。不过 Arale 为了兼容老代码，目前引入 es5-shim 还是不太合适。

from aralejs.github.io.

总结

Ember.js 最核心的是：

1. Model，支持 Bindings, Computed Properties, Observable
2. Template, 直接使用 Handlebars
3. View, 黏合 Model 和 Template，并通过 Handlebars.registerHelper, 提供了 action 绑定，child view 等特性

分析下来，Ember.js 的确如最开始的自我定位一样：

1. 需要后端提供很好的 REST 接口
2. 需求前端自身的素养比较高，知道何时使用什么
3. 与 Backbone 相比，Ember 将很多工作自动化了，减少了 boilerplate 工作
4. 但同时，Ember 带来的复杂度也很多，至少我看了半天，还是有点晕乎乎的，肯定不适合给后端去用

目前对 Arale 来说，非常值得可借鉴的：

1. Handlebars.registerHelper -- action, view 等
2. Model 的 addObserver

View 的黏合层似乎太大了？是一个超级的 Controller ? 解耦如何，感觉纯取决于开发者的水平。

from aralejs.github.io.