快捷导航
蚂蚁部落 网站首页 实例代码 jQuery实例 查看内容

jQuery插件开发流程简单介绍

2017-7-25 08:43| 发布者: antzone| 查看: 217| 评论: 0|来自: 蚂蚁部落

插件开发主要有如下三种方式:

(1).通过$.extend()来扩展jQuery。

(2).通过$.fn 向jQuery添加新的方法。

(3).通过$.widget()应用jQuery UI的部件工厂方式创建。

第一种$.extend()相对简单,一般很少能够独立开发复杂插件,第三种是一种高级的开发模式,本文也不做介绍。

第二种则是一般插件开发用到的方式,本文着重讲讲第二种。

插件开发:

第二种插件开发方式一般是如下定义:

[JavaScript] 纯文本查看 复制代码运行代码
$.fn.pluginName = function() {
  //your code here
}

插件开发,我们一般运用面向对象的思维方式

例如定义一个对象

[JavaScript] 纯文本查看 复制代码运行代码
var Haorooms= function(el, opt) {
  this.$element = el,
  this.defaults = {
    'color': 'red',
    'fontSize': '12px',
    'textDecoration':'none'
  },
  this.options = $.extend({}, this.defaults, opt)
}
//定义haorooms的方法
haorooms.prototype = {
  changecss: function() {
    return this.$element.css({
      'color': this.options.color,
      'fontSize': this.options.fontSize,
      'textDecoration': this.options.textDecoration
    });
  }
}

$.extend({}, this.defaults, opt)有{}主要是为了创建一个新对象,保留对象的默认值。

[JavaScript] 纯文本查看 复制代码运行代码
$.fn.myPlugin = function(options) {
  //创建haorooms的实体
  var haorooms= new Haorooms(this, options);
  //调用其方法
  return Haorooms.changecss();
}

调用这个插件直接如下就可以

[JavaScript] 纯文本查看 复制代码运行代码
$(function() {
  $('a').myPlugin({
    'color': '#2C9929',
    'fontSize': '20px'
  });
})

上述开发方法的问题:

上面的开发方法存在一个严重的问题,就是定义了一个全局的Haorooms,这样对于插件的兼容等等各个方面都不好。万一别的地方用到了Haorooms,那么代码就出现问题了,现在我们把上面的代码包装起来,用一个自调用匿名函数(有时又叫块级作用域或者私有作用域)包裹,就不会出现这个问题了,包括js插件的开发,也是一样的,我们用一个自调用匿名函数把自己写的代码包裹起来,包裹方法如下:

[JavaScript] 纯文本查看 复制代码运行代码
(function(){
  
})()

用上面的这个包裹起来,就可以了。

但是还有一个问题,代码前面经常看到有“;”,那是为了避免代码合并等不必要的错误。

例如,我们随便定义一个函数:

[JavaScript] 纯文本查看 复制代码运行代码
var haoroomsblog=function(){
}
(function(){
})()

由于haoroomsblog这个函数后面没有加分号,导致代码出错,为了避免这类情况的发生,通常这么写:

[JavaScript] 纯文本查看 复制代码运行代码
;(function(){
  
})()

把你的插件代码包裹在上面里面,就是一个简单的插件了。

另外还有一个问题:

把你的插件包裹在:

[JavaScript] 纯文本查看 复制代码运行代码
;(function(){
})()

基本上可以说是完美了。但是为了让你开发的插件应用更加广泛,兼容性更加好,还要考虑到用插件的人的一些特殊的做法,例如,有些朋友为了避免jquery和zeptojs冲突,将jquery的前缀"$",修改为"jQuery",还有些朋友将默认的document等方法修改。为了让你的插件在这些东西修了了的情况下照常运行,那么我们的做法是,把代码包裹在如下里面:

[JavaScript] 纯文本查看 复制代码运行代码
;(function($,window,document,undefined){
  //我们的代码。。
})(jQuery,window,document);

就可以避免上面的一些情况。


鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-8-21 12:39 , Processed in 0.066100 second(s), 21 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部