0

我有一个使用 javascript 对象来保存各种函数和变量数据的站点。

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

我面临的问题是脚本所在的头文件已经增长到大约 500 行代码。我想将页面和播放器等部分分解为单独的文件，以便于操作。这样做的一个障碍是一些函数依赖于 PHP 的输出，并且必须保留在基本页面上。有没有办法可以将单独的文件包含到对象中并保留现有的结构？

4

2 回答 2

1

请注意，按照惯例，以大写字母开头的变量是为构造函数保留的。

文件 1：

var Site = Site || {};

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

文件 2：

var Site = Site || {};

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

您还可以使用扩展函数来声明对象字面量，然后将属性和值复制到基础对象。或者您可以使用 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 回答