《Ember.js实战》——2.5 Ember.js对象模型

简介: 这时你可能会认为,我们仍看不到这种方式优于匿名Ember.Object.create()实现的地方。但是,对于Ember.js应用中用到的所有数据类型和对象而言,显式定义类通常是个好主意。即使这么做需要更多的代码,但你清晰地展示了实例化一个对象的意图,并且可以明确分隔各个业务模型对象。

本节书摘来自异步社区《Ember.js实战》一书中的第2章,第2.5节,作者:【挪】Joachim Haagen Skeie(乔基姆•哈根•斯基)著,更多章节内容可以访问云栖社区“异步社区”公众号查看

2.5 Ember.js对象模型

Ember.js扩展了JavaScript默认对象类的定义,以构建一个更强大的对象模型。此外,Ember.js还支持基于混入类的方式,在模块与模块之间、应用与应用之间共享代码。

你可能想了解Ember.js是怎样知道某个属性发生改变的,以及它何时触发观察者函数和绑定对象。同时你可能还注意到,Ember.js总是要求使get()和set()方法来获取或修改Ember.Object子类对象的属性。当在一个属性上调用set()方法,Ember.js就会检查更新值与对象原有属性值是否不同,如果不同,Ember.js就会触发绑定对象、观察者函数或者计算属性函数。

尽管刚接触Ember.js时使用get()和set()方法看起来可能有点不习惯,但这却是确保Ember.js统一智能处理观察者、绑定、计算属性以及DOM操作的重要机制。实际上,使用get()和set()方法是Ember.js解决涉及多个DOM元素更新及绑定性能问题的重要基础。

创建自定义Ember.js对象通常有两种方式,要么通过extend()方法扩展其他Ember.js对象并添加自定义功能,要么用create()方法创建一个Ember.js对象实例。无论选择哪种方式,应用程序中创建的每个对象都以某种方式扩展自Ember.Object类,Ember.Object是基础类,其确保Ember.js能够提供本书涉及的所有功能。

想像一下,不通过扩展DS.Model来实现Notes.Note模型对象,绕开Ember Data,自己实现一个Notes.Note模型,如代码清单2-9所示。

代码清单2-9 创建Notes.Note对象

screenshot

不像使用Ember.Object.create()创建一个匿名Note实例,这里通过扩展Ember.Object类创建了一个显式的Notes.Note类。注意以下两点。

  • 现在还没有Notes.Note类的实例,因为extend()方法并不`返回一个实例。
  • Note类开始于大写的“N”,这个记号对于你,乃至Ember.js框架,都意味着Note是一个类定义,而非对象实例。

要创建Notes.Note类的新实例,请使用create()方法:

screenshot

这时你可能会认为,我们仍看不到这种方式优于匿名Ember.Object.create()实现的地方。但是,对于Ember.js应用中用到的所有数据类型和对象而言,显式定义类通常是个好主意。即使这么做需要更多的代码,但你清晰地展示了实例化一个对象的意图,并且可以明确分隔各个业务模型对象。最终代码可读性强、更易于维护,而且容易测试。

明确定义应用程序对象还使得在正确的地方添加观察者、绑定以及计算属性变得容易,并确保应用快速应变。考虑这样一个场景,原先后台应用为每个Note对象的value属性提供了纯文本实现方式,以将属性值编码成Markdown格式,但现在要编码成HTML格式了。如代码清单2-10所示,如果在应用程序中显式定义了Notes.Note,就很容易添加这个功能。

代码清单2-10 添加计算属性,将Markdown格式转换为HTML格式

screenshot

一旦成功实现了Notes.convertFromMarkdownToHtml函数,接下来就可以在应用视图模板中将原先使用value的方式更改为使用新增的计算属性htmlValue,这个改变显然易如反掌;简单更改视图Handlebars模板(见代码清单2-2)的代码如下:

screenshot

这样,记事本应用程序就改好了。接下来具体了解Ember.js MVC模式下各层之间如何同步数据。

相关文章
|
5天前
|
存储 JavaScript 前端开发
|
5天前
|
JavaScript 前端开发 网络架构
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
8 1
|
6天前
|
存储 JavaScript 前端开发
JavaScript 对象
JavaScript 对象
11 1
|
10天前
|
JavaScript Java 数据安全/隐私保护
js对象可扩展性和属性的四个特性(下)
js对象可扩展性和属性的四个特性(下)
|
11天前
|
JavaScript 前端开发 算法
虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。
【6月更文挑战第27天】虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。当状态改变,React不直接修改DOM,而是先构建新的虚拟DOM树。通过 diff 算法比较新旧树,找到最小变更,仅更新必要部分,提高性能,避免频繁DOM操作。虚拟DOM还支持跨平台应用,如React Native。它优化了更新流程,简化开发,并提升了用户体验。
17 1
|
12天前
|
JavaScript 前端开发
JavaScript 中的三种事件模型
JavaScript 中的事件模型主要有三种: 传统事件模型(DOM Level 0) 标准事件模型(DOM Level 2) IE 事件模型(非标准,仅限于旧版本的 Internet Explorer)
13 1
|
11天前
|
JavaScript 前端开发
技术经验分享:javaScript遍历对象、数组总结
技术经验分享:javaScript遍历对象、数组总结
10 0
技术经验分享:javaScript遍历对象、数组总结
|
3天前
|
JavaScript
js 简易对象转字符串后恢复为简易对象(如 ^a=$1^b=2转对象)
js 简易对象转字符串后恢复为简易对象(如 ^a=$1^b=2转对象)
7 0
|
4天前
|
JavaScript
js 数组移除指定元素【函数封装】(含对象数组移除指定元素)
js 数组移除指定元素【函数封装】(含对象数组移除指定元素)
4 0