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 ...
随机推荐
- Matlab命令行版打开
matlab -nosplash -nodesktop 运行文件:matlab -nodesktop -nosplash -r file
- Android Notification使用方法
1.http://www.cnblogs.com/plokmju/p/android_Notification.html 2.http://blog.csdn.net/vipzjyno1/articl ...
- c语言之linux下gettimeofday函数windows替换方案
* Copyright (C) 2008 mymtom (mymtom@hotmail.com) * All rights reserved. * * Redistribution and use i ...
- python3----冒泡排序
array = [1, 6, 7, 2, 9, 4] for i in range(len(array)-1, 1, -1): for j in range(0, i): if array[j] &g ...
- dva解读1
1.首先定义一个app对象实现dva const app = dva({ history: createHistory(), }); // 2. Plugins app.use(createLoadi ...
- jmeter安装启动报错：Not able to find Java executable or version. Please check your Java installation
1.xp安装jmeter后启动,出现下面错误,找了很多方法试了,都没有用: 2.最后找到一个方法解决了[感谢无名大神],在环境变量PATH中添加:%SystemRoot%/system32;%Syst ...
- 关于angularjs的ng-repeat指令
(如果有说的不对,欢迎指教,更欢迎大家一起交流.) 关于angularjs的ng-repeat指令,想必每个学习angularjs的初学者都很有映像.那我也总结一下我使用ng-repeat的时候经验, ...
- Selenium IDE的使用
Selenium IDE 的作用 Selenium IDE 是Firefox 浏览器的一个插件, 它会记录你对Firefox的操作,并且可以回放它的操作. 在实际自动化测试中,不会用Selenium ...
- 如何对你的Python代码进行基准测试
啥叫做基准测试(benchmark)代码?其实主要就是测试(benchmarking)和分析(profiling)你的代码执行多快,并且找到代码瓶颈(bottlenecks)在哪里. 执行该动作的主要 ...
- MySQL 5.6 死锁演示 及 日志分析
1. 表结构 CREATE TABLE dead_update ( a ) ', PRIMARY KEY (a) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 ; ), ...