如何写一个Jquery 的Plugin插件
JQuery Plugin插件,如果大家不明白什么是JQuery插件或都不清楚如何编写可以查看其官方的网站:jQuery Authoring Guidelines
好了,下面有一些我觉得想做一个好的插件必须应有的要求:
1、在JQuery命名空间下声明只声明一个单独的名称
2、接受options参数,以便控制插件的行为
3、暴露插件的默认设置 ,以便外面可以访问
4、适当地将子函数提供给外部访问调用
5、保持私有函数
6、支持元数据插件
下面将逐条地过一遍:
只声明一个单独的名称
这表明是一个单独的插件脚本。如果你的脚本包含多个插件或者是互补的插件(像$.fn.doSomething()和$.undoSomething()),那么你可以根据要求声明多个名称。但一般情况下,力争用单一的名称来维持插件现实的所有细节。
在本例中,我们将声明一个叫“hilight”的名称
// 插件的定义 $.fn.hilight = function( options ){// 这里就是插件的实现代码了...};
然后我们可以像这样调用它:
$("divTest").hilight();
接受一个options参数,以便控件插件的行为
$.fn.hilight = function(options){var defaults = {foreground : 'red',background : 'yellow'};//Extends out defaults options with those privided 扩展我们默认的设置$.extend(defaults,options); };
而我们可以这样使用它:
$('#myDiv').hilight({foreground: 'blue' });
暴露插件的默认设置 ,以便外面可以访问
作为插件的提升和优化,我们应该将上面的代码暴露出来作为插件的默认设置。
这非常重要,这样做让使用插件的用户可以非常容易地用最少的代码重写或自定义该插件。然而这个我们可以借助JavaScript function对象的优势:
$.fn.hilight = function(options){//Extend our default options with those provided//Note that the first arg to extend is an empty object//this is to keep from overriding our "defaults" objectvar opts = $.extend({},$.fn.hilight.defaults,options); } $.fn.hilight.defaults = {foreground : 'red',background : 'yellow' };
这里值得注意的是$.extend()第一个参数是一个空的对象,这样可以让我们重写插件的默认设置
用户可以像这样使用插件:
// override plugin default foreground color $.fn.hilight.defaults.foreground = 'blue'; // ... // invoke plugin using new defaults $('.hilightDiv').hilight(); // ... // override default by passing options to plugin method $('#green').hilight({foreground: 'green' });
适当地将子函数提供给外部访问调用
这个例子延续前面的例子,你会发现有一个有趣的方法可以扩展你的插件(然后还可以让其他人扩展你的插件 :))。例如,我们在插件里声明了一个函数叫“format”用来高这显示文本,我们的插件实现代码可能是这样子的:
$.fn.hight = function(options){//iterate and reformat each mached elementreturn this.each(function(){var $this = $(this);//...var markup = $this.html();//call our format functionmarkup = $.fn.hilight.format(markup);$this.html(markup);}); }; //define our format function $.fn.hilight.format = function(txt){return '<strong>' + txt + '</strong>'; };
保持私有函数
暴露插件有部分内容提供重写看上去似乎非常强大,但是你必须认真地考虑你的插件哪一部分是需要暴露出来的。一旦暴露出来,你就需要考虑这些变化点,一般情况下,如果你没有把握哪部分需要暴露出来,那么你可以不这样做。
那如何才能够定义更多的函数而不将其暴露出来呢?这个任务就交给闭包吧。为了证实,我们在插件中添加一个函数叫“debug”,这debug函数将会记录已选择的元素数量到FireBug控制台中。为了创建闭包,我们将插件定义的整部分都包装起来:
//create closure (function($){//plugin definition$.fn.hilight = function(options){debug(this);//...};//private function for debugginfunction debug($obj){if(window.console && window.console.log){window.console.log('hilight selection count :' + $obj.size());}}//...//end of closure })(jQuery);
这样“debug”方法就不能被闭包这外调用了
支持元数据插件
依赖于所写的插件类型,并支持元数据插件会使得其本身更加强大。个人来讲,我喜欢元素据插件,因为它能让你分离标签中重写插件的配置 (这在写demo和示例时特别有用)。最重要的是,想现实它特别的容易!
$.fn.hilight = function(options){//build main options before element interationvar opts = $.extend({},$.fn.hilight.defaults,options);return this.each(function(){var $this = $(this);//build element specific optionsvar o = $.meta ? $.extend({},opts,$this.data()) : opts;//一般句话,搞定支持元数据 功能 }); }
几行的变化完成了以下几件事:
1、检测元数据是否已经配置
2、如果已配置,将配置属性与额外的元数据进行扩展
<!-- markup -->
<div class="hilight { background: 'red', foreground: 'white' }">Have a nice day!这是元数据
</div>
<div class="hilight { foreground: 'orange' }">Have a nice day!在标签中配置
</div>
<div class="hilight { background: 'green' }">Have a nice day!
</div>
然后我们通过一句脚本就可以根据元数据配置分开地高亮显示这些div标签:
$('.hilight').hilight();
最后,将全部代码放在一起:
// //create closure // (function($){//// plugin definition//$.fn.hilight = function(options){debug(this);//build main options before element iterationvar opts = $.extend({}, $.fn.hilight.defaults, options);//iterate and reformat each matched elementreturn this.each(function(){$this = $(this);//build element specific optionsvar o = $.meta ? $.extend({}, opts, $this.data()) : opts;//update element styles$this.css({backgroundColor: o.background,color: o.foreground});var markup = $this.html();//call our format function});}//// private function for debugging//function debug($obj){if(window.console && window.console.log){window.console.log('hilight selection count: ' + $obj.size());}};//// define and expose our format function//$.fn.hilight.format = function(txt){return '<strong>' + txt + '</strong>';};//// plugin defaults//$.fn.hilight.defaults = {foreground : 'red',background : 'yellow'};//// end of clousure// })(jQuery);
2.
如何写一个Jquery 的Plugin插件
最近做项目想要一个控制会计数字输入的jquery插件,找了好久找不到, 没用办法,只有自己操刀上阵了,其实要求也不高, 就是:
1. 默认是: 0.00
2. 只能输入数字和小数点, 其它输入将被忽略
3. 输入整数后继续自动保持两位小数
4. 可以定义自己想保留几位小数
OK, 开始动手:
首先, 通过将函数封装为jquery plugin包, 可以将这个包非常容易的在各种项目和页面中使用, 而且代码管理维护起来方便. 再说, jquery的plugin实现起来超简单,为什么不这么做呢?如果你是第一次开发, 先阅读下这篇文章吧: How jQuery Works
一. Jquery Plugin 的基本框架
(function($) {$.fn.extend({MyPlugin: function(options) {var defaults = {decimal_length: 2,};var options = $.extend(defaults, options);var len = parseInt(options['decimal_length']);return this.each(function() {alert('edison');});}}); })(jQuery);
其中options就是参数, 调用方法为:
$('#ddd').MyPlugin({decimal_length:2});
好的, 我们接着完成要的功能: 文件名为 money.js
(function($) {var pasteEventName = ($.browser.msie ? 'paste' : 'input') + ".mask";$.fn.extend({money_type: function(options) {var defaults = {decimal_length: 2,};var options = $.extend(defaults, options);var len = parseInt(options['decimal_length']);return this.each(function() {var input = $(this);function caret() {var input_value = input.val();var reCat = /\d+\.?\d{0,2}/i;var_new_value = reCat.exec(input_value);input.val(var_new_value);}input.bind("click", function(e) {if (input.val() == '0.00') {input.select();}}).bind(pasteEventName, function() {setTimeout(caret, 0);});});}}); })(jQuery);
OK, 插件完成, 在使用的时候要包含这个文件和jquery文件, 然后通过以下代码就可以调用了
$('#ddd').money_type();// 默认保留两位小数
如何写一个Jquery 的Plugin插件相关推荐
- body区域怎么传一个数组_自己轻松写一个jQuery库
jQuery是现在最流行的JavaScript工具库. 据统计,目前全世界57.3%的网站使用它.也就是说,10个网站里面,有6个使用jQuery.如果只考察使用工具库的网站,这个比例就会上升到惊人的 ...
- 如何为豆瓣FM写一个chrome的歌词插件
对于喜欢豆瓣FM的同学来说,没有歌词是件令人苦恼的事,下面我就来总结下怎样为豆瓣FM写一个chrome的歌词插件. --------------------------------- 1.需要的技能 ...
- 手写一个Vuex的持久化插件
前两天做了个vue的项目,为了避免刷新后数据全部恢复原样,在项目中使用了 vuex-persistedstate 这个持久化插件,在这个项目中需要借助这个插件主要实现的功能是:将需要持久化的数据存储并 ...
- jQuery Media Plugin 插件实现在线视频播放业务
jQuery Media 简介 Jquery Media Plugin是一款页面内容嵌套多媒体的插件.支持的大部分的多媒体播放器和多媒体格式,比如:Flash, Quicktime, Windows ...
- 如何写一个脚本语言_如何写一个Nx schematic plugin?
前言 玩过Angular的同学都知道Angular作为一个Framework,拥有一套完备的生态,还集成了强大的CLI.而React则仅仅是一个轻量级的Library,官方社区只定义了一套组件的周期规 ...
- 自己动手写一个JQuery插件(第二篇)(转)
1.Hold住,我们要开始动真格了! 是的,看到这个标题,你一定也和我一样迫不及待了,因为我们不像之前那篇教程一样小打小闹了,我们现在要动真格了,这次我们要写的插件是上个插件的增强版本.而这个插件包含 ...
- 自己动手写一个jQuery插件(第二篇)
hold住,我们要开始动真格了! 是的,看到这个标题,你一定也和我一样迫不及待了,因为我们不像之前那篇教程一样小打小闹了,我们现在要动真格了, 这次我们要写的插件是上个插件的增强版本.而这个插件包含主 ...
- 写一个Flutter手势追踪插件
/ 今日科技快讯 / 近日字节跳动组织升级,张利东担任字节跳动(中国)董事长,全面协调公司运营,包括字节跳动中国的战略.商业化.公共事务.公共关系.财务.人力:抖音CEO张楠将担任字节跳动(中 ...
- 简单几行代码,写一个百度广告屏蔽插件,爽到爆
下载地址:https://github.com/jsoncode/b... 使用方法: 将文件夹拖到这里面 一个小问题: 我没有境外支付信用卡>无法向谷歌支付$5的费用>每次打开浏览器都会 ...
最新文章
- 快速多尺度人脸检测2--Multi-Scale Fully Convolutional Network for Face Detection in the Wild
- 在不重装XP系统,增加系统盘剩余空间
- shell脚本操作mysql数据库,使用mysql的-e参数可以执行各种sql的(创建,删除,增,删,改、查)等各种操作
- S3C2440中断解析和基于WINCE操作系统的中断分析(整理于网络,用于按键中断使用)
- 神经网络 顾晓东_基于神经网络的图像边缘检测方法
- linux-gcc 编译时头文件和库文件搜索路径
- 算法应用-百钱买百鸡
- IDA 7.0在Mojava更新后打不开的问题
- php获取ip所有方式,php获取用户(客户端)真实IP地址的三种方法
- 计算机网络详细笔记【湖科大教书匠,内含B站链接】
- Mp3加3d 环绕声
- 分享两个小技巧,让你的PPT看起来更高级
- CAD导出PDF线条很粗怎样设置?
- 记一次Linux文件系统引发的项目启动错误(war包没有问题只有指定目录启动报错)
- CodeGear RadStudio Delphi 2007 Delphi2009 最新破解补丁集
- 浅谈cookie跨域的解决方案——document.domain
- gfp 通用成帧程序 帧结构 校验 crc 多项式 加扰
- Word文档检查语法错误及错别字
- 数据可视化平台 vue+node+webpack+echarts+d3
- 国外最受欢迎的15个网盘网站
热门文章
- 信息学奥赛一本通C++语言——1070:人口增长
- 35 SD配置-销售凭证设置-定义项目类别组
- 11 MM配置-主数据-定义物料类型的编码范围
- 47 FI配置-财务会计-固定资产-一般评估-定义资产分类中的折旧范围
- 辽宁省计算机专业A类,辽宁省中职升高职招生考试计算机及应用专业综合课试卷(共2份)...
- ubuntu中由apt-get获得的文件包保存在哪里?
- gem install sass 本地配置和淘宝源无效的解决办法
- Oracle SQL中的!=与
- JavaScript读写.txt文档 - 方法篇
- ios退款 怎么定位到是哪个用户_哪个浏览器兼容性最好用?看看用户都是怎么评价的吧...