最近使っているJavascriptのモジュールテンプレート

Jsって色々書き方できるので、すっきりしない微妙なJsが多いですよね。

ということで自分の使ってるテンプレートを見なおしてみました。分かる範囲で!
JsにしろPHPにしろ好き勝手に書けてしまうものって、簡単なですが理解を進めるのは難しいです。

テンプレート説明

全体

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化作業が楽になりました。
ページの一部で使っている関数をサイト共通化したいな、なんて時も簡単にClass用jsファイルに移せるし。

あと、テンプレート作るだけでも結構勉強になりますね。
今まで理解してなかった事が多くて大変でしたが。
 
参考になった記事はこちら、ありがとうございました!

最近の行儀のよい JavaScript の書き方
JavaScriptでクラスっぽい書き方
最近良くやるJavaScriptでのクラスの書き方
クラス&モジュールの安全な書き方
【JavaScript】デザインパターンを知ってみる。モジュール・パターン編
“use strict”(厳格モード)を使うべきか?

SNSでもご購読できます。