久久精品视频在线观看,在线观看成人,天天搞夜夜

導航首頁 ? 技術教程 ? jQuery插件制作的實例教程

全站頭部文字我要出現在這里

jQuery插件制作的實例教程 626 2024-03-04

一、jQuery插件的類型

1. jQuery方法

很大一部分的jQuery插件都是這種類型，由于此類插件是將對象方法封裝起來，在jQuery選擇器獲取jQuery對象過程中進行操作，從而發揮jQuery強大的選擇器優勢。

2. 全局函數法

可以把自定義的功能函數獨立附加到jQuery命名空間下，從而作為jQuery作用域下的一個公共函數使用。
但全局函數沒有被綁定到jQuery對象上，故不能在選擇器獲取的jQuery對象上調用。需要通過jQuery.fn()或$.fn()方式進行引用。

3. 選擇器法

如果覺得jQuery提供的選擇器不夠用或不方便的話，可以考慮自定義選擇器。

二、jQuery插件的機制

1. jQuery.extend()方法

這種方法能夠創建全局函數或選擇器。

所謂全局函數，就是jQuery對象的方法，實際上就是位于jQuery命名空間內部的函數，有人把這類函數稱為實用工具函數，這些函數都有一個共同特征，就是不直接操作DOM元素，而是操作Javascript的非元素對象，或者執行其他非對象的特定操作，如jQuery的each()函數和noConflict()函數。

例如，在jQuery命名空間上創建兩個公共函數：

jQuery.extend({ 
min : function(a,b){ 
return a<b?a:b; 
}, 
max : function(a,b){ 
return a<b?b:a; 
} 
}) 
$(function(){ 
$("input").click(function(){ 
var a = prompt("請輸入一個數："); 
var b = prompt("再輸入一個數："); 
var c = jQuery.min(a,b); 
var d = jQuery.max(a,b); 
alert("最大值是：" + d + "n最小值是：" + c); 
}); 
})

<input type="button" value="jQuery擴展測試" />

jQuery.extend({ 
min : function(a,b){ 
return a<b?a:b; 
}, 
max : function(a,b){ 
return a<b?b:a; 
} 
}) 
$(function(){ 
$("input").click(function(){ 
var a = prompt("請輸入一個數："); 
var b = prompt("再輸入一個數："); 
var c = jQuery.min(a,b); 
var d = jQuery.max(a,b); 
alert("最大值是：" + d + "n最小值是：" + c); 
}); 
})

<input type="button" value="jQuery擴展測試" />

jQuery.extend()方法除了可以創建插件外，還可以用來擴展jQuery對象。

例如，調用jQuery.extend()方法把對象a和對象b合并為一個新的對象，并返回合并對象將其賦值給變量c：

var a = {name : "aaa",pass : 777}; 
var b = {name : "bbb",pass : 888,age : 9}; 
var c = jQuery.extend(a,b); 
$(function(){ 
for(var name in c){ 
$("div").html($("div").html() + "<br />"+ name + ":" + c[name]); 
} 
})

如果要向jQuery命名空間上添加一個函數，只需要將這個新函數制定為jQuery對象的一個屬性即可。其中jQuery對象名也可以簡寫為$，jQuery.smalluv==$.smalluv。

例如，創建jQuery全局函數：

jQuery.smalluv = { 
min : function(a,b){ 
return a<b?a:b; 
}, 
max : function(a,b){ 
return a<b?b:a; 
} 
} 
$(function(){ 
$("input").click(function(){ 
var a = prompt("請輸入一個數:"); 
var b = prompt("再輸入一個數:"); 
var c = jQuery.smalluv.min(a,b); 
var d = jQuery.smalluv.max(a,b); 
alert("最大值是：" + d + "n最小值是：" + c); 
}); 
})

2. jQuery.fn.extend()方法

這種方法能夠創建jQuery對象方法。

舉一個最簡單的jQuery對象方法例子：

jQuery.fn.test = function(){ 
alert("jQuery對象方法"); 
} 
$(function(){ 
$("div").click(function(){ 
$(this).test(); 
}); 
})

