如何用原生javascript封装一个属于自己的插件

今天介绍一下怎么写属于自己的插件，建议看之前温习一下面向对象； 
我就写个简单的重置样式的插件，话不多说先上代码；

//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)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

//调用
var a = new SetStyles({
container:"#test",
background:"#fff",
textAlign:"center",
text:function(){
return "我是文本";
}
});
//text参数格式字符串或者函数
//container用的querySelectAll方法，参数一致
//其他css参数为字符串

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