正文
js原生插件格式解析
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
一个合格的插件必须满足以下要求:
1.拥有独立作用域与用户作用域隔离，插件内的私有变量不可影响用户定义的变量
2.拥有默认参数
3.提供配置方法让用户可改变参数
4.提供监听接口，以监听页面操作
5.支持链式调用
接下来是一个改变文本颜色的简单插件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p class="a">11</p>
<input type="button" class="clickIt"/>
</body>
<script>
//自执行函数内变量拥有独立作用域并与外界隔离
(function(){
//默认参数写在最前面
var obj = ''
//参数方法API
var api = {
//配置方法改变参数
config: function (opt) {
obj= document.querySelector(opt)
//返回this对象，其指向调用此方法的对象，故可以链式调用
return this
},
//监听页面操作
listen: function listen(elem) {
document.querySelector(elem).onclick= ()=> {
this.fun1(obj)
}
return this
},
fun1: function(obj) {
obj.style.color= "red"
return this
}
}
//this为window对象，simplePlugin为插件名称
this.simplePlugin= api
})()
</script>
<script>
simplePlugin.config('.a').listen(".clickIt")
</script>
</html>
另一种格式是通过构造函数创建实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p class="a">11</p>
<input type="button" class="clickIt"/>
</body>
<script>
//自执行函数内变量拥有独立作用域并与外界隔离
(function(){
function api(){
this.obj= ''
this.config= (opt)=> {
obj= document.querySelector(opt)
//返回this对象，其指向调用此方法的对象，故可以链式调用
return this
}
//监听页面操作
this.listen= (elem)=> {
document.querySelector(elem).onclick= ()=> {
this.fun1(obj)
}
return this
}
this.fun1= (obj)=> {
obj.style.color= "red"
return this
}
}
//this为window对象，simplePlugin为插件名称
this.simplePlugin= api
})()
</script>
<script>
var sp= new simplePlugin()
sp.config('.a').listen(".clickIt")
</script>
</html>