三、初步總結

在jQuery匿名函數中,采用jQuery.extend();方法創建jQuery插件
在jQuery匿名函數中,采用對象.屬性=函數的方式創建jQuery插件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>最簡單的jquery插件</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="http://www.gimoo.net/t/res/jquery/jquery-1.4.4.min.js"></script>
    <script type="text/javascript">
      (function($) {
        jQuery.extend({//寫法1
          a: function(h){
            $("#ad").html(h);
          },
          b:function(h){
            alert(h);
          }
        })
      })(jQuery);
 
      (function($) {//寫法2
        jQuery.a=function(h){
          $("#ad").html(h);
        }
        jQuery.b=function(h){
          alert(h);
        }
      })(jQuery);
 
      $(document).ready(function(){
        $.a("abc");
        $.b("xyz");
      });
 
    </script>
 
  </head>
  <body>
    <h3>最簡單的jQuery插件</h3>
    <div id="ad"></div>
  </body>
</html>

四、編寫實例

寫法一

插件主體：

(function($, window){
  // 初始態定義
  var _oDialogCollections = {};
 
  // 插件定義
  $.fn.MNDialog = function (_aoConfig) {
    // 默認參數，可被重寫
    var defaults = {
      // string
      sId : "",
      // num
      nWidth : 400,
      // bollean
      bDisplayHeader : true,
      // object
      oContentHtml : "",
      // function
      fCloseCallback : null
    };
 
    var _oSelf = this,
      $this = $(this);
 
    // 插件配置
    this.oConfig = $.extend(defaults, _aoConfig);
 
    // 初始化函數
    var _init = function () {
      if (_oDialogCollections) {
        // 對于已初始化的處理
        // 如果此時已經存在彈框，則remove掉再添加新的彈框
      }
      // 初始化彈出框數據
      _initData();
      // 事件綁定
      _loadEvent();
      // 加載內容
      _loadContent();      
    }
    // 私有函數
    var _initData = function () {};
    var _loadEvent = function () {};
    var _loadContent = function () {
      // 內容（分字符和函數兩種，字符為靜態模板，函數為異步請求后組裝的模板，會延遲，所以特殊處理）
      if($.isFunction(_oSelf.oConfig.oContentHtml)) {
        _oSelf.oConfig.oContentHtml.call(_oSelf, function(oCallbackHtml) {
          // 便于傳帶參函數進來并且執行
          _oSelf.html(oCallbackHtml);
          // 有回調函數則執行
          _oSelf.oConfig.fLoadedCallback && _oSelf.oConfig.fLoadedCallback.call(_oSelf, _oSelf._oContainer$);
        });
      } else if ($.type(_oSelf.oConfig.oContentHtml) === "string") {
        _oSelf.html(_oSelf.oConfig.oContentHtml);
        _oSelf.oConfig.fLoadedCallback && _oSelf.oConfig.fLoadedCallback.call(_oSelf, _oSelf._oContainer$);
      } else {
        console.log("彈出框的內容格式不對，應為function或者string。");
      }
    };
 
    // 內部使用參數
    var _oEventAlias = {
      click     : 'D_ck',
      dblclick   : 'D_dbl'
    };
 
    // 提供外部函數
    this.close = function () {
      _close();
    }    
 
    // 啟動插件
    _init();
 
    // 鏈式調用
    return this;    
  };
  // 插件結束
})(jQuery, window);

調用

var MNDialog = $("#header").MNDialog({
  sId : "#footer",    //覆蓋默認值
  fCloseCallback : dialog,//回調函數
  oContentHtml : function(_aoCallback){
      _aoCallback(_oEditGrpDlgView.el);
    }
  }
});
// 調用提供的函數
MNDialog.close;
function dialog(){
 
}

點評

1. 自調用匿名函數

(function($, window) {
 // jquery code
})(jQuery, window);

