プロパティ宣言をスマートに書くには？

質問

文章でまとめたら長文になってしまったので、箇条書きで失礼します。

----------------
// * 現在のコード (1)
var Question = function(){ console.info('OKWave!'); }
Question.goo = function(){ console.info('goo'); }
Question.tagindex = function(){ console.info('TAG index'); }
Question();
Question.goo();
Question.tagindex();

// * おそらく一般的なコード (2)
var Question = {
okwave: console.info('OKWave!'),
goo: console.info('goo'),
tagindex: console.info('TAG index')
};
Question.okwave();
Question.goo();
Question.tagindex();
----------------

* 目的
"Question" を一度だけ書く(メソッド呼び出しは除く)アルゴリズムに変更したい

* (2) のコードを使いたくない理由
最もよく使われる Question(); の記述量を減らすため。
jQuery をイメージしています。

何か良い手だてはないでしょうか？

回答No.3

Werner · ベストアンサー

(2)のコードではQuestion.gooなどに
console.info('goo') の戻り値を入れているので、
そもそもコードが(1)と等価ではありません。

Question.goo()はconsole.info('goo')が返したfunctionを実行しますし、
もしconsole.info('goo')がfunctionを返すのでなければ
Question.goo();は実行できません。

ケアレスミスなら良いのですが、なにか勘違いされている可能性もありますので一応指摘しておきます。

> jQueryがprototype.jsとのバッティングを回避できるように、$xQuery でも回避できるように対策したいのです。
それなら、jquery.jsを読んでみてはいかがでしょうか。
私もjquery.jsは見たことなかったので今軽く眺めてみましたが、
読めば結構勉強になると思いますよ。

jQueryでの$の衝突回避は
var _$ = window.$
として、元の$を退避して戻せるようにしているようです。

質問の件はこのように書いてみてはどうですか？
----------------
(function(){
//Question以外の名前にしたければ、window.Questionのところを書き換える。
var _Question = window.Question = function(){ console.info('OKWave!'); }
_Question.goo = function(){ console.info('goo'); }
_Question.tagindex = function(){ console.info('TAG index'); }
})();

Question();
Question.goo();
Question.tagindex();
----------------

> # 他に、記述量を減らす目的なら prototypeプロパティを利用しても良い、と気が付きました。
> String.prototype.csv2tableNode = function(csv, option){...}
組み込みオブジェクトのprototypeにプロパティをやたらに追加するのは、お勧めできません。
Stringとの関連が低そうなメソッドですし。

[参考]
特集：jquery.jsを読み解く｜gihyo.jp … 技術評論社
http://gihyo.jp/dev/feature/01/jquery

お礼

ありがとうございます。
JavaScriptに作法というものがあるのかわかりませんが、
良くわかっていない頭でおかしなことをしているのじゃないかとひやひやしていました。
求めている動作が実際に出来ることがわかってほっとしています。

> そもそもコードが(1)と等価ではありません。
確かにそうですね。ミスでした。ご指摘有り難うございます。

> それなら、jquery.jsを読んでみてはいかがでしょうか。
実は私もjQueryは眺めたのですが、私の理解度が浅いために解読できませんでした。

> として、元の$を退避して戻せるようにしているようです。
なるほど！そういう意味だったのですか！
window.$ をFirebugコンソールで実行すると undefined が返ってくるため、何をやっているのかさっぱりな状態だったのですが、
prototype.js などで $ を宣言していた場合に備えて、待避していたのですね。

> 質問の件はこのように書いてみてはどうですか？
ありがとうございます。求めている動作になりました。
試してみてわかりましたが、

window.Question = function(){ console.info('OKWave!'); };

と

Question = function(){ console.info('OKWave!'); };

は等価なのですね。勉強になりました。

> 組み込みオブジェクトのprototypeにプロパティをやたらに追加するのは、お勧めできません。
やはりよくないですね。prototypeに加えるのは既存メソッドを少し拡張したような汎用性の高いメソッドに留めようと思います。

紹介していただいた技術評論社の特集は私にも理解できそうな内容なので、時間のあるときにじっくり読み進めてみようと思います。
有り難うございました。

回答No.5

babu_baboo

そうじて当初の質問から、どんどんかけ離れていることにお詫びします。

＞＞ 個々の要素にイベントを記述する方が、圧倒的に多いようです。
＞えっと…、そんなに多いでしょうか？

あっ、あなたではなく広く一般的にね^^;

＞質問者さんに伝える場合においては必ずしも必要ではないと
＞質問者さんの知っているレガシーな方法

これまでの方々の質疑応答を見ていて、質問者は必ずしも勉強するために
質問しているのではなく、その場を切り抜けるためだけに質問しているように
見受けられます（あくまでも個人的に）
なので、質問者に理解される必要はなく、そのコードを見て、
「えっ！なんでこんな書き方するの？」って思う人が勉強すれば良いと思う。
（自分を省みるとよくわかります。何をやっても駄目なやつは駄目。
たとえば、いまだにメモリーリークについてよく理解できてなし、指摘される。）

