JavaScript_jquery에서 jQuery 객체 메서드를 재정의하는 방법에 대한 예제 튜토리얼
- WBOY원래의
- 2016-05-16 16:38:451222검색
jQuery는 우리를 위해 많은 클라이언트 측 프로그래밍을 해결해 주는 매우 뛰어난 클래스 라이브러리이지만, 우리의 요구 사항을 충족할 수 없을 때 동시에 영향을 주거나 수정하지 않아도 됩니다. 예를 들어 현재 웹 애플리케이션의 데이터 상호 작용 대부분은 Ajax를 통해 완료되므로 일부 숨겨진 필드 데이터를 HTML 태그에 저장할 수 있습니다. 속성에서는 다음과 같은 HTML 태그의 코드 양이 줄어듭니다. : ID, Timestamp 등 사용자 입력이 필요하지 않지만 제출해야 하는 항목은
양식을 통해 제출합니다.<input name="ID" value="343" type="hidden" />
ID값을 히든태그에 저장하고 폼과 함께 제출해주세요.
코드는 다음과 같습니다.
<div> <label data-field="id" data-property="data-id" data-id="343">First Name</label><input type="text" data-field="FirstName" /> </div>
이 속성 이름의 파란색 부분에 너무 주의를 기울이지 마세요. 좀 더 간결한 이름을 선택할 수 있습니다. 이제 jQuery의 val 메서드를 다시 작성하여 data-id 값을 $.prototype으로 설정해 보겠습니다. 함수를 재정의하고 새 함수에서 호출될 수 있도록 기본 클래스 함수를 클로저 형식으로 전달합니다.
<script>
$.prototype.val = function (base) {
return function () {
var s = this, a = "data-property", p = s.attr(a), isset = arguments.length > 0, 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(p, v); return s }
else { return s.attr(p) }
}
else {
if (!s.is(":input"))
{ if (isset) { s.text(v); return s; } else { return s.text(); } }
else { return isset ? s : v; }
}
}
//在这里传入基类方法
}($.prototype.val);
</script>
다시 작성한 후 태그에 data-property 속성이 지정되면 jQuery 객체에서 val()을 호출하는 것은 attr("data-property")를 호출하는 것과 동일하지만 data-property가 지정되지 않습니다. default , 비양식 요소인 경우 val()은 text()와 동일하고, 양식 요소인 경우 value 속성의 값을 읽고 쓰는 원래 함수가 유지되므로 이 방법을 사용할 수 있습니다: $("[data-field= 'id']").val(345) 및 $("[data-field='id']").val() 해당 값을 읽거나 설정합니다. "data-field" 속성은 서버의 해당 유형의 필드에 매핑될 것이며 이는 JavaScript에서 jQuery를 다시 작성하는 방법입니다. 다른 메서드를 다시 작성해도 동일한 효과가 있으므로 하나의 예에서 추론할 수 있습니다.
모든 코드는 다음과 같습니다.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>在JavaScript中重写对象的方法</title>
<script src="Scripts/jquery-1.8.2.min.js"></script>
<script src="Scripts/jquery-ui-1.8.24.min.js"></script>
<script>
$.prototype.val = function (base) {
return function () {
var s = this, a = "data-property", p = s.attr(a), isset = arguments.length > 0, 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(p, v); return s }
else { return s.attr(p) }
}
else {
if (!s.is(":input"))
{ if (isset) { s.text(v); return s; } else { return s.text(); } }
else { return isset ? s : v; }
}
}
}($.prototype.val);
</script>
</head>
<body>
<span id="lbl">Hello world!</span>
<input type="text" id="txt" value="hello world" />
<input type="checkbox" value="哈哈哈。。。" />
</body>
</html>
이 글이 모든 분들의 웹 프론트엔드 디자인에 도움이 되기를 바랍니다.