5

在我的网站上，我有一个全局 Javascript 文件，其中包括 jQuery 和用于下拉菜单的代码等。许多页面还具有针对特定页面的次要交互、表格等的自定义 Javascript。

我当前对每个视图的设置是一个header.php文件，基本上涵盖了从 doctype 到内容开始、特定页面的视图文件和footer.php关闭页面的所有内容。

目前global.js是从<head>. 为了提高性能，我们应该将 JS 放在页面的最底部，但我想不出一个好的方法来做到这一点。我可以为global.js自定义脚本块添加完整的脚本行，但这意味着我必须在每个页面上添加它，即使没有其他 Javascript。有没有更好的方法将 JS 移到底部？

4

7 回答 7

2

您可以将自定义 JS 放在常规变量或nowdoc (php 5.3.0+) 中，然后在页脚中回显该变量以及脚本标记（如果存在）。Nowdoc 可能更可取，因为您可以在 JS 中同时使用双引号和单引号，并且PHP 不会解析/转义文本。

someview.php：

<?php 
$custom_js = "
alert('custom js ran');
";
?>

<?php 
$custom_js = <<<'CUSTOM_JS'
alert("custom js ran (i'm in a nowdoc!)");
CUSTOM_JS;
?>

页脚.php：

<?php if(isset($custom_js)) { ?>
    <script><?php echo $custom_js; ?></script>
<?php } ?>

编辑2： 如果您不想将javascript放在字符串中，您可以将javascript放在单独的文件中，然后使用PHP将其作为字符串file_get_contents()加载到变量中。$custom_js

编辑： 这只是一个问题，但您可能会考虑使用 Carabiner 库来加载 JS 和 CSS。这是一个很棒的图书馆。它可能不一定对您当前的问题有所帮助，但如果您的 global.js 非常大，您可以将其拆分并使用 Carabiner 在加载时压缩/连接。我目前使用它来选择在我当前的 CI 项目中为登录和注销的用户加载哪些 JS 和 CSS。

于 2012-07-31T23:44:28.087 回答
2

也许我错过了一些东西 - 但是为什么你不能加载另一个只包含 js 代码的视图？

您的模板：

$this->load->view("header.php");
$this->load->view("content.php", $data);
$this->load->view("footer.php", $load_js);

然后在footer.php中：

   // start of footer stuff here
   $this->load->view($load_js);
</body>
</html>

然后在 page1.php 中：

<script>
   // Your scripts here
</script>

或者：

您的模板：

$this->load->view("header.php");
$this->load->view("content.php", $data);

然后在每个“content.php”文件中：

 // Content goes here
$data['load_js'] = "page1.php";
$this->load->view("footer.php", $data);

然后在单个“footer.php”文件中：

   // start of footer stuff here
   $this->load->view($load_js);
</body>
</html>

然后在 page1.php 中：

<script>
   // Your scripts here
</script>

第二种方法可能更符合您的要求。这确实意味着您需要在每个内容文件中调用页脚 - 但它实际上是一行 - 所以您并没有真正重复自己 - 但它使您可以完全控制内容文件内部，特别是要加载的任何 js 文件。

您可以扩展它并使 $load_js 变量成为要加载的 js 文件数组。

于 2012-08-10T12:21:58.243 回答
1

我使用一组布局，它们是提供站点基本结构的视图。每个控制器调用一个布局并将特定于该控制器方法的内容传递给它。

例如，假设您有一个布局：

<html>
  <head>
    <title><?php echo $page->title ?></title>
    <?php if (count($page->css)): ?>
       <?php for ($i=0; $i < count($page->css); $i++): ?>
         <link rel="stylesheet" href="<?php echo $page->css[$i] ?>"/>
       <?php endfor; ?>
    <?php endif; ?>
  </head>
  <body>
    <?php $this->load->view('header.php'); ?>

    <?php $this->load->view($content); ?>        

    <?php $this->load->view('footer.php'); ?>

    <?php if (count($page->js)): ?>
      <?php for ($i=0; $i < count($page->js); $i++): ?>
        <script src="<?php echo $page->js[$i] ?>"></script>
      <?php endfor; ?>
    <?php endif; ?>
  </body>
</html>

每个页面传入一个$page包含 css 和 js 文件数组的对象。对于全局文件，例如 global.js，您可以在底部硬编码（与顶部的全局 CSS 相同）。或者，您可以设置所有控制器都继承自的父控制器。这样您就可以$page使用默认设置（包括添加 global.js）来设置对象。然后，如果不需要，每个控制器/方法都可以删除 global.js。

每个页面还传入一个$content带有页面主视图位置的变量。

您可以通过拥有多个布局并将一些 HTML 移动到布局中（例如 1 列、2 列、3 列布局）来进一步扩展它。在这些情况下，您可以为每列传递多个视图位置，等等。这完全取决于您。

当然，要将所有 JS 保持在底部，您需要将所有特定于页面的自定义 JS 移动到 JS 文件中。考虑到可以缓存外部 JS，这实际上是最好的方法。

于 2012-08-10T07:48:24.757 回答
0

做一个辅助函数；并加载包含该global.js脚本的视图。每当您需要将 global.js 放在页面底部时，只需调用该辅助函数即可。

于 2012-07-31T23:48:24.647 回答
0

另一种选择是使用模板库。

我用的是Williams Concepts的这个。
它允许您为单个类/方法调用添加 JS（和 CSS）。
例如：

class foo exends Controller {
    public function bar() {
        $this->template->add_js('js/jquery.js');
        $this->template->add_js('alert("Hello!");', 'embed');

        $data = $this->some_model->get_data();
        $this->template->write_view('content', 'user/profile', $data;

        $this->template->render();
    }
}

使用它，您可以在需要时添加 JS，或者将其添加到站点的模板中。
在您的情况下，当您可以添加所需的任何 JS 时，我会在模板的页脚中添加 global.js 或在模板的页脚中定义一个区域。

于 2012-08-14T16:07:34.717 回答
0

控制器/添加功能

public function add()
    {
        $data['page_title'] = 'Test | Add Details';
        $data['js'] = array('details','details2');

        $this->load->view('template/header',$data);
        $this->load->view('details/add');
        $this->load->view('template/footer',$data);
    }

在您的页脚模板中加载所有需要的常用脚本，如 jquery.min.js、bootstrap.min.js 等。稍后添加以下代码

页脚

 <!-- Jquery Core Js -->
    <script src="<?= base_url() ?>assets/plugins/jquery/jquery.min.js"></script>

    <!-- Bootstrap Core Js -->
    <script src="<?= base_url() ?>assets/plugins/bootstrap/js/bootstrap.js"></script>   

    <?php 
    if(isset($js) && count($js) > 0)
    {
        for($i=0;$i<count($js);$i++)
        {

    ?>
        <script src="<?= base_url() ?>assets/js/custom/<?= $js[$i] ?>.js"></script>
    <?php
        }
    } 
    ?>
</body>
</html>

将要加载的所有js文件传递到数组中。

于 2017-01-17T12:31:19.977 回答
-1

如果你有一个包含在每个页面上的 footer.php 文件，为什么你不能把你的 js 代码放在那个文件中呢？

于 2012-08-14T18:33:05.500 回答