OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

我最喜欢的jQuery插件模板


分享到
分类 JS学习   发布 ourjs  1388220701000
注意 转载须保留原文链接,译文链接,作者译者等信息。  

作者 Moshe Kolodny,  12月27日,2013

jquery plugin

我使用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
});



你有更好的模板吗?欢迎回复。

原文地址: 点此
社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 一名靠谱的JavaScript程序员应备的素质
  2. PayPal为什么从Java迁移到Node.js,性能提高一倍,文件代码减少44%
  3. 人类只占到互联网流量的40%不到
  4. JS学习:JavaScript的核心
  5. Node初学者入门,一本全面的NodeJS教程
  6. 我为什么想把比特币一把火烧了
  7. 程序员最艰巨的十大任务
  8. Python不可维护?终于把一个8万行的Python程序用Java重写了
  9. 我和共享软件的那些事:我赚到了十万块
  10. 长时间工作意味着什么
  11. AirJD-简单好用的免费建站工具

 相关阅读 - JS学习
  1. 我最喜欢的jQuery插件模板
  2. Javascript模块化编程:AMD规范及require.js用法
  3. 编写更好的jQuery代码的建议
  4. Node初学者入门,一本全面的NodeJS教程
  5. JS学习:JavaScript的核心
  6. JavaScript教程:Airbnb代码规范
  7. 理解JavaScript中的Event Loop
  8. 通过javascript把图片转化为字符画
  9. [译] JavaScript 开发者经常忽略或误用的七个基础知识点

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号