Comments (7)
题外话,从研发模式上,我们希望能有三种方式:
- 纯展现型的 web pages,希望能由设计师设计好后,通过工具或外包化的手段,快速搭建上线。
- 重体验型的 web apps. 希望能由后端提供 REST 接口,前端一站式搞定。
- 重功能型的 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,包括:
- Ember.Button
- Ember.Select
- Ember.TextArea
- Ember.Checkbox
- 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 最核心的是:
- Model,支持 Bindings, Computed Properties, Observable
- Template, 直接使用 Handlebars
- View, 黏合 Model 和 Template,并通过 Handlebars.registerHelper, 提供了 action 绑定,child view 等特性
分析下来,Ember.js 的确如最开始的自我定位一样:
- 需要后端提供很好的 REST 接口
- 需求前端自身的素养比较高,知道何时使用什么
- 与 Backbone 相比,Ember 将很多工作自动化了,减少了 boilerplate 工作
- 但同时,Ember 带来的复杂度也很多,至少我看了半天,还是有点晕乎乎的,肯定不适合给后端去用
目前对 Arale 来说,非常值得可借鉴的:
- Handlebars.registerHelper -- action, view 等
- Model 的 addObserver
View 的黏合层似乎太大了?是一个超级的 Controller ? 解耦如何,感觉纯取决于开发者的水平。
from aralejs.github.io.
Related Issues (20)
- 关于base里面的destory方法
- concat链接中有回车符,firefox(linux/ff-30)无法加载. HOT 2
- 建议加个bt2.1.3吧 我自己改了一个 HOT 3
- 用spm安装到本地时怎么选择特定版本? HOT 1
- 会不会考虑加入jqGrid或类似组件? HOT 2
- 官网打不开 HOT 2
- 大半年过去了,似乎都没有什么大的更新呢 HOT 3
- 关于 Arale 的过去、现在和未来 HOT 27
- arale calendar dialog confirm-box 初始化第一次偶尔不执行 刷新一次后就好了 HOT 2
- 日历插件有监听选择日期后的事件吗? HOT 1
- aralejs.org 迁移到 spm3
- aralejs 设计的这么优雅,为什么没有火起来? HOT 7
- spm安装的js无法导入 HOT 6
- 部署也太麻烦了吧
- 用aralejs写业务代码有没有什么最佳实践呢?希望可以回复或讨论一下 HOT 1
- 官网首页出问题了?首页的内容不显示 HOT 2
- 按照官网的步骤创建模块报错了 HOT 1
- Calendar在IE8下报错运行不了 HOT 1
- 官网链接失效(docs/attribute.html) HOT 2
- 官网502啦~ HOT 9
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from aralejs.github.io.