在CodeIgniter中将javascript移到底部的策略

Strategy for moving javascript to the bottom in CodeIgniter?

本文关键字：底部 策略 CodeIgniter 中将 javascript      更新时间：2024-05-26

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

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

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

您可以将自定义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;
?>

footer.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。

  • Github上的钩环
  • Sparks上的钩环
  • 钩环文件

也许我错过了什么，但为什么不能加载另一个只包含js代码的视图呢？

您的模板：

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

然后在页脚内.php:

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

然后进入page1.php:

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

OR：

您的模板：

$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文件数组。

我使用一组布局，这些视图提供了站点的基本结构。每个控制器都调用一个布局，并将特定于该控制器方法的内容传递到其中。

例如，假设你有一个单一的布局：

<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相同）。或者，可以设置所有控制器都继承自的父控制器。通过这种方式，您可以使用默认设置（包括添加global.js）来设置$page对象。然后，如果不需要，每个控制器/方法都可以删除global.js。

每个页面还传递一个$content变量，其中包含页面主视图的位置。

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

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

制作一个助手函数；并加载包含该global.js脚本的视图。只要您需要global.js位于页面底部，就可以调用该助手函数。

另一个选项是使用模板库。

我用的是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，或者在模板的脚注中定义一个区域。

控制器/添加功能

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文件。

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

相关文章：