JQuery1.5 redemption of plug-in mechanism of new features

It seems that jQuery1.5 has two major changes: jQuery subclass and asynchronous queuing. This article only talks about jQuery subclass.

First, we need to understand why we need to launch this function. Is it to strengthen its zero OO function? No. You should know from the source code below that it is not a custom class. But this is also a silly question, because this method is called Class instead of subclass.

 
 

  
  
subclass: function(){    
  
  
    function jQuerySubclass( selector, context ) {    
  
  
        return new jQuerySubclass.fn.init( selector, context );    
  
  
    }    
  
  
    jQuerySubclass.superclass = this;    
  
  
    jQuerySubclass.fn = jQuerySubclass.prototype = this();    
  
  
    jQuerySubclass.fn.constructor = jQuerySubclass;    
  
  
    jQuerySubclass.subclass = this.subclass;    
  
  
    jQuerySubclass.fn.init = function init( selector, context ) {    
  
  
        if (context && context instanceof jQuery && !(context instanceof jQuerySubclass)){    
  
  
            context = jQuerySubclass(context);    
  
  
        }    
  
  
        return jQuery.fn.init.call( this, selector, context, rootjQuerySubclass );    
  
  
    };    
  
  
    jQuerySubclass.fn.init.prototype = jQuerySubclass.fn;    
  
  
    var rootjQuerySubclass = jQuerySubclass(document);    
  
  
    return jQuerySubclass;    
  
  
},  
 
 

I think its true intention is to improve its plug-in mechanism.

JQuery plug-ins are easy to develop. Adding a method to its prototype chain is called "plug-in". Therefore, there are many jQuery plug-ins and many junk plug-ins, since the update is stopped, there are also a lot of garbage.

 
 

  
  
JQuery. fn. garbage =Function(){
  
  
Alert ("This is a junk plug-in! ")
  
  
}
 
 

Of course, this is in the ideal situation, the plug-in is as simple as a function is a lot of plug-ins ). For example, if you develop a plug-in and your colleagues develop a plug-in with the same name, a problem occurs. In this case:

 
 

  
  
(Function($ ){// Plug-in 1 
  
  
$. Fn. extend ({
  
  
A:Function(){// Agent body 
  
  
This. B ()
  
  
},
  
  
B:Function(){}// Auxiliary functions 
  
  
})
  
  
}) (JQuery );
  
  
(Function(){// Plug-in 2 
  
  
$. Fn. extend ({
  
  
C:Function(){// Agent body 
  
  
This. B ()
  
  
},
  
  
B:Function(){}// Auxiliary functions 
  
  
})
  
  
}) (JQuery );
 
 

At this time, the two plug-ins may be mixed. Plug-in 1 B and plug-in 2 B may not be one thing, which is very likely because plug-ins may be developed by cainiao in the United States, plug-in 2 is developed by cainiao in Germany, and foreigners like to put their plug-ins in the plug-in display area on the jQuery official website. It is easy for the Chinese lazy guy and cainiao to step on the thunder.

Plug-in chaos disaster as jQuery becomes increasingly popular, because jQuery is easy to learn and use, the company's front-end is not enough people, just grab a background. As a result, the front-end also experienced a bubble like the Chinese property market. A single page references N plug-ins. The full screen selector has a high maintenance cost and is almost impossible.

In the final analysis, the problem is that everyone is contaminated with jQuery and jQuery. fn, just as everyone once liked to pull shit in the global scope. The global scope is public toilets and it is inevitable to go there, but we can use subclasses to transfer the burden of jQuery and jQuery. fn.

In jQuery1.5, we should write the plug-in like this.

 
 

  
  
var MyjQuery = jQuery.subclass();    
  
  
MyjQuery.fn.writeHello = function(){ this.text('Hello World'); };    
  
  
MyjQuery('p').writeHello();  
 
 

Because MyjQuery is a subclass of jQuery, it has all its capabilities, and chain operations are the same.

 
 

  
  
MyjQuery('div').css('border', '1px red solid').writeHello();  
 
 

We can also modify the original jQuery method without modifying the source code due to some hidden bugs:

 
 

  
  
MyjQuery. fn. text =Function(Val ){
  
  
VarOrig = jQuery. fn. text;
  
  
If(TypeofVal ="String"){
  
  
ReturnOrig. call (This,"!! "+ Val +"!! ");
  
  
}Else{
  
  
ReturnOrig. apply (This, Arguments );
  
  
}
  
  
};
  
  
MyjQuery ('. Aaa'). Text ("Text");
  
  
MyjQuery ('. Aaa'). Text ();
  
  
//!! Text !! 
  
  
// Does not affect jQuery itself 
  
  
JQuery ('. Aaa). text ('Text ');// Text 
 
 

Of course, this also brings about a problem. All plug-ins are bound to a new namespace and re-run to the global scope ...... It seems that the further salvation will wait until its package loading mechanism comes out. Therefore, it is essential to use less plug-ins and improve javascript (non-jQuery) capabilities.

Original article:Http://www.cnblogs.com/rubylouvre/archive/2011/01/21/1940935.html

1. Keep improving the analysis and optimization of jQuery code
2. Six major improvements to jQuery1.5: Simpler DOM operations
3. JQuery entry: three types of operations on Arrays
4. JQuery 1.5 first Beta release paid for download
5. 10 awesome and practical jQuery image plug-ins for free attachment download
6. JQuery 1.5 official version released 5 major changes eye-catching