如何用原生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 == '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样式,不如多写几个类,要用那种样式,换个类名就行。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 作为一个前端er,如果不会写一个小插件,都不好意思说自己是混前端界的。写还不能依赖jquery之类的工具库,否则装...
    绰号陆拾柒阅读 46,454评论 42 261
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 177,269评论 25 709
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,716评论 1 92
  • 文/sherry 我出生在一个内地贫困县,这里,我从小接受的教育就是学习改变命运。那时候的我也不知道为什么要改变命...
    刘小云爱自由阅读 2,548评论 1 1
  • 一滴荷露凉 一盏明前香 一朝一夕琴一张 一段舞袖扬 一袭柔风裳 一枕瓦上霜 一诗一画墨一方 一念慕宋唐
    五月慕晴阅读 1,684评论 3 3

友情链接更多精彩内容