jQuery使用经验小技巧(推荐)

在开发过很多 jQuery 插件以后,我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模式。这样我就可以复制并粘贴大部分的代码结构,只要专注最主要的逻辑代码就行了。 使用相同的设计模式和架构也让修复bug或者二次开发更容易。一套经过验证的架构可以保证我的插件不出大的问题,不论插件简单还是复杂。我在这里分享10条我总结的经验。

1. 把你的代码全部放在闭包里面

这是我用的最多的一条。但是有时候在闭包外面的方法会不能调用。不过你的插件的代码只为你自己的插件服务,所以不存在这个问题,你可以把所有的代码都放在闭包里面。而方法可能应该放在Prototype方法内部,我们后面会讲到这一点。

/* 我们 www.jb51.net */
(function($)
 {
 //code here
 })(jQuery); 

2. 提供插件的默认选项

你的插件应该会有一些选项是可以让开发者设置的,所以提供恢复默认选项是以有必要的。你可以通过jQuery的extend功能来设置这些选项:

/* 我们 www.jb51.net */
var defaultSettings = {
  mode      : 'Pencil',
  lineWidthMin  : '0',
  lineWidthMax  : '10',
  lineWidth    : '2'
};  

settings = $.extend({}, defaultSettings, settings || {});

3. 使用返回一个元素

JavaScript/jQuery有一个很好的特点就是可以进行方法级联,所以我们不应该破坏这个特性,始终在方法中返回一个元素。我在我的每一个jQuery插件中都遵守这一条。

