推荐一款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 相关文章推荐
基于JQuery的密码强度验证代码
Mar 01 Javascript
Jquery 最近浏览过的商品的功能实现代码
May 14 Javascript
Jquery实现鼠标移动放大图片功能实例
Mar 25 Javascript
JS+CSS相对定位实现的下拉菜单
Oct 06 Javascript
简单实现轮播图效果的实例
Jul 15 Javascript
js replace()去除代码中空格的实例
Feb 14 Javascript
JS中实现函数return多个返回值的实例
Feb 21 Javascript
jquery实现图片平滑滚动详解
Mar 22 jQuery
JS扩展String.prototype.format字符串拼接的功能
Mar 09 Javascript
浅谈Webpack 是如何加载模块的
May 24 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
Sep 16 Javascript
koa+jwt实现token验证与刷新功能
May 30 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
PHP模糊查询的实现方法(推荐)
2016/09/06 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
详解微信小程序开发之下拉刷新 上拉加载
2016/11/24 Javascript
详谈Node.js之操作文件系统
2017/08/29 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
2018/11/14 Javascript
vue拖拽排序插件vuedraggable使用方法详解
2020/08/21 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
2019/08/16 Javascript
JavaScript中的this妙用实例分析
2020/05/09 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python装饰器用法示例小结
2018/02/11 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
python邮件发送smtplib使用详解
2020/06/16 Python
Opencv实现抠图背景图替换功能
2019/05/21 Python
django 取消csrf限制的实例
2020/03/13 Python
Python退出时强制运行一段代码的实现方法
2020/04/29 Python
python中adb有什么功能
2020/06/07 Python
详解python tcp编程
2020/08/24 Python
python 牛顿法实现逻辑回归(Logistic Regression)
2020/10/15 Python
HTML5 Canvas像素处理使用接口介绍
2012/12/02 HTML / CSS
CAT鞋英国官网:坚固耐用的靴子和鞋
2016/10/21 全球购物
世界上第一个水枕头:Mediflow
2018/12/06 全球购物
几个MySql的面试题
2013/04/22 面试题
农业开发项目建议书
2014/05/16 职场文书
住宿生擅自离校检讨书
2014/09/22 职场文书
儿园租房协议书范本
2014/12/02 职场文书
2014年幼儿园园务工作总结
2014/12/05 职场文书
学校中秋节活动总结
2015/03/23 职场文书
2016年度师德标兵先进事迹材料
2016/02/26 职场文书
加薪申请书应该这样写!
2019/07/04 职场文书
基于flask实现五子棋小游戏
2021/05/25 Python
关于 Python json中load和loads区别
2021/11/07 Python
Python FuzzyWuzzy实现模糊匹配
2022/04/28 Python