PHP 点缀：帮助前端任务的服务器端技巧

以下是由 Zachary Brady 撰写的客座文章。Zachary 即将带我们踏上使用 PHP 进行一些前端开发人员有时需要做的事情的初学者之旅。在我看来，这种做法并不会让我们成为后端开发人员，而更像是资源丰富的 前端开发人员。Zachary 在这里也专注于 PHP，但同样的概念在任何后端语言中都是可用的。

PHP 有时会受到负面评价，但它仍然存在并蓬勃发展，不仅在一些最流行的 CMS 中，而且在诸如服务器端组件响应式设计 (RESS) 这样的新兴策略中也得到了应用。我发现，在前端开发工作流程中加入一点 PHP 可以增强代码并加快开发过程。

学习足够的 PHP 基础知识 以开始将其包含在您的工具集中并不困难或耗时。让我们直接开始探索如何在您的前端开发中混合一点服务器端脚本既简单又富有成效。

PHP 基础入门

如果您熟悉 PHP 的基础知识，那么可以直接跳到下一部分。对于我们其他人来说，可能需要稍微复习一下。

作为一种服务器端语言，PHP 文件（例如index.php 或myAwesomeCatPhotos.php）会在发送到浏览器之前由您的服务器处理成 HTML。因此，在使用 PHP 文件时，**必须**将其托管在服务器上。这可以是远程服务器，也可以是存在于您计算机上的本地服务器。由于有了像 MAMP 这样的软件，设置起来实际上相当简单。（CSS-Tricks 上的 入门视频）。

PHP 的一大优点是您可以将其与 PHP 文件中的普通 HTML 混合使用。

<?php 和 ?> 标签定义了您在文件中使用 PHP 的位置。**专业提示：**如果您发现您的页面变成了空白，首先检查一下您是否在任何地方都缺少了 PHP 结束标签。echo 函数将其后的任何内容直接打印到标记中。在本例中，“回显”的是一个包含“Hello World”字样的字符串。在 PHP 中，用分号结束语句是**必须的**；缺少分号是导致脚本失败的另一个常见原因。这段简单的 PHP 代码转换为

<code>

<code>

变量 在 PHP 中可以写成 $aWord、$manyWords、$a_lot_of_numbers、$a4 等。关键要素是在变量名称开头使用$。

<code>

使用变量，我们可以这样编写前面的代码

<code>

<code>

PHP 还具有for 循环和if 语句。if 语句会提出一个问题，如果问题被证明是正确的，则执行一项任务，并且可以与else 语句结合使用，如果问题是错误的，则执行一项任务。

<code>

<code>

如果$a 等于 7，则会回显第一个字符串，但如果$a 等于 5 这样的奇怪值，则会回显第二个语句。

<code>

for 循环用于重复执行一组代码，直到满足某个条件。

<code>

<code>

这意味着我们将一个名为$d 的变量设置为 0，只要它小于 7，我们就回显$d 的值，并在每次迭代结束时将$d 加 1。这会生成“0123456”。

<code>

我们还将使用函数include()，它获取另一个 PHP 文件的相对路径，找到路径指定的该文件，并将它的内容包含在调用它的文件中。

<code>

PHP 远不止这些，但这些基础知识将贯穿本文的其余部分。如果您仍然不确定 PHP，我建议先继续阅读，然后再稍微复习一下。在上下文中看到这些概念可能有助于您更好地理解它们。

<code>

简单的 PHP 模板

<code>

您可能会发现，在创建项目的每个页面的标记时，某些部分会重复出现。Web 项目中最常重复的部分是页眉和页脚。

<code>

通常，如果我们必须更改网站页眉中的某些内容，则必须手动编辑项目中每个文件中的页眉。这就是 PHP 提升我们的工作效率的地方。使用 PHP，我们可以将与项目页眉相关的标记存储在它自己的文件中，并使用include() 函数将代码添加到我们的文件中。当然，我们也可以对页脚元素和我们可能希望在多个页面上使用的任何其他代码段执行相同的操作。

<code>

<code>

在此示例中，header.php 和 footer.php 存储在一个名为“includes”的目录中，并在每个文件中进行引用。想象一下，仅凭此技巧就能节省多少开发时间。

<code>

根据页面提供不同的文件

<code>

在每个页面上提供相同的页眉和页脚的一个缺点是，默认情况下，我们对向不同页面提供哪些文件有较少的控制权。我们可能有一个图像滑块的 JavaScript 文件，我们只需要在主页上使用它，或者一个用于联系页面表单验证的脚本。谢天谢地，还有另一个简单的技巧可以帮助我们解决这个问题。

