Entwickeln Sie eine vollständige JavaScript-Komponente-js-Tutorial-php.cn

Als Entwickler sollte jeder wissen, dass es im Browser einige integrierte Steuerelemente gibt: Warnung, Bestätigung usw. Allerdings haben diese Steuerelemente je nach Browserhersteller normalerweise unterschiedliche Formen und die visuellen Effekte sind oft nicht gut um den Anforderungen des UI-Designers gerecht zu werden. Noch wichtiger ist, dass sich der Stil solcher integrierten Steuerelemente nur schwer mit den Designstilen verschiedener Internetprodukte mit sehr unterschiedlichen Stilen vereinen lässt. Daher entwickeln hervorragende Frontend-Entwickler ihre eigenen personalisierten Steuerelemente, um diese integrierten Browser-Steuerelemente zu ersetzen. Natürlich gibt es im Internet bereits unzählige hervorragende Komponenten dieser Art. Der Zweck des Schreibens dieses Artikels besteht nicht darin, zu erklären, wie hervorragend die von mir entwickelte Komponente ist, und ich hoffe auch nicht, dass ich auf diese Weise interagieren kann mit mehr Viele Entwickler kommunizieren miteinander, lernen voneinander und machen gemeinsam Fortschritte. Okay, kommen wir ohne weitere Umschweife zur Sache.

Funktionseinführung

Ersetzt die im Browser enthaltenen Warn- und Bestätigungssteuerelemente
Angepasster Schnittstellenstil
Nutzungsmethoden stimmen im Wesentlichen mit den integrierten Steuerelementen überein

Effektvorschau

1. Alarmsteuerung

2. Steuerung bestätigen

3. Vollständiger Code, Online-Vorschau (siehe unten, komprimierter Paket-Download wird bereitgestellt)

Entwicklungsprozess

　1. Komponentenstrukturdesign

Werfen wir zunächst einen Blick auf die grundlegende Verwendung integrierter Komponenten:

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

Nach dem Login kopieren

Um sicherzustellen, dass die Verwendung von Komponenten mit den integrierten Steuerelementen übereinstimmt, müssen wir erwägen, die integrierten Steuerelemente zu überschreiben. Unter Berücksichtigung des einheitlichen Stils, der Benutzerfreundlichkeit, der einfachen Wartung und der objektorientierten Eigenschaften der Komponentenentwicklung plane ich, die benutzerdefinierten Warn- und Bestätigungsmethoden als Instanzmethoden einer Klasse (Winpop) zu verwenden und schließlich die Instanzmethoden zu verwenden decken die integrierte Steuermethode des Systems ab. Um das Ziel zu erreichen, ist mein grundlegender Ansatz wie folgt:

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);
};

Nach dem Login kopieren

Es ist zu beachten, dass unsere benutzerdefinierten Komponenten dies nicht tun, da die integrierten Steuerelemente des Browsers andere Verhaltensweisen des Browsers verhindern können Um so einheitlich wie möglich zu sein, verwenden wir, wie Sie in der Vorschau sehen können, beim Einblenden der benutzerdefinierten Komponente eine halbtransparente Maskenebene. Genau aus den oben genannten Gründen wurden einige subtile Anpassungen an der Art und Weise vorgenommen, wie die Bestätigungskomponente verwendet wird, von der integrierten Methode zur Rückgabe eines booleschen Werts bis zur Methode zur Verwendung einer Rückruffunktion, um sicherzustellen, dass „OK“ und „Abbrechen“ kann korrekt hinzugefügt werden. Daher sieht die Verwendung benutzerdefinierter Komponenten wie folgt aus:

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

Nach dem Login kopieren

　2. Komponentencode-Design

In der formalen Einführung des Codes der Winpop-Komponente Vorher Schauen wir uns die Grundstruktur einer Javascript-Komponente an:

(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);

Nach dem Login kopieren

Verwenden Sie eine selbstausführende anonyme Funktion, um unseren Komponentencode zu verpacken, um die globale Umweltverschmutzung so weit wie möglich zu reduzieren, und verpacken Sie schließlich unseren Komponentencode Die Klasse wird an das globale Fensterobjekt angehängt, was ein empfohlener Ansatz ist.

Die Get- und Set-Methoden im Konstruktor sind nicht erforderlich, es ist nur die persönliche Gewohnheit des Autors. Ich bin der Meinung, dass das Schreiben auf diese Weise die aufrufenden Methoden zum Zwischenspeichern und Lesen von Konfigurationsparametern und die internen globalen Parameter anderer Komponenten vereinheitlichen kann Variablen, und es scheint effizienter zu sein. Leser sind herzlich eingeladen, ihre Gedanken mitzuteilen und zu sagen, ob es gut ist, so zu schreiben oder nicht.

Als nächstes werfen wir einen Blick auf den vollständigen Code der Winpop-Komponente:

(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);

Nach dem Login kopieren

Es gibt etwas mehr Code, aber die wichtigsten Punkte sind wie folgt:

Der Autor war faul und hat jQuery verwendet. Bitte stellen Sie sicher, dass jQuery eingeführt wurde.
Die benutzerdefinierte Komponentenstruktur wird schließlich an den Text angehängt Bevor Sie die oben genannten js einführen, stellen Sie bitte zunächst sicher, dass das Dokument geladen wurde
Die Komponente fügt die Funktion hinzu, ESC zu drücken und auf die Maskenebene zu klicken, um die Komponente auszublenden
Hinweis: In diesem Beispiel wird die Destory-Methode nicht verwendet, aber die Leser können darauf achten, window.alert und window.confirm in dieser Methode zu löschen Stellen Sie sicher, dass nach der Zerstörung der benutzerdefinierten Komponente die Warn- und Bestätigungssteuerelemente mit den integrierten Effekten des Browsers wiederhergestellt werden
Wenn Sie window.Winpop = Winpop am Ende der Komponente hinzufügen, Das Objekt kann globalisiert werden, damit es von anderen Klassen aufgerufen werden kann

Endlich

Als Front-End-Entwicklungsingenieur halte ich persönlich die Entwicklung von Javascript-Komponenten für eine sehr interessante Sache. Und der Spaß kann nur realisiert werden, wenn man es selbst versucht. Die Entwicklung von Frontend-Komponenten erfordert oft die Zusammenarbeit von Javascript, CSS und HTML, um mit halbem Aufwand das Doppelte zu erzielen. Das oben erwähnte Winpop stellt Ihnen hier ein komplettes Demo-Komprimierungspaket zur Verfügung das Wort.

Das Obige ist der Inhalt der Entwicklung einer vollständigen JavaScript-Komponente. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).