Tutoriel de développement de plug-ins JavaScript (3)_compétences javascript-js tutoriel-php.cn

1, analyse d'ouverture

Dans les deux articles précédents, nous avons principalement parlé de "comment développer des plug-ins avec jQuery" et de la manière de combiner la conception procédurale avec la conception orientée objet

Comment concevoir un plug-in, les deux méthodes ont leurs propres avantages et inconvénients. Cette série d'articles est orientée vers l'apprentissage. Vous pouvez décider comment l'utiliser dans des scénarios spécifiques. Ainsi, à partir de cet article d'aujourd'hui, nous vous guiderons à travers le développement de votre propre bibliothèque de plug-ins, du plus profond au plus profond, sous forme d'exemples. Hé hé hé, arrête de dire des bêtises et va droit au but. Téléchargez directement les rendus réels :

Comme vous pouvez le voir, il s'agit d'un plug-in d'onglet, avec lequel nous pouvons entrer en contact lorsque nous créons chaque jour des applications d'une seule page ("SPA"). Prenons l'exemple d'aujourd'hui,

Nous construisons un système basé sur la structure BS, qui sera composé de plusieurs modules. Ce sont tous des composants du système. Grâce à ce plug-in, nous pouvons gérer efficacement nos modules

. La forme d'expérience et l'interactivité des utilisateurs de

seront analysées en détail ci-dessous.

(2), exemple d'analyse

(1), déterminez d'abord ce que fait ce plug-in. Jetons un coup d'œil à la façon dont le plug-in est appelé et à la description des paramètres de configuration. Le code suivant :

Copier le code Le code est le suivant :

bigbear.ui.createTab($("#tab"),{

​​buttonText : "Ajouter un module" ,

Résultat : [ 

            {

               texte : "Conseils du guide",

​​​​​​ url : "aide.html",

showFerme : "0" ,

statut : "1"

           } ,

            {

               texte : "Informations sur les étudiants" ,

​​​​​​ url : "info.html",

showFerme : "1" ,

statut : "1"

           } ,

            {

               texte : "Classification des étudiants",

﻿ ﻿ ﻿ url : "category.html" ,

showFerme : "1" ,

statut : "1"

           } ,

            {

                 texte : "Big Bear {{bb}}" ,

​​​​​​ url : "bb.html",

showFerme : "1" ,

statut : "1"

           } ,

            {

              texte : "Module de test bêta" ,

​​​​​​ url : "test.html",

showFerme : "1" ,

statut : "1"

         }

]

}) ;

"bigbear.ui.createTab" contient deux paramètres, le premier est l'objet du nœud dom et le second est l'option du paramètre du plug-in "buttonText" représente la description textuelle du bouton d'opération dans le plug "Tab". -dans.

"result" est un tableau qui contient les propriétés de l'élément de l'onglet, y compris la description textuelle, l'URL utilisée pour effectuer des requêtes lorsque vous cliquez sur l'élément de l'onglet, "showClose" indique si l'option de l'onglet affiche un bouton de fermeture.

"statut" représente le statut de l'option, qui est ouverte par défaut et peut être fermée, respectivement : 1-ouverte, 0-fermée.

(2), quelles sont les fonctions impliquées

Générez dynamiquement des entrées d'options pertinentes via des paramètres facultatifs, comme indiqué dans l'exemple suivant :

Copier le code Le code est le suivant :

