原生js怎么封装插件源码下载

原生js怎么封装插件源码下载
这次给大家带来原生js怎么封装插件，原生js封装插件的注意事项有哪些，下面就是实战案例，一起来看一下。

这次给大家带来原生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参数为字符串