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 ...
随机推荐
- SUSE10 SP4源码升级Python到2.6.6
1.安装依赖包(CentOS可采用yum) zypper in gcc gcc-c++ openssl-devel-32bit openssl-devel readline-devel readlin ...
- python 自动化之路 day 19 Django基础[二]
Django - 路由系统 url.py - 视图函数 views.py - 数据库操作 models.py - 模板引擎渲染 - HttpReponse(字符串) - render(request, ...
- Webkit内核探究【2】——css简介
注:[转载请注明文章来源.保持原样] 出处:http://www.cnblogs.com/jyli/archive/2010/01/31/1660364.html 作者:李嘉昱 CSS在Webkit中 ...
- SlidingMenu官方实例分析5——FragmentChangeActivity
FragmentChangeActivity 这个类在OnCreate中依然判断了savedInstanceState,原因同上文一样,但是他这里使用了 这个方法是在转屏幕的时候,用于保存一些参数,比 ...
- 枚举callback还是返回列表 ？
一般都会碰到这样的一个问题,A模块需要返回一系列的object或者message,这样一般有两种处理方式: 1,枚举callback typedef (*callback_type)(obj_type ...
- python学习【第三篇】基本数据类型
Number(数字) int(整型) 在32位机器上,整数的位数为32位,取值范围为-2**31-2**31-1,即-2147483648-2147483647 在64位系统上,整数的位数为64位,取 ...
- Oracle备份一张表
数据库:myOnly 创建表:myTable 的备份表 myTable_tmpe create table myTable_tmpe as select * from myTable ; 补充: -- ...
- Mybatis Insert 返回主键ID
<insert id="insert" useGeneratedKeys="true" keyProperty="u_Id" para ...
- 巨蟒django之权限10,内容梳理&&权限组件应用
1.CRM项目内容梳理: 2.权限分配 3.权限组件的应用
- 【转】NAS、DAS和SAN存储的特点及主要区别
接触过存储设备的朋友应该对NAS.DAS和SAN存储不陌生,作为目前三种常见的存储方式,被广泛应用于企业存储设备中,那么NAS.DAS和SAN这三种存储分别有什么特点,又有何区别呢? 一.NAS存储特 ...