原生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 == #39;text #39; typeof self[pro]== #39;string #39;) {
 self.container.innerText = self[pro];
 continue;
 }else if(pro == #39;text #39; typeof self[pro]== #39;function #39;){
 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编码来代替

以上就是原生js怎么封装插件的详细内容，更多请关注php中文网其它相关文章！

最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。