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");

efficency string operation

Because string is immutable in JavaScript, concatenation with array.join('') is much efficient. The following code use all the chinese characters. Click here to show

var sb = []; sb[sb.length] = "<p>"; for (var i = 0x4e00; i <= 0x9fcf; i++) { sb[sb.length] = String.fromCharCode(i); } sb[sb.length] = "</p>"; $("#chinese").html(sb.join("")); return false;

the bind function

John Resig has page Learning Advanced JavaScript to explain how the following script works.

// The .bind method from Prototype.js Function.prototype.bind = function(){ var fn = this, args = Array.prototype.slice.call(arguments), object = args.shift(); return function(){ return fn.apply(object, args.concat(Array.prototype.slice.call(arguments))); }; };

His explanation is wonderful. And this piece of code is simple, powerful. But it maybe still hard for anyone to understand without any explanation. So I refactored it as follow, and add one use case.

Function.prototype.bind = function() { var function_to_be_bound = this; var args = Array.prototype.slice.call(arguments); var context_object = args.shift(); var binding_parameters = args; return function() { var invoking_parameters = Array.prototype.slice.call(arguments); var combined_parameters = binding_parameters.concat(invoking_parameters); var result_from_function_run_in_new_context = function_to_be_bound.apply(context_object, combined_parameters); return result_from_function_run_in_new_context; }; } function reply_greeting(your_name) { //"this" is the context object alert("my name is " + this.name + ", Nice to meet you, " + your_name); } var fred = { name: "fred" }; var reply_greeting_of_fred_to_you = reply_greeting.bind(fred); var reply_greeting_of_fred_to_john = reply_greeting.bind(fred, "john"); reply_greeting_of_fred_to_you("jeff"); //expect: "my name is fred, Nice to meet you, jeff" reply_greeting_of_fred_to_john(); //expect: "my name is fred, Nice to meet you, john"

Another article may help you to understand is Functional Javascript

Thursday, October 15, 2009

memoried function

Function.prototype.memorized = function(key) { this._values = this._values || {}; if (this._values[key] !== undefined) { return this._values[key] } else { //"this" is parent function object this._values[key] = this.apply(this, arguments); /* the "this" passed as context object is optional? */ return this._values[key]; } }; function isPrime(num) { alert(this); var prime = num != 1; for (var i = 2; i < num; i++) { if (num % i == 0) { prime = false; break; } } return prime; } var a = isPrime.memorized(5); alert(a); var b = isPrime.memorized(5); alert(b);

curry function

Function.method('curry', function() { //arguments can not be passed in to closure function //var l = arguments.length; //var args = []; //for (var i = 0; i < l; i++) { // args[i] = arguments[i]; //} var args = Array.prototype.slice.apply(arguments); var original_function = this; return function() { //arguments is not the external arguments //for (var i = 0; i < arguments.length; i++) { // args[args.length] = arguments[i]; //} args = args.concat(Array.prototype.slice.call(arguments)); return original_function.apply(null, args); }; }); function add() { var sum = 0; for (i = 0; i < arguments.length; i++) { sum += arguments[i]; } return sum; } var add1 = add.curry(1); var s = add1(2); alert(s);

Tuesday, October 13, 2009

an issue caused by prototype inheritance in javascript

This issue is not obvious, in some case, it does not even cause any error at all. But fixing this issue brings some benefit. Here the use case.

var user_constructor = function() { alert(this.constructor); //function() { alert(this .. }; this.constructor.count++; this.Id = this.constructor.count; }; user_constructor.count = 0; var c = new user_constructor(); alert(c.Id); //1 alert(c.constructor == user_constructor); //true alert(user_constructor.count); //1

We know that constructor is also an object, (an object is not necessarily a constructor), in our case our constructor has property "count" to count the instance created by the constructor. And the Id is this last count. Very straight forward. Now if we want add in inheritance, we can implement as follow.

var user_constructor = function() { alert(this.constructor); //function Object() { [native code] } this.constructor.count++; this.Id = this.constructor.count; }; user_constructor.count = 0; var user_prototype = { Name: "Unknown" }; user_constructor.prototype = user_prototype; var c = new user_constructor(); alert(c.Id); //NaN alert(c.constructor == user_constructor); //false alert(user_constructor.count); //0

Suddenly, the code broke down. Is it because the fault of the prototype object? No. We need to have deeper understand how constructor works. When an object is created by using "new user_constructor()", the javascript runtime need to determine what constructor is used used to create an object "this". But how. According to ECMAScript Language Specification Edition 3

ECMAScript supports prototype-based inheritance. Every constructor has an associated prototype,and every object created by that constructor has an implicit reference to the prototype(calledthe object’s prototype)associated with its constructor.

To implement this feature, the runtime need to create "this" that has be behavior of user_constructor.prototype, so runtime will use user_constructor.prototype.constructor function to create "this". In the first case, there is no prototype based inheritance. So user_constructor.prototype is [object Object], naturally, user_constructor.prototype.constructor should [object Object] as well, but it is actually function() { alert(this .. }. Why. I don't know exactly, but this may be because user_constructor has no user assigned prototype, so the object should be created by user_constructor itself. In the second case, user_constructor.prototype is user_prototype, which is create by "function Object() { [native code] }". So runtime will use that function as constructor. After we rationalize this, we can easily fix this behavior as follow by adding one line "user_prototype.constructor = user_constructor;"

var user_constructor = function() { alert(this.constructor); //function() { alert(this .. }; this.constructor.count++; this.Id = this.constructor.count; }; user_constructor.count = 0; var user_prototype = { Name: "Unknown" }; user_constructor.prototype = user_prototype; user_prototype.constructor = user_constructor; var c = new user_constructor(); alert(c.Id); //NaN alert(c.constructor == user_constructor); //false alert(user_constructor.count); //0