jsは書き方が色々出来てしまうので、すっきりしないです。
一度自分の使ってるテンプレートを見なおしてみました。
jsやphpのように好き勝手に書けてしまうものは、簡単だからこそ効率よくキレイにまとめていくのが難しいです。
今回は大規模なwebアプリケーションをつくるというよりは、
コーポレートサイトなど一般的なwebサイトを作る時に使うことを想定したテンプレートとなります。
テンプレート説明
全体
if(typeof Utility === 'undefined') var Utility = {};
(function (Utility) {
"use strict;"
/**
* @class Main
*/
Utility.Main = (function(){
/**
* @constructor
*/
function construct() {
if(!(this instanceof construct)) throw new TypeError('Constructor cannot be called as a function.');
var _this = this;
this.size = 5;
// リサイズイベント
window.addEventListener("resize", function () {
_this.resize();
});
};
/**
* @resize
*/
construct.prototype.resize = function () {
this.width = window.innerWidth;
this.height = window.innerHeight;
};
/**
* @method
*/
construct.prototype.method = function () {
return this.size;
};
return construct;
})();
})(Utility);
作ったクラスをオブジェクトに突っ込んでいく
Utilityという1つオブジェクト作って、サイトで使うjs classはこの中に格納していくことに。Utilityという名前はなんでも良いです。
最初に呼ばれる関数名はconstructとしています。
色々とClassの書き方見て回ってると、コンストラクタをClass名（今回だとMain）にしてる人いて、
そちらのほうが好みなんですが、そうするとテンプレとしてこれを使う時に変更する箇所が多くてめんどくさいので、共通でconstructとしています。
いまだとClass名である、Mainという文字列を使ってるのは2箇所なので、新しく使う時手間が少なくて楽なんですよね。
newして呼ばないとthisが意図してない動きになる
newして欲しいので参考記事から以下の一文をつけくわえました。
if(!(this instanceof construct)) throw new TypeError('Constructor cannot be called as a function.');
メゾットの追加
/**
* @method
*/
construct.prototype.method = function () {
};
最後に
このテンプレート作って使うようになって、Class化作業が楽になりました。
classes.jsのような感じClassをまとめたjsファイルを作って、
各ページから必要に応じて呼び出して使っています。
テンプレートを考えていくだけでも結構勉強になりました。
参考になった記事はこちら。
最近の行儀のよい JavaScript の書き方
JavaScriptでクラスっぽい書き方
最近良くやるJavaScriptでのクラスの書き方
クラス＆モジュールの安全な書き方
【JavaScript】デザインパターンを知ってみる。モジュール・パターン編
“use strict”（厳格モード）を使うべきか？
