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

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. Xcode中授权普通成员

    问题: 在普通用户账户下使用系统的Xcode在编译通过时候会提示” Developer Tools Access“需控制另一进程,需要输入“Developer Tools”组用户名密码才能继续调试 解 ...

  2. makefile编写---单个子目录编译自动变量模板ok

    1.自动化变量通配符http://blog.sina.com.cn/s/blog_7c95e5850101b38l.html 2.wildcard 使用http://blog.csdn.net/lia ...

  3. JQuery实现动态生成树形菜单

    jQuery实现动态生成树形菜单 有一个需求:菜单导航条需要依据不同的权限动态提取出来.计划是将功能模块与用户权限之间的关系保持到一个配置表中.所以功能菜单的话就需要动态提取出来再显示.借助jquer ...

  4. python学习【第六篇】python迭代器与生成器

    一.什么是迭代器 迭代器协议:对象必须提供一个next方法,执行该方法要么返回迭代中的下一项,要么就引起一个StopIteration异常,以终止迭代(只能往后走不能往前退) 可迭代对象:实现了迭代器 ...

  5. 七、Dockerfile案例三（Mysql安装）

    七.Dockerfile案例三(Mysql安装) *特别提醒:新版的mysql:5.7数据库下的user表中已经没有Password字段了(5.5的user表还有) 一.查看docker hub上的版 ...

  6. POJ 1789 Truck History【最小生成树简单应用】

    链接: http://poj.org/problem?id=1789 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=22010#probl ...

  7. NoSQL 数据库分类 颠覆

    NoSQL 数据库分类 类型 部分代表特点 列存储 HbaseCassandraHypertable顾名思义,是按列存储数据的.最大的特点是方便存储结构化和半结构化数据,方便做数据压缩,对针对某一列或 ...

  8. SSL逐渐演变到TLS

    w https://zh.wikipedia.org/wiki/超文本传输安全协议

  9. MySQL中redo日志

    重做日志用来实现事务的持久性,即ACID中的D,由两部分组成: 一是内存中的重做日志缓冲(redo log buffer)  易丢失 二是重做日志文件(redo log file) 持久的 InnoD ...

  10. PAT 1069. 微博转发抽奖(20)

    小明PAT考了满分,高兴之余决定发起微博转发抽奖活动,从转发的网友中按顺序每隔N个人就发出一个红包.请你编写程序帮助他确定中奖名单. 输入格式: 输入第一行给出三个正整数M(<= 1000).N ...