Tutoriel de développement de plug-ins JavaScript (2)_compétences javascript

1, analyse d'ouverture

Salut à tous ! Vous souvenez-vous encore de l'article précédent------le début de cette série (Tutoriel de développement de plug-ins JavaScript 1). Il parle principalement de "comment développer des plug-ins en utilisant jQuery",

Aujourd’hui, nous allons continuer notre parcours de développement de plug-ins avec les questions d’hier. Les questions précédentes sont les suivantes :

(1) Si la sélection technologique du projet change et que ces plug-ins dépendent fortement du mécanisme "jQuery", les plug-ins que nous avons écrits auparavant ne pourront pas être utilisés (en supposant que jQuery ne soit pas utilisé). Comment refactoriser ?

(2), Refactoriser la logique clé du plug-in, comment allons-nous l'organiser ?

D'accord, étudions l'article d'aujourd'hui avec des questions.

Tout d'abord, je ne nie pas la « méthode du plug-in jQuery ». Deuxièmement, nous devons analyser le problème sous différents angles. Par exemple, « le plug-in jQuery présente les avantages suivants » :

(1), mettre tout le code dans une fermeture (une fonction d'exécution immédiate. A ce moment, la fermeture équivaut à une portée privée, les informations internes ne sont pas accessibles par l'extérieur, et il n'y aura pas de pollution). de variables globales.

(2), a) éviter les dépendances globales ; b) éviter les dommages causés par des tiers ; c) compatible avec les opérateurs jQuery '$' et 'jQuery'.

Alors comment allons-nous organiser le code lors du refactoring ? Est-ce une pensée orientée objet (POO) ? Ou faut-il suivre l’approche processus jusqu’au bout ? Ou est-ce une combinaison des deux ? Hahaha, continue de regarder. . . . . .

2. Reconstruire l'exemple d'hier

Ce qui suit est le code source de la partie Js d'hier :

Copier le code Le code est le suivant :

(fonction($){
$.fn.bigbear = fonction (opts){
         opts = $.extend({},$.fn.bigbear.defaults,opts) ;
         renvoie 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 = {
Titre : "C'est un test simple" ,
 url : "data.json"
} ;
})(jQuery) ;

Analysons-le ligne par ligne :

Déterminez d'abord la fonction de ce plug-in

(1), affichez les informations du texte du titre que nous avons définies.

(2), obtenez dynamiquement des informations sur le contenu de manière asynchrone.

D'accord ! Une fois que les exigences sont claires, nous pouvons commencer la discussion. À partir du code ci-dessus, il est facile de voir que l'organisation logique est très lâche et que la pensée procédurale est évidente, la première étape consiste donc à définir nos exigences fonctionnelles

.

Organisé efficacement en classes. Regardez le code refactorisé ci-dessous :

Copier le code Le code est le suivant :

$(fonction(){
    $("#bb").bigbear() ;
}) ;
(fonction($){
    $.fn.bigbear = fonction (opts){
        opts = $.extend({},$.fn.bigbear.defaults,opts) ;
        renvoyer this.each(function(){
            var elem = $(this) ;
            var bb = new BigBear(elem,opts) ;
            bb.getElem().trigger("data") ;
        }) ;
    } ;
    $.fn.bigbear.defaults = {
        titre : "这是一个简单的测试" ,
        url : "data.json"
    } ;
})(jQuery) ;
fonction BigBear(elem,opts){
    this.elem = elem ;
    this.opts = opte ;
    this.init() ;
} ;
var bbProto = BigBear.prototype ;
bbProto.getElem = fonction(){
    renvoie this.elem ;
} ;
bbProto.getOpts = fonction(){
    renvoie this.opts ;
} ;
bbProto.init = fonction(){
    var ça = ceci ;
    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 = fonction(texte){
    this.getElem().find("span").text(text) ;
} ;

　　哈哈哈，是不是代码多了不少，其实这种方式就是面向对象的角度看问题，先去分析功能需求，然后设计我们的类，虽然说我们不可能一下设计得很出色，

但是看问题角度改变了，我们的代码可读性强了，以及更好地进行维护这样我们的目的也就达到了。

　　以下是是摘自« Bootstrap »Js部分的相关源码实现，如下图：

不难看出也是相似的实现方式，通过类来维护我们插件的主要逻辑。

（三），增加新功能，引出额外的类

　　现在需求增加了，需要在体验上有所变化，加载数据时有« chargement »效果。

　　实现思路可以这样，在原始的内容区把文字设置成"装载数据中。。。。"的字样，然后引入一个新的类，如下：

复制代码 代码如下 :

fonction Superposition(){

} ;
var olProto = Overlay.prototype ;
olProto.show = function(){} ;
olProto.hide = function(){} ;
// 具体实现就不写了

　　好了，遮罩层已经有了，现在我们怎么集成进来那？如下：

复制代码 代码如下 :

 fonction BigBear(elem,opts){
     this.elem = elem ;
     this.opts = opte ;
     this.overlay = new Overlay() ;
     this.init() ;
 } ;
 var bbProto = BigBear.prototype ;
 bbProto.getElem = fonction(){
     renvoie this.elem ;
 } ;
 bbProto.getOpts = fonction(){
     renvoie this.opts ;
 } ;
 bbProto.init = fonction(){
     var ça = ceci ;
     var chargementText = "数据装载中。。。" ;
     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 = fonction(texte){
     this.getElem().find("span").text(text) ;
 } ;

　　到此只为我们的功能就算是结束了，这样写的插件，我相信比第一个版本好很多，当然这不是最优的实现，需要从细节上不断重构，但是这种方式是一种可选的开发插件的方式。

　　以下是完整的代码：

复制代码 代码如下 :

$(fonction(){
    $("#bb").bigbear() ;
}) ;
(fonction($){
    $.fn.bigbear = fonction (opts){
        opts = $.extend({},$.fn.bigbear.defaults,opts) ;
        renvoyer this.each(function(){
            var elem = $(this) ;
            var bb = new BigBear(elem,opts) ;
            bb.getElem().trigger("data") ;
        }) ;
    } ;
    $.fn.bigbear.defaults = {
        titre : "这是一个简单的测试" ,
        url : "data.json"
    } ;
})(jQuery) ;
fonction BigBear(elem,opts){
    this.elem = elem ;
    this.opts = opte ;
    this.overlay = new Overlay() ;
    this.init() ;
} ;
var bbProto = BigBear.prototype ;
bbProto.getElem = fonction(){
    renvoie this.elem ;
} ;
bbProto.getOpts = fonction(){
    renvoie this.opts ;
} ;
bbProto.init = fonction(){
    var ça = ceci ;
    var chargementText = "数据装载中。。。" ;
    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 = fonction(texte){
    this.getElem().find("span").text(text) ;
} ;
fonction Superposition(){
} ;
var olProto = Overlay.prototype ;
olProto.show = function(){} ;
olProto.hide = function(){} ;
// 具体实现就不写了

本文暂时先到这里了，小伙伴们是否对插件化开发javascript有了新的认识了呢。