大量的PHP:帮助前端任务的服务器端技术

以下是Zachary Brady的来宾帖子。 Zachary将带我们进入使用PHP的初学者之旅,以完成前端开发人员有时需要做的事情。 对我来说,这种事情并不能使我们成为后端开发人员,而是让我们变得更聪明。 Zachary在这里还专注于PHP,但是在任何后端语言中都可以使用相同的概念。

PHP有时会受到不好的说唱,但它不仅在某些最流行的CMS中而且还在新兴策略(例如带有服务器端组件的响应式设计(RESS))中持续存在并蓬勃发展。 我发现在前端开发工作流程中撒一些PHP可以增强代码并加快开发过程。

掌握足够的PHP基础知识以开始将其包含在您的工具包中并不是很困难或很耗时。 让我们开始探索如何将一个小的服务器端脚本混合到您的前端开发中既容易又有益。

一些PHP基础入门

如果您了解PHP基础知识,那么一定要跳到下一部分。 对于我们其他人,稍微刷一下可能会很好。

作为服务器端语言,PHP文件(例如index.phpmyAwesomeCatPhotos.php )在发送到浏览器之前已被服务器处理为HTML。 因此,在使用PHP文件时, 必须将它们托管在服务器上。 这可能是您的计算机上存在的远程服务器或本地服务器。 由于使用了MAMP之类的软件,因此设置起来实际上非常简单。 (此处为CSS-Tricks上的入门视频 )。

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

<div>
  <?php 
    echo "Hello World";
  ?>
</div>

<?php?>标记定义文件中使用PHP的位置。 专家提示 :如果您发现页面空白,请首先检查以确保您在任何地方都没有关闭的PHP标记。 echo函数将紧随其后的所有内容直接打印到标记中。 在这种情况下,被“回显”的是带有“ Hello World”字样的字符串。 在PHP中,以分号结尾的语句是强制性的 ; 缺少分号是脚本失败的另一个常见原因。 这个简单的PHP转换为

<div>
  Hello World
</div>

PHP中的变量可以写为$aWord$manyWords$a_lot_of_numbers$a4等。关键成分是变量名开头的$

使用变量,我们可以像下面这样编写以前的代码:

<div>
  <?php 
    $whatDoYouSay = "Hello World";
    echo $whatDoYouSay;
  ?>
</div>

PHP还具有for循环和if语句。 if语句询问问题并执行任务(如果问题被证明是正确的),并且可以与else语句(如果问题为假)结合执行任务。

<?php
  if ($a == 7) {
    echo "The variable $a is currently 7.";
  } else {
    echo "The variable $a is something else other than 7 and should feel ashamed of itself.";
  }
?>

如果$a等于7,则将回显第一个字符串,但如果$a等于5这样的愚蠢,则将回显第二条语句。

只要满足某些条件, for循环就可以重复使用一组代码。

<?php
  for ($d = 0; $d<7; $d++) {
    echo $d;
  }
?>

这表示我们将一个名为$d的变量设置为0,只要$d的值小于7,我们就会回显该值,并在每次迭代结束时将$d递增$d 。 这将产生“ 0123456”。

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

PHP的功能远不止于此,但是这些基础知识将引导我们完成本文的其余部分。 如果您仍然不太了解PHP,建议先阅读,然后再多读一些。 在上下文中查看这些概念可能有助于您更好地理解它们。

简单的PHP模板

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

通常,如果我们必须更改网站标题中的某些内容,则必须手动编辑项目中每个文件中的标题。 这是PHP逐步简化我们的工作的地方。 使用PHP,我们可以将与项目标题相关的标记存储在自己的文件中,并使用include()函数将代码添加到文件中。 当然,我们可以使用footer元素和我们可能要在多个页面上使用的任何其他代码片段执行相同的操作。

<?php include("includes/header.php"); ?>

<div>All of the main content of the page which should be more than just this.</div>

<?php include("includes/footer.php"); ?>

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

根据页面提供不同的文件

在每个页面上提供相同的页眉和页脚的一个缺点是,默认情况下,我们对将哪些文件提供给不同页面的控制较少。 我们可能只在主页上有一个图像滑块JavaScript文件,或者在联系页面上有一个用于表单验证的脚本。 值得庆幸的是,还有另一个简单的技巧可以帮助我们。

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

<?php
  $file = basename($_SERVER['PHP_SELF']);
  $pagename = str_replace(".php","",$file); 
