JQuery framework-3. jQuery custom encapsulation plug-ins and third-party plug-ins, jquery-3.jquery

JQuery framework-3. jQuery custom encapsulation plug-ins and third-party plug-ins, jquery-3.jquery
I. jQuery encapsulation Extension1. Use the extend method in jQuery

(Hanging on jQuery and jQuery. fn objects)

1.1 Definition of the official document: 

JQuery. extendMerge the contents of two or more objects together into the first object. combine two or more objects into the first object;

JQuery. fn. extendMerge the contents of an object onto the jQuery prototype to provide new jQuery instance methods. Mount the object to the jQuery prototype to extend a new jQueryInstance method.

1.2 extend method Function Description

• Merged object

jQuery.extend(target [, object1] [, objectN])

It means to merge object1 and objectN into the target, and the returned value is the merged target. It can be seen that the structure of the target is modified after the method is merged.

Var newSrc = $. extend ({}, object1, object2, objectN.) // use "{}" as the target parameter. The structure of the actual target parameter is not damaged.

 

var result=$.extend({},{name:"Tom",age:21},name:"Jerry",sex:"Boy"}); //result={name:"Jerry",age:21,sex:"Boy"}

• Deep copy

jQuery.extend([deep], target, object1 [, objectN])

The extend method has a [deep] parameter of the boolean type. When this parameter is set to true, object1, objectNDeep ReplicationAnd then merged to the target.

var obj1 = {    name: "John",    location: {        city: "Boston",        county: "USA"    }}var obj2 = {    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" }}

It can be seen that:

Deep Replication Recursively traverse the attribute values of complex objects (such as arrays, functions, and json objects) in each object for copying.

Shallow copyIt does not directly overwrite the first non-boolean value object with the following objects for internal processing of complex objects.

• Extension of jQuery methods:The target parameter in the extend method is omitted in the jQuery class. This method only passes in the object parameter. This method combines the object into the object that calls the extend method.

• JQueryExtension of Object-level instance methods:JQuery. fn omitting the target parameter in the extend method,

2. Class-level JQ Encapsulation 

The most direct understanding of class-level plug-in development is to add class methods to the jQuery class, which can be understood as adding static methods.

Class method:Class references can be used directly without instantiation. Generally in the projectClass MethodAre all set as tool class use

2.1 Add a new global function

jQuery.foo = function() {    alert('This is a test.');   }; 

2.2 add multiple global functions

jQuery.foo = function() {    alert('This is a test');   };   jQuery.bar = function(param) {    alert('This is a "' + param + '".');   };    jQuery.foo();jQuery.bar();$.foo();$.bar('bar');

2.3 Add a class method using the jQuery. extend (object) Method

jQuery.extend({          foo: function() {              alert('This is a test.');          },          bar: function(param) {              alert('this is a "' + param +'".');          }     });  

2.4 use a namespace

In the jQuery namespace, a large number of javaScript function names and variable names are prohibited. But it is still inevitable that some functions or variables will conflict with other jQuery plug-ins, so we are used 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 + '". ') ;}}; // The namespace function is still a global function. The method used for calling is: $. myPlugin. foo (); $. myPlugin. bar ('baz ');

Use an independent plug-in name to avoid function conflicts in the namespace.

3. Object-level JQ Encapsulation

• Instance methodYou must create an instance before callingInstance method.

1. Object-level Extension Method

Form 1:

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

Form 2:

;(function($) {            $.fn.pluginName = function() {      　        // bodying          };      })(jQuery); 

1) encapsulate your own plug-ins in the jQuery environment. First, to avoid conflicts with other libraries, You need to upload a jQuery parameter after the plug-in, and write $ into the parameters in the corresponding function; (Pollution Prevention $ function)

2) If the problem persists, add a semicolon before and after the plug-in (the addition of a semicolon does not affect the running of the program)

Suggested encapsulation framework: (of course, you can also use other forms. For example, you can register the jq method separately and encapsulate the content as a function)

; (Function ($) {$. fn. tab = function (options) {var defaults = {// default settings of various parameters} var options = $. extend ({}, defaults, options); this. each (function () {// encapsulated function}); return this; // for better support of chained WRITING}) (jQuery );

Var options = $. extend ({}, defaults, options): Use the extend method to integrate all the method attributes of the defaults object into options. The name is only an identifier and complies with the specifications.

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

Return this: the goal is to implement jq's powerful chained Writing Method and return $ objects.

Nonsense: after all, what others use is not as good as their own, either not, or used. Style and behavior are not preferred !!! (For personal opinion, do not pengpengpeng)

Ii. jQuery plug-in

1. highcharts plug-in 

<! Doctype html> 

2. jqueryui plug-in
 
3. Autocomplete plug-in
 
4. Draggable plug-in
 
5. DatePicker plug-in
 
6. dialog plug-in