用處：通過定義一個匿名函數，創建了一個“私有”的命名空間，該命名空間的變量和方法，不會破壞全局的命名空間。這點非常有用也是一個JS框架必須支持的功能，jQuery被應用在成千上萬的JavaScript程序中，必須確保jQuery創建的變量不能和導入他的程序所使用的變量發生沖突。

2. 匿名函數為什么要傳入window

通過傳入window變量，使得window由全局變量變為局部變量，當在jQuery代碼塊中訪問window時，不需要將作用域鏈回退到頂層作用域，這樣可以更快的訪問window；這還不是關鍵所在，更重要的是，將window作為參數傳入，可以在壓縮代碼時進行優化，看看jquery.min.js：

(function(a,b){})(jQuery, window); // jQuery被優化為a, window 被優化為 b

3. 全局變量this定義

var _oSelf = this,
$this = $(this);

使得在插件的函數內可以使用指向插件的this

4. 插件配置

this.oConfig = $.extend(defaults, _aoConfig);

設置默認參數，同時也可以再插件定義時傳入參數覆蓋默認值

5. 初始化函數

一般的插件會有init初始化函數并在插件的尾部初始化

6. 私有函數、公有函數

私有函數：插件內使用，函數名使用”_”作為前綴標識

共有函數：可在插件外使用，函數名使用”this.”作為前綴標識，作為插件的一個方法供外部使用

7. return this

最后返回jQuery對象，便于jQuery的鏈式操作

寫法二

主體結構

(function($){
  $.fn.addrInput = function(_aoOptions){
    var _oSelf = this;
    _oSelf.sVersion = 'version-1.0.0';
    _oSelf.oConfig = {
      nInputLimitNum : 9
    };
    // 插件配置
    $.extend(_oSelf.oConfig, _aoOptions);
 
    // 調用這個對象的方法，傳遞this
    $.fn.addrInput._initUI.call(_oSelf, event);
    $.fn.addrInput._initEvents.call(_oSelf);
 
    // 提供外部函數
    this.close = function () {
      _close();
    }
 
    //返回jQuery對象，便于Jquery的鏈式操作  
    return _oSelf;          
  }
  $.fn.addrInput._initUI = function(event){
    var _oSelf = this,
      _oTarget = $(event.currentTarget);
  }
  $.fn.addrInput._initEvents = function(){}
})(window.jQuery);

點評

1. 美觀

插件的方法寫在外部，并通過在插件主體傳遞this的方式調用

2. 定義插件版本號

不過在這里還是沒有用到

3. 關于call

這里的第一個參數為傳遞this，后面的均為參數

語法：

call([thisObj[,arg1[, arg2[, [,.argN]]]]])
定義：調用一個對象的一個方法，以另一個對象替換當前對象。

說明：call 方法可以用來代替另一個對象調用一個方法。call 方法可將一個函數的對象上下文從初始的上下文改變為由 thisObj 指定的新對象。如果沒有提供 thisObj 參數，那么 Global 對象被用作 thisObj。

4. 關于”this”

在插件的方法中，可能有用到指向插件的this、和指向事件觸發的this，所以事件觸發的this用event來獲取:event.cuerrntTarget

event.currentTarget：指向事件所綁定的元素，按照事件冒泡的方式，向上找到元素
event.target：始終指向事件發生時的元素
如：

html代碼

<div id="wrapper"> 
  <a  id="inner">click here!</a> 
</div>

js代碼

$('#wrapper').click(function(e) { 
  console.log('#wrapper'); 
  console.log(e.currentTarget); 
  console.log(e.target); 
}); 
$('#inner').click(function(e) { 
  console.log('#inner'); 
  console.log(e.currentTarget); 
  console.log(e.target); 
});

結果輸出

#inner
<a href="#" id="inner">click here!</a>
<a href="#" id="inner">click here!</a>
#wrapper
<div id="wrapper"><a href="#" id="inner">click here!</a></div>
<a href="#" id="inner">click here!</a>

寫法三（原生寫法）

主體結構

var MemberCard = function(_aoOption){
  // 配置（默認是從外面傳進來）
  _aoOption || (_aoOption = {}) ;
  // 初始化函數
  _init(this);
}
 