?>

第一行从服务器获取文件的名称,第二行从服务器剥离文件的扩展名(第二行是为了使您的代码更简洁而更美观,但我仍然建议这样做)。 即使在打开<html>标记之前,我也倾向于将这一行代码放在文件的顶部。 这使我可以将此数据用于多种目的,例如生成类名。

此技巧的第二部分,确定要为哪个页面提供服务的脚本在结束body标记之前进入页脚。 我们将使用if / else语句组合来检查当前页面是否为联系页面 。 如果它是引用我的contact.min.js文件的脚本标签,那么如果没有,则我们将回显global.min.js文件。

<?php
  if ($pagename == 'contact') {
    echo '<script src="js/contact.min.js"></script>';
  } else { 
    echo '<script src="js/global.min.js"></script>';
  }
?>

该技术可以与您可能要包括的任何类型的外部文件一起使用。 我什至喜欢使用Grunt将我JavaScript组织到页面或部分特定的文件中,然后再使用此技术。

一点RESS可以走很长的路

我们可以对上面的示例进行更进一步的介绍,并使用类似的技术根据设备的上下文为不同的文件提供服务。 这是RESS解决方案的非常简单的示例。 RESS,具有服务器端组件的响应式设计,仅表示您正在将一些服务器端逻辑混入您的响应式设计工具包中,以进行诸如减少页面权重之类的出色工作。

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

<?php
  require_once 'scripts/Mobile_Detect.php';
  $detect = new Mobile_Detect;
?>

现在,我可以在页脚中使用if / else对,以决定用户是否正在使用移动设备并提供适当JavaScript文件。 注意 :由于Mobile Detect将平板电脑视为移动设备,因此我也在检查以确保该设备不是平板电脑。

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

使用这种技术,我们可以制作出更适合移动体验JavaScript,而忽略与大屏幕相关JavaScript可能产生的所有额外页面重量。

自动标记模式

您可能会发现自己拥有某些标记模式,这些标记模式可能不会共享相同的内容,但看起来彼此极为相似。 常见情况是显示一组属于同一图库对象的图像。 拉克· 申克Lara Schenck) ,拉基里(Luckiliy)最近在Smashing Conference NYC Jam会议上发表的精彩演讲中展示了这种解决方案。

// Function to print images
function printGalleryItem($path, $alt) {
  echo '<div class="gallery__item">';
    echo '<img src="' . $path . '" alt="' . $alt . '">';
  echo '</div>';
}

// Loop through image directory and printGalleryItem markup for each
function printGallery($dir, $alt) {
  echo '<div class="gallery">';
  $fdir = 'assets/img/galleries/' . $dir . '/*';
  foreach (glob($fdir) as $img_path) {  
    printGalleryItem($img_path, $alt);
  }
  echo '</div>';
}

与其他语言一样,在PHP中,可以创建自己的自定义函数,以使重用代码更加容易。

第一个函数printGalleryItem()为其alt标签获取图像和文本的相对路径,并使用div容器回显图像标签 。 第二个函数printGallery()获取包含图像和用于图像的alt标签的字符串的目录的相对路径。 该函数首先回显画廊的容器,然后使用称为foreach的for循环版本循环浏览glob函数获取的图像路径数组,并将其应用于我们的printGalleryItem()函数。 当您需要循环遍历变量数组并需要考虑每个变量的值时,foreach函数非常有用。

在此示例中,我仅提供一些高级的口头服务。 现在,仅需了解这些功能的作用以及如何为您的生产提供帮助。 尽管也有机会时进一步研究foreachglob函数可能会很好。 尝试自己创建一些功能,以使标记的某些更多冗余方面自动化。

这只是冰山一角

您可以在开发中使用少量PHP来完成很多工作。 大多数最有用的代码片段也很容易理解,而且您对PHP的了解越多,它就会变得越容易。 在将页面发送到浏览器之前,在服务器上做一点逻辑可以节省您的开发时间,使代码更加健壮,甚至可以减轻页面的负担。

无论您是PHP的新手还是以这种方式使用PHP的新手,本文中提到的技术都应该是一个不错的起点。 我强烈建议您当然要多做一些挖掘,也不要害怕尝试。 损坏的代码始终可以修复。 嘿,您可能最终会发现自己爱上了一些PHP。

翻译自: https://css-tricks.com/sprinkling-php-server-side-techniques-help-front-end-tasks/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值