原生js封装插件的方法-创新互联

小编给大家分享一下原生js封装插件的方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

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

//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样式，不如多写几个类，要用那种样式，换个类名就行。

以上是“原生js封装插件的方法”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！