Développer un composant JavaScript complet

En tant que développeur, tout le monde doit savoir qu'il existe des contrôles intégrés dans le navigateur : Alerte, Confirmer, etc. Cependant, ces contrôles ont généralement des formes différentes selon les différents fabricants de navigateurs, et les effets visuels ne sont souvent pas à la hauteur. à la hauteur des exigences du concepteur d’interface utilisateur. Plus important encore, le style de ces contrôles intégrés est difficile à unifier avec les styles de conception de divers produits Internet aux styles très différents. Par conséquent, les excellents développeurs front-end développent leurs propres contrôles personnalisés pour remplacer ces contrôles intégrés du navigateur. Bien sûr, il existe déjà d'innombrables excellents composants de ce type sur Internet. Le but de la rédaction de cet article n'est pas d'expliquer à quel point le composant que j'ai développé est excellent, ni de le montrer, j'espère simplement pouvoir interagir de cette manière. avec plus De nombreux développeurs communiquent entre eux, apprennent les uns des autres et progressent ensemble. Bon, sans plus tarder, passons aux choses sérieuses.

Introduction à la fonction

• Remplace les commandes Alerte et Confirmation fournies avec le navigateur

• Style d'interface personnalisé

• Les méthodes d'utilisation sont fondamentalement cohérentes avec les contrôles intégrés

Aperçu de l'effet

1. Contrôle d'alerte

2. Confirmer le contrôle

3. Code complet, aperçu en ligne (voir en bas, le téléchargement du package compressé est fourni)

Processus de développement

　1. Conception de la structure des composants

Tout d'abord, examinons l'utilisation de base des composants intégrés :

 alert("内置Alert控件");
 if (confirm("关闭内置Confirm控件？")) {
     alert("True");
 } else {
     alert("False");
 }

Afin de garantir que l'utilisation des composants est cohérente avec les contrôles intégrés, nous devons donc envisager de remplacer les contrôles intégrés. En tenant compte du style unifié de développement de composants, de la facilité d'utilisation, de la maintenance aisée et des fonctionnalités orientées objet, je prévois d'utiliser les méthodes d'alerte et de confirmation personnalisées comme méthodes d'instance d'une classe (Winpop), et enfin d'utiliser les méthodes d'instance pour couvrent la méthode de contrôle intégrée du système. Afin d'atteindre l'objectif, mon approche de base est la suivante :

var obj = new Winpop(); // 创建一个Winpop的实例对象
// 覆盖alert控件
window.alert = function(str) {
    obj.alert.call(obj, str);
};
// 覆盖confirm控件
window.confirm = function(str, cb) {
    obj.confirm.call(obj, str, cb);
};

Il convient de noter que puisque les contrôles intégrés du navigateur peuvent empêcher d'autres comportements du navigateur, nos composants personnalisés ne le font pas avoir cette capacité, afin d'être aussi unifié que possible, comme vous pouvez le voir dans l'aperçu, nous utilisons un calque de masque semi-transparent plein écran lors de l'affichage du composant personnalisé. C'est précisément pour les raisons ci-dessus que certains ajustements subtils ont été apportés à la façon dont le composant de confirmation est utilisé, de la méthode intégrée de renvoi d'une valeur booléenne à la méthode d'utilisation d'une fonction de rappel pour garantir que "OK" et "Annuler" peut être ajouté correctement. Par conséquent, la manière d'utiliser les composants personnalisés devient la forme suivante :

alert("自定义Alert组件");
confirm("关闭自定义Confirm组件？", function(flag){
    if (flag) {
        alert("True");
    } else {
        alert("False");
    }
});

　2. Conception du code du composant

Avant d'introduire formellement le code du composant Winpop Avant, commençons par jetez un œil à la structure de base d'un composant Javascript :

(function(window, undefined) {
    function JsClassName(cfg) {
        var config = cfg || {};
        this.get = function(n) {
            return config[n];
        }
        this.set = function(n, v) {
            config[n] = v;
        }
        this.init();
    }
    JsClassName.prototype = {
        init: function(){},
        otherMethod: function(){}
    };
    window.JsClassName = window.JsClassName || JsClassName;
})(window);

Utilisez une fonction anonyme auto-exécutable pour envelopper le code de notre composant afin de réduire autant que possible la pollution globale, et enfin envelopper notre code de composant La classe est attaché à l’objet fenêtre global, ce qui est une approche recommandée.

Les méthodes get et set dans le constructeur ne sont pas nécessaires, c'est juste l'habitude personnelle de l'auteur. Je pense que l'écrire de cette façon peut unifier la méthode d'appel de mise en cache et de lecture des paramètres de configuration et le global interne des autres composants. variables, et il semble être plus efficace. A un style orienté objet. Les lecteurs sont invités à partager leurs réflexions et à savoir s'il est bon ou non d'écrire de cette façon.

Jetons ensuite un œil au code complet du composant Winpop :

