;(function() { "user strict"; //默认参数 var size = { var options = { color: 'red' }; } //插件函数color var color = { //更新配置参数 var config: function(opts) { if(!opts) return options; for (var k in opts) { options[k] = opts[k]; } return this; }, //监听事件 var listen: function(elem) { var elems = document.getElementById('elem'); elems.addEventListener('click',function() { this.style.color = options.color; }) } return this; } window.Color = color;})()//对象链式调用：//Color.config({color: 'red'}).listen('#sz');
1 回答
慕勒0069038
TA贡献143条经验 获得超39个赞
页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="test.js" type="application/javascript"></script>
<script src="jquery/js/jquery.min.js"></script>
<script type="application/javascript">
$(document).ready(function () {
let color = new Color();
color.config({color: 'red'}).listen('test');
});
</script>
</head>
<body>
<span id="test" style="color: blue;"> asdsafsadsadasd</span>
</body>
</html>js:
/**
* creater:pater
*/
(function () {
function Color(config) {
this.configVal = {};
this.configVal.color = 'red';
}
Color.prototype = {
constructor: Color,
config: function (conf) {
for (var k in conf) {
this.configVal[k] = conf[k];
}
return this;
},
listen: function (elem) {
let _this = this;
var elems = document.getElementById(elem);
elems.addEventListener('click',function() {
this.style.color = _this.configVal.color;
});
}
};
window.Color = Color;
})();大概就是这样把
添加回答
举报
0/150
提交
取消