1. Opening analysis
Hi, everyone! Do you still remember the previous article-----The beginning of this series (JavaScript plug-in development tutorial 1). It mainly tells the story of "how to develop plug-ins in jQuery",
So today we will continue our plug-in development journey with yesterday’s questions. The previous questions are as follows:
(1) 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?
(2) Refactoring the key logic of plug-ins, how will we organize that?
Okay, let’s learn today’s article with questions.
First of all, I don’t deny the “jQuery plug-in method”, and secondly, we need to analyze the problem from different perspectives, such as “jQuery plug-in has the following advantages”:
(1) 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.
(2), a) Avoid global dependencies; b) Avoid third-party damage; c) Compatible with jQuery operators '$' and 'jQuery'.
So in what way will we organize the code, which is the object-oriented idea (OOP)? Or should we proceed to the process-based idea? Or is it a combination of the two? Hahaha, keep watching. . . . . .
2. Reconstruct yesterday's example
The following is the source code part of yesterday's Js part:
The code copy is as follows:
(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);
Let's analyze it step by step:
First, determine the functions of this plugin
(1), display the title text information we set.
(2) Dynamically obtain content information through asynchronous means.
alright! It’s easy to discuss it if the requirements are clear. It’s not difficult to see from the above code that the logic is loose and the process-based thinking is obvious, so the first step is to put our functional requirements into
Organize effectively in a class way. Look at the refactored code 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);
var bb = new BigBear(elem,opts) ;
bb.getElem().trigger("data");
}) ;
} ;
$.fn.bigbear.defaults = {
title : "This is a simple test",
url : "data.json"
} ;
})(jQuery);
function BigBear(elem,opts){
this.elem = elem ;
this.opts = opts ;
this.init() ;
} ;
var bbProto = BigBear.prototype;
bbProto.getElem = function(){
return this.elem ;
} ;
bbProto.getOpts = function(){
return this.opts ;
} ;
bbProto.init = function(){
var that = this ;
this.getElem().on("data",function(){
that._setTitle(that.getOpts()["title"]) ;
$.get(that.getOpts()["url"],function(result){
that.getElem().find("div").text(result["text"]) ;
}) ;
}) ;
} ;
bbProto._setTitle = function(text){
this.getElem().find("span").text(text) ;
} ;
Hahaha, is there a lot more code? In fact, this method is to look at the problem from an object-oriented perspective, first analyze the functional requirements, and then design our class. Although it is impossible for us to design it very well at once.
However, the perspective of the problem has changed, our code has become more readable, and we can maintain it better, so that our purpose can be achieved.
The following is the relevant source code implementation excerpted from the "Bootstrap" Js section, as shown below:
It is not difficult to see that there are also similar implementation methods, which maintains the main logic of our plug-in through classes.
(III), add new functions and introduce additional classes
Now the demand has increased, and there needs to be some changes in experience, and there is a "loading" effect when loading data.
The implementation idea can be like this: set the text to the word "load data..." in the original content area, and then introduce a new class, as follows:
The code copy is as follows:
function Overlay(){
} ;
var olProto = Overlay.prototype;
olProto.show = function(){} ;
olProto.hide = function(){} ;
// I won't write down the specific implementation
Okay, the mask layer is already there, how can we integrate it in now? We access it in a combination, as follows:
The code copy is as follows:
function BigBear(elem,opts){
this.elem = elem ;
this.opts = opts ;
this.overlay = new Overlay() ;
this.init() ;
} ;
var bbProto = BigBear.prototype;
bbProto.getElem = function(){
return this.elem ;
} ;
bbProto.getOpts = function(){
return this.opts ;
} ;
bbProto.init = function(){
var that = this ;
var loadingText = "Data loading....";
this.getElem().on("data",function(){
that._setTitle(that.getOpts()["title"]) ;
that.overlay.show() ;
that.getElem().find("div").text(loadingText);
$.get(that.getOpts()["url"],function(result){
that.overlay.hide() ;
that.getElem().find("div").text(result["text"]) ;
}) ;
}) ;
} ;
bbProto._setTitle = function(text){
this.getElem().find("span").text(text) ;
} ;
This is just for the end of our functions. I believe that the plug-in written in this way is much better than the first version. Of course, this is not the optimal implementation and needs to be constantly refactored from the details, but this method is an optional way to develop plug-ins.
Here is the complete code:
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);
var bb = new BigBear(elem,opts) ;
bb.getElem().trigger("data");
}) ;
} ;
$.fn.bigbear.defaults = {
title : "This is a simple test",
url : "data.json"
} ;
})(jQuery);
function BigBear(elem,opts){
this.elem = elem ;
this.opts = opts ;
this.overlay = new Overlay() ;
this.init() ;
} ;
var bbProto = BigBear.prototype;
bbProto.getElem = function(){
return this.elem ;
} ;
bbProto.getOpts = function(){
return this.opts ;
} ;
bbProto.init = function(){
var that = this ;
var loadingText = "Data loading....";
this.getElem().on("data",function(){
that._setTitle(that.getOpts()["title"]) ;
that.overlay.show() ;
that.getElem().find("div").text(loadingText);
$.get(that.getOpts()["url"],function(result){
that.overlay.hide() ;
that.getElem().find("div").text(result["text"]) ;
}) ;
}) ;
} ;
bbProto._setTitle = function(text){
this.getElem().find("span").text(text) ;
} ;
function Overlay(){
} ;
var olProto = Overlay.prototype;
olProto.show = function(){} ;
olProto.hide = function(){} ;
// I won't write down the specific implementation
This article is over for now. Have you got a new understanding of plug-in development of javascript?