简易jQuery插件
之前写过jQuery插件的笔记
我一直觉得前面讲了一大堆闭包和三种插件封装模式有点冗余，那篇笔记我直到记录到后面才发现这事情很简单，想来想去还是觉得网上的一些文章把事情搞复杂了，其实这件事情很简单，所以我想按照自己的方式重新把这个问题阐述一遍。
我觉得学东西学的活的人都会从结果去倒推，比如说有些人学习音乐，先去练习演奏大量的曲目，然后再回来推敲这些曲子的作曲手法，这样更能事半功倍，而如果你从一开始就去研究作曲手法你可能连视奏能力都没有达到要求，这样做只会浪费时间。所以这篇博文的思路也是从结果倒推，要学习如何封装jQuery插件，首先要明白如何使用jQuery插件。
jQuery插件的使用方法非常简单，如果你用的足够多你就会发现其中的共性，简单来说就是以下3点：
1.插件都依赖于id
2.插件初始化的方法一般都是调用插件方法
3.插件方法的参数一般都是一个Object
我们以jQuery UI的datepicker为例，我们要把一个input输入框变成一个datepicker，方法如下：
<html>
<head>
<title>how to use datepicker plugin</title>
<link rel="stylesheet" type="text/css" href="./css/jquery-ui.min.css" />
</head>
<body>
<!--input依赖于id-->
<input type="text" id="datepicker1" readonly />
<input type="text" id="datepicker2" readonly /> <script src="./js/jquery-1.11.3.min.js"></script>
<script src="./js/jquery-ui.min.js"></script>
<script>
$(function () {
//调用插件方法初始化插件
//参数为Object类型
$("#datepicker1").datepicker({
minDate:0,
onSelect:function(e){
alert("Hello,Datepicker!");
}
}); //不带参数的datepicker初始化
$("#datepicker2").datepicker();
});
</script>
</body>
</html>
我们来总结一下就是，jQuery插件的使用方法一般来说就是
$("#id-selector").pluginFunctionName({
prop: value,
method: function(){
//method code
}
});
弄清楚了这一点，那么我们就可以追本溯源地去编写jQuery插件了
首先我们要搞清楚编写插件时要具备的代码环境，这个环境不过多赘述，如有不懂请参看我开头提到的之前写的博文
<html>
<head>
<title>plugin</title>
</head>
<body>
<div id="plugin"></div> <script src="./js/jquery-1.11.3.min.js"></script>
<script>
$(function () {
$.fn.myPlugin = function () {
//在这里编写插件
}
}); $(function(){
//在这里调用插件方法
$("#plugin").myPlugin();
});
</script>
</body>
</html>
然后接下来要讲的是重点，我们一步一步来变化我们刚才写的代码
1.既然前面说到调用插件时有一个Object作为参数，这个Object设置了插件的很多内容，那么我们就把这个Object理解为一个设置项，即option，所以myPlugin这个方法要有一个options形参
<html>
<head>
<title>plugin</title>
</head>
<body>
<div id="plugin"></div> <script src="./js/jquery-1.11.3.min.js"></script>
<script>
$(function () {
$.fn.myPlugin = function (options) {
}
}); $(function(){
$("#plugin").myPlugin();
});
</script>
</body>
</html>
2.但是我们有时候调用插件的时候并不会带参数，而这个时候插件也能生效，这是因为插件的开发者们往往会事先写好一个Object作为默认的参数，当插件被调用时没有带参数，这个Object就会生效，我们将这个Object称为defaults
<html>
<head>
<title>plugin</title>
</head>
<body>
<div id="plugin"></div> <script src="./js/jquery-1.11.3.min.js"></script>
<script>
$(function () {
$.fn.myPlugin = function (options) {
//设置defaults object
var defaults = {
Event:"click",
msg:"Hello World!"
};
}
}); $(function(){
$("#plugin").myPlugin();
});
</script>
</body>
</html>
3.可是又有一些时候我们在调用插件的时候又会设置options里的一部分，而options的另一部分不设置，比如上面这个例子，我在调用myPlugin的时候如果写成这样
$("#plugin").myPlugin({ msg: "Ahhhhh~" });
我们只设置了msg，而Event被我们忽略了，那这个时候Event还是需要一个默认值，或者说，干脆就采用defaults里的那个click，
在这种情况下，我们使用jQuery提供的extend()方法来解决，它的作用是将两个不同的Object对象进行合并(Merge)
<html>
<head>
<title>plugin</title>
</head>
<body>
<div id="plugin"></div> <script src="./js/jquery-1.11.3.min.js"></script>
<script>
$(function () {
$.fn.myPlugin = function (options) {
//设置defaults object
var defaults = {
Event:"click",
msg:"Hello World!"
}; //合并defaults和options
var options = $.extend(defaults, options);
}
}); $(function(){
$("#plugin").myPlugin();
});
</script>
</body>
</html>
4.在上述步骤后我们需要预先设置好一些变量，比如获取this对，或者更进一步对插件进行事件绑定
<html>
<head>
<title>plugin</title>
</head>
<body>
<div id="plugin"></div> <script src="./js/jquery-1.11.3.min.js"></script>
<script>
$(function () {
$.fn.myPlugin = function (options) {
//设置defaults object
var defaults = {
Event:"click",
msg:"Hello World!"
}; //合并defaults和options
var options = $.extend(defaults, options); //获取this，对本例来说就是 $("#plugin")
var $this = $(this); //进行事件绑定
$this.on(options.Event, function(e){
alert(options.msg);
});
}
}); $(function(){
$("#plugin").myPlugin();
});
</script>
</body>
</html>
最后这个简易的插件就算是完成了，我们可以带参数和不带参数来试一试
<html>
<head>
<title>simple node plugin example</title>
</head>
<body>
<div id="hello">click me to say "Hello,World!"</div>
<div id="bye">touch me to say "Goodbye,World!"</div> <script src="./js/jquery-1.11.3.min.js"></script>
<script>
$(function () {
$.fn.myPlugin = function (options) {
var defaults = {
Event:"click",
msg:"Hello World!"
};
var options = $.extend(defaults, options);
var $this = $(this);
$this.on(options.Event, function(e){
alert(options.msg);
});
}
}); $(function(){
$("#hello").myPlugin();
$("#bye").myPlugin({Event:"mouseover",msg:"Goodbye,World!"});
});
</script>
</body>
</html>
然而这里还有一个问题，如果我们想要插件多一些DOM层次呢？比如Bootstrap的panel面板，有title，有content，而且点击title能够切换显示隐藏，这应该怎么写呢？
其实思路也很简单，无非就是获取到这个插件最外层（也就是id那一层）的子节点，然后对这些子节点进行绑定，我自己试着写了一个简单的panel插件，个人认为简单易懂，所以直接贴上来，不作解释。
<html>
<head>
<title>multi node plugin example</title>
<style>
.panel{width:350px;}
</style>
</head>
<body>
<div class="panel" id="test">
<div class="title">
<p>I am Title,click me to show the content</p>
</div>
<div class="content">
<p>I am Content</p>
<p>I wanna say</p>
<p>Hello,World!</p>
</div>
</div> <script src="./js/jquery-1.11.3.min.js"></script>
<script>
$(function () {
$.fn.panel = function (options) {
var defaults = {
titleFontColor:"red",
titleBackgroundColor:"#eeeeee",
contentFontColor:"blue",
contentBackgroundColor:"#e5e5e5"
};
var options = $.extend(defaults, options); var $this = $(this);
var $title = $this.children("div.title");
var $content = $this.children("div.content"); $title.css({ color: options.titleFontColor, background:options.titleBackgroundColor });
$content.css({ color: options.contentFontColor, background:options.contentBackgroundColor }); $title.on("click", function(){
$content.toggle();
});
}
}); $(function(){
$("#test").panel({contentFontColor:"#000000"});
});
</script>
</body>
</html>
相信看完这篇文章后，你就能完全理解如何去编写一个jQuery插件了！
简易jQuery插件的更多相关文章
- 40 个让你的网站更加友好的 jQuery 插件
一个插件的基本功能是执行一个含有元素集合的函数数组.每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass().一个jQuery插件是一个基本的可以扩充jQuery 原型对 ...
- 40个让你的网站屌到爆的jQuery插件
一 个插件的基本功能是执行一个含有元素集合的函数数组.每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass().一个 jQuery插件是一个基本的可以扩充jQuery 原 ...
- 常用JQuery插件
虽然自己也写过插件,但JQuery插件种类的繁多,大多时候,我还是使用别人写好的插件,这些都是我用了同类插件里较为不错的一些,今天就整理一下公开放出来. UI: jquery.HooRay(哈哈,自己 ...
- 一些常用的jQuery插件
1. X-editable 这个插件能够让你在页面上创建可编辑的元素.它能够使用任何引擎(bootstrap.jquery-ui.jquery),并且包含弹出式和内联模式. 2. Garlic.js ...
- JQuery插件使用之Validation 快速完成表单验证的几种方式
JQuery的Validation插件可以到http://plugins.jquery.com/上去下载.今天来分享一下,关于这个插件的使用. 简易使用 这第一种方式可谓是傻瓜式的使用,我们只需要按照 ...
- 8个超实用的jQuery插件应用
自jQuery诞生以来,jQuery社区都在不断地.自发地为jQuery创建许许多多功能不一的插件应用,很多jQuery插件非常实用,对我们的前端开发帮助相当大,不仅可以更完美的完成指定功能,而且节省 ...
- 自己写jquery插件之模版插件高级篇(一)
需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...
- JQuery插件定义
一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人 ...
- BootStrap_04之jQuery插件（导航、轮播）、以及Less
1.列偏移与列排序: ①列偏移:控制列出现的位置,某列偏移后,后序列会随之偏移--只能右偏移: col-lg/md/sm/xs-offset-*; ②列排序:控制某一列的位置,该列可以左(pull)右 ...
随机推荐
- c++中的函数重载
函数多态也称为函数重载. (1)函数重载指的是可以有多个同名的函数,因此对名称进行了重载. (2)函数重载的关键在于函数的参数列表,也称为函数特征标.如果两个函数的参数数目和参数类型相同,同时参数的排 ...
- 用jar包运行带GUI的java游戏
这是从某论坛下载的java游戏demo,由于年代久远,所以没有记下出处.重要的是,这是一个带GUI的java程序. 链接: https://pan.baidu.com/s/1LjQ2bQPXvW-ti ...
- Eclipse+MySQL+Tomcat web开发安装配置
转载文章: 链接:https://blog.csdn.net/bbyyz01/article/details/78142126 1.Eclipse 这里选择Eclipse集成开发环境. 可以直接在官网 ...
- 30_数据库_第30天java_jdbc_（DBUtils）_讲义
今日内容介绍 1.DBUtils 2.连接池 01DButils工具类的介绍个三个核心类 * A: DButils工具类的介绍个三个核心类 * a: 概述 * DBUtils是java编程中的数据库操 ...
- java 调用 oracle的function 和 procedure
1.调用函数 CallableStatement cs=con.prepareCall("{?=call get_pname(?,?,?)}"); 第一个?表示返回的值,后面的?可 ...
- js & get recursive ids
js & get recursive ids len = 0; bug for(let i = 0; i < 3; i++) { console.log(`i =`, i); let y ...
- 解决MySQL Slave 触发 oom-killer
最近经常有收到MySQL实例类似内存不足的报警信息,登陆到服务器上一看发现MySQL 吃掉了99%的内存,God ! 有时候没有及时处理,内核就会自己帮我们重启下MySQL,然后我们就可以看到 dme ...
- Eclipse中设置作者、日期等的方式
1.点击Windows->Preferences->Java->Code Style->Code Templates: 2.点击展开右侧的Comments选项卡,里面的选项对应 ...
- c# 方法参数 params 的试用
//添加方法 public void test(params string[] messages) { } //调用方法 test("aaa","bbb",&q ...
- JeeSite 4.x SAAS 多租户技术设计方案
SaaS 是 Software-as-a-Service(软件即服务)的简称,从技术角度上可称之为 “多租户技术或称多重租赁技术”.它与 “按需软件.应用服务提供商.托管软件” 所具有相似的含义.它是 ...