<code>

为了执行此技巧，我首先需要获取当前文件的名称并从中删除文件扩展名。

<code>

<code>

第一行从服务器获取文件的名称，第二行从该名称中删除文件扩展名（第二行更多是为了美观，使代码更简洁，但我仍然建议使用它）。我倾向于将这行代码放在文件的开头，甚至在打开<?php 标签之前；这使我可以将此数据用于各种目的，例如生成类名。

<code>

此技巧的第二部分，即决定为哪个页面提供哪些脚本，位于结束主体标签之前的页脚中。我们将使用 if/else 语句组合来检查当前页面是否为联系页面。如果是，则会回显一个引用我的contact.min.js 文件的脚本标签，否则我们将回显global.min.js 文件。

<code>

';
  } else { 
    echo '<script src="js/global.min.js"></script>';
  }
?&gt;

此技术可用于您可能想要包含的任何类型的外部文件。我甚至喜欢使用 Grunt 将我的 JavaScript 组织成特定于页面或部分的文件，然后使用此技术。

一点 RESS 可以走很远

我们可以进一步利用上面的示例，并使用类似的技术来提供根据设备上下文不同的文件。这是一个非常简单的 RESS 解决方案示例。RESS，即服务器端组件响应式设计，仅仅意味着您将一些服务器端逻辑混合到响应式设计工具集中，以便执行诸如减少页面重量之类的出色操作。

为此，我们需要一个名为 Mobile Detect 的 PHP 库，它提供了一种简单的方法来发现用户使用的设备类型。在项目中的某个位置包含该库，我喜欢将其放在“scripts”目录中，然后使用require_once 函数包含它。您还必须初始化Mobile_Detect 类的实例，我喜欢在页眉文件中包含之后立即执行此操作。

<code>

现在，我可以在页脚中使用if/else 对来决定用户是否正在使用移动设备，并提供相应的 JavaScript 文件。注意：因为 Mobile Detect 将平板电脑视为移动设备，所以我也会检查设备是否不是平板电脑。

<code>

    isMobile() && !$detect->isTablet()) {
    echo '<script src="js/global-mobile.min.js"></script>';
  } else{ 
    echo '<script src="js/global.min.js"></script>';
  }
?&gt;

<code>

使用此技术，我们可以制作更适合移动体验的 JavaScript，并忽略来自大屏幕相关 JavaScript 的所有额外页面重量。

<code>

自动标记模式

<code>

你可能会遇到一些标记模式，它们可能不共享相同的内容，但看起来却非常相似。一个常见的情况可能是显示属于同一图库对象的一组图像。幸运的是，Lara Schenck最近在她在纽约Smashing大会Jam Session上发表的一次精彩演讲中展示了这样的解决方案。

<code>

// Function to print images
function printGalleryItem($path, $alt) {
  echo '

';
}

// Loop through image directory and printGalleryItem markup for each
function printGallery($dir, $alt) {
  echo '

';
}

<code>

在PHP中，就像其他语言一样，可以创建自己的自定义函数，以便更容易地重用代码。

<code>

第一个函数printGalleryItem()，接收图像的相对路径及其alt标签的文本，并输出带有div容器的图像标签。第二个函数printGallery()，接收包含图像的目录的相对路径和一个要用于图像alt标签的字符串。该函数首先输出图库的容器，然后使用称为foreach的for循环版本遍历由glob函数获取的图像路径数组，并将它们应用于我们的printGalleryItem()函数。当需要遍历一个变量数组并对每个变量的值执行某些操作时，foreach函数非常有用。

<code>

这里还有一些更高级的概念，在本例中我仅是略微提及。目前，了解这些函数的作用以及它们如何帮助你的生产就足够了。不过，当你有机会时，最好进一步研究foreach和glob函数。尝试创建一些你自己的函数来自动化标记中一些更冗余的部分。

<code>

这仅仅是冰山一角

<code>

在你的开发中，使用一点PHP可以实现无限的可能性。大多数最有用的代码片段也很容易理解，而且你接触PHP越多，它就越容易上手。在将页面发送到浏览器之前，在服务器上进行一些逻辑处理可以节省开发时间，使你的代码更健壮，甚至可以减轻页面负担。

<code>

本文中提到的技术应该是一个很好的起点，无论你是PHP新手还是刚开始使用PHP。我强烈建议你进行更深入的研究，并且永远不要害怕尝试；损坏的代码总是可以修复的。而且，你最终可能会发现自己爱上了PHP。