backbone.js初体验--构建简单分页应用时踩到的坑

最近突然想接触下之前没有接触过的领域，单页应用，正巧之前也是刚刚学习了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();

 

路由倒是挺好用的，点个赞！今天就写到这里了，以后再有坑就另外开一篇文章了。