今天介绍一下怎么写属于自己的插件,建议看之前温习一下面向对象;
我就写个简单的重置样式的插件,话不多说先上代码;
//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参数为字符串
我的这份代码应该足够简单,看不懂的说明基础还不够哦,自己敲一敲,有问题的地方,自己console.log一下吧。
首先定义下一默认的参数defaultSettings
然后写个构造函数,里面为什么要用Object.assign合并对象,因为默认配置里有的你不一定全都写,不写的就默认为默认参数,有的就选择你写的参数,所以options放在后面;
最后把方法写在原型里。
方法一般写在原型里,属性写在构造函数里。
大家应该都能看的懂这段代码的功能,重置css样式,和jquery的css()函数类似。
但是不推荐大家用这个,毕竟遵循原则,尽量少用js去操作dom,毕竟这种代价是很昂贵的,我写这个只是为了让大家了解一下如何封装插件,要去更改css样式,不如多写几个类,要用那种样式,换个类名就行。
相信看了这些案例你已经掌握了方法,更多精彩请关注编程之家网其它相关文章!
相关阅读:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。