• Blogs (9)
    • 📱 236 - 992 - 3846

      📧 jxjwilliam@gmail.com

    • Version: ‍🚀 1.1.0
  • jQuery: objects and extends

    Blogs20112011-05-06


    While writing a numerous of jQuery codes during my developing (I prefer to JS instead of Smarty templates which seems tiresome and un-flexible), I use different ways to structure the codes and try to find the most effective way for each individual case.

    The followings are the ways I used ever:

    • as an independant package: myPackage={…}.
      This is to avoid global namespace conflict, a ‘object’ solution.
    • as jQuery extend plugin object: jQuery.myObject={…}, or jQuery.extend(…);
      This is jQuery extension.
    • as jQuery functions. jQuery.fn.myFunc=function() {…}

      in JavaScript, every function has a prototype property, which contains an object. when new this function, the function is associated with the prototype object.
      jQuery.fn is an alias of jQuery.prototype. so: $.fn.highlight = function() {…} Actually is the same as: jQuery.prototype.highlight = function() {…}

    • Self-invoking Functions, such as:

      (function(){
          alert('boo');
        })()
    • For JS design, there also are the patterns concepts like: Singleton, Factory, Decorator, and Observer.

    I am going to summary my jQuery apps in the future if I have leisure time. and here are some helpful articles about jQuery’s extends which I collected this morning:

    A Plugin Development Pattern

    In this good article, the author list his way for developing jQuery plugins :

    1. Claim only a single name in the jQuery namespace
    2. Accept an options argument to control plugin behavior
    3. Provide public access to default plugin settings
    4. Provide public access to secondary functions (as applicable)
    5. Keep private functions private
    6. Support the Metadata Plugin

    jQuery’s $.extend is slow

    According to this article:

    1. $.extend is by far the slowest way to add functions to an object.
    2. Assigning methods as anonymous functions (var bar = function ()) is the fastest overall.
    3. Creating a function in the global namespace (function foo()) is sometimes faster, but sometimes the slowest (depending on the browser).

    jQuuery extend()

    Merge the contents of two or more objects together into the first object.