編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS

クラスをパッケージ(名前空間)にまとめる

目的

BarClassとBazClassという2つのクラスをFooPackageにまとめる。

ファイル構造

  • index.html
  • FooPackage.BarClass.js
  • FooPackage.BazClass.js

ソースコード

FooPackage.BarClass.js

var FooPackage = FooPackage || {};
(function(FooPackage) {
    var BarClass = (function() {

        function BarClass(mesg) {
            this.mesg = mesg;
        }

        BarClass.prototype.getMesg = function() {
            return this.mesg;
        };

        BarClass.prototype.getBazMesg = function() {
            var baz = new FooPackage.BazClass("DEBUG: Foo::Baz From Bar");
            return baz.getMesg();
        };

        return BarClass;
    })();

    FooPackage.BarClass = BarClass;
})(FooPackage);

FooPackage.BazClass.js

var FooPackage = FooPackage || {};
(function(FooPackage) {
    var BazClass = (function() {

        function BazClass(mesg) {
            this.mesg = mesg;
        }

        BazClass.prototype.getMesg = function() {
            return this.mesg;
        };

        return BazClass;
    })();

    FooPackage.BazClass = BazClass;
})(FooPackage);

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <script src="FooPackage.BarClass.js"></script>
    <script src="FooPackage.BazClass.js"></script>
    <script>
      var bar = new FooPackage.BarClass("DEBUG: Foo::Bar");
      var baz = new FooPackage.BazClass("DEBUG: Foo::Baz");
      console.log(bar.getMesg());
      console.log(baz.getMesg());
      console.log(bar.getBazMesg());
    </script>
  </head>
  <body>
    <h1>JS</h1>
  </body>
</html>

index.htmlの実行結果

DEBUG: Foo::Bar
DEBUG: Foo::Baz
DEBUG: Foo::Baz From Bar

サブパッケージを作成する

BarClassをサブパッケージにまとめる場合は、上のコードを以下のように変える。

FooPackage.SubPackage = FooPackage.SubPackage || {};
FooPackage.SubPackage.BarClass = BarClass;

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS

Last-modified: 2013-05-03 (金) 23:44:16 (1423d)