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

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>

js原生插件格式解析的更多相关文章

  1. 8. js中json格式解析

    var doc = O_PARAMETER.FJSonStr;(doc为:{"items":[],"nextId":0}) //1.先转为json对象,主要有以 ...

  2. js原生高逼格插件

    如何定义一个高逼格的原生JS插件 作为一个前端er,如果不会写一个小插件,都不好意思说自己是混前端界的.写还不能依赖jquery之类的工具库,否则装得不够高端.那么,如何才能装起来让自己看起来逼格更高 ...

  3. JS原生Ajax&Jquery的Ajax技术&Json

    1.介绍Ajax Ajax = 异步 JavaScript 和 XML Ajax是一种创建快速动态网页的技术 通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新.这意味着可以不用整个 ...

  4. 转：JS中生成和解析JSON

    原文地址:JS中生成和解析JSON 1.JS中生成JSON对象的方法: var json = []; var row1 = {}; row1.id= "1"; row1.name ...

  5. 认识JQuery，JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作，常用的方法

    (一)认识JQuery  JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法    JQuery的主旨:以更少的代码,实现更多的功能 (二)JQue ...

  6. 15、js 原生基础总结

    Day1 一.什么是JS?   ==基于对象==和==事件驱动==的客户端脚本语言 二.哪一年?哪个公司?谁?第一个名字是什么? 1995,NetScape(网景公司),布兰登(Brendan Eic ...

  7. JS原生Date类型方法的一些冷知识

    ps:由于Date()是js原生函数,不同浏览器的解析器对其实现方式并不同,所以返回值也会有所区别.本文测试未特别申明浏览器的情况下,均是指win7 x64+chrome 44.0.2403.155 ...

  8. 流媒体测试笔记记录之————解决问题video.js 播放m3u8格式的文件,根据官方的文档添加videojs-contrib-hls也不行的原因解决了

    详细代码Github:https://github.com/Tinywan/PHPSharedLibrary/tree/master/Tpl/Html5/VideoJS 想播放hls协议的就是m3u8 ...

  9. js原生的url操作函数，及使用方法。（附：下边还有jquery对url里的中文解码函数）

    js原生的url操作函数,完善的. /*****************************/ /* 动态修改url */ /*****************************/ var ...

随机推荐

  1. js创建对象的最佳方式

    1.对象的定义 ECMAScript中,对象是一个无序属性集,这里的“属性”可以是基本值.对象或者函数 2.数据属性与访问器属性 数据属性即有值的属性,可以设置属性只读.不可删除.不可枚举等等 访问器 ...

  2. System、应用程序进程的Binder线程池和Handler消息循环

    首先看一张Android系统启动流程图:

  3. SQL Server 还原错误“restore database正在异常终止 错误 3154”

    今天在还原数据库时,先建立相同名字的数据库,然后在该数据库上右键还原数据库.遇到了这样的一个错误: “备份集中的数据库备份与现有的 'RM_DB' 数据库不同. RESTORE DATABASE 正在 ...

  4. activity通过流程实例id动态获取流程图并展示在jsp页面上

    提供的Service方法如下: Java /** * 获取当前任务流程图 * * @param processInstanceId * @return */ @Override public Inpu ...

  5. hdu4266（三维凸包模板题）

    /*给出三维空间中的n个顶点,求解由这n个顶点构成的凸包表面的多边形个数. 增量法求解:首先任选4个点形成的一个四面体,然后每次新加一个点,分两种情况: 1> 在凸包内,则可以跳过 2> ...

  6. 阻塞（sleep等等）区别 中断（interrupt）+ 中断的意义

    不客气地说,至少有一半人认为,线程的"中断"就是让线程停止.如果你也这么认为,那你对多线程编程还没有入门. 在java中,线程的中断(interrupt)只是改变了线程的中断状态, ...

  7. 数据链路层负载均衡 Linux Virtual Server

    w 李智慧

  8. JavaScript中对事件简单的理解

    事件(event) 1.什么是JavaScript事件? 事件是文档或浏览器中发生的特定交互瞬间. 2.事件流 事件流描述的是从页面中接受事件的顺序,包含IE提出的事件冒泡流与Netscape提出的事 ...

  9. Vue中watch的简单应用

    Vue.js 有一个方法 watch,它可以用来监测Vue实例上的数据变动. 如果对应一个对象,键是观察表达式,值是对应回调,值也可以是方法名,或者是对象,包含选项. 下面写两个demo,参考demo ...

  10. python函数回顾：getattr()

    描述 getattr() 函数用于返回一个对象属性值. 语法 getattr 语法: getattr(object, name[, default]) 参数 object -- 对象. name -- ...