修改或者擴充套件jQuery的方法程式碼例項

antzone發表於2017-03-28
套件jQuery

毫無疑問，jQuery是一款功能強大且使用方便的類庫。

從它的廣泛應用可以證實上面的觀點，但是正所謂人無完人，金無足赤，jQuery也是如此，並非在任何時候或者場合都能夠完美的完成我們的任務，所以有事以後就需要對jQuery原有的方法進行擴充套件修改，但是最好方法仍然具有原來的功能。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$.prototype.val = function (base) {
  return function () {
    var s = this;
    var a = "data-property";
    var p = s.attr(a);
    var isset = arguments.length > 0;
    var v = isset ? arguments[0] : null;
         
    if (isset&&typeof(base)=="function") { 
      base.call(s, v); 
    } 
    else { 
      v = base.call(s); 
    }
    if (p) {
      if (isset) {
        s.attr(a, v); 
        return s 
      }
      else { 
        return s.attr(a) 
      }
    }
    else {
      if (!s.is(":input")){ 
        if (isset) { 
          s.text(v); 
          return s; 
        } 
        else { 
          return s.text(); 
        } 
      }
      else { 
        return isset ? s : v;
      }
    }
  }
}($.prototype.val);
 
$(document).ready(function(){
  $("#show").html($("#lbl").val()
  +"<br>"+$("#txt").val()
  +"<br>"+$("#prop").val());
})
</script>
</head>
<body>
<span id="lbl">螞蟻部落</span> 
<input type="text" id="txt" value="softwhy.com" />
<div id="prop" data-property="青島市南區"></div>
<div id="show"></div>
</body>
</html>

上面的程式碼毫無疑問是對jQuery的val()方法做的擴充套件，下面介紹一下它的實現過程。

首先介紹一下上面程式碼的功能，當元素具有data-property屬性的時候，此時val()方法功能等同於attr()，當元素不具有此屬性的時候，如果元素是表單元素那麼val()方法保持原來val()方法的功能，如果不是表單元素，那麼次方法的功能就等同於text()方法。

一.程式碼註釋:

1.$.prototype.val = function (base) {}($.prototype.val),重寫val()方法，傳遞的引數是原來的val()方法。2.return function () {}，返回的此函式就是重寫後的val()方法，這裡採用的就是閉包的方式。

3.var s = this，將this引用賦值給變數s，指向的是jquery物件例項。

4.var a = "data-property"，宣告一個變數並賦值為"data-property""。

5.var p = s.attr(a)，獲取屬性值。

6.var isset = arguments.length > 0，判斷是否為重寫後的val()方法傳遞引數。

7.var v = isset ? arguments[0] : null，如果傳遞引數，則將引數值賦值給變數v，否則賦值為null。

8.if (isset&&typeof(base)=="function") { 

  base.call(s, v); 

}，判斷是否傳遞引數且base的型別是否是個函式，如果滿足條件則執行base()方法，也就是執行原來的val()方法進行賦值操作，如果是非表單元素，賦值操作當然無效。

9.else { 

  v = base.call(s); 

}，如果沒有傳遞引數那麼就是一個獲取value屬性值的操作，對非表單元素也是無效的。

10.if (p) {

  if (isset) {

    s.attr(a, v); 

    return s 

  }

  else { 

    return s.attr(a) 

  }

}如果存在data-property屬性，那麼就根據是否傳遞引數，進行賦值或者獲取屬性值操作。11.else {

  if (!s.is(":input")){ 

    if (isset) { 

      s.text(v); 

      return s; 

    } 

    else { 

      return s.text(); 

    } 

  }

  else { 

    return isset ? s : v;

  }

}如果沒有data-property屬性的話，就會分別按照是否是表單元素進行相應的處理，如果不是表單元素那麼val()的作用就等同於text(),如果是表單元素，那麼就等同於原來的val()方法。

二.相關閱讀:

1.arguments物件可以參閱javascript arguments一章節。

2.call()方法可以參閱js call()一章節。

3.attr()方法可以參閱jQuery attr()一章節。 

4.is()方法可以參閱jQuery is()一章節。

相關文章