JavaScript plugin development tutorial (2): javascript plugin

JavaScript plugin development tutorial (2): javascript plugin

I. Opening Analysis

Hi everyone! Remember the previous article ------ the beginning of this series (JavaScript plug-in development tutorial 1 ). This article mainly describes how to develop plug-ins in jQuery mode ",

So today we will continue our plug-in development journey with yesterday's questions. The previous problems are as follows:

(1) If the project technical model changes to these plug-ins and they are strongly dependent on the "jQuery" mechanism, the plug-ins we previously wrote will not be available (assuming jQuery is not used ), how to refactor it?

(2) How do we organize the key logic of refactoring plug-ins?

Now, let's take a look at today's articles with questions.

First, I am not denying the "jQuery plug-in method". Second, we need to analyze the problem from different perspectives. For example, "jQuery plug-in has the following advantages ":

(1) Place all the code in the closure (an immediate execution function). At this time, the closure is equivalent to a private scope, and internal information cannot be accessed from the outside, and there will be no contamination of global variables.

(2) a) avoid global dependencies; B) avoid third-party damages; c) compatible with jQuery operators '$' and 'jQuery '.

Then, in what way will we organize code? Is it an object-oriented idea (OOP? Or is it just a procedural approach? Or are they designed in combination? Haha, continue watching ......

2. Reconstruct the example of yesterday

The following is part of the source code of yesterday's Js:

Copy codeThe Code 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 perform a line-by-line analysis:

First, determine the functions of this plug-in.

(1) display the title text information we set.

(2) dynamically obtain content information in asynchronous mode.

Okay! The requirement is clear. From the above Code, it is not difficult to see that the logic organization is very loose and the procedural thinking is very obvious. So the first step is to put our functional requirements

It is effectively organized as a class. See the code after reconstruction as follows:

Copy codeThe Code 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 the object-oriented perspective. First, analyze the functional requirements and then design our classes. Although it is impossible for us to design well,

However, our goal is to make the code readable and maintain it better.

The following is the source code implementation from the "Bootstrap" Js section, for example:

It is not hard to see that it is also a similar implementation method. We use classes to maintain the main logic of our plug-ins.

(3) Add new features and lead to additional classes

Now the demand has increased, and the experience needs to be changed. When loading data, there is a "loading" effect.

The implementation idea is as follows. In the original content area, set the text to "loading data ...." And then introduce a new class, as shown below:

Copy codeThe Code is as follows:
Function Overlay (){

};
Var olProto = Overlay. prototype;
OlProto. show = function (){};
OlProto. hide = function (){};
// The specific implementation will not be written

Okay, the mask layer already exists. How can we integrate it now? We use a combination of the following methods:

Copy codeThe Code 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 = "loading data... ";
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 the end of our function. I believe 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 reconstructed from the details, however, this method is an optional plug-in development method.

The complete code is as follows:

Copy codeThe Code 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 = "loading data... ";
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 (){};
// The specific implementation will not be written

This article has come here for the time being. Do you have a new understanding of plug-in-based javascript development.