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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
;(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点非常强大,比如说我们希望复写这个方法,但是仍然希望保留原来的方法,我们可以看下面的例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$('.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
});

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

  原文 kolodny.github.io

我最喜欢的jQuery插件模板的更多相关文章

  1. 过去几个月出炉的30款最喜欢的 jQuery 插件

    在这篇文章中,我们收集了一些在过去的几个月里最喜欢的 jQuery 插件.为了使您更容易搜索到自己喜欢的 jQuery 插件,我们已经对插件进行了分类: 页面布局插件,图片和视频插件,滑块和画廊,排版 ...

  2. jQuery 插件模板

    1.为每一个DOM对象创建一个插件对象 模板定义: (function($) { $.pluginName = function(element, options) { var defaults = ...

  3. 关于jquery插件模板的两个案例

    /** * jquery tips 提示插件 jquery.tips.js v0.1beta * * 使用方法 * $(selector).tips({ //selector 为jquery选择器 * ...

  4. JQuery插件模板

    (function($){ $.fn.插件名 = function(settings){ var defaultSettings = { } /* 合并默认参数和用户自定义参数 */settings ...

  5. 简记 jQuery 插件模板

    /** * @lisence jquery plugin demo v1.0.0 * * author: Jeremy Yu * * description: * this is a jquery p ...

  6. jQuery插件编写及链式编程模型小结

    JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQu ...

  7. 2014年50个程序员最适用的免费JQuery插件

    有用的jQuery库是设计师和开发者之间一个非常熟悉的短语.这是现在互联网中最流行的JavaScript函数库之一.每个设计师和开发人员都应该知道它的重要性,而且熟悉它的功能和特点. jQuery几乎 ...

  8. jQuery插件编写及链式编程模型

    jQuery插件编写及链式编程模型小结 JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我 ...

  9. 前端模板文件化jQuery插件 $.loadTemplates

    工作中使用前端模板引擎,如 artTemplate.jsRender,来替代拼接字符串. 可是直接把模板写在页面上会带来页面臃肿,模板无法重用,与 ASP.NET等后端语言语法冲突等问题. 所以将多个 ...

随机推荐

  1. activiti设置流程变量

    public static void mian(String args[]){ ProcessEngine processEngine  = ProcessEngine.getDefaultProce ...

  2. 分享:Oracle 系统变量函数用法说明

    在Oracle数据库中,Oracle系统变量函数是经常会使用到的函数,分享下Oracle系统变量函数的用法. Oracle函数多种多样,系统变量函数就是其中之一,介绍三种最常见的系统变量函数. Ora ...

  3. modelsim编译Xilinx器件库的另一种方法(节省时间)

    以前在用modelsim对Xilinx进行器件库编译时,我用的比较多的是直接在ISE中编译器件库,感觉很方便简单,就是编译时间有点长.自从前段时间,在自己电脑装MathType,360杀毒软件将它视为 ...

  4. .NET MVC+ EF+LINQ 多表联查VIEW显示列表

    1.VIEW 页面显示代码 <link href="~/Content/bootstrap.css" rel="stylesheet" /> < ...

  5. angular学习笔记(三十一)-$location(1)

    本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...

  6. cocos2dx+lua注册事件函数详解 事件

    coocs2dx 版本 3.1.1 registerScriptTouchHandler             注册触屏事件 registerScriptTapHandler             ...

  7. 【驱动】LCD驱动(FrameBuffer)分析

    背景知识 在多媒体的推动下,彩色LCD越来越多地应用到嵌入式系统中,PDA和手机等大多都采用LCD作为显示器材,因此LCD的应用很有实际意义! LCD工作的硬件需求:要使一块LCD正常的显示文字或图像 ...

  8. 【转】Android的root原理

    转自知乎:https://www.zhihu.com/question/21074979 @Kevin @张炬 作者:Kevin链接:https://www.zhihu.com/question/21 ...

  9. Lintcode: Subarray Sum 解题报告

    Subarray Sum 原题链接:http://lintcode.com/zh-cn/problem/subarray-sum/# Given an integer array, find a su ...

  10. Oracle 项目中 SQL 脚本更新方式

    DECLARE hasVersion ); dbVersion ); BEGIN ) INTO hasVersion FROM ELB_SETTINGS E WHERE E.KEY='dbVersio ...