JavaScript plug-in development tutorial (ii) _JAVASCRIPT skills

First, the opening analysis

Hi, everyone! Remember the previous article------the opening of this series (JavaScript plugin development tutorial one). It mainly describes how to develop plug-ins in the "jquery Way",

So today we carry on our plug-in development tour with yesterday's questions. The previous questions were as follows:

(1), if the project technology selection for these plug-ins is strongly dependent on the "jQuery" mechanism, we have previously written plug-ins will not be used (assuming that there is no jQuery), how to do refactoring that?

(2), refactoring the key logic of plug-ins, how will we organize that?

Well, take the questions to learn today's article.

First of all, I'm not denying the "jquery plugin approach", and then we're going to analyze the problem from different angles, like "jquery plug-ins have the following advantages":

(1), put all the code in the closure (an instant execution function) when the closure is equivalent to a private scope, external access to the internal information, and there will be no global variable pollution.

(2), a) avoid global dependency; B avoid third party damage; c) compatible with jquery operator ' $ ' and ' jquery '.

So how do we refactor the code, which is object-oriented thinking (OOP)? Or is the process of thinking to the end? Or the combination of the two designs? Ha ha, continue to see ...

Second, reconstruct yesterday's example

The following is yesterday's JS part of the Source code section:

Copy Code code 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 This step by line:

First determine the functionality of this plugin

(1), display the caption text information that we set up.

(2) Dynamically obtaining content information through asynchronous means.

All right! The need for clear and open discussion, from the above code is not difficult to see the logical organization is very loose, the process of thinking is obvious, so the first step is to put our functional needs

Effectively organized in a class manner. Look at the following refactoring code:

Copy Code code 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 not more than a lot of code, in fact, this way is an object-oriented perspective to look at the problem, first to analyze the functional requirements, and then design our class, although it is impossible to design a very good,

But looking at the problem angle has changed, our code is more readable, and better maintenance so that our goal is achieved.

The following is an excerpt from the "Bootstrap" JS part of the relevant source code implementation, as shown below:

It is not difficult to see a similar implementation, through the class to maintain the main logic of our plug-ins.

(iii) Adding new features to elicit additional classes

Now that the demand has increased, there needs to be a change in experience and a "loading" effect when loading data.

Implementation of ideas can be so, in the original content area to set the text to "load the data ...." ", and then introduce a new class, as follows:

Copy Code code as follows:

function Overlay () {

} ;
var olproto = Overlay.prototype;
Olproto.show = function () {};
Olproto.hide = function () {};
The actual implementation will not be written

Well, the mask layer is already there, now how do we integrate it in there? We connect it in a combination way, as follows:

Copy Code code 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 load ... " ;
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);
} ;

To this only for our function is the end, so write plug-ins, I believe that the first version is much better, of course, this is not the optimal implementation, need to be constantly refactoring from the details, but this way is an optional way to develop plug-ins.

Here's the complete code:

Copy Code code 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 load ... " ;
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 actual implementation will not be written

This article is here for the moment, and the small partners have a new understanding of plug-in development JavaScript.