15 How jQuery fits into large pr

This chapter covers

• Improving selectors for better performance
• Organizing your code in modules
• Loading modules with RequireJS
• Managing dependencies with Bower
• Creating SPAs with Backbone.js

15.1 Improving the performance of your selectors

15.1.1 Avoiding the Universal selector

---

$('form :checkbox');
$('form input:checkbox');

$('input:checkbox', 'form'); v

$('form > *');

$('form').children(); v

---

15.1.2 Improving the Class selector

---

var $elements = $('p.description'); v

---

15.1.3 Don't abuse the context parameter

---

var $element = $('#test', 'div');

var $element = $('#test'); v

---

15.1.4 Optimizing filters

---

$('p:visible');

$('p').filter(':visible'); v

$(':reset');
$('[type="reset"]'); 

$('input[type="reset"]'); v

$('#my-list li').slice(0,2); v

$('#my-list li:lt(2)');

$('input[placeholder!="Name"]');

$('input').not('[placeholder="Name"]'); v

---

15.1.5 Don't overspecify selectors

---

var $value = $('.revenue span.value'); v

var $value = $('table.revenue .value');

var $values = $('table.revenue tr td span.value');

var $values = $('.revenue span.value'); v

---

15.2 Organizing your code into modules

15.2.1 The object literals pattern

---

var myService = {
  foo: function() {},
  bar: function() {},
  baz: function() {},
  obj: {},
  anotherObj: {}
}

var myService = {
  foo: function() {},
  payment: {
    obj: {},
    bar: function() {}
  },
  basket: {
    anotherObj: {},
    baz: function() {}
  }
};

myService.basket.baz();

---

15.2.2 The Module pattern

---

var myFirstModule = (function() {
 return {
 foo: function() {},
 bar: function () {},
 obj: {}
 }
})();

var myFirstModule = (function() {
 var count = 0;
 function doSomethingPrivate() {};
 return {
 obj: {},
 foo: function() { count++; },
 bar: function () { doSomethingPrivate(); }
 }
})();

window.myService = (function(oldMyService) {
 oldMyService.basket = {
 baz: function() {},
 anotherObj: {}
 };
 return oldMyService;
})(window.myService || {});

---

15.3 Loading modules with RequireJS

15.3.1 Getting started with RequireJS

---

define([[id, ] dependencies,] factory)
Parameters
id (String)
dependencies (Array)
factory (Object|Function)
Returns
undefined

define(['Person'], function(Person) {
 function Car() {
 this.getOwner = function() {
 return 'The owner is ' + Person.name;
 };
 }
 return Car;
});

require(['Car'], function(Car) {
 var car = new Car();
 alert(car.getOwner());
});

---

15.3.2 Using RequireJS with jQuery

---

define(['jquery'], function($) {
  $.fn.jqia = function() {
    //Plugin code here...
  }
});

---

15.4 Managing dependencies with Bower

15.4.1 Getting started with Bower

15.4.2 Searching a package

15.4.3 Installing,updating, and deleting packages

15.5 Creating single-page applications with Backbone.js

15.5.1 Why use an MV* framework?

15.5.2 Starting with Backbone.js

---

MODEL

var todo = Backbone.Model.extend({
  position: 1,
  title: '',
  done: false
});

COLLECTION

var todoList = Backbone.Collection.extend({
  model: todo
});

VIEW

var TodoView = Backbone.View.extend({
  render: function() {
    this.$el.html(this.template(this.model.toJSON()));
    return this;
  }
});

var TodoView = Backbone.View.extend({
  tagName: 'li',
  className; 'todo',
  template: _.template($('#todo-template').html())
});

ROUTER

var TodoRouter = Backbone.Router.extend({
 routes: {
 "todo/:id": "getTodo",
 "search/:string": "searchTodo"
 },
 getTodo: function(id) {
 // Your code here
 },

 searchTodo(string) {
 // Your code here
 }
});

---

15.5.3 Creating a Todos manage application using Backbone.js

---

CREATING THE HTML

