《BackboneJS框架的技巧及模式》(2)

《BackboneJS框架的技巧及模式》(2)

本文紧接第一部分：《BackboneJS框架的技巧及模式(1)》

作者：chszs，转载需注明。博客主页：http://blog.csdn.net/chszs

二、为对象创建Fa?ade外观模式

在实际项目中，需求是经常变化的，因此，终端返回的JSON数据格式也是如此。如果你的视图和下层的数据模型是紧耦合的，那么这是一种痛苦。有鉴于此，我为所有的对象都创建getter和setter函数。

此模式使用较广。如果任何底层的数据结构发生了变化，那么视图层无需随之更新；你会有一个数据访问点，所以你不太可能忘记做深度复制，编写的代码将会更易于维护和调试。此模式的缺点在于它可能会导致模型或集合有一点点膨胀。

下面我们看一个例子来阐明此模式。假想我们有一个Hotel模型，它包含了rooms和当前有效的rooms，而且我们希望可以通过床位大小来获取rooms。

var Hotel = Backbone.Model.extend({
    defaults: {
        "availableRooms": ["a"],
        "rooms": {
            "a": {
                "size": 1200,
                "bed": "queen"
            },
            "b": {
                "size": 900,
                "bed": "twin"
            },
            "c": {
                "size": 1100,
                "bed": "twin"
            }
        },

        getRooms: function() {
            $.extend(true, {}, this.get("rooms"));
        },

        getRoomsByBed: function(bed) {
            return _.where(this.getRooms(), { "bed": bed });
        }
    }
});

现在我们假设明天你要发布项目，但你发现终端开发者忘记告诉你rooms的数据结构发生了修改。你的代码现在看起来会像下面这样：

var Hotel = Backbone.Model.extend({
    defaults: {
        "availableRooms": ["a"],
        "rooms": [
            {
                "name": "a",
                "size": 1200,
                "bed": "queen"
            },
            {
                "name": "b",
                "size": 900,
                "bed": "twin"
            },
            {
                "name": "c",
                "size": 1100,
                "bed": "twin"
            }
        ],

        getRooms: function() {
            var rooms = $.extend(true, {}, this.get("rooms")),
             newRooms = {};

            // transform rooms from an array back into an object
            _.each(rooms, function(room) {
                newRooms[room.name] = {
                    "size": room.size,
                    "bed": room.bed
                }
            });
        },

        getRoomsByBed: function(bed) {
            return _.where(this.getRooms(), { "bed": bed });
        }
    }
});

我们仅修改了一个函数，以便将Hotel的结构转变为应用程序所期望的结构，以便整个应用程序仍然能像我们所预期的那样工作。如果这里没有getter函数，我们很可能不得不为rooms的每个访问点进行代码修改。理想情况下，你会修改所有函数，以适应新的数据结构，但如果你有项目发布的时间压力，此模式可以为你节省时间。

顺便说一句，此模式既可以被认为是Facade装饰模式，因为它隐藏了创建对象复制的复杂性，也可以认为是Bridge桥接模式，因为它可以用于将数据转换为所期望的格式。

最佳实践是对任何对象都使用getters 和setters 函数。

三、不通过服务器存储数据

尽管Backbone.js有模型和集合映射到RESTful端点的规则，有时候你可能会花大量时间查找你想要的存储在服务器端的数据或集合。

有一些关于Backbone.js的文章，描述了此模式。下面让我们一起来快速看一个小例子。假设你有一个ul元素列表。

<ul>
	<li><a href="#" data-id="1">One</a></li>
	<li><a href="#" data-id="2">Two</a></li>
    . . .
	<li><a href="#" data-id="n">n</a></li>
</ul>

列表有200项，当使用者点击列表中的某项时，选择的项变成被选中状态：

var Model = Backbone.Model.extend({
    defaults: {
        items: [
            {
                "name": "One",
                "id": 1           
            },
            {
                "name": "Two",
                "id": 2           
            },
            {