2012-05-31
■[programming][database]ちょっと長めの文字のテストデータ。
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
五劫の擦り切れ
水行末 雲来末 風来末
食う寝る処に住む処
やぶら小路の藪柑子
長久命の長助
Permalink | コメント(0) | トラックバック(0) | 11:05 
2012-05-12
■[programming][javascript][jQuery]jQuery.extendでオブジェクトを拡張する
基本
オブジェクト設定のデフォルトを定義しておき、後から設定されるオプションを上書きする場合。
var defaultValue = { value1: "default1",value2: "default2"};
var option = { value1:"vallue1"};
var extended = jQuery.extend(defaultValue,option);
extended.value1はoptionの内容で上書きされる。extended.value2はdefaultValue.value2の内容になる。
分でjquery拡張を書く時なんかに使う。
クラスの継承
基本クラスにメンバーを追加する、あるいはメソッドをオーバーライドする。
間違ったやり方はこう。
var Parent = function(){ ... };
Parent.protorype = { ... };
var Child = function(){ ... };
Child.prototype = { ... };
jQuery.extend(Child,Parent);
多分意図とは逆にChildに定義したメンバーがParentで上書きされてしまう。
これもだめ。
var Parent = function(){ ... };
Parent.protorype = { ... };
var Child = function(){ ... };
Child.prototype = { ... };
var extended = jQuery.extend({},Parent.prototype,Child.prototype);
意図としては"var obj = new Child()"したいのであって、これだと"var obj = new extended()"じゃないと使えない。
もしかしたら "var Child.prototype = jQuery.extend({},Parent.prototype,Child.prototype);"ならいけるかも。でも冗長。
var Parent = function(){ ... };
Parent.protorype = { ... };
var Child = function(){ ... };
= { ... };
jQuery.extend(Child.prototype,Parent.prototype,{ /* 拡張メンバー */ });
こう書けば、意図通りに動作する。Childで上書きしなかったメンバーもChild内でthis.hogeして使える。
ただし、この書き方をするとjsdocのコメントがうまく入らなくなるので、昨日の日記を参照。
あと、オーバーライドしたメンバーの親を使う場合どうするのか、は未だ試してない。
追記:
最後の例が間違っていたので修正。
要するに
って事。
Permalink | コメント(0) | トラックバック(0) | 15:29
2012-05-11
■[programming][javascript][jQuery]jQuery.extendを使ってjsdoc用のコメントを書く
必要にせまられてjQuery.extendを使うことになった。けど単純にdocコメント埋めてもうまくオーバーライドメンバーのドキュメントを出力できない。
このように書く。
(function($){
/**
* 親クラス
* @class
* @constructor
*/
var Parent = function(){};
Parent.prototype = {
func1: function(){
},
func2:function(){
alert("parent");
}
};
/**
* 子クラス
* @class
* @constructor
* @extends Parent
*/
var Child = function(){};
$.extend(Child.prototype,Parent.prototype,{
/**
* オーバーライドメソッド
* @function
* @name Child.prototype.func2
*/
func2:function(){
alert("child")
}
});
})(jQeury);
もしかしたら、バージョンによっては@memberOfとか@methodOfとかで出来るかもしれないけどうちの官位今日(2.4)では出来なかった。
Permalink | コメント(4) | トラックバック(0) | 13:27
2012-05-10
■ sample
(function($) {
// ウィジェット定義
$.widget('test.myWidget', {
// デフォルト設定
options: {
content: 'hoge'
},
// 初期化処理として自動的に呼び出される
_init: function() {
this._update();
},
// プライベートメソッド
_update: function() {
var opts = this.options;
var elm = this.element;
elm.html(opts.content);
},
// パブリックメソッド
setContent: function(str) {
this.options.content = str;
this._update();
}
});
delegate = function(func,ctx){
return function(){ return func.apply(ctx,arguments); };
};
$.widget('forms.textField', {
options: {
fields: []
},
_init: function() {
},
validate: function(){
this.message = "hello;"
return false;
},
getMessage: function(){
return this.message;
}
});
$.widget('forms.form', {
options: {
fields: []
},
_init: function() {
this.element.submit(delegate(this._onsubmit,this));
},
_onsubmit : function(){
this.messages = [];
var valid = true;
var length = this.options.fields.length;
for(var i = 0;i < length;i++){
var field = $(this.options.fields[i]);
if(!$(field).textField("validate")){
this.messages.push(field.textField("getMessage"));
valid = false;
}
}
if(!valid){
var m = "";
for(var i = 0;i < this.messages.length;i++){
$("#myWidget").append(this.messages[i]);
m += this.messages[i];
}
return false;
}
return true;
},
// パブリックメソッド
setContent: function(str) {
this.options.content = str;
this._update();
},
});
})(jQuery);
// DOM構築完了後
$(function() {
// オプションを上書きして呼び出し
$("#myWidget").myWidget({
content: 'fuga',
onUpdate: function() {
alert('更新されました')
}
});
$("#form1").form({
fields: [
$("#text1").textField(),
$("#text12").textField(),
$("#text13").textField(),
]
});
})
Permalink | コメント(0) | トラックバック(0) | 09:40
2012-04-10
■[programming][javascript]jQueryプラグインを書くためのテンプレ
jQuery.fn.pluginName = function(options) {
var options = jQuery.extend( {
},options);
return this.each(function(){
});
};
Permalink | コメント(0) | トラックバック(0) | 13:26
