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

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

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

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

2、为对象建立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 函数。

3、不经过服务器存储数据

尽管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           
            },
            {
                "name": "Three",
                "id": 3           
            }
        ]
    }
});

var View = Backbone.View.extend({
    template: _.template($('#list-template').html()),

    events: {
        "#items li a": "setSelectedItem"
    },

    render: function() {
        $(this.el).html(this.template(this.model.toJSON()));
    },

    setSelectedItem: function(event) {
        var selectedItem = $(event.currentTarget);
        // Set all of the items to not have the selected class
        $('#items li a').removeClass('selected');
        selectedItem.addClass('selected');
        return false;
    }
});
<script id="list-template" type="template">
<ul id="items">
        <% for(i = items.length - 1; i >= 0; i--) { %>
	<li>
                <a href="#" data-id="<%= item[i].id %>"><%= item[i].name %></a></li>
<% } %></ul>
</script>

如今咱们能很容易的判断被选中的项，而且咱们没有必要通去遍历列表。并且，若是列表很是大，遍历会是一个巨大的开销。所以，当用户点击了列表项后，咱们应该存储被选择了的项。

 

 

var View = Backbone.View.extend({
    initialize: function(options) {
        // Re-render when the model changes
        this.model.on('change:items', this.render, this);
    },

    template: _.template($('#list-template').html()),

    events: {
        "#items li a": "setSelectedItem"
    },

    render: function() {
        $(this.el).html(this.template(this.model.toJSON()));
    },

    setSelectedItem: function(event) {
        var selectedItem = $(event.currentTarget);
        // Set all of the items to not have the selected class
        $('#items li a').removeClass('selected');
        selectedItem.addClass('selected');
        // Store a reference to what item was selected
        this.selectedItemId = selectedItem.data('id'));
        return false;
    }
});

如今咱们能够很容易的肯定哪些项被选中了，而且咱们无需遍历DOM模型。此模式对于存储外部数据来讲很是有用，请记住，你能够建立不需有端点相关联的且存储外部视图数据的模型和集合。

 

此模式的缺点是若是你存储了外部数据到你的模型或集合，它们不能真正遵循RESTful架构，由于它们不能完美的映射Web资源；另外，此模式可能会引发对象的膨胀；若是端点是严格接受JSON格式，那么它可能会引发一些烦恼。

你或许会问本身，“我如何肯定我是否应该把外部数据放进视图或者放进模型？”。若是你为呈现添加了额外的属性，例如容器的高度，那么咱们把它添加到视图。若是此属性跟下层的数据模型有必定的关系，而后你想把它放进模型。总之一句话，根据实际的需求进行判断。