如何处理MVC网站中特定于视图的Javascript

How to deal with view specific Javascript in an MVC website

本文关键字：于视图 视图 Javascript 网站 何处理 处理 MVC      更新时间：2023-09-26

我知道这个问题已经被问过好几次了，但我似乎找不到一个合适的解决方法。

我使用CodeIgniter，这是一个遵循MVC(模型-视图-控制器)原则的PHP框架。

我有许多javascript文件，如jQuery和其他通用库，我需要在头标签中包含的每个页面。我也有视图特定的javascript，直接嵌入在一个脚本块的视图。

视图的示例customerInfo.php:

<script type="text/javascript">
    // some javascript here for customerInfo view
    // I MUST be able to use PHP variables in this script block ex:
    var customerName = "<?php echo $customerName; ?>";
</script>
<p class="someClass">Hello <?=$customerName?>, may the lord provide you with bananas</p>

我的网站布局如下:

<html>
<head>
    <script src="http://coolStorybro.com/jquery.js" type="text/javascript"></script>
    <script src="http://coolStorybro.com/commonStuff.js" type="text/javascript"></script>
</head>
<body>
<div class="header">some header stuff</div>
<div class="pageContent">
   <?php echo $view; ?>   // In this case, $view will hold the view customerInfo
</div>

</body>
</html>

我的目标是让我所有的javascript在同一个地方，所以我可以缩小它，并最终把它放在我的页面的底部加载优化。

我知道我可以将视图特定的javascript存储在一个名为customerInfo.js的单独文件中，并将其加载到head标签中，但我觉得为每个视图创建一个单独的javascript文件太多了，我将无法在其中使用PHP，这是我必须的。

所以我问你们，有没有解决我的问题，或者我注定要有我的页面聚集与脚本块周围?

谢谢你的时间。

编辑:

是否有一种方法可以将视图特定的javascript(所有视图)放在一个文件中，并以某种方式在模块中分离它，并且仅为所需的视图加载特定的模块?

假设viewsJS.js包含所有特定于视图的javascript:

module ("customerInfo", 
    $(".someClass").html("Bla bla bla");
);
module ("invoiceInfo", 
    // Some code to be executed when the invoiceInfo module is loaded
);

一旦定义了每个模块(视图)的javascript，就会有一种方法将它们加载到相应的视图中。问题是，我不能在我的视图中有一个脚本块来"加载"模块，所以…我笨。

在您的application/views

中创建此文件夹结构
/includes/javascript.php
/template.php
然后把你的主代码放在template.php: 
<html>
<head>
  <?php echo $this->load->view('includes/javascript'); ?>
</head>
<body>
<div class="header">some header stuff</div>
...
javascript.php in 
application/views/includes

，例如:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

最后的输出在浏览器中看起来像:

<html>
<head>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
</head>
<body>
<div class="header">some header stuff</div>
...

加载特定的javascript文件你可以在javascript视图中这样做:

<?php if (is_frontpage()) : ?>
   <script src="http://localhost/javascriptforfrontpage.js"></script>
<?php endif; ?>
<?php if (is_contact()) : ?>
   <script src="http://localhost/javscriptforcontactpage.js"></script>
<?php endif; ?>
<?php // this would be loaded everywhere ?>
<script src="http://localhost/javascripteverypage.js"></script>

只加载客户信息javascript:

第一次从控制器发送到视图$data['load_js_customer_info']，例如:

public function customerInfo()
    {
        $data['load_js_customer_info'] = "Customer Info";
        $data['customer'] = $this->mdl_admin->get_customer();
        $this->load->view('template', $data);
    }

并在视图中(包含所有javascript)创建一个条件:

 <?php if ($load_js_customer_info) : ?>
   <script src="http://localhost/javscriptforcustomerinfo.js"></script>
 <?php endif; ?>

所以，如果它不是来自客户信息控制器，则不加载javascript

相关文章：