What we can borrow from angular and jQuery extend()?

This document tries to borrow some concepts from jQuery and angular to extend our application.

1. object or function?

Angular and jQuery are perfect examples for us to borrow to extend our application:

typeof angular
"object"

typeof jQuery
"function"

So they cover 2 most important javascript concepts: object and function. By referring to them, we can extend our application more powerful: inheriting from function or extending from object, either or both way.

2. angular extend

Angular extend is basically the extension of:

Object.create()

use angular.extend() for code re-use purpose, like the following:

angular.extend(angular, {
  validateNumber: function() {},
  validateDate: function() {}
});

angular.filterWord = function (word) {
    return word.split(/s+/).map(function (w) {
        return w[0].toUpperCase() + w.substr(1).toLowerCase();
    }).join(' ');
};

Later, we can use them without worry about the scope - they always there after definition:

angular.validateNumber($scope.form.ngModel);
angular.validateDate($scope.airDate);
angular.filterWord(word);

We can use this light-weight angular.extend() to replace angular filter.

Besides, we even can do:

angular.$ = angular.jQuery = angular.extend(jQuery);
assertEqual(angular.$, jQuery); //true;

angular._ = angular.extend(_);
assertEqual(angular._, _); //true

This way to inject jQuery, lodash or underscore library to angular. So what is the benefit? It is the name space. By using this way, we define them in 1 place, and use everywhere, without worry about the name conflict. Let’s see more:

angular.element
- "jQuery(selector, context)"

angular._ = angular.extend(jQuery)
- "jQuery(selector, context)"

angular._ === angular.element
- true

We give alias to angular.element, make things simple. It is a good practice.

3. jQuery

jQuery is a ’function-style’. What we can borrow are to extend function:

1. instance (prototype)
2. class (static)

  function Func() {
    collection-of-properties,
    collection-of-methods
  }

  Func.prototype.instance1 = function() {}
  Func.prototype.instance1 = function() {}

  Func.static1 = function() {}
  Func.static2 = function() {}

3.1 example:

It seems mongoDb Schemas use prototype/class extend-style, similar with jQuery:

1. class/static:

db.collection.findAll()
db.collection.find({_id: ObjectId})

2. instance/prototype:

$instance.$update()
$instance.$save()
$instance.$delete()

It is a very good example for us to think about how to organize the data, properties, and methods.

Let’s have a little deep look at jQuery’s extend:

3.2 jQuery Instance (prototype) extend

jQuery can extend its instance by using function’s prototype:

jQuery.prototype.fn1 = function() {
    ...
    return this;
  }
};

jQuery.prototype.fn2 = function() {
  ...
  return this;
};

$.fn.fn3 = function() {
  ...
  return this;
};

Later, we can use them like this:

$('div#div_id').fn1().fn2();
$('div.div_class').fn3();

3.3 jQuery class (static) extend

Besides, jQuery can extend itself by:

jQuery.fn1 = function() {}

$.fn2 = function() {}

Combining the above, we can optimize our codes by borrow organization and structure. e.g:

• integrate jQuery codes.
• customize 3rd-party jQuery codes.
• extract and re-use some features to public components.
• modulize and inheritance.