js原生插件格式解析
一个合格的插件必须满足以下要求:
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原生插件格式解析的更多相关文章
- 8. js中json格式解析
var doc = O_PARAMETER.FJSonStr;(doc为:{"items":[],"nextId":0}) //1.先转为json对象,主要有以 ...
- js原生高逼格插件
如何定义一个高逼格的原生JS插件 作为一个前端er,如果不会写一个小插件,都不好意思说自己是混前端界的.写还不能依赖jquery之类的工具库,否则装得不够高端.那么,如何才能装起来让自己看起来逼格更高 ...
- JS原生Ajax&Jquery的Ajax技术&Json
1.介绍Ajax Ajax = 异步 JavaScript 和 XML Ajax是一种创建快速动态网页的技术 通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新.这意味着可以不用整个 ...
- 转：JS中生成和解析JSON
原文地址:JS中生成和解析JSON 1.JS中生成JSON对象的方法: var json = []; var row1 = {}; row1.id= "1"; row1.name ...
- 认识JQuery，JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作，常用的方法
(一)认识JQuery JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法 JQuery的主旨:以更少的代码,实现更多的功能 (二)JQue ...
- 15、js 原生基础总结
Day1 一.什么是JS? ==基于对象==和==事件驱动==的客户端脚本语言 二.哪一年?哪个公司?谁?第一个名字是什么? 1995,NetScape(网景公司),布兰登(Brendan Eic ...
- JS原生Date类型方法的一些冷知识
ps:由于Date()是js原生函数,不同浏览器的解析器对其实现方式并不同,所以返回值也会有所区别.本文测试未特别申明浏览器的情况下,均是指win7 x64+chrome 44.0.2403.155 ...
- 流媒体测试笔记记录之————解决问题video.js 播放m3u8格式的文件,根据官方的文档添加videojs-contrib-hls也不行的原因解决了
详细代码Github:https://github.com/Tinywan/PHPSharedLibrary/tree/master/Tpl/Html5/VideoJS 想播放hls协议的就是m3u8 ...
- js原生的url操作函数，及使用方法。（附：下边还有jquery对url里的中文解码函数）
js原生的url操作函数,完善的. /*****************************/ /* 动态修改url */ /*****************************/ var ...
随机推荐
- Android开发——初步
一.项目结构介绍
- Fedora13下编译busybox-1.15.0出现can not find lcrypt错误
在Fedora 13 系统上编译busybox(非交叉编译)产生错误 root@localhost # make ... gcc -Wall -Wshadow -Wwrite-strings -Wun ...
- kafka 集群--3个broker 3个zookeeper创建实战
准备工作: 1. 准备3台机器,IP地址分别为:192.168.0.10,192.168.0.11,192.168.0.12 2. 下载kafka稳定版本,我的版本为:kafka_2.9.2-0.8. ...
- ManicTime软件破解版自用
ManicTime(时间管理软件)专业版 附破解教程 By tchivs - 『脱壳破解区』 - 吾爱破解 - LCG - LSG |安卓破解|病毒分析|破解软件|www.52pojie.cn htt ...
- matlab中双站异面直线法定位目标
calc.m %% 参数信息初始化 [x1,y1,z1]=deal(); [x2,y2,z2]=deal(,,); m1=/; n1=/; p1=^(/)/; m2=; n2=-^(/)/; p2=^ ...
- 高通Quick Charge高速充电原理分析
1 QC 2.0 1.1 高通Quick Charge 2.0 高速充电原理分析 高通的QC2.0高速充电须要手机端和充电器都要支持才行. 当将充电器端通过数据线连到手机上时,充电器默认的是将D+和D ...
- SAE+wordpress邮箱问题，WP MAIL STMP插件配置但无效解决的方法
我在SAE上面部署的WordPress是3.9版本号的,而非SAE应用商店里WordPress4sae是3.4的,虽然3.9版本号的确有非常多改进但在部署在SAE上面时须要做非常多改动,并且有些插件也 ...
- httpclient 怎么带上登录成功后返回的cookie值访问下一页面
我是只很菜很菜的小鸟.刚上班,有这个一个需求.要我抓取别的网站的数据. 我根据用户密码登录一个网站成功后,生成一个cookie值.我已经获取到了.然后要带上这个cookie值进行下一页面的访问 ...
- jmeter操作myql数据库
1.先安装mysql的驱动mysql-connector-java-5.1.7-bin.jar 配置jdbc的connection configuration Database Url :jdbc:m ...
- 导出大量数据到excel表
set_time_limit(0);error_reporting(0); // 输出Excel文件头,可把user.csv换成你要的文件名header('Content-Type: applicat ...