Friday, October 23, 2009

Best practice to develop jQuery plugin

  1. Create a private scope for $
  2. Attach plugin to $.fn alias
  3. Add implicit iteration
  4. Enable chaining
  5. Add default options
  6. Add custom options
  7. global custom options
<!DOCTYPE html><html lang="en"><body> <div id="counter1"></div><div id="counter2"></div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script> (function($) { $.fn.count = function(customOptions){ var options = $.extend({},$.fn.count.defaultOptions, customOptions); return this.each(function(){ var $this = $(this); $this.text(options.startCount); var myInterval = window.setInterval(function(){ var currentCount = parseFloat($this.text()); var newCount = currentCount+1; $this.text(newCount+''); }, 1000); }); }; $.fn.count.defaultOptions = { startCount:'100' }; })(jQuery); jQuery.fn.count.defaultOptions.startCount = '300'; jQuery('#counter1').count(); jQuery('#counter2').count({startCount:'500'}); </script></body></html>

Wednesday, October 21, 2009

type check in jQuery

String: typeof object === "string" Number: typeof object === "number" Boolean: typeof object === "boolean" Object: typeof object === "object" Function: jQuery.isFunction(object) Array: jQuery.isArray(object) Element: object.nodeType null: object === null undefined: typeof variable === "undefined" or object.prop === undefined null or undefined: object == null

Saturday, October 17, 2009

it must be "new"ed.

The following is constructor which prevent not using "new" keyword

function User(first, last){ if ( !(this instanceof arguments.callee) ) return new User(first, last); this.name = first + " " + last; }

Friday, October 16, 2009

javascript scope

In JavaScript, {blocks} do not have scope. Only functions have scope. Vars defined in a function are not visible outside of the function.

function overload

function.length can tell you the number of parameters defined, using this we can create overload functions

function addMethod(object, name, fn){ // Save a reference to the old method var old = object[ name ]; // Overwrite the method with our new one object[ name ] = function(){ // Check the number of incoming arguments, // compared to our overloaded function if ( fn.length == arguments.length ) // If there was a match, run the function return fn.apply( this, arguments ); // Otherwise, fallback to the old method else if ( typeof old === "function" ) return old.apply( this, arguments ); }; } function Ninjas(){ var ninjas = [ "Dean Edwards", "Sam Stephenson", "Alex Russell" ]; addMethod(this, "find", function(){ return ninjas; }); addMethod(this, "find", function(name){ var ret = []; for ( var i = 0; i < ninjas.length; i++ ) if ( ninjas[i].indexOf(name) == 0 ) ret.push( ninjas[i] ); return ret; }); addMethod(this, "find", function(first, last){ var ret = []; for ( var i = 0; i < ninjas.length; i++ ) if ( ninjas[i] == (first + " " + last) ) ret.push( ninjas[i] ); return ret; }); } var ninjas = new Ninjas(); assert( ninjas.find().length == 3, "Finds all ninjas" ); assert( ninjas.find("Sam").length == 1, "Finds ninjas by first name" ); assert( ninjas.find("Dean", "Edwards").length == 1, "Finds ninjas by first and last name" ); assert( ninjas.find("Alex", "X", "Russell") == null, "Does nothing" );

later method

Object.prototype.later = function (msec, method) {     var that = this, args = Array.prototype.slice. apply(arguments, [2]); if (typeof method === 'string') { method = that[method]; } setTimeout(function () { method.apply(that, args); }, msec); return that; };

fixed a closure bug

Closure refer the ability that a function can access and manipulate external variable from with a function. Sometimes, this is not good because the if a function depends on the external state, and the external state changes, when the function may produce unexpected result.

//this is because the function inside setTimeout refers to the i only when it is //executed, by then i==4, the problem is that i is external variable for (var i = 0; i < 4; i++) { setTimeout(function() { alert(i); //it is always 4 }, i * 1000); } //the solution is make the i as local variable, so parameter is a solution, and //self-execution var count = 0; for (var i = 0; i < 4; i++) { (function(j) { setTimeout(function() { alert(j); //it will show 0, 1, 2, 3 }, j * 1000); }) (i); }

So sometimes it is good to remove the external dependencies. The follow code is anther example.

var ninja = { yell: function(n) { return n > 0 ? arguments.callee(n - 1) + "a" : "hiy"; } } /* this is also ok var ninja = { yell: function x(n) { return n > 0 ? x(n - 1) + "a" : "hiy"; } }; */ /*this is has bug, because ninja.yell is inside of function which depends external state var ninja = { yell: function(n) { return n > 0 ? ninja.yell(n - 1) + "a" : "hiy"; } }; */ var sumurai = { yell: ninja.yell }; ninja = null; ok(sumurai.yell(4) == "hiyaaaa", "argumnets.collee is the function itself");