简易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)右 ...
随机推荐
- 《软件工程和Python》PYTHON效能分析和Django
资料汇总网站:http://www.yzhiliao.com/my/course/55 一..作业下面两个题目任选一题: (1)运用jieba库分词(或者你喜欢的其他库),并把代码发到git上去(不发 ...
- C语言中的strstr函数
转自:http://www.cnblogs.com/xy-kidult/archive/2012/12/25/2832460.html 早上翻<C和指针>,碰见一个子串查找问题,这个问题在 ...
- Gulp插件笔记
初次接触Gulp是出于网页模块化的需要,用过之后发现这个任务管理工具有很多实用的插件,意外地好用,于是打算写下这篇笔记把用到的Gulp插件记录一下.至于想了解Gulp基本用法的同学可以去Gulp官网查 ...
- PAT 甲级 1143 Lowest Common Ancestor
https://pintia.cn/problem-sets/994805342720868352/problems/994805343727501312 The lowest common ance ...
- PAT 1060 爱丁顿数
https://pintia.cn/problem-sets/994805260223102976/problems/994805269312159744 英国天文学家爱丁顿很喜欢骑车.据说他为了炫耀 ...
- pygame学习笔记（2）——从画点到动画
转载请注明:@小五义 http://www.cnblogs.com/xiaowuyi 1.单个像素(画点)利用pygame画点主要有三种方法:方法一:画长宽为1个像素的正方形 #@小五义 http:/ ...
- MySQL数据库中varchar与char类型的区别
在数据库中建表时,需要给数据定义一个数据库中的数据库类型,当需要给String类型定义一个数据库中的类型时,可以看见有两个选择,一个是varchar,另一个是char,有很多人不清楚两者的区别,包括自 ...
- 微信 小程序布局 swiper 页面
JS // pages/classify/swiper.js Page({ /** * 页面的初始数据 */ data: { current:0 }, titleBtn:function(e){ ...
- sql学习. case + group by 都干了啥子事情
select case pref_name when 'fudao' then 'siguo' when 'xiangchuan' then 'siguo' when 'aiyuan' then 's ...
- Memcache 服务管理脚本
自定义脚本将memcached作为系统服务启动以及开机启动. 一.编写脚本 在/etc/init.d/目录下新建一个脚本,名称为:memcached.内容如下: vi /etc/init.d/memc ...