So kapseln Sie Plug-Ins in nativem JS

Dieses Mal zeige ich Ihnen, wie Sie Plug-Ins in nativem JS kapseln. Was sind die Vorsichtsmaßnahmen für das Kapseln von Plug-Ins in nativem JS?

Heute werde ich vorstellen, wie Sie Ihr eigenes Plug-In schreiben. Es wird empfohlen, vor dem Lesen einen Blick auf Objektorientiert zu werfen.
Ich werde ein einfaches Plug-In zum Zurücksetzen schreiben der Stil. Laden Sie den Code ohne weiteres hoch.

//SetStyles.js
(function(win, doc) {
    var defaultSettings = {
        color: "red",
        background: "blue",
        border: "2px solid #000",
        fontSize:"30px",
        textAlign:"center",
        width:"200px",
        borderRadius:"5px"
    };
    function SetStyles(options) {
        var self = this;
        //没传配置项自己丢错
        if(!options) {
            throw new Error("请传入配置参数");
        }
        self = Object.assign(self, defaultSettings, options);
        self.container = doc.querySelector(self.container) || doc.querySelectorAll(self.container);
        self._changeStyles();
    }
    SetStyles.prototype = {
        _changeStyles: function() {
            var self = this;
            for(var pro in self) {
                if(pro == "container") {
                    continue;
                }
                if(pro == 'text' && typeof self[pro]== 'string') {
                    self.container.innerText = self[pro];
                    continue;
                }else if(pro == 'text' && typeof self[pro]== 'function'){
                    self.container.innerText = self[pro]();
                    continue;
                }
                self.container.style[pro] = self[pro];
            }
        }
    }
    win.SetStyles = SetStyles;
})(window, document)
  //调用
    var a = new SetStyles({
            container:"#test",
            background:"#fff",
            textAlign:"center",
            text:function(){
                return "我是文本";
            }
        });    //text参数格式字符串或者函数
    //container用的querySelectAll方法，参数一致
    //其他css参数为字符串

Mein Code sollte einfach genug sein, aber die grundlegende Erklärung reicht nicht aus, wenn Sie ihn nicht verstehen können. Wenn es ein Problem gibt, protokollieren Sie es selbst in der Konsole.
Definieren Sie zuerst den nächsten Standardparameter
und schreiben Sie dann einen Konstruktor . Warum müssen Sie Object.assign verwenden, um Objekte zusammenzuführen? verwendet standardmäßig die Standardparameter, und einige wählen die von Ihnen geschriebenen Parameter aus, sodass die Optionen am Ende platziert werden.
Schreiben Sie abschließend die Methode in den Prototyp.
Methoden werden im Allgemeinen im Prototyp geschrieben und Eigenschaften werden im Konstruktor geschrieben.
Jeder sollte in der Lage sein, die Funktion dieses Codes zu verstehen. Er setzt den CSS-Stil zurück, der der css()-Funktion von jquery ähnelt.
Aber ich empfehle Ihnen nicht, dies zu verwenden. Befolgen Sie schließlich das Prinzip und versuchen Sie, js so wenig wie möglich zu verwenden, um den Dom zu betreiben. Schließlich sind diese Kosten sehr teuer wissen, wie man Plug-Ins kapselt und CSS-Stile ändert. Es ist besser, ein paar weitere Klassen zu schreiben. Wenn Sie diesen Stil verwenden möchten, ändern Sie einfach die Klassennamen.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Was sind die häufig verwendeten HTML-Elementstrukturen?

So lösen Sie das Problem mit Beschriftungs- und Eingabeabständen in Google Browse

Wie kann man das Seiten-Caching deaktivieren?

So verwenden Sie stattdessen die Base64-Kodierung für HTML-Bilder von

Das obige ist der detaillierte Inhalt vonSo kapseln Sie Plug-Ins in nativem JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!