jquery Object-Oriented Programming QuickStart (eight)-plugin development

jquery Source Fragment Analysis

(function (window) {/** * jquery is a function that is an object is a constructor function */var Jqu ery = function (selector, context) {return new JQuery.fn.init (selector, context);},//fn is a property on the JQuery object that points to the Prototyp The method in E//jquery's prototype is to get the jquery object based on the jquery selector, and then the jquery object calls the method's// The jquery object that is obtained by using the jquery selector is equivalent to the object created by the jquery constructor Jquery.fn = Jquery.prototype = {each:function (callback, args) {return Jquery.each (this, callback, args);},ready:function () {}};//window object dynamically adds a property, jquery, The jquery object in the anonymous function is assigned to the JQuery object of window//$ is actually a property of the window and the jquery object window.jquery = window.$ = Jquery;jquery.fn = Jquery.prototype = $.prototype = $.fn = Window.$.fn = Window.jQuery.fn = window.jquery.prototype//in JQuery, You can add a method to jquery or to itself, directly using jquery or a call, such a method called a global method, also known as a global plugin//In jquery, you can add a method to jquery or $ prototype or FN, These methods can be called using jquery objects obtained by the jquery selector, which is also known as the plug-in Method}) (window);

Custom Create a jquery method
1. Recalling the prototype attribute of JS object

All things in the JS World are objects: strings, numbers, arrays, dates, and so on. Objects are data that have properties and methods. Each object has the prototype property, which allows us to add properties and methods to the JS object, and in the world of jquery, by analyzing the source code can be known that jquery also has the prototype attribute and exists in the form of $.fn ($.fn equivalent to $. Prototype), with this property, we can dynamically add properties and methods to the jquery object. We can understand it as $.fn. Method name or $.prototype. Method names are used to create object methods and properties that need to be invoked using objects, $. Method names are used to create global/static methods and properties, using the direct call (Note: $ = JQuery = Window.jquery = window.$)

the difference between 2.$.fn.myeach and $.myeach

/** * Anonymous function, external cannot directly access * *  /(function ($) {/** * $.fn equivalent to $.prototype,$.fn.myeach if the use of Java object-oriented thinking to understand, can be understood as in the world of jquery, create * A non-static member method, Myeach, a member method of an object in Java, which belongs to the object and needs to get the jquery object to be called, $ (). Myeach () */$.fn.myeach = function () {}/** * $. Myeach equivalent to creating a static method, which belongs to the class, that is, the global method, can be called directly using $.myeach (), cannot use the jquery object to call */$.myeach = function () {}}) ($);

In summary, can be understood as $.fn. The method name is the member method that creates the object and needs to be called with the object, $. Method name, to create a static method that is the global method, cannot use the object to call, directly using the $ or jquery symbol to call

3. Customize a $.myeach (Obj,callback) method and $ (). Myeach (callback) method

<! DOCTYPE html>

/** * Anonymous function * @param $ jquery object, equivalent to jquery */(function ($) {/** *) add Myeach to jquery or $ prototype or FN, You can later invoke the jquery object obtained using the jquery selector, such as $ () * @param {Object} callback callback function */$.fn.myeach = function (callback) {var array = $ (this ); for (Var i=0;i<array.length;i++) {//this represents the object currently being traversed Callback.call ($ (array[i]), $ (array[i]));}} /** * Add a method directly to jquery, you do not need to call through the jquery object, you can call directly using jquery or the $ symbol * @param {object} obj can come from a jquery object created with the jquery selector, Can also come from an array (from the background) * @param {Object} callback callback function */$.myeach = function (obj,callback) {var array = obj;for (Var i=0;i<arr ay.length;i++) {//this represents the object currently being traversed Callback.call ($ (array[i]), $ (array[i]));}}) ($); $ (). Ready (function () {//) use the jquery selector to get the jquery object call Myeach function $ ("div"). Myeach (function () {//this represents the Div object currently being traversed alert ($ (this). text ());//print out each div tag);//Use the JQuery symbol $ to call the global Myeach function, note that $=window.$=jquery is actually the property in Window $.myeach ($ (" div "), function (e) {alert ($ (E). text ());//print out the text of each div tag});


2. Customize an extension method extend () and create $.each () and $ (). each () method 
/** * Anonymous function */(function ($) {/** *) add plug-ins directly to jquery and $, you can directly take advantage of jquery and go to call, without the need to create objects, this is called global method or global plug-in */$.myextend=function ( JSON) {for (var i in JSON) {$[i] = json[i];//Add each JSON object directly to jquery, which is equivalent to adding a global method, so that you do not need to use the object to call}}/** * in jquery, You can add a method to jquery or $ prototype or FN, you can invoke these methods using jquery objects obtained by the jquery selector, which is called the plug-in method, and you need to create an object to call */$.fn.myextend= function (JSON) {for (var i in JSON) {$.fn[i] = json[i];//adds each JSON object to the jquery object's FN, which is the prototype attribute, so that the object can be used to invoke}}) ($); $ (). Ready (function () {/** * uses the jquery object to invoke the method defined in $.fn */$ (). Myextend ({_each:function (callback) {var array = $ (this); for (Var i =0;i<array.length;i++) {Callback.call ($ (array[i]), $ (array[i]);}}); * * Use the $ symbol to define the global method */$.myextend ({_each:function (obj,callback) {var array = obj;for (var i=0;i<array.length;i++) { Callback.call ($ (array[i]), $ (array[i]);}}); $ ("div"). _each (function () {alert (this). text ());//Display the contents of each div tag}); $._each ($ ("div"), function (e) {alert ($ (e). Text ());//To display the contents of each div tag});
The calling process is as follows




jquery Object-Oriented Programming QuickStart (eight)-plugin development