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

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. OpenCV学习笔记十四：opencv_objdetect模块

    一,简介: 该库用于目标检测.

  2. Quartz.NET 作业调度

    Quartz 简介: Quartz.NET是一个开源的作业调度框架,非常适合在平时的工作中,定时轮询数据库同步,定时邮件通知,定时处理数据等. Quartz.NET允许开发人员根据时间间隔(或天)来调 ...

  3. Gradle5.x打jar包上传maven仓库

    1.上传本地仓库 1.1 build.gradle 项目设置 plugins { id 'java' id 'maven' //引入maven插件 } group 'com.inkyi' //包名 v ...

  4. Unity3d 重力感应

    Input.acceleration 加速度 最近一次测量的设备在三维空间中的线性加速度(只读); void Update () { v3=Input.acceleration; } void OnG ...

  5. 集合遍历的时候删除List

    在Java中有时候我们会需要对List里面的符合某种业务的数据进行删除,但是如果不了解里面的机制就容易掉入“陷阱”导致遗漏或者程序异常.本文以代码例子的方式进行说明该问题. 1.采用索引下标遍历的方式 ...

  6. SVN中分支的建立与合并

    转载    出处:http://yaozhong1988.blog.163.com/blog/static/141737885201162671635126/ 一.  SVN分支的意义:     简单 ...

  7. 通知url必须为直接可访问的url，不能携带参数 异步接收微信支付结果通知的回调地址 不能携带参数。 回调地址后是否可以加自定义参数 同步回调地址 异步回调地址 return_url和notify_url的区别

    [微信支付]微信小程序支付开发者文档 https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=9_7 通知url必须为直接可访问的 ...

  8. p:nth-last-child(2)

    <!DOCTYPE html><html><head><style> p:nth-last-child(2){background:#ff0000;}& ...

  9. JavaScript函数setInterval()和setTimeout()正确的写法

    一.常规写法 1.1 不传参数 function a (x, y) { var i = 0; var b = function(){ console.log((x * y) + (i++)); } r ...

  10. Delphi重定义的消息结构

    // 除去DDE和MDI消息,一共159个消息,其中部分消息仅仅的转定义 // 普通消息,有两个参数和结果 PMessage = ^TMessage; TMessage = packed record ...