bigbear.ui.createTab($("#tab"),{

ButtonText : "Ajouter un module",

Résultat : [ 

            {

              texte : "analyse du code source jQuery",

​​​​​​ url : "aide.html",

showFerme : "0" ,

statut : "1"

          } ,

            {

                texte : "Big Bear {{bb}}}" ,

﻿ ﻿ ﻿url : "bb.html" ,

showFerme : "1" ,

statut : "1"

>

]

}) ;

L'effet est le suivant :

Vous pouvez librement ajouter et supprimer des options de saisie, comme indiqué ci-dessous :

L'image ci-dessus montre l'une des situations. Lorsqu'il n'y a pas de module, un message s'affichera.

C'est le deuxième cas, les données précédemment supprimées peuvent être restaurées.

(3), code complet pour l'apprentissage , ce code a été testé, y compris la structure des répertoires et les fichiers associés.

　（1），html

Copier le code Le code est le suivant :

            大熊君{{bb}} - UI DXJ ------ Onglet

                          添加学生信息

（2），css文件代码

复制代码代码如下 :

.dxj-ui-hd {

    remplissage : 0px ;

    marge : 0 auto;

    marge-haut:30px;

    largeur:780px;

    hauteur:60px;

    hauteur de ligne : 60 px ;

    arrière-plan : #3385ff ;

    couleur :#fff;

    font-family: "微软雅黑" ;

    taille de la police : 28 px ;

    text-align: center;

    poids de police: gras;

>

.dxj-ui-bd {

    remplissage : 0px ;

    marge : 0 auto;

    largeur:778px;

    padding-top : 30px ;

    padding-bottom : 30px ;

    débordement : caché ;

    bordure : 1px solide #3385ff ;

>

.dxj-ui-bd #tab {

    remplissage : 0px ;

    marge : 0 auto;

    largeur:720px;

    débordement : caché ;

>

.dxj-ui-bd #tab .title {

    largeur:720px;

    débordement : caché ;

    border-bottom:2px solide #3385ff;

>

.dxj-ui-bd #tab .title .adder {

    largeur:160px;

    hauteur:32px;

    hauteur de ligne : 32 px ;

    fond : #DC143C ;

    couleur :#fff;

    font-family: "微软雅黑" ;

    taille de police : 14 px ;

    text-align: center;

    poids de police: gras;

    float : gauche;

    curseur:pointeur;

>

.dxj-ui-bd #tab .title .items {

    hauteur:32px;

    marge gauche:20px;

    largeur:540px;

    débordement : caché ;

    float : gauche;

>

.dxj-ui-bd #tab .title .items div {

    remplissage:0px;

    marge-gauche:10px;

    largeur:96px;

    hauteur:32px;

    hauteur de ligne : 32 px ;

    arrière-plan : #3385ff ;

    couleur :#fff;

    famille de polices : arial ;

    taille de police : 12 px ;

    text-align: center;

    position:relatif;

    float : gauche;

    curseur:pointeur;

>

.dxj-ui-bd #tab .title .items div span.del {

    largeur:16px;

    hauteur:16px;

    hauteur de ligne : 16 px ;

    display:bloc;

    fond : #DC143C ;

    position:absolue;

    à droite :0 ;

    haut :0;

    curseur:pointeur;

>

.dxj-ui-bd #tab .content {

    largeur:716px;

    rembourrage-top:30px;

    débordement : caché ;

    bordure : 2px solide #3385ff ;

    bordure-haut :0px;

    hauteur min : 130px ;

    text-align:center;

>

.dxj-ui-bd #tab .content table {

    marge : 0 auto ;

>

.dxj-ui-bd #tab .content div.c {

    padding-top : 20px ;

    padding-left:20px;

    arrière-plan :#eee;

    hauteur:140px;

>

.dxj-ui-bd #tab .content div.c .input-content {

    marge supérieure : 10px ;

    famille de polices : arial ;

    taille de police : 12 px ;

>

.dxj-ui-bd #tab .console-panel {

    largeur:716px;

    rembourrage-top:20px;

    padding-bottom:20px;

    débordement : caché ;

    bordure : 2px solide #3385ff ;

    bordure-haut :0px;

    border-bottom:2px solide #3385ff;

    arrière-plan :#fff;

    affichage : aucun ; 

>

.actif {

    font-weight: gras ;

>

（3），Js代码如下：

复制代码代码如下 :

$(fonction(){
Bigbear.ui.createTab($("#tab"),{
boutonTexte : "Ajouter un module",
résultat : [
                {
                 texte : "Conseils du guide",
                   url : "help.html",
                showFermer : "0",
statut : "1"
               },
                {
                 texte : "Informations sur les étudiants",
                  url : "info.html",
                showFermer : "1",
statut : "1"
               },
                {
                texte : "Classification des étudiants",
                   url : "category.html",
                showFermer : "1",
statut : "1"
               },
                {
                  texte : "Big Bear {{bb}}" ,
url : "bb.html" ,
                showFermer : "1",
statut : "1"
               },
                {
                  texte : "Module de test bêta" ,
                 url : "test.html",
                showFermer : "1",
statut : "1"
            }
]
}) ;
}) ;
(fonction($){
var win = fenêtre ;
var bb = gagner.bigbear = gagner.bigbear || interface utilisateur : {}
} ;
var ui = bb.ui = {} ;
var Tab = fonction (elem, opts) {
Ceci.elem = elem ;
This.opts = opte ;
} ;
var tabProto = Tab.prototype ;
tabProto._deleteItem = fonction (élément){
var ça = ceci ;
This.getElem().find(".title .items div")
        .eq(item["index"])
         .fadeOut(function(){
That._resetContent() ;
Cela._updateStatus(item) ;
That._triggerItem(item["index"] 1) ;
That.getElem().find(".title .adder").trigger("click") ;
         }) ;
} ;
tabProto._triggerItem = fonction (suivant){
        var nextStatus = this._getStatus(next) ;
        var items = this.getElem().find(".title .items div") ;
        next = items.eq(next) ;
        if(next.size() && "1" == nextStatus){ //后继dom节点存在
            next.trigger("click") ;
        }
        else{
            items.eq(0).trigger("click") ;
        }
    } ;
    tabProto._getStatus = function(index){
        var status = "" ;
        $.each(this.getOpts()["result"],function(i,item){
            if(index == item["index"]){
                status += item["status"] ;
                return false ;
            }
        }) ;
        return status ;
    } ;
    tabProto._updateStatus = function(item){
        var status = item["status"] ;
        item["status"] = ("1" == status) ? "0" : "1" ;
    } ;
    tabProto.init = function(){
        var that = this ;
        this.getElem().find(".title .adder")
        .text("+" + this.getOpts()["buttonText"])
        .on("click",function(){
            that._toggleConsolePanel(function(){
                var root = that.getElem().find(".console-panel").empty() ;
                $.each(that.getOpts()["result"],function(i,item){
                    if("0" == item["status"]){
                        var elem = $("

")
                        .data("élément",élément)
                        .appendTo(racine) ;
                        $("").appendTo(elem) ;
                        $("").text(item["text"]).appendTo(elem) ;
                    >
                }) ;
                if(root.find("div").size()){
                    $("")
                    .on("clic",fonction(){
                        var data = root.find("input[type=radio]:checked").parent().data("item") ;
                        that._updateStatus(data) ;
                        that.getElem().find(".title .items div").eq(data["index"]).fadeIn().trigger("click") ;
                        that.getElem().find(".title .adder").trigger("click") ;
                    })
                    .appendTo(racine) ;
                >
                autre{
                    root.text("暂无任何可添加的项目！") ;
                >
            }) ;
        }) ;
        $.each(this.getOpts()["result"],function(i,item){
            article["index"] = je ;
            that._render(item) ;
        }) ;
        this.getElem().find(".title .items div")
        .eq(0)
        .trigger("clic") ; // 假定是必须有一项，否则插件意义就不大了！
    } ;
    tabProto._toggleConsolePanel = function(callback){
        this.getElem().find(".console-panel").slideToggle(function(){
            $.isFunction(callback) && callback() ;
        }) ;
    } ;
    tabProto._resetContent = function(){
        this.getElem().find(".content").html("") ;
    } ;
    tabProto._setContent = fonction(html){
        this.getElem().find(".content").html(html) ;
    } ;
    tabProto._getContent = fonction(url){
        retourner $.ajax({
            URL : URL
        }) ;
    } ;
    tabProto._render = fonction (données) {
        var ça = ceci ;
        var élément = $("

")
        .text(data["text"])
        .on("clic",fonction(){
            that._setCurrent(data["index"]) ;
            that._getContent(data["url"]).done(function(result){
                that._setContent(result) ;
            })
            .fail(function(){
                throw new Error("Net Error !") ;
            });
        })
        .appendTo(this.getElem().find(".title .items")) ;
        if("1" == data["showClose"]){
            $("X")
            .on("clic",fonction(){
                if(win.confirm("是否删除此项？")){
                    that._deleteItem(data) ;
                    retourner faux ; // 阻止冒泡
                >
            })
            .appendTo(élément) ;
        }
    } ;
    tabProto._setCurrent = fonction(index){
        var items = this.getElem().find(".title .items div").removeClass("active") ;
        items.eq(index).addClass("active") ;
        var contents = this.getElem().find(".content .c").hide() ;
        contents.eq(index).show() ;
    } ;
    tabProto.getElem = fonction(){
        renvoie this.elem ;
    } ;
    tabProto.getOpts = fonction(){
        renvoie this.opts ;
    } ;
    ui.createTab = function(elem,opts){
        var tab = new Tab(elem,opts) ;
        tab.init() ;
        onglet retour ;
    } ;
})(jQuery) ;

（四），最后总结

　　（1），面向对象的思考方式合理分析功能需求。

　　（2），以类的方式来组织我们的插件逻辑。

　　（3），不断重构上面的实例，如何进行合理的重构那？不要设计过度，要游刃有余，推荐的方式是过程化设计与面向对象思想设计相结合。

　（4），思考一下上面例子中，选项卡中的选项是否可以独立成单独的类那？比如« Article », 那Il s'agit d'un onglet « Tab » qui contient des informations sur les utilisateurs.

以上就是本文的全部内容了，后续我们将继续完善此插件，喜欢本文的话，来给点个赞吧。