オブジェクトリテラルで整理整頓

 
Web Tips.
Booskanium's
Booskanium's Web Tips.

このページの加筆は終了!
ここの落書き人はclass記述に移行しました。

機能ごとに整理整頓されていると、すこぶるメンテナンス性が良くなります。
これに目覚めたのはちゅんラヂのコードが膨れ上がり、メンテナンス性が劣悪になったことからです。
なおクラス定義にするか、オブジェクトリテラルにするかは、リエントラントなサブルーチンとして利用するかしないかで使い分けています。

オブジェクトリテラルって何?

機能毎にオブジェクトとしてまとめて、まとめた機能に特化させることで、ぐちゃぐちゃに入り乱れるのを回避しています。
クラス定義の単位を考えるのと同じですが、ここの落書き人はプロトタイプベースにする必用がある場合(リエントラント)はクラス定義、単独で良いのならオブジェクトリテラルで定義することにしています。
それと、この記述を行うようになってから、エディタの折りたたみ機能を使った場合に、見通しが良くなりました。
難しさは、機能単位を如何に分類するかです。この分類がヘタッピーだと、グチャグチャなままで可読性とメンテナンス性は改善されません。この分類作業は紙の上で考えている落書き人はアナログ人間です。^^;
それとオブジェクトリテラル中のプロパティには利点があります。それはDontDelete属性ではないという事です。varで定義した変数にnewで生成したオブジェクトはdeleteできません。オブジェクトリテラル中のプロパティならdeleteできます。つまり動的にインスタンス化してオブジェクトが削除できるという事になります。クラスからオブジェクトをバンバン生成して削除するような使い方をする場面で、delete出来るというのは利点になります。

クッキーを扱う例(MDNにあった例を少し加筆訂正):

var __docCookies = {
	getItem: function (sKey) {
		if (!sKey || !this.hasItem(sKey)) { return null; }
		return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
	},
	setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) {
		if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return; }
		var sExpires = "";
		if (vEnd) {
			switch (vEnd.constructor) {
				case Number:
					sExpires = vEnd === Infinity ? "; expires=Tue, 19 Jan 2038 03:14:07 GMT" : "; max-age=" + vEnd + "; SameSite=Lax";
					break;
				case String:
					sExpires = "; expires=" + vEnd + "; SameSite=Lax";
					break;
				case Date:
					sExpires = "; expires=" + vEnd.toGMTString() + "; SameSite=Lax";
					break;
			}
		}
		document.cookie = escape(sKey) + "=" + escape(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : "");
	},
	removeItem: function (sKey, sPath) {
		if (!sKey || !this.hasItem(sKey)) { return; }
		document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + (sPath ? "; path=" + sPath : "");
	},
	hasItem: function (sKey) {
		return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
	},
	keys: function () {
		var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/);
		for (var nIdx = 0; nIdx < aKeys.length; nIdx++) { aKeys[nIdx] = unescape(aKeys[nIdx]); }
		return aKeys;
	}
};

イベントリスナーへの登録で注意すること

オブジェクトリテラル中の関数をイベントリスナーに登録するのはリテラル記述で!!
詳しくは「イベントリスナー登録」の説明を参照。

〇〇

後で

〇〇〇〇〇〇〇〇

後で