a href="xn--fiqr16adi7bgnc.xn--dqr445bdw4a.xn--j6w193g">隆鎮,Hacker News,Network Security,Hacker News,1N4148
My First jQuery plugin - jQuery Plugins,jQuery plugins

My First jQuery plugin

Template Approach

One of the quickest way to learn is to follow a template.  Just copy the code from a template, play with it repeatedly and you will find how easy to learn a thing.  ^^


jQuery plugin templates and Output plugin

If you are a beginner in jQuery, it should be better if you start from modifying a template.

The template for writing a jQuery plugin should look like:

(function($){
  $.fn.plugin_name=function(input_parameters){
    // code comes here
  }
})(jQuery);


The jQuery output plugin is a very simple example, you can go to http://examplet.buss.hk/jquery/output.php to see online demonstration. 

(function($){
  $.fn.output=function(d){
    return (this.is(":text")) ? this.val(d) : this.html(d)
  }
})(jQuery);


jQuery plugins design rules

We should follow the following rules in designing  jQuery plugins:
  1. Avoid using global variables.  jQuery plugins should be worked properly in all kinds of circumstances and global variables should be avoided in order to prevent conflict of usages of variables with same name.
  2. Uses the "jQuery" variable instead of "$" to avoid conflict of libraries. We don't know how a web programmer or web designer use our library. Variable name as "$" may not be available when there is another library using the "$" as their domain (starting object of the library).  It is much safer to use the "jQuery" variable.
  3. You plugin should return the same DOM list as they are passed from jQuery selector engine if possible.  To return the same DOM list can ensure the chainability in using the plugin.
Thus, we should use keyword "var" and place it inside a function to create our own variables, for example if we want to create a variable "a" which has the initial value 10:

(function(){
  var a=10;
})();


Wrapped jQuery plugins with function()

It is convenient that we wrap our plugins by a function:

(function(){
  // write everything you need in a function, for example:
  var some_variable;
  jQuery.fn.plugin_name=function(input_parameters){
    // your code
  };
  // pay attention to the semi-colon ";"
  jQuery.fn.another_plugin_name=function(input_parameters){
    // your code
  }
  // the last semi-colon can be omitted
})();

Rule number 2 requires us using the keyword "jQuery" instead of dollar sign $ to avoid conflict of other libraries.  Since we have wrapped our code with function, we can use "$" to simplify the full name of "jQuery" which cannot cause conflict to other libraries.

(function($){
  // write everything you need in a function, for example:
  var some_variable;
  $.fn.plugin_name=function(input_parameters){
    // your code
  };
  $.fn.another_plugin_name=function(input_parameters){
    // your code
  }
})(jQuery);


Chainability in jQuery plugins

Chainability is a way to cut down our code from

$(selector).plugin_a(param_a);
$(selector).plugin_b(param_b);
$(selector).plugin_c(param_c);

Since three Javascript statements are referred to the same selector, we try to create our plugins to allowing the following chainability:

$(selector).plugin_a(param_a)
.plugin_b(param_b)
.plugin_c(param_c);
 
or write them into a single line code:

$(selector).plugin_a(param_a).plugin_b(param_b) .plugin_c(param_c);
 
Code for Chainability

The jQuery selector engine will pass all the DOM nodes as a list inside a jQuery plugin as "this".  In order to facilitate chainability, we should return the "this" object as the result of our plugin in most of the cases unless the plugin is design for getting specific values (as a getter function).  The plugin code for setter function (function for setting values) should look like:

(function(){
  $.fn.plugin_name=function(input_parameters){
    // your code, for most of the setter function (function for setting values)...
    return this
  }
})(jQuery);

For jQuery plugins for getter function, the code should look like:

(function(){
  $.fn.plugin_name=function(input_parameters){
    // your code, for most of the getter function (function for getting values)...
    return your_values
  }
})(jQuery);

 
Code for Processing every node passed by jQuery selector engine

We can use the jQuery.each() function to handle every node passed by the jQuery, for example, if I want to show alert box for the node name of every node passed by jQuery selector engine,

(function($){
  $.fn.alert_node_name=function(){
    return this.each(function(i,v){
      // i is the count, v represent each object
      alert(v.nodeName);
    })
  }
})(jQuery);

Thus, for most of the jQuery plugins  with setter function should look like the following:

(function($){
  $.fn.jQuery_plugin_template_for_setter_function=function(){
    return this.each(function(){
      // i is the count, v represent each object
      //Your code goes here for handling
    })
  }
})(jQuery);

Explanation of the Output plugin

Now, let's return to our first jQuery Plugin, "Output plugin": 
(function($){
  $.fn.output=function(d){
    return (this.is(":text")) ? this.val(d) : this.html(d)
  }
})(jQuery);
The code is embraced by (function($){ ... })(jQuery) to hide  the internal variable(s) (if any) and preventing them from being accessed by external functions.
 
The plugin is defined inside $.output=function(d){ ... }
 
And the content of the plugin is:
  return (this.is(":text")) ? this.val(d) : this.html(d);
which tries to return either the value or the inner HTML content of a node which is done by testing if this is a "text" node.