[转帖]10条建议让你创建更好的jQuery插件_Android, Python及开发编程讨论区_Weblogic技术|Tuxedo技术|中间件技术|Oracle论坛|JAVA论坛|Linux/Unix技术|hadoop论坛_联动北方技术论坛  
网站首页 | 关于我们 | 服务中心 | 经验交流 | 公司荣誉 | 成功案例 | 合作伙伴 | 联系我们 |
联动北方-国内领先的云技术服务提供商
»  游客             当前位置:  论坛首页 »  自由讨论区 »  Android, Python及开发编程讨论区 »
总帖数
1
每页帖数
101/1页1
返回列表
0
发起投票  发起投票 发新帖子
查看: 3273 | 回复: 0   主题: [转帖]10条建议让你创建更好的jQuery插件        下一篇 
鲲鹏展翅
注册用户
等级:少校
经验:1148
发帖:79
精华:9
注册:2012-11-19
状态:离线
发送短消息息给鲲鹏展翅 加好友    发送短消息息给鲲鹏展翅 发消息
发表于: IP:您无权察看 2012-11-21 14:36:14 | [全部帖] [楼主帖] 楼主

在开发过很多 jQuery 插件以后,我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模式。这样我就可以 copy & paste 大部分的代码结构,只要专注最主要的逻辑代码就行了。

使用相同的设计模式和架构也让修复bug或者二次开发更容易。一套经过验证的架构可以保证我的插件不出大的问题,不论插件简单还是复杂。

我在这里分享10条我总结的经验。


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

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

  1. (function($)  
  2. {  
  3.  //code here  
  4. })(jQuery); 

2. 提供插件的默认选项

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

  1. var defaultSettings = {  
  2.  mode : 'Pencil',  
  3.  lineWidthMin : '0',  
  4.  lineWidthMax : '10',  
  5.  lineWidth : '2' 
  6. };  
  7. settings = $.extend({}, defaultSettings, settings || {}); 

3. 使用返回一个元素

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

  1. $.fn.wPaint = function(settings)  
  2. {  
  3.  return this.each(function()  
  4.  {  
  5.  var elem = $(this);  
  6.  
  7.  //run some code here  
  8.  }  

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

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

  1. var defaultSettings = {  
  2.  mode : 'Pencil',  
  3.  lineWidthMin : '0',  
  4.  lineWidthMax : '10',  
  5.  lineWidth : '2' 
  6. };  
  7. $.fn.wPaint = function(settings)  
  8. {  
  9.  settings = $.extend({}, defaultSettings, settings || {});  
  10.  
  11.  return this.each(function()  
  12.  {  
  13.  var elem = $(this);  
  14.  
  15.  //run some code here  
  16.  }  

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

5. 为什么要设置 Class Prototyping

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

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

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

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

6. 如何设置 Class Prototyping

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

  1. function Canvas(settings)  
  2. {  
  3.  this.settings = settings;  
  4.  this.draw = false;  
  5.  this.canvas = null;   
  6.  this.ctx = null;  
  7.  
  8.  return this;  

下面来添加全局的方法:

  1. Canvas.prototype =  
  2. {  
  3.  generate: function()  
  4.  {  
  5.  //generate code  
  6.  }  

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

7. 使用 “this” 对象

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

  1. Canvas.prototype =  
  2. {  
  3.  generate: function()  
  4.  {  
  5.  //some code  
  6.  
  7.  var $this = this;  
  8.  
  9.  var buton = //...some code  
  10.  
  11.  button.click(function(){  
  12.  //using this will not be found since it has it's own this  
  13.  
  14.  //use $this instead.  
  15.  
  16.  $this.someFunc($this);  
  17.  });  
  18.  },  
  19.  
  20.  someFunc: function($this)  
  21.  {  
  22.  //won't know what "this" is.  
  23.  //use $this instead passed from the click event  
  24.  }  

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

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

  1. function Canvas(settings)  
  2. {  
  3.  this.settings = settings;  
  4.  
  5.  return this;  

9. 分离你的Prototype方法逻辑

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

  1. generate()  
  2. appendColors()  
  3. colorSelect()  
  4. colorHoverOn()  
  5. colorHoverOff()  
  6. appendToElement()  
  7. showPalette()  
  8. hidePalette() 

10. 提供 Setter/Getter 选项

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

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

  1. var lineWidth = $("#container").wPaint("lineWidth");  
  2. $("#container").wPaint("lineWidth", "5"); 

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

  1. return this.each(function()  
  2. {  
  3.  var elem = $(this);  
  4.  
  5.  var canvas = new Canvas(settings);  
  6.  
  7.  //run some code here  
  8.  
  9.  elem.data("_wPaint_canvas", canvas);  

下面的代码明确了我们究竟要做什么:

  1. $.fn.wPaint = function(option, settings)  
  2. {  
  3.  if(typeof option === 'object')  
  4.  {  
  5.  settings = option;  
  6.  }  
  7.  else if(typeof option === 'string')  
  8.  {  
  9.  if(  
  10.  this.data('_wPaint_canvas') &&  
  11.  defaultSettings[option] !== undefined  
  12.  ){  
  13.  var canvas = this.data('_wPaint_canvas');  
  14.  
  15.  if(settings)  
  16.  {  
  17.  canvas.settings[option] = settings;  
  18.  return true;  
  19.  }  
  20.  else 
  21.  {  
  22.  return canvas.settings[option];  
  23.  }  
  24.  }  
  25.  else 
  26.  return false;  
  27.  }  
  28.  
  29.  return this.each(function()  
  30.  {  
  31.  //run some code here  
  32.  }  

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




赞(0)    操作        顶端 
总帖数
1
每页帖数
101/1页1
返回列表
发新帖子
请输入验证码: 点击刷新验证码
您需要登录后才可以回帖 登录 | 注册
技术讨论