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 ...
随机推荐
- 集合映射中的映射列表(使用xml文件)
如果持久化类具有List对象,我们可以通过映射文件中的类的<list>元素或注释来映射List. 在这里,我们正在使用论坛的场景,其中一个问题有多个答案. 在这里,我们使用论坛的场景,其中 ...
- windows无法设置防火墙
无法打开防火墙,出现错误代码0x80070422,解决方法:windows开始键->运行->调出运行窗口,输入services.msc,(或者控制面板->管理工具->服务)找到 ...
- react 近期
ECMAScript 6 入门:http://es6.ruanyifeng.com/#docs/destructuring#%E6%95%B0%E7%BB%84%E7%9A%84%E8%A7%A3%E ...
- 服务器之ipmitool
一般命令 raw #发送一个原始的IPMI请求,并且打印回复信息. Lan #配置网络(lan)信道(channel) chassis #查看底盘的状态和设置电源 event #向BMC发送一个已经定 ...
- 十六进制字符串 char 数组 转换 c/c++/java
转载自:http://qing.blog.sina.com.cn/1820422183/6c81702733001qvk.html 1.c版 int hexcharToInt(char c) { ...
- 洛谷P1122 最大子树和
P1122 最大子树和 题目提供者该用户不存在 标签动态规划树形结构 难度普及/提高- 通过/提交54/100 提交该题 讨论 题解 记录 题目描述 小明对数学饱有兴趣,并且是个勤奋好学的学生,总是在 ...
- 机器重启 查看crontab执行历史记录crontab没有执行
Sep 17 19:01:01 d run-parts(/etc/cron.hourly)[8452]: finished 0anacronSep 17 19:10:01 d CROND[9059]: ...
- stochastic matrix
w Stochastic matrix - Wikipedia https://en.wikipedia.org/wiki/Stochastic_matrix Suppose you have a ...
- python系列二:python3基本数据类型
#标准数据类型——number(数字)a, b, c = 1, 2.2, "hello"print(a, end = ", ")print(b, end = & ...
- bootstrap页面布局
首先,我们必须明确,在这四种角色登录网站,看到页面是不同,这里不仅涉及到后端的权限控制,还涉及到前端页面的布局,区分好这些角色看的东西哪些是相同的,哪些又是不同的呢,这个必须在这里想明白,所以要做好页 ...