(function(window, jQuery, undefined) {

    var HTMLS = {
        ovl: &#39;<p class="J_WinpopMask winpop-mask" id="J_WinpopMask"></p>&#39; + &#39;<p class="J_WinpopBox winpop-box" id="J_WinpopBox">&#39; + 
        &#39;<p class="J_WinpopMain winpop-main"></p>&#39; + &#39;<p class="J_WinpopBtns winpop-btns"></p>&#39; + &#39;</p>&#39;,
        alert: &#39;<input type="button" class="J_AltBtn pop-btn alert-button" value="确定">&#39;,
        confirm: &#39;<input type="button" class="J_CfmFalse pop-btn confirm-false" value="取消">&#39; + &#39;
        <input type="button" class="J_CfmTrue pop-btn confirm-true" value="确定">&#39;
    }

    function Winpop() {
        var config = {};
        this.get = function(n) {
            return config[n];
        }

        this.set = function(n, v) {
            config[n] = v;
        }
        this.init();
    }

    Winpop.prototype = {
        init: function() {
            this.createDom();
            this.bindEvent();
        },
        createDom: function() {
            var body = jQuery("body"),
                ovl = jQuery("#J_WinpopBox");

            if (ovl.length === 0) {
                body.append(HTMLS.ovl);
            }

            this.set("ovl", jQuery("#J_WinpopBox"));
            this.set("mask", jQuery("#J_WinpopMask"));
        },
        bindEvent: function() {
            var _this = this,
                ovl = _this.get("ovl"),
                mask = _this.get("mask");
            ovl.on("click", ".J_AltBtn", function(e) {
                _this.hide();
            });
            ovl.on("click", ".J_CfmTrue", function(e) {
                var cb = _this.get("confirmBack");
                _this.hide();
                cb && cb(true);
            });
            ovl.on("click", ".J_CfmFalse", function(e) {
                var cb = _this.get("confirmBack");
                _this.hide();
                cb && cb(false);
            });
            mask.on("click", function(e) {
                _this.hide();
            });
            jQuery(document).on("keyup", function(e) {
                var kc = e.keyCode,
                    cb = _this.get("confirmBack");;
                if (kc === 27) {
                    _this.hide();
                } else if (kc === 13) {
                    _this.hide();
                    if (_this.get("type") === "confirm") {
                        cb && cb(true);
                    }
                }
            });
        },
        alert: function(str, btnstr) {
            var str = typeof str === &#39;string&#39; ? str : str.toString(),
                ovl = this.get("ovl");
            this.set("type", "alert");
            ovl.find(".J_WinpopMain").html(str);
            if (typeof btnstr == "undefined") {
                ovl.find(".J_WinpopBtns").html(HTMLS.alert);
            } else {
                ovl.find(".J_WinpopBtns").html(btnstr);
            }
            this.show();
        },
        confirm: function(str, callback) {
            var str = typeof str === &#39;string&#39; ? str : str.toString(),
                ovl = this.get("ovl");
            this.set("type", "confirm");
            ovl.find(".J_WinpopMain").html(str);
            ovl.find(".J_WinpopBtns").html(HTMLS.confirm);
            this.set("confirmBack", (callback || function() {}));
            this.show();
        },
        show: function() {
            this.get("ovl").show();
            this.get("mask").show();
        },
        hide: function() {
            var ovl = this.get("ovl");
            ovl.find(".J_WinpopMain").html("");
            ovl.find(".J_WinpopBtns").html("");
            ovl.hide();
            this.get("mask").hide();
        },
        destory: function() {
            this.get("ovl").remove();
            this.get("mask").remove();
            delete window.alert;
            delete window.confirm;
        }
    };

    var obj = new Winpop();
    window.alert = function(str) {
        obj.alert.call(obj, str);
    };
    window.confirm = function(str, cb) {
        obj.confirm.call(obj, str, cb);
    };
})(window, jQuery);

Il y a un peu plus de code, mais les points clés sont les suivants :

• L'auteur était paresseux et a utilisé jQuery Avant de l'utiliser, veuillez vous assurer que jQuery a été introduit

• La structure des composants personnalisés est finalement ajoutée au corps, donc. avant d'introduire le js ci-dessus, assurez-vous d'abord que le document a été chargé

• Le composant ajoute la fonction d'appuyer sur ESC et de cliquer sur le calque de masque pour masquer le composant

• Remarque : bien qu'il n'y ait pas de méthode destory utilisée, les lecteurs peuvent faire attention à supprimer window.alert et delete window.confirm dans cette méthode. Le but de l'écriture de ceci est de s'assurer qu'après le. Le composant personnalisé est détruit, les contrôles Alert et Confirm sont restaurés à l'effet intégré du navigateur

• Si vous ajoutez window.Winpop = Winpop à la fin du composant, l'objet peut être mondialisé pour que d'autres classes puissent appeler

Enfin

En tant qu'ingénieur de développement front-end, je pense personnellement que le développement de composants Javascript est une chose très intéressante, et le plaisir peut ne se réalise que si vous l'essayez vous-même. Le développement de composants front-end nécessite souvent la coopération de Javascript, CSS et HTML pour obtenir deux fois le résultat avec la moitié de l'effort. Le Winpop mentionné ci-dessus ne fait pas exception. Nous vous proposons ici un package de démonstration complet. Les lecteurs intéressés sont invités à le diffuser. le mot.

Ce qui précède est le contenu du développement d'un composant JavaScript complet. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !