推荐一款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 相关文章推荐
document对象execCommand的command参数介绍
Aug 01 Javascript
jQuery 遍历json数组的实现代码
Sep 22 Javascript
Google Dart编程语法和基本类型学习教程
Nov 27 Javascript
JavaScript入门基础
Aug 12 Javascript
微信小程序删除处理详解
Aug 16 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
Nov 01 Javascript
Angular ng-animate和ng-cookies用法详解
Apr 18 Javascript
微信小程序实现下拉菜单切换效果
Mar 30 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
Nov 30 Javascript
Vue基于iview table展示图片实现点击放大
Aug 05 Javascript
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
详解Vite的新体验
Feb 22 Javascript
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
CodeIgniter框架过滤HTML危险代码
2014/06/12 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
JavaScript 通过模式匹配实现重载
2010/08/12 Javascript
基于jquery的获取浏览器窗口大小的代码
2011/03/28 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
2013/04/08 Javascript
仿百度输入框智能提示的js代码
2013/08/22 Javascript
基于jquery的simpleValidate简易验证插件
2014/01/31 Javascript
node.js中的querystring.stringify方法使用说明
2014/12/10 Javascript
JavaScript轻松创建级联函数的方法示例
2017/02/10 Javascript
浅谈js for循环输出i为同一值的问题
2017/03/01 Javascript
JavaScript操作文件_动力节点Java学院整理
2017/06/30 Javascript
Vue 2.0入门基础知识之内部指令详解
2017/10/15 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
2018/09/04 Javascript
Vue 实现列表动态添加和删除的两种方法小结
2018/09/07 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
2019/04/26 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
vue.js实现简单购物车功能
2020/05/30 Javascript
Python日期操作学习笔记
2008/10/07 Python
Python中for循环详解
2014/01/17 Python
解决python3中自定义wsgi函数,make_server函数报错的问题
2017/11/21 Python
Django中url的反向查询的方法
2018/03/14 Python
python简易远程控制单线程版
2018/06/20 Python
python生成以及打开json、csv和txt文件的实例
2018/11/16 Python
详解python做UI界面的方法
2019/02/27 Python
python3实现的zip格式压缩文件夹操作示例
2019/08/17 Python
django 连接数据库出现1045错误的解决方式
2020/05/14 Python
Pycharm2020最新激活码|永久激活(附最新激活码和插件的详细教程)
2020/09/29 Python
2014年圣诞节倒计时网页的制作过程
2014/12/05 HTML / CSS
日本钓鱼渔具和户外用品网上商店:naturum
2016/08/07 全球购物
测绘专业大学生职业生涯规划书
2014/02/10 职场文书
企业道德讲堂实施方案
2014/03/19 职场文书
党员三严三实心得体会
2014/10/13 职场文书
2014年党总支工作总结
2014/12/18 职场文书
员工工作表扬信
2015/05/05 职场文书
金榜题名主持词
2015/07/02 职场文书