A preliminary interview with jquery plugin development

has been just in theory to learn the development of jquery plugin ... Now write a countdown to the small plug-in try, by the way to review the development and writing of jquery plugin:

Countdown effect:

The first is to write a regular function call method:

<! DOCTYPE html>
Written in plug-in form:
HTML file:
<! DOCTYPE html>
JS: Name: jquery. Timer.js
/**$.fn.jquerytimer* Generate Countdown * Parameter: *daydom boolean value defaults to True to turn on remaining days *hourdom Boolean defaults to True turn on remaining hours *mindom Boolean defaults to True Turn on remaining minutes *secdom Boolean defaults to True to turn on remaining seconds *endtime object value set end time default value is current time assignment form: endtime:new Date (' 2015/2/28 23:59:59 ') *tlabe The L object value sets the label style format for jquery $ (). Object in CSS (object) is equivalent to the *timevalue object value setting the time zone's style format to jquery $ (). Object in CSS (object) equivalent */ ;(function ($) {$.fn.jquerytimer = function (options) {var defaults = {Daydom:true,hourdom:true,mindom:true,secdom:true , Endtime:new date (),//End time Tlabel: {},//label style timevalue: {}//countdown style},//default parameter value $lasttimedom = ';d efaults = $.extend ( defaults,options); $ (this). Append ("<div class= ' lasttime ' ><p></p></div>");//Generate Countdown node $ Lasttimedom = $ (this). Find (". Lasttime p"); setdom = function () {if (defaults. Daydom) {$lastTimeDom. Append ("<span class= ' Day timevalue ' ></span><span class= ' Daylabel tlabel ' > Days </span> ");} Whether to turn on the number of days if (defaults. Hourdom) {$lastTimeDom. Append ("<span class= ' hours timevalue ' &GT;&LT;/SPAN&GT;&LT;span class= ' Hourslabel tlabel ' > Hours </span> ");} Whether to turn on the hour if (defaults. Mindom) {$lastTimeDom. Append ("<span class= ' minute timevalue ' ></span><span class= ' Minlabel tlabel ' > Points </span> ");} Whether to turn on minute if (defaults. Secdom) {$lastTimeDom. Append ("<span class= ' second timevalue ' ></span><span class= ' Seclabel tlabel ' > Seconds </span> ");} Whether to turn on seconds if (defaults. Tlabel) {$lastTimeDom. Find (". Tlabel "). CSS (defaults. Tlabel);} Sets the label style if (defaults. TimeValue) {$lastTimeDom. Find (". TimeValue "). CSS (defaults. TimeValue);} Set the style of the time zone} checktime = function (i) {if (i<10) i = "0" +i;return i;},//to a number less than 10 front 0 setremainingtime = function () {var n Owtime = new Date (),//start time//endtime = new Date (' 2015/2/28 23:59:59 '),//end time TS = "", DD = "", hh = "", MM = "", ss = ""; ts = Defaults.endTime.getTime ()-nowtime.gettime ();//Calculates the remaining number of milliseconds DD = parseint (ts/1000/60/60/24,10);//Calculates the remaining days hh = parseint ( ts/1000/60/60%24,10);//Calculates the remaining number of hours mm = parseint (ts/1000/60%60,10);//Calculates the remaining minutes SS = parseint (ts/1000%60,10);//Calculates the remaining number of seconds ts = This.checktime (ts);dd = This.checktime (dd), HH = This.checktime (hh), MM = This.checktime (mm), SS = This.checktime (ss); Defaults. Daydom) {$ (defaults. daydom). Text (dd);} if (defaults. Hourdom) {$ (defaults. hourdom). Text (hh);} if (defaults. Mindom) {$ (defaults. mindom). Text (mm);} if (defaults. Secdom) {$ (defaults. secdom). Text (ss);} SetTimeout ("Setremainingtime ()", 1000);},//Set the Countdown setdom ();//Generate Node Setremainingtime ();//Call return this;//support chain operation}) ( JQuery);
Conclusion: The first kind of coupling is strong, the reusability is poor
The second kind of reusability is strong; Usage: $ (). Jquerytimer ({});
The jquery plugin can be used to make full use of the library, abstracting common functions and "recycling". The following is a brief summary:

 
  

  
   
 
    
Use; (function ($) {//plugin}) (jQuery); to wrap your plugin
 
    
Do not repeat the package in the initial range of the plug-in
 
    
Unless you return the original value, the this pointer is returned to guarantee a chain-
 
    
Instead of using a string of parameters, use an object and set the default value
 
    
A plugin, do not attach multiple functions for Jquery.fn
 
    
For your functions, events, data attachment to a namespace
 
   
 
  
Reference: http://www.cnblogs.com/playerlife/archive/2012/05/11/2495269.html
 JQuery Plugin Development