前言:
用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选择器是性能杀手。
总结:良好的意识是编写高质量代码的前提,而这些意识在任何框架下都是通用的。