Jquery入門記事一覧
Jquery 入門 その1 要素にアクセスするJquery 入門 その2 要素にアクセスするメソッドJquery 入門 その3 メソッドチェーンJquery 入門 その4 プラグイン（$.fn.extend）の作り方Jquery 入門 その5 プラグイン（$.extend）のサンプルJquery 入門 その6 イベント処理Jquery 入門 その7 繰り返し処理Jquery 入門 その8 DOMツリーへのアクセスを意識するJquery 入門 その9 非同期通信で用いるデータJquery 入門 その10 非同期通信とはJquery 入門 その11 非同期通信のサンプル1Jquery 入門 その12 非同期通信のサンプル2Jquery 入門 その13 非同期通信のサンプル3 $.post,$.getJquery 入門 その14 非同期通信実践例(formをpostしphpで処理)サンプルのソースコードのダウンロード(下のURLをブラウザで入力してください。)
http://html5.web.fc2.com/jquery_new/jquery_new.zip
---------------------------------------------------------------------
前回の記事では、$.fn.extendを用いた、自作プラグインのサンプルコードを紹介しました。
今回は、前回取り上げなかった、$.extend(object)を取り上げたいと思います。
$.extend(object)は、jQuery名前空間に新たなメソッドを追加する
という、意味不明なものなわけですが、私もあまり$.extend(object)は使ったことがないので、どんな使い方をするかのイメージがあまりわきません。
合っているかどうかわかりませんが、
サンプルを作成してみました。
JSの部分を見ていただければ、若干コメントを記述していますが、
親クラス・子クラスを作成して、それを継承したり、インターフェースのように利用しているようなイメージです。
メソッドは、メンバー変数のhoge,fugaのゲッター・セッターを作っている程度です。
参考になるかどうか微妙ですが、コードも掲載しておきます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jquery 入門 その5 $.extendのサンプル</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
<!--
$(function() { //DOMツリーがREADYになったら実行する
//親クラス
var ParentClass = function(hoge) {
var hoge;
this.hoge = hoge;
};
ParentClass.prototype = {
interface1: function() {},
getHoge: function() {
return this.hoge;
},
setHoge: function(hoge) {
this.hoge = hoge;
},
};
//子クラス
var ChildClass = function(fuga) {
var fuga;
this.fuga = fuga;
};
$.extend(ChildClass.prototype, ParentClass.prototype, {
interface1: function() {
return "interface実装";
},
getFuga: function() {
return this.fuga;
},
setFuga: function(fuga) {
this.fuga = fuga;
},
setHoge: function(hoge){
this.hoge = hoge + this.fuga;
}
});
var pc = new ParentClass("hoge");
var pMsg = "";
pMsg += " parent classのhoge: " + pc.getHoge();
var cc = new ChildClass("fuga");
var cMsg = "";
cc.setHoge("hoge"); //親クラスのsetHogeをオーバーライド
cMsg += " interfaceの実行: " + cc.interface1() +"\n";
cMsg += " parent classのhoge: " + cc.getHoge() +"\n";
cMsg += " child classのfuga: " + cc.getFuga() + "\n";
alert("pMsg:\n " + pMsg + "\ncMsg:\n" + cMsg);
});
// -->
</script>
</head>
<body>
<h1>$.extendのサンプル</h1>
<hr>
<footer>
<small><a href="http://html5.blog20.fc2.com/" target="_blank">HTML5、JavaScript、Android を勉強しよう</a></small>
</footer>
</body>
</html>
