Heim > Web-Frontend > js-Tutorial > Hauptteil

include führt Methoden zur Implementierung von öffentlichem Code ein

小云云
Freigeben: 2018-02-02 13:08:21
Original
2918 Leute haben es durchsucht

Das Frontend unseres Unternehmens verwendet seit langem die Include-Funktion von PHP, um allgemeine Codes wie Kopf- und Fußzeilen einzuführen. Dieser Artikel enthält hauptsächlich ein Beispiel für die Implementierung von Include, um allgemeine Codes in eine statische Seite einzuführen. Der Herausgeber findet es ziemlich gut, deshalb teile ich es jetzt mit Ihnen und gebe es als Referenz. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

So:


<!-- index.php -->
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <?php include(&#39;header.php&#39;); ?>
  <p>页面主体部分</p>
  <?php include(&#39;footer.php&#39;); ?>
</body>
</html>
Nach dem Login kopieren


<!-- header.php -->
<header>这是头部</header>
Nach dem Login kopieren


<!-- footer.php -->
<footer>这是底部</footer>
Nach dem Login kopieren

Bis vor kurzem musste ein Projekt eine Webanwendung erstellen und die statische Seite wurde über HBuilder in eine APP gepackt, was zu einem Problem bei mir führte.

Wenn es sich um ein kleines Projekt handelt, kopieren Sie es einfach mehrmals manuell und fügen Sie es manuell ein. Wenn es jedoch viele Seiten gibt, ist die Copy-Paste-Lösung offensichtlich unzuverlässig und die Wartungskosten sind hoch.

Nachdem ich viele Informationen überprüft hatte, entschied ich mich schließlich, gulp zu verwenden, um das Problem zu lösen. Die spezifischen Vorgänge sind wie folgt:

1. file-include

Erstellen Sie zuerst einen neuen Ordner, suchen Sie den Speicherort des Ordners im Terminal und initialisieren Sie dann npm


npm init
Nach dem Login kopieren

Dann installiere gulp


npm install gulp --save-dev
Nach dem Login kopieren

Dann installiere gulp-file-include


npm install gulp-file-include --save-dev
Nach dem Login kopieren

2. Erstellen und konfigurieren Sie gulpfile.js

Dann erstellen wir manuell eine neue js-Datei mit dem Namen gulpfile und schreiben den folgenden Code hinein:


var gulp = require(&#39;gulp&#39;);
var fileinclude = require(&#39;gulp-file-include&#39;);
 
gulp.task(&#39;fileinclude&#39;, function () {
  // 适配page中所有文件夹下的所有html,排除page下的include文件夹中html
  gulp.src([&#39;page/**/*.html&#39;, &#39;!page/include/**.html&#39;])
    .pipe(fileinclude({
      prefix: &#39;@@&#39;,
      basepath: &#39;@file&#39;
    }))
    .pipe(gulp.dest(&#39;dist&#39;));
});
Nach dem Login kopieren

3. Erstellen Sie die Projektverzeichnisstruktur und fügen Sie den Testcode hinzu

Die Gesamtverzeichnisstruktur des Projekts sollte so aussehen


app

 page

  include

   header.html

   footer.html

  index.html

 gulpfile.js

 package.json
Nach dem Login kopieren

Dann fügen wir den Testcode hinzu. Zu header.html und footer.html gibt es nicht viel zu sagen. Die Hauptsache ist, dass index.html zahlen sollte Besonderes Augenmerk liegt auf der Art und Weise, wie es eingeführt wird:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  @@include(&#39;include/header.html&#39;)
  <p>页面主体部分</p>
  @@include(&#39;include/footer.html&#39;)
</body>
</html>
Nach dem Login kopieren

4 >Geben Sie den folgenden Code in das Terminal ein, um den Ausführungseffekt zu sehen


Sie werden feststellen, dass es einen zusätzlichen dist-Ordner mit einer index.html-Datei gibt gulp-file-include hat uns dabei geholfen, die endgültige kompilierte Datei index.html zu generieren.

gulp fileinclude
Nach dem Login kopieren
Vielleicht können Sie bereits Schlussfolgerungen ziehen. In gulpfile.js können wir den Speicherort der endgültig generierten Datei manuell festlegen. Dies ist dieser Satz


gulp.dest(&#39;dist&#39;)
Nach dem Login kopieren
5. Automatische Kompilierung

Das Problem der Einführung von öffentlichem Code in statische Seiten wurde gelöst, aber jedes Mal, wenn Sie den Quell-HTML schreiben, müssen Sie gehen an das Terminal senden und manuell ausführen. Der Kompilierungsvorgang ist immer noch sehr mühsam. Können die Dateien also automatisch kompiliert werden? Die Antwort muss ja sein.

gulp verfügt über eine Überwachungsmethode, mit der überwacht werden soll, ob sich die Datei geändert hat. Wir müssen die Datei gulpfile.js nur geringfügig ändern und einen Überwachungscode wie folgt hinzufügen:



Nach dem Schreiben müssen wir nur noch

var gulp = require(&#39;gulp&#39;);
var fileinclude = require(&#39;gulp-file-include&#39;);
 
gulp.task(&#39;fileinclude&#39;, function () {
  // 适配page中所有文件夹下的所有html,排除page下的include文件夹中html
  gulp.src([&#39;page/**/*.html&#39;, &#39;!page/include/**.html&#39;])
    .pipe(fileinclude({
      prefix: &#39;@@&#39;,
      basepath: &#39;@file&#39;
    }))
    .pipe(gulp.dest(&#39;dist&#39;));
});
 
gulp.task('watch', function () {
  gulp.watch('page/**/*.html', ['fileinclude']);
});
Nach dem Login kopieren


Jedes Mal, wenn wir den Quell-HTML speichern, schlucken hilft uns automatisch beim Kompilieren.

gulp watch
Nach dem Login kopieren
Bisher wurde das Problem, wie man Include in einer statischen Seite implementiert und öffentlichen Code einführt, erfolgreich gelöst. Abschließend sind relevante Informationen beigefügt.

Verwandte Empfehlungen:


So verwenden Sie den Inhalt der Include-Datei in HTML-Dateien

jQuery.load() und Jsp Detaillierte Erklärung des Unterschieds zwischen include

Der Unterschied zwischen include und require in PHP

Das obige ist der detaillierte Inhalt voninclude führt Methoden zur Implementierung von öffentlichem Code ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!