最近突然想接触下之前没有接触过的领域,单页应用,正巧之前也是刚刚学习了requirejs的用法,所以趁热打铁选择了很多网站采用的requirejs+underscorejs+backbonejs+jquery(zepto)的方式来进行demo的编写。
这篇文章主要不是介绍怎么去构建一个分页效果的,也不会去讲述backbone的基础知识,而是分享在我构建分页效果时候踩到的一些坑。
1. collection不是必须的
首先,我在开始写的时候就陷入了一个问题,事实证明我真的是多虑了,就是不该用collection的时候,就别去用它了,这个是我在分析堆糖网站源码的时候发现的,整个堆糖就没用到一个collection。
下面来说说为什么:
collection是model的有序集合,model是什么,model就是模型,其实我们做分页的时候,就是不断的问后台要数据,不论是更改页码还是进行排序,其实都是后台再进行操作的,我们做的只是更改路由,去问后台要相应的数据,再填充进html中,所以如果不是对model本身进行增删改查的话,collection就会显得有些冗余了。
2. 慎用collection中的all事件
这个问题其实是跟上面那个问题绑定在一起的,是我强行想要使用collection时遇到的一个问题(洁癖,凑齐MVC三个字母嘛),当时是看到其他的文章,别人的demo中用的就是all事件,于是自己也没动脑筋,不管适合不适合,就先照搬了过来,其实还是有性能上的隐患的,collection是一个model的合集,当一个view不停的在监听collection变化的时候,作为all事件,有一些细小的变换都会导致该事件的触发。
initialize: function() { var _this = this this.page_view = new pageView() this.list = new cnCollection() this.pages = 1 //默认第一页 this.listenTo(this.list, ‘all‘, this.render) //如果使用all,可能会多次触发render }, render: function() { console.log(1) this.models = this.list.models this.pageModels = this.list.page var len = this.models.length, html = ‘‘ for (var i = 0; i < len; i++) { html += ‘<li>‘ + this.template(this.models[i].toJSON()) + ‘</li>‘ } $(‘#prdList‘).html(html) this.page_view.render(this.pageModels) }
先介绍下前提,再看上面的代码,这里的models里面有24个节点,可以看成是有24个商品的数据,我们的目的是把24个节点的数据渲染到html中。
这里的1被输出了20多次,就是说render被执行了至少24次,因为对于collection来说每一次的变换都会触发回调函数,那我们有24个节点添加入了collection,那自然就有24次的变换,这样代码运行的效率就是非常低的了,当然这里还会有其他的变换,所以数字是大于24的,如果把all改成add,就能准确的看到是24次了,那么我们怎么来解决这个问题呢,我使用的是sort事件,sort事件是当该collection已被重新排序时触发的,这样当分页重新获取数据填充collection时,其实backbone就认为collection是进行了重新排序,而且这个事件只会被触发一次,所以sort事件既能完成任务,又能避免性能的浪费,给他点个赞!
3. view中的el属性
其实我要吐槽的不是el属性,而是events属性,大家都知道bb中定义dom事件是在view中进行的。
events: { ‘click .prev-page‘: ‘goToPrev‘, ‘click .next-page‘: ‘goToNext‘ }
就像上面这样定义,但是如果.prev-page不是el属性的子节点的话,就歇菜了!
js部分代码(接口改成假的了,感受下就行):
var cnModel = B.Model.extend({}); /* 列表Collection */ var cnCollection = B.Collection.extend({ model: cnModel, parse: function(res) { this.page = res.data.page return (res && res.data && res.data.list) || {} } }); /* 列表View */ var cnView = B.View.extend({ el: $(‘.g-warp‘), events: { ‘click .prev-page‘: ‘goToPrev‘, ‘click .next-page‘: ‘goToNext‘ }, template: _.template($(‘#list-template‘).html()), initialize: function() { var _this = this this.page_view = new pageView() this.list = new cnCollection() this.pages = 1 //默认第一页 this.listenTo(this.list, ‘sort‘, this.render) //如果使用all,可能会多次触发render }, render: function() { this.models = this.list.models this.pageModels = this.list.page var len = this.models.length, html = ‘‘ for (var i = 0; i < len; i++) { html += ‘<li>‘ + this.template(this.models[i].toJSON()) + ‘</li>‘ } $(‘#prdList‘).html(html) this.page_view.render(this.pageModels) }, goToPrev: function() { this.changeRoutes(-1) }, goToNext: function() { this.changeRoutes(1) }, changeRoutes: function(args) { var pageCount = this.list.page.page_count this.pages = this.pages + args if (this.pages <= 0) { this.pages = 1 alert("已经是第一页") return false } else if (this.pages > pageCount) { this.pages = pageCount alert("一共就" + pageCount + "页") return false } mr.navigate("/pages" + this.pages, { trigger: true }); } }); /* 页码View */ var pageView = B.View.extend({ template: _.template($(‘#page-template‘).html()), render: function(args) { $(‘#pageCount‘).html(this.template(args)) } }); var myRouter = B.Router.extend({ initialize: function() { this.view = new cnView() }, routes: { ‘‘: ‘index‘, ‘pages:num‘: ‘pages‘ }, index: function() { this.view.list.url = ‘http://xxx.com/a.php?mod=Search&act=page&option=&p=‘ + 1 + ‘&callback=?‘ this.view.list.fetch({ success: function() { $(".loading-content").hide() } }) }, pages: function(num) { $(".loading-content").show() this.view.list.url = ‘http:/xxx.com/a.php?mod=Search&act=page&option=&p=‘ + num + ‘&callback=?‘ this.view.pages = Number(num) this.view.list.fetch({ success: function() { $(".loading-content").hide() } }) } }); var mr = new myRouter(); B.history.start();
路由倒是挺好用的,点个赞!今天就写到这里了,以后再有坑就另外开一篇文章了。