简易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)右 ...
随机推荐
- SQL Server 2008 存储过程示例
出处:http://www.jb51.net/article/54730.htm --有输入参数的存储过程-- create proc GetComment (@commentid int) as s ...
- windows和RedHat双系统安装说明
该博客记录了安装windows和RedHat双系统的方法.这里的windows系统是win8.1,RedHat是RHEL-server-7.0-x86_64-LinuxProbe.Com.iso,该i ...
- Express搭建NodeJS项目
1.安装Node.js: 2.安装npm; 3.安装Express; 在本例中默认全局安装express 安装express生成器 如果没有安装express-generator或安装路径不对,会报以 ...
- TCP/IP Illustrated Vol1 Second Edition即英文版第二版，TCP部分个人勘误
目前已经有了英文版第二版的TCPIP详解,中文版暂时还没有,但是英文版还是有好几处错误,作者和官方竟然没有维护一个勘误表. 个人阅读过程中针对TCP部分可能有问题的地方简单勘误一下 P596:示意图中 ...
- Scrum Meeting Beta - 6
Scrum Meeting Beta - 6 NewTeam 2017/12/5 地点:主南201 任务反馈 团队成员 完成任务 计划任务 安万贺 完成了离线状态本地存储的读取Issue #133Pu ...
- 通达OA工作流主要表的数据结构
flow_run_prcs 流程执行明细 字段名称 类型 中文 说明 RUN_ID 数值 流水号(关键字段) 每发起一个工作流,即创建一个全局唯一的流水号 PRCS_ID 数值 执行步骤序号 USER ...
- jQuery 版本选择与常见插件库总结
在日常的开发中jQuery作为一个流行多年的轻量级 JavaScript 库,使用十分的普遍,主要源于它的便捷性和实用性非常高. 在此总结一些关于jQuery版本的区别和选择的建议,以及一些常见插件库 ...
- IPV6 国内进展情况
国家下一代互联网产业技术创新战略联盟(以下简称“产业联盟”),近日在北京发布了我国首份IPv6业务用户体验监测报告(以下简称<报告>).该<报告>监测了我国固定宽带的IPv6普 ...
- 1使用 vue-cli 搭建项目（cp）
http://www.cnblogs.com/wisewrong/p/6255817.html(copy:web) https://zhuanlan.zhihu.com/p/26183652(也很好) ...
- uva 1513(线段树)
题目链接:1513 - Movie collection 题意:有一堆电影,按1-n顺序排,有m次操作,每次询问第ai个电影之前有多少个电影,然后将其抽出放在堆顶. 分析:线段树应用. 因为每次查询后 ...