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

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. 一种安全云存储方案设计（下）——基于Lucene的云端搜索与密文基础上的模糊查询

    一种安全的云存储方案设计(未完整理中) 一篇老文了,现在看看错漏颇多,提到的一些技术已经跟不上了.仅对部分内容重新做了一些修正,增加了一些机器学习的内容,然并卵. 这几年来,云产品层出不穷,但其安全性 ...

  2. AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

    AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 最大的 ...

  3. 关于JAVA编译时找不到自定义包的问题

    这两天照网上的教程,学习JSP/SERVLET/JAVABEAN,写了几个JAVA文件,目录放在TOMCAT的WEBAPPS下面,通过javac编译时,老提示找不到指定的包: 下图是我的目录路径: 通 ...

  4. linux下的shell 快捷键

    Ctrl+p重复上一次命令Ctrl+a跳到第一个字符前Ctrl+x同上但再按一次会从新回到原位置Ctrl+b前移一个字符不删除字符情况下Ctrl+h删除前一个字符Ctrl+u删除提示符前的所有字符Ct ...

  5. PHP基础面试题(1-10)

    1.什么是PHP? PHP是一个基于服务端来创建动态网站的脚本语言,可以通过PHP和HTML 生成网站主页. 2.什么是面向对象?主要特征是什么? 面向对象是程序的一种设计方式,利于提高程序的重用性, ...

  6. Android OpenCV集成摄像头图片动态识别车牌号

    最近两天开发一个使用OpenCV集成的一个识别车牌号的项目,困难重重,总结一下相关经验,以及开发注意事项: 一.开发环境: Android Studio 个人版本 3.1.4 NDK下载:14b CM ...

  7. 40、DrawerLayout使用详情

    1.主内容视图一定要是DrawerLayout的第一个子视图 2.主内容视图宽度和高度匹配父视图,即“match_parent” 3.必须显示指定抽屉视图(如ListView)的 android:la ...

  8. Python成长之路（常用模块学习）

    Python 拥有很多很强大的模块 主要写一下常用的几个吧 大概就是这些内容了 模块介绍 time &datetime模块 random os sys shutil json & pi ...

  9. 【BZOJ2286】[Sdoi2011]消耗战 虚树

    [BZOJ2286][Sdoi2011]消耗战 Description 在一场战争中,战场由n个岛屿和n-1个桥梁组成,保证每两个岛屿间有且仅有一条路径可达.现在,我军已经侦查到敌军的总部在编号为1的 ...

  10. JAVA的Hashtable在遍历时的迭代器线程问题

    这篇博客主要讲什么 Hashtable及其内部类的部分源码分析 Hashtable在遍历时的java.util.ConcurrentModificationException异常的来由和解决 单机在内 ...