原生js封装插件的方法
创始人
2024-11-24 20:41:56
0次


我就写个简单的重置样式的插件,话不多说先上代码;

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

我的这份代码应该足够简单,看不懂的说明基础还不够哦,自己敲一敲,有问题的地方,自己console.log一下吧。
首先定义下一默认的参数defaultSettings
然后写个构造函数,里面为什么要用Object.assign合并对象,因为默认配置里有的你不一定全都写,不写的就默认为默认参数,有的就选择你写的参数,所以options放在后面;
最后把方法写在原型里。
方法一般写在原型里,属性写在构造函数里。
大家应该都能看的懂这段代码的功能,重置css样式,和jquery的css()函数类似。
但是不推荐大家用这个,毕竟遵循原则,尽量少用js去操作dom,毕竟这种代价是很昂贵的,我写这个只是为了让大家了解一下如何封装插件,要去更改css样式,不如多写几个类,要用那种样式,换个类名就行。

相关内容

热门资讯

空调连续工作多久需要停机休息 空调连续工作的时间取决于多个因素,包括空调的型号、功率、使用环境和维护情况等。一般来说,空调可以连续...
空调哪个符号是除湿的 空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异,但一般来说,除湿...
格力空调多长时间加一次氟利昂 1、一般情况下,空调对氟利昂的使用量是非常小的,所以在空调使用了四年左右的时候再考虑加也没问题。2、...
空调用多长时间需要加氟一次 一般情况下是五年。当出现以下这几种情况时,空调才需要加氟。1、空调的室内机和室外机各有两个接口,当接...
格调生活·C标思享荟:卡萨帝在... 9月12日的郑州龙湖金融岛,夜风轻拂,灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...
品牌价值破千亿、高端份额持续领... 9月12日,“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...
空调主板坏了修800还是换新的 空调主板坏了是修还是换新,需要考虑多个因素,以下是一些建议:1. 维修成本:如果维修费用较低,比如 ...
空调开多久需要休息多长时间 问题:空调开多久需要休息多长时间回答:1、在使用空调的过程中,一般空调开7~8个小时左右需要休息2~...
中央空调多长时间清洗一次 1、一般空调开机前清洗一次即可,空调开机中间时段再清洗一次,空调关机时清洗一次,这样比较合理。2、空...
中央空调氟利昂多久加一次 看空调制热和制冷程度,很多人的观点认为氟利昂必须一年放一次,其实这个观点是错误的,理解上面有点偏差,...