0

javascriptオブジェクトを使用してさまざまな関数や変数データを保持するサイトがあります。

var Site = {
    Page: {
    ...some functions...
    },
    Player: {
    ...more functions and variables...
    }
}

私が直面している問題は、スクリプトが存在するヘッダーファイルが約500行のコードに成長していることです。操作を簡単にするために、PageやPlayerなどのセクションを別々のファイルに分割したいと思います。これの障害は、一部の関数がPHPからの出力に依存しており、ベースページに残しておく必要があることです。個別のファイルをオブジェクトに含めて、すでに配置されている構造を保持する方法はありますか？

4

2 に答える 2

1

慣例により、大文字で始まる変数はコンストラクター用に予約されていることに注意してください。

ファイル1：

var Site = Site || {};

Site.Page = {     
    ...some functions...
}

ファイル2：

var Site = Site || {};

Site.Player = {
    ...more functions...
};

また、extend関数を使用して、オブジェクトリテラルを宣言してから、プロパティと値をベースオブジェクトにコピーすることもできます。または、IIFEを使用して機能を割り当てることができます。これは、機能の検出を行い、結果に応じてさまざまな機能を作成する場合に便利です。

var Site = Site || {};

(function(global) {

  function Player() {
    // stuff
  }

  global.Site.Player = Player;

  if (test) {
    global.Site.someFn = function() {
      // stuff 1
    };

  } else {
    global.Site.someFn = function() {
      // stuff 2
    };
  }

  ...

}(this));

または上記のいくつかのバージョン。

于 2012-07-24T01:19:37.033 に答える
0

データとロジックを混在させないでください。つまり、「一部の関数はPHPからの出力に依存している」というのはコードの臭いです。このようなコードがある場合：

setSomeContent("<? echo $myobj->title() ?>");
setMoreContent("<? echo $myobj->description() ?>");

次に、少しバックアップします。

まず、JSを簡単に分割できます。このように、ファイルごとにスクリプトタグを作成するだけです。

<script src="main.js"></script>
<script src="page.js"></script>
<script src="player.js"></script>

これで順番に読み込まれるので、main最初に読み込まれることを確認できます。

// main.js
var Site = {
  // functions
};

// page.js
Site.Page = {
  // functions
};

// player.js
Site.Player = {
  // functions
};

PHPからのデータについては、JSONとしてページにエクスポートし、独自の変数に保存します。

var myObj = <? echo myObj->toJSON() ?>;
Site.Page.setContentForObject(myObj);

その後、JSファイルで宣言した関数に完全に渡されます。このように、データとロジックの分離はかなりクリーンなままです。

于 2012-07-24T01:21:54.780 に答える