backbone最佳实践

• 前言：
  用backbone开发有几个月时间了，以下是本人使用过程中总结的一些小建议。最大的感受是：对于框架，会用很简单，用得好是非常不容易的，无论使用什么框架，优秀的代码看起来都差不多，而丑陋的代码是千奇百怪的。

• 不指定el-1
  为了保持视图的独立性，不要指定el到具体的dom节点中，我们希望视图中的任何操作只针对视图本身而不会影响外界环境，当我们把el指定到外部节点时，在某个场景下执行了view.remove()，就把视图之外的dom删掉了，在继续渲染就会出错，所以在视图之外执行渲染会更好：

$("#id").html(view.render().el);

意识：解耦。

• 不要滥用框架-2
  有个普遍的误区：当选定了某个框架，比如backbone，进行开发时，我们会习惯性的认为，任何一个功能都应该使用backbone来实现才合理。backbone是一种mvc框架，而mvc框架是以数据模型为驱动的框架，很多场景是不适用的，比如：以展示静态信息为主的官网首页、侧重操作dom的绘图功能等。

意识：明确使用框架的初衷，不要为了使用而使用。滥用框架的根本原因在于不清楚框架产生的动机，只停留在使用的层面上，比如大家都在使用mvc框架，却不会深究mvc是什么。使用了双向数据绑定，却不知道适用的场景是什么。

• 使用事件代理改善加载性能-3
  当视图中存在很多交互时，需要给多个dom节点挂载事件，一般的写法是：

events: {
    "click #id1": "fun1",
    "click #id2": "fun2",
    "click #id3": "fun3",
    "click #id4": "fun4",
    "click #id5": "fun5",
    "click #id6": "fun6"
}

更好的写法：

events: {
    "click #bigId": "funAgent"
},

// 处理事件代理
funAgent: function(e) {
    if (this.$(e.target).closest("id1").length > 0) {
        this.fun1();
        return;
    }

    if (this.$(e.target).closest("id2").length > 0) {
        this.fun2();
        return;
    }

    if (this.$(e.target).closest("id3").length > 0) {
        this.fun3();
        return;
    }

    ......
}

意识：jquery选择器是性能杀手。

• 总结：良好的意识是编写高质量代码的前提，而这些意识在任何框架下都是通用的。