これから勉強しようとする人には、レガシーなコードより
オブジェクト指向なり、最新のブラウザに対応するなら、こう書くんだよ！と
進んで見本となるものを書いてあげてたほうが良いと思っています。
（それができないのが、ちょっぴりくやしい。）
なんたってここは、技術者向の板なのだし・・・・

質問者で、「知っているなら書いてくれ！」という人は嫌われる。
同じ用に、「最新の書き方ができるなら、それで書いてくれ！」というのと
同じようなものかぁ。

XPathかぁ～勉強しなきゃね～。
つうかそれより日本語だね。読み直してそう思う。
まぁ～～～まだ生まれたて（登録したて？^^;）だということで許してね。
ばぶぅ。

お礼

> そうじて当初の質問から、どんどんかけ離れていることにお詫びします。
その点は私も理解した上で補足していましたので、お気になさらず。
情報を求めてここを閲覧されている方には申し訳ないですが、私自身に問題や改善点があれば遠慮なく指摘を頂きたいと思っています。

> >> 個々の要素にイベントを記述する方が、圧倒的に多いようです。
> >えっと…、そんなに多いでしょうか？
>
> あっ、あなたではなく広く一般的にね^^;
あっ、そういうことでしたか。
「方 = ほう」と読んでいましたが、「方 = かた」なのですね。失礼しました。

> これまでの方々の質疑応答を見ていて、質問者は必ずしも勉強するために
> 質問しているのではなく、その場を切り抜けるためだけに質問しているように
> 見受けられます(あくまでも個人的に)
これは良くわかります。
ここだけでなく、様々なコミュニティでその傾向が見受けられます。
なので、私も質問者さんのためというよりは掲示板を閲覧している第三者のために質問者さんには理解できないかもしれない情報を掲載することはあります。

あと、私自身の落としどころとして「私が勉強するために回答する」というように考えています。
私が興味を持った分野、試してみたいアイデアを質問文に見つければそれを実験してみる。
その結果、私も掲示板を閲覧している人も(できれば)質問者さんも勉強になれば、幸せなことだと思います。

何度も時間を取っていただき、ありがとうございました。
回答者としての姿勢がとても参考になりました。

回答No.4

babu_baboo

#1です。
＞同じ状況に立った場合にどのように対策

専門家でもないし、どうこう言える立場でもございません。
お役にたてそうもありません。ごめんなさい。

どのような関数をどう定義するかもわからないのですから
答えようがありません。
ただ回答者側のコードを見ていて思うのですが、
個々の要素にイベントを記述する方が、圧倒的に多いようです。
TAG indexなどで記述されたコードを見て勉強している者からすると
なんだかなぁ～と思うことが多々あります。（腕は未熟者ですが）

csvなんてキーワードがあるくらいなので、規則性のある表？（データ）
なのでしょうか？
たとえば個別のセルにイベントを貼り付けなくても、
tableにonclickのイベントを１つくっつけておけば、どのセルを
クリックしたか調べることはできます。
そこからその列の処理に移れば良しと考えています

自分は、結果をもとめられる立場ではないので、いきなり
数行ですげーことをして仕事に役立てる必要はありません。
むしろ、原理というか基礎というかそのへんを学びたいのです。

自分からは、XPathなんて遠い所にあります。^^;
お～キャラが消えていた。

ばぶぅ～。

お礼

2度にわたるアドバイスありがとうございました。
babu_babooさんはコードを必ず掲載する回答者さんと認識しており、いくつか参考にさせていただいています。

補足

> 個々の要素にイベントを記述する方が、圧倒的に多いようです。
えっと…、そんなに多いでしょうか？
現時点で8件の回答をしていますが、イベントを定義したコードを掲載したのは qa4928371 のみだと認識しています。
何か勘違いしているのでしょうか…。

ちなみに、qa4928371に関しては質問者さんにわかりやすいようにあえてHTML埋め込み型の書き方をしています。
# 綺麗なコードは書けるにこしたことはないのですが、質問者さんに伝える場合においては必ずしも必要ではないと考えています。
# 質問者さんの知っているレガシーな方法でコードを書いた方が伝わることもありますし、
# 例外処理までしっかり書いた長いコードよりも、シンプルな短いコードの方が伝わりやすいこともあります。ケースバイケースだと思います。
きちんと清書したら、node.onclick = function(){ ... }; でしょうか。
できることならイベントリスナを使いたいところですが、IE未対応なので仕方なく。
addEventListenerをオーバーロードするやり方もあるようですが、イベント実行順に癖があるようなので採用していません。

> csvなんてキーワードがあるくらいなので、規則性のある表？(データ)なのでしょうか？
おおざっぱに言ってしまえば、DOMで操作する要素ノードを返すメソッド、と思っていただければイメージできるかと思います。

var xpath = 'p#Test/strong[@title="test"][text()="It is a test."]';
document.body.appendChild($xQuery(xpath));

