推荐一款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 相关文章推荐
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
Dec 02 Javascript
用jquery实现学校的校历(asp.net+jquery ui 1.72)
Jan 01 Javascript
IE下使用cloneNode注意事项分享
Nov 22 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
Jan 23 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
Dec 27 Javascript
JavaScript将数据转换成整数的方法
Jan 04 Javascript
如何使用jquery实现文字上下滚动效果
Oct 12 Javascript
微信小程序日期选择器实例代码
Jul 18 Javascript
vue返回上一页面时回到原先滚动的位置的方法
Dec 20 Javascript
vue-cli3项目展示本地Markdown文件的方法
Jun 07 Javascript
vue登录页面cookie的使用及页面跳转代码
Jul 10 Javascript
js实现圆形菜单选择器
Dec 03 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
千呼万唤始出来,DOTA2勇士令状不朽宝藏Ⅱ现已推出
2020/08/25 DOTA
php记录日志的实现代码
2011/08/08 PHP
php三种实现多线程类似的方法
2015/10/30 PHP
thinkphp5实现无限级分类
2019/02/18 PHP
新浪的图片新闻效果
2007/01/13 Javascript
jQuery版仿Path菜单效果
2011/12/15 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
基于javascript实现最简单的选项卡切换效果
2016/05/16 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
2016/06/26 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
2016/09/13 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
2016/10/27 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
2016/12/07 Javascript
微信小程序实现根据字母选择城市功能
2017/08/16 Javascript
浅谈mint-ui loadmore组件注意的问题
2017/11/08 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
详解jQuery中的getAll()和cleanData()
2019/04/15 jQuery
[11:33]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第二场
2018/04/06 DOTA
django框架如何集成celery进行开发
2017/05/24 Python
python中numpy的矩阵、多维数组的用法
2018/02/05 Python
Python中多个数组行合并及列合并的方法总结
2018/04/12 Python
python中实现控制小数点位数的方法
2019/01/24 Python
Python3.5局部变量与全局变量作用域实例分析
2019/04/30 Python
python脚本当作Linux中的服务启动实现方法
2019/06/28 Python
python库matplotlib绘制坐标图
2019/10/18 Python
python重要函数eval多种用法解析
2020/01/14 Python
Python函数生成器原理及使用详解
2020/03/12 Python
Python Selenium 设置元素等待的三种方式
2020/03/18 Python
Django 解决阿里云部署同步数据库报错的问题
2020/05/14 Python
小学生国庆演讲稿
2014/09/05 职场文书
优秀党员推荐材料
2014/12/18 职场文书
保研推荐信范文
2015/03/25 职场文书
六一晚会主持词开场白
2015/05/28 职场文书
导游词书写之黄山
2019/08/06 职场文书
详解Spring Boot使用系统参数表提升系统的灵活性
2021/06/30 Java/Android
python基础之类属性和实例属性
2021/10/24 Python
Python自动化实战之接口请求的实现
2022/05/30 Python