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

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. sqoop1.99.3配置过程

    感谢:http://www.myexception.cn/database/1600202.html 官网配置指导:http://sqoop.apache.org/docs/1.99.3/Instal ...

  2. FIR滤波器与IIR滤波器

    FIR(Finite Impulse Response)滤波器 有限长单位冲激响应滤波器,又称为非递归型滤波器 特点: FIR滤波器的最主要的特点是没有反馈回路,稳定性强,故不存在不稳定的问题: FI ...

  3. 傅里叶叠层成像FP(Fourier Ptychographic Imaging)查资料

    傅里叶叠层成像FP(Fourier Ptychographic Imaging) 傅里叶叠层显微术(FPM)是一种新型的计算显微成像技术,FPM与传统显微术照明方式不同,常采用可编程LED阵列进行不同 ...

  4. python 基础 10.0 nosql 简介--redis 连接池及管道

    一. NOSQL 数据库简介 NoSQL 泛指非关系型的数据库.非关系型数据库与关系型数据库的差别 非关系型数据库的优势: 1.性能NOSQL 是基于键值对的,可以想象成表中的主键和值的对应关系,而且 ...

  5. SharePoint服务器端对象模型 之 访问文件和文件夹（Part 3）

    (三)遍历 文件系统的遍历是指按照文件夹的层级结构遍历文档库.列表的文件夹和列表条目.遍历主要有三种方式:(1)直接使用文件系统对象模型进行遍历:(2)使用SPDocumentLibrary进行遍历: ...

  6. Nginx服务监听端口修改启动bug

    监听的端口从80 修改到其他端口出现启动不起来问题. 解决方案如下: yum install policycoreutils-python sudo cat /var/log/audit/audit. ...

  7. Windows下批处理文件(.bat)的使用

    cmd文件和bat文件的区别:在本质上两者没有区别,都是简单的文本编码方式,都可以用记事本创建.编辑和查看.两者所用的命令行代码也是共用的,只是cmd文件中允许使用的命令要比bat文件多.cmd文件只 ...

  8. Nuxt取消默认的eslint语法检测

    Nuxt项目里自带的有eslint语法检测,这个对开发时候的不规范都会报错,对我们开发有很大帮助,如果我们开发时不想使用这个功能,我们可以取消掉eslint 一.如果整个项目完全不用eslint的话, ...

  9. 让linux进程后台运行、会话断开不退出

    方法一:nohup ping www.ibm.com & 可改变进程的父进程号方法二:setsid ping www.ibm.com 可改变进程的父进程号方法三:(ping www.ibm.c ...

  10. IO多路复用、协程

    一.铺垫:基于socket发送http请求 1.需求一:向百度发送请求搜索关键字“alex”,有如下两种方式: import requests ret = requests.get('https:// ...