jquery Framework -3.jquery Custom Encapsulation plug-ins and third-party plugins

One, jquery's encapsulation expansion 1. Extend method used in jquery

(for use with jquery and Jquery.fn two objects)

1.1, the Official document definition:

jquery.extend Merge The contents of both or more objects together into the first object. merges two or more objects into the first object;

jQuery.fn.extend Merge The contents of an object onto the jquery prototype to provide new JQuery instance Metho DS. mount the object on the prototype of jquery to extend a new jquery instance method .

1.2. Extend method Function description

• Merging objects

Jquery.extend (Target [, Object1] [, OBJECTN])

its meaning is to merge object1,objectn into Target, the return value is the merged target, thus it can be seen that the method is merged, the structure of the target is modified

var newsrc=$.extend ({},object1,object2,objectn.) // That is, "{}" as the target parameter. Does not break the structure of the actual parameter target

var result=$.extend ({},{name:"Tom", Age:},name:"  Jerry", Sex:"boy"//result={name:" Jerry ", Age:21,sex:" Boy "}

• Depth copy

Jquery.extend ([deep], Target, Object1 [, Objectn])

The extend method has more than one type Boolean [deep] argument, and when it is true, the Object1 is merged into target after the objectn depth is copied .

varObj1 ={name:"John", Location: {City:"Boston", County:"USA"    }}varObj2 ={last:"Resig", Location: {state:"MA", County:" China"}}$.extend (false, {}, obj1, obj2); //{name: ' John ', Last: ' Resig ', location: ' {state: ' MA ', County: ' China '}}$.extend (true, {}, obj1, obj2); //{name: ' John ', Last: ' Resig ', Location: ' City: ' Boston ', State: ' MA ', County: ' China '}

Thus:

deep Copy recursively iterates through the property values of each object that contain complex objects, such as arrays, functions, JSON objects, and so on, to replicate

Shallow Copy The first non-Boolean worthy object is not overwritten directly with the object behind the complex object's internal processing.

• the extension of the jquery class method: the jquery class omits the target parameter in the Extend method, which only passes in the object parameter, which is the function of merging this object into the objects that call the Extend method.

• Extension of the jQuery Object-level instance method: Jquery.fn omits the target parameter in the Extend method,

2, class-level JQ package 

The most straightforward understanding of plug-in development at the class level is to add a class method to the jquery class, which can be understood as adding a static method.  

class Method: You can use a class reference directly, and you do not need to instantiate the method that you can use. Typically, the class method in the project is set to the tool class using the

2.1 Adding a new global function

Jquery.foo = function () {    alert ('This isa test. '  );   };

2.2 Adding multiple global functions

Jquery.foo = function () {    alert ('This isa test');   };    = function (param) {    alert ('This isa'"". ) ' );   };    Jquery.foo (); Jquery.bar (); $.foo (); $.bar ('bar');

2.3 Adding a class method by using the Jquery.extend (object) method

 jquery.extend ({          foo:function () {              alert ('This isa test. '           },          bar:function (param) {              alert ('This isa ' + param +  '". '  );          }     });  

2.4 Using namespaces

In the jquery namespace, a large number of JavaScript function names and variable names are forbidden. However, it is still inevitable that some functions or variable names will conflict with other jquery plugins, so we are accustomed to encapsulating some methods into another custom namespace.

 jquery.myplugin = {foo:function () { Alert (  " this is a test.              ); }, Bar:function (param) {alert (   this is a " "  + param +  " ".       );   }          };  //  A function that takes a namespace is still a global function, called by the method:  Span style= "color: #000000;"          >$.myplugin.foo (); $.myplugin.bar (  baz   ' );  

Using a separate plug-in name avoids collisions of functions within namespaces.

3. Object-level JQ encapsulation

• An instance method must first create an instance before the instance method can be called through an instance.

1. Object-Level extension methods

Form 1:

;(function ($) {          $.fn.extend ({              pluginname:function (opt,callback) {    //bodying　　  })       }) (jQuery);     

Form 2:

 ;(Function ($) {            = function () {        　//  bodying            };      }) (jQuery);

1) in the jquery environment to encapsulate their own plug-in, first to avoid conflicts with other libraries, need to pass a jquery parameter behind the plug-in, the corresponding function of the parameters written in the $;(to prevent pollution $ function)

2) do not avoid problems, you need to add a semicolon before and after the plug-in (the addition of semicolons will not affect the operation of the program)

Recommended Encapsulation Framework: (Of course, you can also use other forms, such as the registration of the JQ method is carried out separately, the content encapsulated into a function)

 ;(function ($) {$.fn.tab  = function (options) { var  defaults = { //  default settings for various parameters  }  var  options = $.extend ({},defa        Ults,options);  this  .each (function () {//encapsulated function   return  this ; //  to better support chained notation    

var options = $.extend ({},defaults,options): Use the Extend method to integrate the method attributes of the defaults object into the options, as the name is just the logo, conforming to the specification.

This.each (function () {}): Registers an extension method for all the satisfied selectors.

Return this: The target is a powerful chained notation for the implementation of JQ, returning the $ object.

Nonsense one sentence: Other people's use of after all not their own good, or will not, or will use, style, behavior do not like!!! (Personal opinion not Pengpengpeng)

Second, jquery plugin

1.highcharts plug-in

<!doctype html>"en">"UTF-8"> <title>hignCharts</title> <style type="Text/css">. container{width:1000px;            height:500px; Margin:0Auto; }    </style>"Container" class="Container"> </div></body><script src="Http://cdn.hcharts.cn/highcharts/highcharts.js"></script><script type="Text/javascript">//Chart Initialization function        varChart = Highcharts.chart ('Container', {chart: {type:'Bar', Inverted:'false',}, series:[{name:"Sales", data:[20000,30000,20500,20500], LineWidth:2}, {name:"Sales", data:[30000,11190,35100,46000].reverse ()}], title:{align:"Center", Text:"Quarterly Sales Statistics", style:{"Color":"#ff0000","fontSize":"20px"}}, yaxis:{title:{text:"Sales"}}, exporting:{allowhtml:"true",}, xaxis:{title:{text:"Quarterly"}, Categories: ['First quarter','Two Quarter','three quarter','Four Quarter'], tooltip:{padding: -, Pointformat:'{series.name}: <b>{point.y}</b><br/>',}}, legend:{title:{text:"category"}}, Credits: {href:'http://www.cnblogs.com/witkeydu/', Text:'Alexandre Dumas's blog', Style: {fontSize: -, Color:'#888888', FontWeight:'Bold'}            }        });</script>

2.jqueryui Plug-in

3.Autocomplete Plug-in

4.Draggable Plug-in

5.DatePicker Plug-in

6.dialog Plug-in

jquery Framework -3.jquery Custom Encapsulation plug-ins and third-party plugins