hirokonaBlog

ググる→忘れそう→即時メモ 京都のWebデザイナーの備忘録

結局JSの処理ってどういう風にまとめるのがええん?

ええかげんスパゲッティーニを卒業したい

いろいろある記述の仕方。
グローバルを汚さずに見通しのよいソースにするには結局どんな記法で記述するのがよいのだらう。。。

ググり力が足らず、なかなかこういうのまとめた記事に出会えないからメモ。
大体この2つのどっちかになってきた

パターン1:連想配列っぽくまとめるやつ

(1つのオブジェクトにまとめるって言うんでいいの?表現の仕方を正確に知らない。。。)

[javascript]
var makeCircle = {
$stage:$(‘#drawArea’),
$sendBtn:$(‘#sendBtn’),

isMotion:false,
count:0,

init: function() {
makeCircle.initSettings();
makeCircle.initStage();
},
initSettings: function() {
[do something]
},
initStage: function() {
[do something]
}
}
[/javascript]

メリット

コンソールでオブジェクト全体を一気に全部返せる(見通しやすい)

デメリット

外から全てのオブジェクトが叩けちゃう→ゲームとか見れるとNGの場合には向かない
誰でも関数が触れる(分業での上書きによるトラブルリスクがある)

パターン2:匿名関数でくるむやつ

[javascript]
var makeCircle = (function(){
var $stage=$(‘#drawArea’),
$sendBtn=$(‘#sendBtn’),
isMotion=false,
count=0;

function init() {
initSettings();
initStage();
},
function initSettings() {
[do something]
},
function initStage() {
[do something]
}
return {
init:init
};
})();

makeCircle.init();

[/javascript]

メリット

外部から不用意にオブジェクトにアクセスされない(returnで返したものだけアクセスさせる)

デメリット

特にない・・・?強いて言えば外からアクセスさせたい関数に関してreturnで出してあげる必要があるので、returnのところがおびただしい数になる可能性がある・・くらい?(その時点で設計的にあかん気もする)

あ、あと変数も関数も返すような匿名関数を作ってしまうと、叩いた時に何が帰ってきているかわかりづらくなる(らしい)

ちなみに

この話をしてる時に藤岡さんに件のおまじないの事を教えてもらった。
[javascript]
var funcs = funcs || {};
funcs.arg ={
arg1: ‘aaaa’,
arg2: ‘aaaa’
}
funcs.func1 =function(){
[do something]
}
[/javascript]

これの冒頭な。
var funcs = funcs || {};
funcsがかぶったときにスルーするためのおまじない
すでにfuncsというオブジェクトが存在していればそちらに追記(というか移植…?)、
そうじゃなければ新しいオブジェクトとして定義。


投稿日

カテゴリー:

投稿者:

タグ:

コメント

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください