クラスとして提供

使う側が１ページ内で複数のオブジェクトを生成(new)する場合。

例えば以下のようなものの場合。

オレオレDate型
ページ内の複数の部品（例では動画プレーヤー）の制御

作り方（要するにJavaScriptでのクラスの作り方）

player.js

if (typeof myutil === 'undefined') {
  var myutil = {};
}
if (typeof myutil.Player  === 'undefined') {
  // この関数が Player クラスのコンストラクタになる。
  myutil.Player = function(_divName) {
    // インスタンス毎に持つ変数はここで this.xx として宣言する。thisは対象オブジェクト自身
    this.player = window.document.getElementById(_divName);
  };

  // クラスの関数はコンストラクタ外で Player.prototype.xx に追加
  // コンストラクタ内にこの関数を書いてしまうと new のたびに生成されてしまう
  myutil.Player.prototype.play = function() {
    this.player.play(); // thisは対象オブジェクト自身
  };
}

使い方

player.html

<head>
  <script type="javascript" src="player.js"></script>
</head>
<body>
  <video id="player1" width="360" height="240"><source src="1.mp4" type="video/mp4" /></video>
  <video id="player2" width="360" height="240"><source src="2.mp4" type="video/mp4" /></video>
  <script type="javascript">
    var myplayer1 = new myutil.Player("player1");
    var myplayer2 = new myutil.Player("player2");
    myplayer1.play();
    myplayer2.play();
 </script>
</body>

シングルトンオブジェクトとして提供

一つのページ内に複数のインスタンスが不要なものはこちらの方法で作ります。

向いているもの

jQuery などのユーティリティライブラリ
メニューなど画面全体の制御を行うもの

作り方

menu.js

if (typeof myutil === 'undefined') {
  var myutil = {};
}
if (typeof myutil.Menu  === 'undefined') {
  // シングルトンは無名関数をその場で呼び出す形で定義できる
  myutil.Menu = (function() {
    // 公開オブジェクト以外は var で宣言し無名関数のスコープの中に隠す
    var items  = [];

    var show = function(menuType) { // function show(menuType) { ... でも同じ
      document.getElementById('menu').innerHTML = '' + items.length + ' items';
    };

    // 公開するものだけをプロパティに持つ Object を生成して return する
    return {
      "show" : show,
      "addItem" : function(item) { items.push(item); } // 短いものはここに書いても良いかも
    };
  }()); 
}

使い方

menu.html

<html>
<head>
  <script type="text/javascript" src="menu.js"></script>
</head>
<body>
  <div id="menu" width="200" height="50">0 items</div>
  <script type="text/javascript">
    myutil.Menu.addItem('1');
    myutil.Menu.show();
  </script>
</body>
</html>

素の JavaScript でグローバル汚染しない２つの方法

クラスとして提供

作り方（要するにJavaScriptでのクラスの作り方）

使い方

シングルトンオブジェクトとして提供

作り方

使い方