Comment encapsuler des plug-ins dans JS natif

Cette fois, je vais vous montrer comment encapsuler des plug-ins en js natif. Quelles sont les précautions pour encapsuler des plug-ins en js natif. Ce qui suit est un cas pratique, jetons un coup d'œil.

Aujourd'hui, je vais vous présenter comment écrire votre propre plug-in. Il est recommandé de revoir Orienté objet avant de le lire
J'écrirai un simple plug-in pour réinitialiser ; le style. Sans plus tarder, téléchargez le code ;

//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参数为字符串

Mon code devrait être assez simple, mais l'explication de base ne suffit pas si vous ne le comprenez pas, je vais l'éliminer moi-même. S'il y a un problème, console.logez-le moi-même.
Définissez d'abord le prochain paramètre par défaut defaultSettings
puis écrivez un constructeur Pourquoi avez-vous besoin d'utiliser Object.assign pour fusionner des objets Parce que vous n'écrivez pas nécessairement toute la configuration par défaut. utilisera par défaut les paramètres par défaut, et certains choisiront les paramètres que vous écrivez, donc les options sont placées à la fin
Enfin, écrivez la méthode dans le prototype ;
Les méthodes sont généralement écrites dans le prototype et les propriétés sont écrites dans le constructeur.
Tout le monde devrait être capable de comprendre la fonction de ce code. Il réinitialise le style CSS, qui est similaire à la fonction css() de jquery.
Mais je ne vous recommande pas d'utiliser cela. Après tout, suivez le principe et utilisez le moins possible js pour faire fonctionner le dom. Après tout, ce coût est très cher, j'écris ceci uniquement pour que tout le monde sache comment. pour encapsuler les plug-ins et modifier les styles CSS. Il est préférable d'écrire quelques classes supplémentaires. Si vous souhaitez utiliser ce style, modifiez simplement les noms des classes.

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Quelles sont les structures d'éléments HTML couramment utilisées

Comment résoudre le problème d'espacement des étiquettes et des entrées dans Google Browse

Quels sont les moyens de désactiver la mise en cache des pages

Comment utiliser l'encodage base64 pour les images HTML à la place de

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!