javascript - 动态加载 CSS 和 JS 文件

Question

大家好。

我有一些关于动态加载 CSS 和 JS 文件的问题。

我知道周围有很多这样的问题。但我关心的是:

我应该使用后端程序来加载CSS和JS吗？

例子:

if($page == "abc.com") {
    echo "<link href='abc.css' />";
else if($page == "def.com") {
    echo "<link href='def.css' />";
else {
    echo "<link href='ghi.css' />";
}

在特定页面中使用函数加载特定 CSS，但它在 部分内声明。

Dynamically Add CSS and JS File - CodeIgniter

abc.com 内部

add_css(array('metro-admin.css', 'abc.css'));  
echo put_headers();

源代码是这样的。

Answer 1

好的，我有一个解决方案，不是在 PHP 中显式声明 css，而是让 PHP 回显 <script>标签是为了让 PHP 不至于过多侵入前端。

if($page == "abc.com") {
    echo "<script src='abc.js'></script>";
else if($page == "def.com") {
    echo "<script src='def.js'></script>";
else {
    echo "<script src='ghi.js'></script>";
}

好的，PHP 方面已经完成，现在我们将破解单个脚本文件中的脚本执行。

--== ABC.JS ===--

  var includeFiles = [ 
    'abc'
  ];

    for (var i = 0; i < includeFiles.length; i++) {
        $('head').append("<link rel='stylesheet' href=' +includeFiles[i]+ ".css'>");
    }

当然，您会为每个文件应用相同的代码，这可能会在 D.R.Y 上崩溃，但由于此脚本仅在 PHP 明确回显时才会执行，因此不会重复, 所以双方都有争论。

为什么要使用数组？可移植性，如果您想在每个页面添加多个 CSS 文件，那么只需将 CSS 文件名添加到数组中，循环就会相应地处理它。