INSTALLING BACKBONE.JS

THE TODO MODEL

app.Todo = Backbone.Model.extend({
 defaults: {
 position: 1,
 title: '',
 done: false
 },
 initialize: function() {
 this
 .on('invalid', function(model, error) {
 console.log(error);
 })
 .on('add', function(model, error) {
 console.log(
 'Todo with title "' + model.get('title') + '" added.'
 );
 })
 .on('remove', function(model, error) {
 console.log(
 'Todo with title "' + model.get('title') + '" deleted.'
 );
 })
 .on('change', function(model, error) {
 console.log(
 'Todo with title "' + model.get('title') + '" updated.'
 );
 });
 },
 validate: function(attributes) {
 if(!attributes.title) {
 return 'Title is required and cannot be empty';
 }
 if(
 attributes.position === undefined ||
 parseInt(attributes.position, 10) < 1
 ) {
 return 'Position must be positive';
 }
 }
});

THE TODOS COLLECTION

app.todoList = new (Backbone.Collection.extend({
 model: app.Todo,
 localStorage: new Backbone.LocalStorage('todo-list'),
 comparator: 'position',
 initialize: function() {
 this.on('add remove', this.collectionChanged);
 },
 collectionChanged: function(todo) {
 if (todo.isValid()) {
 this.each(function(element, index) {
 element.save({
 position: index + 1
 });
 });
 this.sort();
 }
 }
}));

THE TODO VIEWS

app.TodoView = Backbone.View.extend({
 tagName: 'li',
 className: 'todo',
 template: _.template($('#todo-template').html()),
 events: {
 'blur .todo-position': 'updateTodo',
 'change .todo-done': 'updateTodo',
 'keypress .todo-title': 'updateOnEnter',
 'click .todo-delete': 'deleteTodo'
 },
 initialize: function() {
 this.listenTo(this.model, 'change', this.render);
 this.listenTo(this.model, 'destroy', this.remove);
 },
 deleteTodo: function() {
 this.model.destroy();
 },
 updateTodo: function() {
 this.model.save({
 title: $.trim(this.$title.text()),
 position: parseInt(this.$position.text(), 10),
 done: this.$done.is(':checked')
 });
 },
 updateOnEnter: function(event) {
 if (event.which === 13) {
 this.updateTodo();
 }
 },
 render: function() {
 this.$el.html(this.template(this.model.toJSON()));
 this.$title = this.$('.todo-title');
 this.$position = this.$('.todo-position');
 this.$done = this.$('.todo-done');
 return this;
 }
});

THE APPLICATION VIEW

app.appView = Backbone.View.extend({
 el: '#todo-sheet',
 events: {
 'click #new-todo-save': 'createTodo'
 },
 initialize: function() {
 this.$input = this.$('#new-todo');
 this.$list = this.$('ul.todos');
 this.listenTo(app.todoList, 'reset sort destroy', this.showTodos);
 this.listenTo(app.todoList, 'invalid', this.showError);
 app.todoList.fetch();
 },
 createTodo: function() {
 app.todoList.create(
 {
 title: this.$input.val().trim()
 },
 {
 at: 0,
 validate: true
 }
 );
 this.$input.val('');
 },
 showError: function(collection, error, model) {
 this
 .$('.error-message')
 .finish()
 .html(error)
 .fadeIn('slow')
 .delay(2000)
 .fadeOut('slow');
 },
 showTodo: function(todo) {
 if (todo.isValid()) {
 var view = new app.TodoView({ model: todo });
 this.$list.prepend(view.render().el);
 }
 },
 showTodos: function() {
 this.$list.empty();
 var todos = app.todoList.sortBy(function(element) {
 return -1 * parseInt(element.get('position'), 10);
 });
 for(var i = 0; i < todos.length; i++) {
 this.showTodo(todos[i]);
 }
 }
});

---

15.6 Summary

---

selecting elements
RequireJS
Bower
Backbone.js

---

15.7 The end

We also wish you health and happiness, and may all your bugs be easily solvable!