var _init = function(_aoSelf) {
  // 函數執行
  _initData(_aoSelf);
  // 調用對象的私有方法
  _aoSelf._timedHide();
}
 
var _initData = function ( _aoSelf ) {}
 
// 私有方法
MemberCard.prototype._timedHide = function(_aoOptions) {
  var _oSelf = this;
  clearTimeout(this.iHideTimer);  
  // 使用underscore.js的extend方法來實現屬性覆蓋
  var oDefault = extend( { nHideTime: 300 }, _aoOptions );
  _oSelf.iHideTimer = setTimeout( function(){
    // 調用對象的共有方法
    _oSelf.hide();
  }, oDefault.nHideTime);    
}
 
// 公有方法
MemberCard.prototype.hide = function(_aoOptions) {}

使用

var oColleagueCard = new MemberCard({ nHideTime: 200 });
oColleagueCard.hide();

點評：

1. 關于屬性覆蓋(對象深拷貝)

原生函數實現方法

function getType(o){
  return ((_t = typeof(o)) == "object" ? o==null && "null" || Object.prototype.toString.call(o).slice(8,-1):_t).toLowerCase();
}
function extend(destination,source){
  for(var p in source){
    if(getType(source[p])=="array"||getType(source[p])=="object"){
      destination[p]=getType(source[p])=="array"?[]:{};
      arguments.callee(destination[p],source[p]);
    }else{
      destination[p]=source[p];
    }
  }
}

demo：

var test={a:"ss",b:[1,2,3],c:{d:"css",e:"cdd"}};
var test1={};
extend(test1,test);
test1.b[0]="change"; //改變test1的b屬性對象的第0個數組元素
alert(test.b[0]); //不影響test，返回1
alert(test1.b[0]); //返回change

基于jQuery的實現方法：

jQuery.extend([deep], target, object1, [objectN]);

用一個或多個其他對象來擴展一個對象，返回被擴展的對象。

如果不指定target，則給jQuery命名空間本身進行擴展。這有助于插件作者為jQuery增加新方法。如果第一個參數設置為true，則jQuery返回一個深層次的副本，遞歸地復制找到的任何對象。否則的話，副本會與原對象共享結構。未定義的屬性將不會被復制，然而從對象的原型繼承的屬性將會被復制。

demo:

var options = {id: "nav", class: "header"}
var config = $.extend({id: "navi"}, options); //config={id: "nav", class: "header"}

2. 關于this

這個對象的所有方法的this都指向這個對象，所以就不需要重新指定

寫法四

主體結構

function EditorUtil() {
  this._editorContent = $( '#editor_content' );
  this._picBtn = $( '#project_pic' );
  this.ieBookmark = null;
}
EditorUtil.prototype = {
  consturctor: EditorUtil,
 
  noteBookmark: function() {
  },
  htmlReplace: function( text ) {
    if( typeof text === 'string' ) {
      return text.replace( /[<>"&]/g, function( match, pos, originalText ) {
        switch( match ) {
          case '<':
            return '<';
          case '>':
            return '>';
          case '&':
            return '&';
          case '"':
            return '"';
        }
      });
    }
    return '';
  },
  init: function() {
    this._memBtn.bind( 'click', function( event ) {
      $(".error_content").hide();
      return false;
    });
  }
};
 
// 初始化富文本編輯器
var editor = new EditorUtil();
editor.init();

總結

寫法四和寫法三其實都差不多，但是你們有沒有看出其中的不一樣呢？

兩種都是利用原型鏈給對象添加方法：

寫法三：

MemberCard.prototype._timedHide
MemberCard.prototype.hide

寫法四：

EditorUtil.prototype = {
  consturctor: EditorUtil,
  noteBookmark: function(){},  
  htmlReplace: function(){}
}

細看寫法四利用“對象直接量”的寫法給EditorUtil對象添加方法，和寫法三的區別在于寫法四這樣寫會造成consturctor屬性的改變

