jQueryとzeptoにおけるプロトタイプの実用化
22166 ワード
jqueryでは、異なるdom要素を取得しますが、css()、html()、hide()などの同じjqueryメソッドがあります.これらのメソッドはプロトタイプにあります.
zeptoとjqueryでのプロトタイプの使用
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
<p>zepto/jquery test 1p>
<p>zepto/jquery test 2p>
<p>zepto/jquery test 3p>
<div id="div1">
<p>zepto/jquery test in divp>
div>
body>
<script type="text/javascript" src="./my-zepto.js">script>
<script type="text/javascript" src="./my-jquery.js">script>
<script type="text/javascript">
var $p = $('p');
$p.css('color', 'red');
alert($p.html());
var $div1 = $("#div1");
$div1.css('color', 'blue');
alert($div1.html());
script>
html>
// my-zepto.js ，zepto
(function(window) {
var zepto = {};
// Z
function Z(dom, selector) {
var i, len = dom ? dom.length : 0;
for(i = 0; i < len; i++) {
this[i] = dom[i];
}
this.length = len;
this.selector = selector || '';
}
zepto.Z = function(dom, selector) {
return new Z(dom, selector);
}
zepto.init = function(selector) {
// querySelectorAll
// slice dom
var slice = Array.prototype.slice;
var dom = slice.call(document.querySelectorAll(selector));
return zepto.Z(dom, selector);
}
var $ = function (selector) {
return zepto.init(selector);
}
window.$ = $;
$.fn = {
css: function (key, value) {
// ...
},
html: function(value) {
// ...
}
}
// zepto.Z Z
// Z.prototype Z $.fn， Z $.fn 。
Z.prototype = $.fn
})(window)
// my-jquery.js ，jquery
(function(window) {
// jQuery === $
var jQuery = function(selector) {
return new jQuery.fn.init(selector);
}
jQuery.fn = {
css: function (key, value) {
// ...
},
html: function(value) {
// ...
}
};
var init = jQuery.fn.init = function(selector) {
// querySelectorAll
// slice dom
var slice = Array.prototype.slice;
var dom = slice.call(document.querySelectorAll(selector));
var i, len = dom ? dom.length : 0;
for(i = 0; i < len; i++) {
this[i] = dom[i];
}
this.length = len;
this.selector = selector || '';
}
init.prototype = jQuery.fn;
window.$ = jQuery;
})(window)
プロトタイプの実用化
プロトタイプの拡張性をどのように表現するか
// my-zepto.js
Z.prototype = $.fn
// my-jquery.js
init.prototype = jQuery.fn;
// ，
$.fn.getNodeName = function() {
// this[0]， ， dom ， this[i] = dom[i]
// this[0]
return this[0].nodeName;
}
コンストラクション関数(Z/init)のプロトタイプに値を割り当てる場合、オブジェクトを直接値を付けることができたが、このオブジェクトに($.fn/jQuery.fn)と名付けられた.このようなメリットは何ですか?
まとめ