推荐一款jQuery插件模板


Posted in Javascript onJanuary 09, 2015

我使用jQuery已经有相当长的时间了,并且我会常常为它写一些插件(plugin)。我尝试过用不同的方式去写,现在这个模板是我最喜欢的:

;(function($) {

  // multiple plugins can go here

  (function(pluginName) {

    var defaults = {

      color: 'black',

      testFor: function(div) {

        return true;

      }

    };

    $.fn[pluginName] = function(options) {

      options = $.extend(true, {}, defaults, options);

             

      return this.each(function() {

        var elem = this,

          $elem = $(elem);

 

        // heres the guts of the plugin

          if (options.testFor(elem)) {

            $elem.css({

              borderWidth: 1,

              borderStyle: 'solid',

              borderColor: options.color

            });

          }

      });

    };

    $.fn[pluginName].defaults = defaults;  

  })('borderize');

})(jQuery);

 

//下面是用法

$('div').borderize();

$('div').borderize({color: 'red'});

以下是我喜欢这种模板的原因

1. 你仍然可以访问里面的默认选项,即便它被重写了(简单地通过父属性的访问)

2. 通过修改pluginName即可更改插件的名字。(这种方式对代码压缩也非常有利)

第#1点非常强大,比如说我们希望复写这个方法,但是仍然希望保留原来的方法,我们可以看下面的例子:

$('.borderize').borderize({

    testFor: function(elem) {

        var $elem = $(elem);

        if (elem.is('.inactive')) {

            return false;

        } else {

            // calling "parent" function

            return $.fn.borderize.defaults.testFor.apply(this, arguments);

        }

    }

});

We can even do this with regular properties like this

 

var someVarThatMayBeSet = false;

/* code ... */

 

$('.borderize').borderize({

    color: someVarThatMayBeSet ? 'red' : $.fn.borderize.defaults.color

});

小伙伴们,你们也会喜欢上这款jQuery插件模板的吧,他实在是太灵活了。

Javascript 相关文章推荐
用函数式编程技术编写优美的 JavaScript
Nov 25 Javascript
Javascript的各种节点操作实例演示代码
Jun 27 Javascript
悬浮数字的实现案例
Feb 19 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
Jul 23 Javascript
jQuery的context属性用法实例
Dec 27 Javascript
javascript获取元素离文档各边距离的方法
Feb 13 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
Nov 18 Javascript
Vue2.0实现购物车功能
Jun 05 Javascript
JavaScript原生实现观察者模式的示例
Dec 15 Javascript
小程序分页实践之编写可复用分页组件
Jul 18 Javascript
微信小程序如何播放腾讯视频的实现
Sep 20 Javascript
详解jQuery的核心函数和事件处理
Feb 18 jQuery
JavaScript中Cookie操作实例
Jan 09 #Javascript
使用javascript实现简单的选项卡切换
Jan 09 #Javascript
14个有用的Jquery技巧分享
Jan 08 #Javascript
jQuery中insertBefore()方法用法实例
Jan 08 #Javascript
jQuery中insertAfter()方法用法实例
Jan 08 #Javascript
jQuery中prependTo()方法用法实例
Jan 08 #Javascript
8个超实用的jQuery功能代码分享
Jan 08 #Javascript
You might like
PHP 伪静态隐藏传递参数名的四种方法
2010/02/22 PHP
php 文件上传实例代码
2012/04/19 PHP
Laravel下生成验证码的类
2017/11/15 PHP
详解php用static方法的原因
2018/09/12 PHP
js chrome浏览器判断代码
2010/03/28 Javascript
需要做特殊处理的DOM元素属性的访问
2010/11/05 Javascript
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
浅析js设置控件的readonly与enabled属性问题
2013/12/25 Javascript
jquery中的on方法使用介绍
2013/12/29 Javascript
eclipse导入jquery包后报错的解决方法
2014/02/17 Javascript
清除div下面的所有标签的方法
2014/02/17 Javascript
javascript模拟订火车票和退票示例
2014/04/24 Javascript
NodeJS学习笔记之FS文件模块
2015/01/13 NodeJs
举例讲解jQuery中可见性过滤选择器的使用
2016/04/18 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
webpack配置打包后图片路径出错的解决
2018/04/26 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
2018/09/04 Javascript
微信小程序日历效果
2018/12/29 Javascript
详解vue在项目中使用百度地图
2019/03/26 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
Javascript中的奇葩知识,你知道吗?
2021/01/25 Javascript
[13:16]INFAMOUS vs VGJ T BO3
2018/06/07 DOTA
Python中的True,False条件判断实例分析
2015/01/12 Python
Python绘制七段数码管实例代码
2017/12/20 Python
Python实现k-means算法
2018/02/23 Python
不到40行代码用Python实现一个简单的推荐系统
2019/05/10 Python
pytorch自定义二值化网络层方式
2020/01/07 Python
Django基于客户端下载文件实现方法
2020/04/21 Python
基于CSS3实现的几个小loading效果
2018/09/27 HTML / CSS
戴尔英国官网:Dell英国
2017/05/27 全球购物
《曹刿论战》教学反思
2014/03/02 职场文书
领导干部廉政承诺书
2014/03/27 职场文书
幼儿园小班教师寄语
2014/04/03 职场文书
我们的节日中秋活动方案
2014/08/19 职场文书