constructor屬性：始終指向創建當前對象的構造函數

每個函數都有一個默認的屬性prototype，而這個prototype的constructor默認指向這個函數。如下例所示：

function Person(name) { 
  this.name = name; 
}; 
Person.prototype.getName = function() { 
  return this.name; 
}; 
var p = new Person("ZhangSan"); 

console.log(p.constructor === Person); // true 
console.log(Person.prototype.constructor === Person); // true 
// 將上兩行代碼合并就得到如下結果 
console.log(p.constructor.prototype.constructor === Person); // true

function Person(name) { 
  this.name = name; 
}; 
Person.prototype.getName = function() { 
  return this.name; 
}; 
var p = new Person("ZhangSan"); 
 
console.log(p.constructor === Person); // true 
console.log(Person.prototype.constructor === Person); // true 
// 將上兩行代碼合并就得到如下結果 
console.log(p.constructor.prototype.constructor === Person); // true
當時當我們重新定義函數的prototype時（注意：和上例的區別，這里不是修改而是覆蓋），constructor屬性的行為就有點奇怪了，如下示例：

function Person(name) { 
  this.name = name; 
}; 
Person.prototype = { 
  getName: function() { 
    return this.name; 
  } 
}; 
var p = new Person("ZhangSan"); 
console.log(p.constructor === Person); // false 
console.log(Person.prototype.constructor === Person); // false 
console.log(p.constructor.prototype.constructor === Person); // false

為什么呢？

原來是因為覆蓋Person.prototype時，等價于進行如下代碼操作：

Person.prototype = new Object({ 
  getName: function() { 
    return this.name; 
  } 
});

Person.prototype = new Object({ 
  getName: function() { 
    return this.name; 
  } 
});

而constructor屬性始終指向創建自身的構造函數，所以此時Person.prototype.constructor === Object，即是：

function Person(name) { 
  this.name = name; 
}; 
Person.prototype = { 
  getName: function() { 
    return this.name; 
  } 
}; 
var p = new Person("ZhangSan"); 
console.log(p.constructor === Object); // true 
console.log(Person.prototype.constructor === Object); // true 
console.log(p.constructor.prototype.constructor === Object); // true

function Person(name) { 
  this.name = name; 
}; 
Person.prototype = { 
  getName: function() { 
    return this.name; 
  } 
}; 
var p = new Person("ZhangSan"); 
console.log(p.constructor === Object); // true 
console.log(Person.prototype.constructor === Object); // true 
console.log(p.constructor.prototype.constructor === Object); // true

怎么修正這種問題呢？方法也很簡單，重新覆蓋Person.prototype.constructor即可：

function Person(name) { 
  this.name = name; 
}; 
Person.prototype = new Object({ 
  getName: function() { 
    return this.name; 
  } 
}); 
Person.prototype.constructor = Person; 
var p = new Person("ZhangSan"); 
console.log(p.constructor === Person); // true 
console.log(Person.prototype.constructor === Person); // true 
console.log(p.constructor.prototype.constructor === Person); // true

function Person(name) { 
  this.name = name; 
}; 
Person.prototype = new Object({ 
  getName: function() { 
    return this.name; 
  } 
}); 
Person.prototype.constructor = Person; 
var p = new Person("ZhangSan"); 
console.log(p.constructor === Person); // true 
console.log(Person.prototype.constructor === Person); // true 
console.log(p.constructor.prototype.constructor === Person); // true

#免責聲明#

本站[綠夏技術導航]提供的一切軟件、教程和內容信息僅限用于學習和研究目的；不得將上述內容用于商業或者非法用途，否則，一切后果請用戶自負。本站信息來自網絡收集整理，版權爭議與本站無關。您必須在下載后的24個小時之內，從您的電腦或手機中徹底刪除上述內容。如果您喜歡該程序或內容，請支持正版，購買注冊，得到更好的正版服務。我們非常重視版權問題，如有侵權請郵件[admin@lxwl520.com]與我們聯系進行刪除處理。敬請諒解！

文章分類