と

var p = document.createElement('p');
p.id='Test';
var strong = document.createElement('strong');
strong.appendChild(document.createTextNode('It is a test.'));
strong.title='test';
p.appendChild(strong);
document.body.appendChild(p);

は等価です。(IDセレクタは本来XPathではないですが、短い記述量が魅力的だったので採用しました)
階層の深い要素ノード、属性の多い要素ノードを短い記述で宣言できるのが最大の特徴です。

csv2array はCSVを2次元配列に変換して返します。
返ってきた配列を操作した上で array2tableNode で要素ノードに変換し、appendChildなどでページに追加することができます。
ちなみに array2tableNode でもXPathを利用していて、無指定だと単純なtableを。
"table#chat\ncaption[text()='簡易チャット']" を指定すると、<table ="Chat">、一行目がth、<caption>簡易チャット</caption> なtable要素ノードを生成します。

onclickですが、現在作成中のコードには全くありません。
基本的にはDOMで操作すればいいと考えており、長くなりがちなコードをライブラリで短くする事を目指しています。

あと2,3機能を実装すれば、公開できる形になる予定です。
おそらく1週間。順調にいけば今夜にでも公開できると思いますので、もし目にとまって魅力的に感じましたらお試しください。

回答No.2

神崎 渉瑠（@taloo）

var Question=function(){
console.info('OKWave!');
console.info('goo');
console.info('TAG index');
};

Question();

こうですか？わかりません。

補足

申し訳ありません。私の言葉足らずでした。
No.1 の補足をお読みください。

回答No.1

babu_baboo

わたしも、かじょうがきだけど、これはしつれいなこたえ？。
ねむれないよるへのはらいせか？＞じぶんにね。
ほかのせんもんかのかいとうをまとう。ばぶぅ。

Question = koredeiinoka('OKWave!,goo,TAG index');

for(var i in Question) {
alert(i+':'+Question[i]);
}

function koredeiinoka (str) {
var str0 = str.split(','), str1 = str.replace(/\s+|!/g,'').toLowerCase().split(',');
for(var cnt = 0, tmp, txt = []; tmp = str0[cnt];)
txt[cnt] = '"'+str1[cnt++]+'":function(){console.info("'+tmp+'")}';
return (eval('var ret = {\n'+txt.join(',\n')+'\n}'),ret);
}

お礼

本来はお礼を書く場所ですが、他に書ける場所がないのでここで補足させてください。m(_ _)m

「既存コードに $xQuery という名前の変数定義をされていても、手軽に回避したい」という意図もあります。
jQueryがprototype.jsとのバッティングを回避できるように、$xQuery でも回避できるように対策したいのです。
現在の打開案としては

/* CSV->Table要素ノード */
$xQuery.csv2tableNode = function(csv, option){
return this.array2tableNode(this.csv2array(csv, option['delimiter']), option);
}

のように $xQuery.**** では this.**** でメソッドを呼び出すようにして、変数名書き換えは
テキストエディタで "^\$xQuery" -> "$hoge" と正規表現による一括置換で凌ぐ手段を考えています。
(必ずインデントするという構文規則があればこれで問題ない、と思います)

# 他に、記述量を減らす目的なら prototypeプロパティを利用しても良い、と気が付きました。

String.prototype.csv2tableNode = function(csv, option){...}

これなら変数名を気にせず宣言できる上にメソッド呼び出しの記述量が減ります。
他で同じプロパティを宣言していたら、オーバーロードしてしまうという問題は残りますが。

質問内容に沿うような答えでなく、代替案でも構いません。
あるいは、babu_babooさんが同じ状況に立った場合にどのように対策するでしょうか？

補足

あ…、そういう受け取り方をされましたか。
ごめんなさい、説明が足りませんでした。
質問文ではわかりやすくするため関数内部を省略しましたが、

Question()
Question.goo()
Question.tagindex()

はそれぞれ汎用的に使う事を前提としており、「全てが console.info(); を呼び出す」というような共通性はありません。
この順番で処理することを求めているのではなく、必要に応じて自由に呼び出せる関数として定義したいのです。
具体的には以下のようなコードです。

/* XPath->ノード (XPathを入力すると対応するノードを返す) */
// (例)
// p[@title='XPathだよ！'][text()="XPathを入力してみるテスト"]
// → <p title="XPathだよ！">XPathを入力してみるテスト</p> のノードを返す
var $xQuery = function(x){ ... return node; };
/* CSV->配列 */
$xQuery.csv2array = function(csv, delimiter){ ... return array; };
/* 配列->table要素ノード */
$xQuery.array2tableNode = function(array, option){ ... return tableNode; };

公開予定のJavaScriptファイルであるのでURLを掲示できればわかりやすいのですが、
規約を読むと禁止事項になっているようですので、URLを掲示できない状態です。
必要であれば、「Tag index」などURLを掲示できるコミュニティへ移動することを考えています。