在CodeIgniter中放置JS脚本

Placement of JS script in CodeIgniter

本文关键字:JS 脚本 CodeIgniter      更新时间:2023-09-26

我对CodeIgniter相当陌生,目前正在开发几个网站。我相信人们对此可能有不同的看法,但是对于为什么要这样做有一个普遍的共识和解释是很有用的。

在没有CI等框架的情况下进行开发时,通常会将各种JS操作(监听器、jQuery调用等)放在页面的页脚。

对于CI,规范是包含一个公共页脚&但是如果我们把所有的JS,对于所有的页面,在这个页脚,我们调用的东西是不需要在每个页面。

解决这个/设置这个的最好方法是什么?

我没有任何经验,但对于我的下一个项目,我可能会尝试Carabiner。

来自GitHub项目:

Carabiner管理javascript和CSS资产。它将根据它是在生产环境中还是在开发环境中做出不同的反应。在生产环境中,它将组合、缩小和缓存资产。(随着文件的更改,将生成新的缓存文件。)在开发环境中,它只包含对原始资产的引用。

Carabiner允许您执行如下操作

// add a js file
$this->carabiner->js('scripts.js');
// add a css file
$this->carabiner->css('reset.css');

来添加CSS或js文件然后用

输出到页眉或页脚
// display css
$this->carabiner->display('css');
//display js
$this->carabiner->display('js');

我以前确实实现过类似的东西,但是这个库看起来比我自己构建的库要少得多。如果我是你,我一定会去看看的。

使用应用程序框架不是牺牲前端代码的借口。无论谁告诉你"使用CI,标准是包含一个公共页脚&是一个懒惰的开发者。

我过去所做的是这样的:

MY_html_helper.php

<?php
function js($js)
{
    $js_base_path = '';
    if(is_array($js))
    {
        foreach($js as $script_src)
        {
            if(strpos($script_src, 'http://') === false && strpos($script_src, 'https://') === false)
            {
                $js_base_path = base_url() . 'js/';
            }
            echo "<script src='"{$js_base_path}{$script_src}'"></script>";
        }
    }
    else
    {
        if(strpos($js, 'http://') === false && strpos($js, 'https://') === false)
        {
            $js_base_path = base_url() . 'js/';
        }
        echo "<script src='"{$js_base_path}{$js}'"></script>";
    }
}
?>
控制器

// many scripts
$this->load->view('_footer', array('js'=>array('whatever.js', 'plugin.js')));
// or a single script
$this->load->view('_footer', array('js'=>'jquery.cycle.lite.js'));
<<p> 视图/strong>
<?php
if(isset($js))
{
    $this->load->helper('html');
    js($js);
}
?>
<script src="/js/script.js"></script>

不必多说,但你可以根据自己的需要自定义

我建立的许多网站都不是那么繁忙,优先考虑的是易于维护。对于这些情况,我只是加载我需要的所有脚本,通常是jQuery核心和图像旋转器的相关插件等。

我的观点是,一旦主页被加载,脚本被缓存,所以额外的权重并不会真正影响网站的性能(特别是对于低流量的网站)。

然而,一个更大的问题与不同页面的jQuery操作有关。在CodeIgniter中,我以模板类型的方法使用嵌套视图来呈现页面。我经常发现自己在页面内容部分之后、页脚部分之前的<script>标记中放入特定于页面的jQuery动作。不是最好的,但至少我的jQuery动作接近相关的页面元素(通常是表单)。理想情况下,我会为每个页面创建一个特定的javascript文件,并从相关的CodeIgniter控制器加载它。当网站/应用程序稳定后,我通常会在从版本1到版本2的重构中这样做。

作为题外话,我更关心的是保持我的CSS文件的组织性和模块化。我的CSS比我的JS文件更容易变得混乱。

要点:如果你有一个繁忙的站点,性能是至关重要的,构建一个逐页的脚本加载到你的控制器中,并为每个页面维护一个JS文件,除了全局JS文件(和类似的CSS)。

如果你的网站不那么繁忙,只需加载所有的脚本和CSS文件在主页面模板(或通用页眉和页脚文件)的需要。

话虽如此,我宁愿花几分钟把代码写对,避免两年后当一个主要的站点升级请求时,有一个大的混乱要处理。

作为专业人士,我们努力提高我们的技能和部署策略,但不是每个网站项目都能完美地执行,因为所有的预算和时间都是有限的。在一天结束的时候,我们会在工作完成的时候得到报酬,即使不是100%完美。

我想说有几件事你可以做。您可以有许多不同的页脚链接到不同的脚本,并更改控制器中的页脚链接(例如footer-home.php或footer-about.php)。然后在标题中保留一般的脚本链接。

您还可以为特定页面编写个人脚本,并将它们包含在页面的主体部分(home.php或您在页眉和页脚之间挤压的任何内容)。

我想这取决于脚本的重量和使用频率。