Статьи по программированию

Шпаргалка по переходу от jQuery к vanilla JavaScript

26 августа 2019  

Например, сценарий использования для большей части всего Интернета, включение заголовка и футера для всех страниц:

 

<body>
   <include src="./header.html"></include>

Это выполнит включение на уровне сервера, и запрос будет выполнен на уровне файловой системы на сервере, поэтому это должно быть намного быстрее, чем решение на стороне клиента.

Использовать Gulp
Что может быть еще быстрее, чем на стороне сервера? Если включение предварительно обрабатывается еще до того, как оно будет на сервере. У Gulp есть множество процессоров, которые могут это делать. Одним из них является gulp-file-include. Это будет выглядеть так:
 
   Content
 
   <include src="./footer.html"></include>
</body>
...

 

Это не реально, кстати. Я просто хотел бы, чтобы вы поняли, о чем речь.

Люди искали другие языки, чтобы решить эту проблему. В некотором смысле, это предварительная обработка HTML. Задолго до того, как мы обрабатывали CSS, мы использовали инструменты для манипулирования HTML. И мы до сих пор делаем это, потому что идея включений полезна практически для любого веб-сайта в мире.

Использовать PHP

Можете ли вы использовать вместо этого PHP?

 

<body>
   <?php include "./header.html" ?>
 
   Content
 
   <?php include "./footer.html" ?>
</body>

 

Это выполнит включение на уровне сервера, и запрос будет выполнен на уровне файловой системы на сервере, поэтому это должно быть намного быстрее, чем решение на стороне клиента.

Использовать Gulp

Что может быть еще быстрее, чем на стороне сервера? Если включение предварительно обрабатывается еще до того, как оно будет на сервере. У Gulp есть множество процессоров, которые могут это делать. Одним из них является gulp-file-include. Это будет выглядеть так:

 

<body>
 @@include('./header.html')

 Content

 @@include('./footer.html')
</body>

 

И вы бы обработали это так:

 

<?php
var fileinclude = require('gulp-file-include'),
  gulp = require('gulp');
 
gulp.task('fileinclude', function() {
  gulp.src(['index.html'])
 .pipe(fileinclude({
 prefix: '@@',
 basepath: '@file'
 }))
 .pipe(gulp.dest('./'));
});
?>

 

Похоже, что этот конкретный плагин имеет необычные функции, в которых вы можете передавать переменные во включения, что позволяет создавать небольшие компоненты, управляемые данными.

Использовать Grunt

Это то, что делает плагин grunt-bake. Вы настраиваете Grunt для обработки HTML:

 

<?php
grunt.initConfig({
 bake: {
 your_target: {
 files: {
 "dist/index.html": "app/index.html",
 }
 }
 }
});
?>

 

Тогда HTML может использовать этот специальный синтаксис для включений:

 

<?php
<body>
 <!--(bake header.html)-->

 Content

 <!--(bake footer.html)-->
</body>
?>