$.fn.wPaint = function(settings)
 {
  return this.each(function()
  {
    var elem = $(this);  

    //run some code here  我们 www.jb51.net
  }
}

4. 一次性代码放在主循环以外

这一条很重要,但是常常被忽略。简单的讲,如果你有一段代码是一堆默认值,只需要被实例化一次,而不是每次调用你插件功能的时候都实例化,你应该把这段代码放在插件方法的外面。这样可以让你的插件运行的更高效,节省内存。我们将会在后面讨论prototype的时候,看这个方法在实际中的运用。

var defaultSettings = {
  mode      : 'Pencil',
  lineWidthMin  : '0',
  lineWidthMax  : '10',
  lineWidth    : '2'
};  

$.fn.wPaint = function(settings)
{
  settings = $.extend({}, defaultSettings, settings || {});  

  return this.each(function()
  {
    var elem = $(this);  

    //run some code here 我们 www.jb51.net
   }
}

你可以注意到,上面代码中的“defaultSettings”是完全在插件方法外面的,由于这些代码是在闭包里面,我们不用担心这些变量被重写。

5. 为什么要设置 Class Prototyping

作为你代码的血与肉,方法和函数应该放在prototype函数内。有两个原因:

▲它可以节省很多内存,因为可以不用重复创建这些方法。

▲引用一个现成的方法比重新创建一个好快很多。

简单的说,prototype就是扩展了一个对象,为它提供方法,而不用在每一个对象中实例化这些方法。这也让你的代码更有条理和高效。一旦你习惯这种开发方式,你会发现它在你将来的项目中为你节省了很多时间。

6. 如何设置 Class Prototyping

设置一个 prototype 方法有两个部分。首先我们需要创建我们最初的类定义,在多数情况下这就意味着创建一个对象。这个定义包含了每一个对象实例都不同的部分。在我的 Paint jQuery Plugin 插件中,我是这么写的:

/* 我们 www.jb51.net */
function Canvas(settings)
{
  this.settings = settings;
  this.draw = false;
  this.canvas = null;
  this.ctx = null;  

  return this;
}

下面来添加全局的方法:

/* 我们 www.jb51.net */
Canvas.prototype =
{
 generate: function()
 {
    //generate code
 }
}

这里的关键是要让prototype的方法是通用的,但是数据是每个实例自己的,可以用“this”引用。

7. 使用 “this” 对象

通过使用“$this”,我们可以向别的闭包传递正确的引用。我们也可能需要向别的方法传入 $this 引用。需要注意的是, $this 这个名字是可以改的,任意的变量名都可以。

Canvas.prototype =
{
  generate: function()
  {
    //some code  

    var $this = this;  

    var buton = //...some code  

    button.click(function(){
      //using this will not be found since it has it's own this  

      //use $this instead.  

      $this.someFunc($this);
    });
  },  

  someFunc: function($this)
  {
    //won't know what "this" is.
    //use $this instead passed from the click event
  }
}  /* 我们 www.jb51.net */

8. 在每一个对象中保存设置

我一直在每一个对象中保存自己的设置,然后操作它自己的设置。这样你就不用在不同的方法中传递很多参数。把这些变量放在对象中,也方便你在其他地方调用这些变量。

function Canvas(settings)
{
  this.settings = settings;  

  return this;
}

9. 分离你的Prototype方法逻辑

这可能是一个基本的原则。当你在犹豫是否需要提供一个方法的时候,你可以问你自己 “如果其他人要重写这个方法的话,你的代码是否能满足他的需求?”或者“别人来写这个方法有多困难?”。当然这是一个灵活性拿捏的问题。这里列出了我的 Color Picker jQuery Plugin  的方法,你可以参考一下:

generate()
appendColors()
colorSelect()
colorHoverOn()
colorHoverOff()
appendToElement()
showPalette()
hidePalette()

10. 提供 Setter/Getter 选项

这一条不是必须的,但是我发现我所有的插件都包用到了这一条。因为它只需要一点点代码,就能为别人提供一个他可能需要的功能。

基本上,我们只要让开发者能够设置或者获取元素已经存在的值:

varlineWidth = $("#container").wPaint("lineWidth");
$("#container").wPaint("lineWidth","5");

首先我们要把元素和对象关联起来,然后我们就可以引用它。我们在返回元素之前做如下操作:

return this.each(function()
{
  var elem = $(this);  

  var canvas = new Canvas(settings);  

  //run some code here  

  elem.data("_wPaint_canvas", canvas);
}
//下面的代码明确了我们究竟要做什么:
$.fn.wPaint = function(option, settings)
{
  if(typeof option === 'object')
  {
    settings = option;
  }
  else if(typeof option === 'string')
  {
    if(
      this.data('_wPaint_canvas') &&
      defaultSettings[option] !== undefined
    ){
      var canvas = this.data('_wPaint_canvas');  

      if(settings)
      {
        canvas.settings[option] = settings;
       return true;
      }
      else
      {
        return canvas.settings[option];
      }
    }
    else
      return false;
  }  

  return this.each(function()
  {
    //run some code here
  }
}  /* 我们 www.jb51.net */

以上十条基本上覆盖了jQuery插件开发的核心,并且可以作为开发的模板。有一套基本的代码可以极大的缩短你的开发时间,并且能够让你设计插件架构的时候更自信。

以上这篇jQuery使用经验小技巧(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • jquery仿百度经验滑动切换浏览效果

    jquery仿百度经验滑动切换浏览效果 $(function() { wordStrong(); $("#content ul").width($("#content ul li:first").width()*$("#content ul li").length); $("#header .top_right .vote").hover(function() { $(this).children(".hover-t

  • jquery选择器、属性设置用法经验总结

    本人是一名小白,应届毕业生,以前没用过jquery,最近做项目用到了jquery.在做的过程中走了很多弯路,不停的搜索.总结出了一些用法,供大家参考: 最基本的选择器语法包括:id.class.标签.属性,这和css选择器是一致的. ID选择器要在ID前加#,比如要选择一个ID为myDivID的div元素(<div id="myDivID"></div>)可以这样写: 复制代码 代码如下: $("#myDivID"); D是不能重复的,所以I

  • jquery查找父元素、子元素(个人经验总结)

    使用js或者jquery查找父元素.子元素经常遇到.可是用起来总容易混淆,这里统一总结了一下,以后用起来相信会方便好多 这里jquery向上查找父元素 用到的方法:closest() parents() parent() 向下查找子元素 用到的方法:find() children() js用的是 children[] 属性 html代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

  • jquery使用经验小结

    1,今天发现jquery获取的dom对象除了jquery对象外,还可以访问原来的对象,只要加一个[]就行了,原来还有这样的功能,之前没仔细研究. 2,用了first-child,nth-child(n),获取元素集合里面的第几个元素. 3,用Jquery访问nodeText节点,通过访问原来的对象,nextSibling访问.访问是nextSibling.nodeValue; <!DOCTYPE HTML> <html> <head> <meta http-equ

  • jQuery使用经验小技巧(推荐)

    在开发过很多 jQuery 插件以后,我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模式.这样我就可以复制并粘贴大部分的代码结构,只要专注最主要的逻辑代码就行了. 使用相同的设计模式和架构也让修复bug或者二次开发更容易.一套经过验证的架构可以保证我的插件不出大的问题,不论插件简单还是复杂.我在这里分享10条我总结的经验. 1. 把你的代码全部放在闭包里面 这是我用的最多的一条.但是有时候在闭包外面的方法会不能调用.不过你的插件的代码只为你自己的插件服务,所以不存在这个问题,你可以把所

  • Javascript字符串拼接小技巧(推荐)

    在Javascript中经常会遇到字符串的问题,但是如果要拼接的字符串过长就比较麻烦了. 如果是在一行的,可读性差不说,如果要换行的,会直接报错. 在此介绍几种Javascript拼接字符串的技巧. 字符串相加(+) var items = '<li class="details">' + '<span>Hello world</span>' + '</li>'; 利用反斜线拼接字符串 var items = '<li class=

  • jQuery实用小技巧_输入框文字获取和失去焦点的简单实例

    jQuery实用小技巧_输入框文字获取和失去焦点的简单实例 <input id="txt" class="text1" type="text" /> <script src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(function () { $("inp

  • postgresql 中的时间处理小技巧(推荐)

    时间格式处理 按照给定格式返回:to_char(timestamp,format) 返回相差的天数:(date(time1) - current_date) 返回时间戳对应的的日期[yyyy-MM-dd]:date(timestamp) 计算结果取两位小数(方便条件筛选):round((ABS(a-b)::numeric / a), 2) * 100 < 10 时间运算 加减运算 '-' :前x天/月/年 '+' :后x天/月/年 current_timestamp - interval 'x

  • 值得收藏的9个提高代码运行效率的小技巧(推荐)

    我们写程序的目的就是使它在任何情况下都可以稳定工作.一个运行的很快但是结果错误的程序并没有任何用处.在程序开发和优化的过程中,我们必须考虑代码使用的方式,以及影响它的关键因素.通常,我们必须在程序的简洁性与它的运行速度之间做出权衡.今天我们就来聊一聊如何优化程序的性能. 1. 减小程序计算量 1.1 示例代码 for (i = 0; i < n; i++) { int ni = n*i; for (j = 0; j < n; j++) a[ni + j] = b[j]; } 1.2 分析代码

  • 详解JavaScript中if语句优化和部分语法糖小技巧推荐

    目录 前言 if else 基本使用 简化if判断和优化代码 单行if else 使用&& || 优化 使用三目运算符优化 合并if 使用includes 或者indexof 使用switch流程 优化 多个if else 使用对象 key-value 优化多条if语句 使用map 推荐一些常用的JavaScript语法糖 箭头函数 三目运算符处理函数 函数默认参数处理 数据类型转换 Null.Undefined 布尔值等特殊值处理,使用||结合! 链判断运算符 链判断运算符 空值合并操作

  • idea gradle项目复制依赖小技巧(推荐)

    1 IDEA从pom文件复制依赖到gradle小技巧 如果在gradle工程项目复制pom项目的各种依赖,可以不用考虑一点点粘贴groupId artifactid以及version字段,直接复制整个dependency,idea会自动识别相关 xml转换成gradle依赖形式,具体使用如下所示: > 点击粘贴可以直接看到内容格式发生转换,如下所示: 注意:这里有一个小提醒,复制的pom依赖必须包含version字段,否则也会复制格式转化不生效的问题! 到此这篇关于idea gradle项目复制

  • Jquery使用小技巧汇总

    下面列出了一些Jquery使用技巧.比如有禁止右键点击.隐藏搜索文本框文字.在新窗口中打开链接.检测浏览器.预加载图片.页面样式切换.所有列等高.动态控制页面字体大小.获得鼠标指针的X值Y值.验证元素是否为空.替换元素.延迟加载.验证元素是否存在于Jquery集合中.使DIV可点击.克隆对象.使元素居中.计算元素个数.使用Google主机上的Jquery类库.禁用Jquery效果.解决Jquery类库与其他Javascript类库冲突问题. 1. 禁止右键点击 $(document).ready

  • 提高域名信任度的8个小技巧[推荐]

    也有几个简单可以做到的方法,不妨一试. 1)提供完整的联系方法 包括电话和真正地址. 2)在没有大量好的内容之前,至少也要把网站做到四五十页以上 尽量原创,没有就转载. 3)链接向几个同行业内的权威性网站 不要多,而是精. 4)把域名多注册几年,而不是每年续费 域名的Whois数据和网站上的联系方式吻合,这两点在Google的一个专利申请中曾经提到过. 5)使用独立IP地址(没钱就算了) 绝大部分网站都是在虚拟主机上共用一个IP地址.不过有的人建议,独立IP地址是高质量网站的一个标志,这也很符合

  • .Net Compact Framework开发小技巧 推荐

    1. 获取应用程序当前的路径 复制代码 代码如下: System.IO.Path.GetDirectoryName(System.Reflection.Assembly.GetExecutingAssembly().GetName().CodeBase Mobile中的文件系统是以根目录开始的文件系统,只支持绝对路径如访问存储卡根目录下的a.txt文件,则路径为@"\Storage Card\a.txt" . 2. 调用另外一个程序 复制代码 代码如下: Process Start(s

随机推荐