1. Opening analysis
Hi, everyone! Today's series of articles mainly talk about how to develop plug-in development based on "JavaScript". I think many people are not unfamiliar with the word "plugin".
Some people may call it "component" or "component", which is not important. The key is to look at how to design and how to make a comprehensive consideration. This is the concept that this article focuses on. I think everyone is right
I have a certain understanding of the "jQuery plug-in method". We will discuss it together based on this topic and finally give relevant implementation plans to continuously improve our ability.
2. Enter the plug-in topic
Generally speaking, the development of jQuery plug-ins is divided into two types: one is a global function hanging under the jQuery namespace, which can also be called a static method.
Another method is the jQuery object level method, that is, the method hung under the jQuery prototype, so that the jQuery object instances obtained through the selector can also share the method.
(1), class-level plug-in development
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. A typical example is the function "$.ajax()", which defines the function in the jQuery namespace. About class-level plug-in development can be extended in the following forms:
1.1 Add a global function, we only need to define it as follows and see the code:
The code copy is as follows:
$.hello = function(){
alert("Hello, Big Bear!") ;
} ;
1.2 Add multiple global functions, which can be defined as follows:
The code copy is as follows:
$.extend({
hello : function(name){
// put your code here
} ,
world : function(){
// put your code here
}
}) ;
Description: "$.extend(target, [object1], [objectN])" (This method is mainly used to merge the content (attributes) of two or more objects to the first object and return the merged first object.
If the method has only one parameter target, the parameter will extend the namespace of jQuery, that is, it will be hung under the jQuery global object as a static method).
(2), object-level plug-in development
Object-level plug-in development requires two forms:
2.1 Dynamically mount relevant attributes through "$.fn.extend()" as the prototype.
The code copy is as follows:
(function($){
$.fn.extend({
pluginName : function(opts){
// put your code here
}
}) ;
})(jQuery);
2.2 Directly add dynamic attributes to the prototype chain.
The code copy is as follows:
(function($) {
$.fn.pluginName = function(){
// put your code here
} ;
})(jQuery);
Let me explain: the two are equivalent. For a jQuery plug-in, a basic function can work well, but for more complex plug-ins, it is necessary to provide various methods and private functions.
You may use different namespaces to provide various methods for your plug-in, but adding too much namespace will make the code messy and less robust. So the best solution is to define private functions and methods appropriately.
So we implement the simulated private plug-in unit by combining self-executing functions with closures, just like in our example above.
(3), let’s give a simple example to see the implementation process:
(1), the "html" fragment code is as follows:
The code copy is as follows:
<div id="bb">
<span></span>
<div
style="margin-top:10px;
margin-bottom:30px;"
>8 </div>
</div>
(2), the definition of "data.json" is as follows:
The code copy is as follows:
{
"text" : "Hello, Big Bear {{bb}}!" ;
}
(3), the "bb.js" code is as follows:
The code copy is as follows:
$(function(){
$("#bb").bigbear() ;
}) ;
(function($){
$.fn.bigbear = function(opts){
opts = $.extend({},$.fn.bigbear.defaults,opts) ;
return this.each(function(){
var elem = $(this);
elem.find("span").text(opts["title"]) ;
$.get(opts["url"],function(data){
elem.find("div").text(data["text"]) ;
}) ;
}) ;
} ;
$.fn.bigbear.defaults = {
title : "This is a simple test",
url : "data.json"
} ;
})(jQuery);
Running effect:
Let's summarize :
(1) "$.fn.bigbear.defaults" provides the default parameter options for the plug-in. A plug-in with good extensibility should allow users to customize parameter options according to their needs and control the behavior of the plug-in, so it is necessary to provide restored default options. You can set these options through jQuery's extend method.
(2), "return this.each(){...}" traverses multiple elements and returns jQuery using the Sizzle selector engine, Sizzle can provide multi-element operations for your functions (such as the same elements for all class names). This is one of several excellent features of jQuery, and even if you are not ready to provide multi-element support for your plugin during development, preparing for this is still a great way. In addition, jQuery has a good feature that can perform method cascades, which can also be called chain calls, so we should not destroy this feature and always return an element in the method.
(IV), final summary
(1) jQuery has introduced two methods for the development plug-in, namely: jQuery.fn.extend(object); Add method to the jQuery object.
jQuery.extend(object); Adds new methods to the class to extend the jQuery class itself.
(2) Put all the code in the closure (an instant execution function). At this time, the closure is equivalent to a private scope. The external cannot access internal information, and there will be no pollution of global variables. The official development specifications are explained: a) avoid global dependencies; b) avoid third-party damage; c) are compatible with jQuery operators '$' and 'jQuery'.
(3) Provide the default parameter options for plug-in. A plug-in with good extensibility should allow users to customize parameter options according to their needs and control the behavior of the plug-in. Therefore, it is necessary to provide restored default options. You can set these options through jQuery's extend method
(4), iterate through multiple elements and return jQuery using the Sizzle selector engine, Sizzle can provide multi-element operations for your functions (such as elements with the same class name). This is one of several excellent features of jQuery, and even if you are not ready to provide multi-element support for your plugin during the development process, preparing for this is still a good practice. In addition, jQuery has a good feature that can perform method cascades, which can also be called chain calls, so we should not destroy this feature and always return an element in the method.
(5) It is important to place one-time code outside the main loop, but it is often ignored. Simply put, if you have a piece of code that is a bunch of default values that only needs to be instantiated once, instead of instantiating every time you call the plugin function, you should put this code outside the plugin method.
(6) After learning, let’s think about it. If the project technology selection and replacement of these plug-ins, it relies on the “jQuery” mechanism, the plug-ins we wrote before will not be used (assuming that jQuery is not used). How to refactor it?
Tomorrow's article will talk about this issue and will refactor the key logic of the plug-in, so stay tuned. . .