js原生插件格式解析

最新推荐文章于 2022-05-13 15:22:09 发布

weixin_30530523

最新推荐文章于 2022-05-13 15:22:09 发布

阅读量114

点赞数

原文链接：http://www.cnblogs.com/yanze/p/7459008.html

版权

一个合格的插件必须满足以下要求:

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>

转载于:https://www.cnblogs.com/yanze/p/7459008.html

weixin_30530523

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js原生插件格式解析

一个合格的插件必须满足以下要求:1.拥有独立作用域与用户作用域隔离，插件内的私有变量不可影响用户定义的变量2.拥有默认参数3.提供配置方法让用户可改变参数4.提供监听接口，以监听页面操作5.支持链式调用接下来是一个改变文本颜色的简单插件<!DOCTYPE html><html> <head> &lt...
复制链接

扫一扫