这次给大家带来原生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样式，不如多写几个类，要用那种样式，换个类名就行。
相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
常用html元素结构有哪些
谷歌浏览的label与input间距问题应该如何解决
禁止页面缓存有哪些方法
html的图片怎样使用base64编码来代替
