\n \n \n Zusammenfassung\n<\/h3>\n\n

\n
• \nSpeichern<\/strong>JavaScript-Dateien in resources\/js.<\/li>\n
• \nImportieren<\/strong> in app.js zur globalen Einbindung oder bei Bedarf direkt in Blade-Vorlagen einbinden.<\/li>\n
• \nKompilieren<\/strong>Assets mit Vite.<\/li>\n
• \nVerwenden Sie<\/strong> @vite in Blade-Vorlagen, um JavaScript zu laden.<\/li>\n<\/ul>\n\n

  Mit diesem Setup wird JavaScript in einem Laravel 11-Projekt auf der gesamten Website verfügbar sein.<\/p>\n\n\n

  ---

  \n\n

  \n \n \n 2. Grundlegendes zur Blade-Rendering-Reihenfolge\n<\/h2>\n\n

  Wenn Sie JavaScript bedingt in bestimmte Ansichten einbinden, ist es wichtig, die Reihenfolge zu verstehen, in der Blade-Vorlagen gerendert werden.<\/p>\n

  In Laravel werden Layouts zuerst verarbeitet<\/strong>, gefolgt von Einzelansichten und Teilansichten<\/strong>. Hier ist der Rendervorgang:<\/p>\n\n

  \n
  1. \nDas Layout wird zuerst gerendert<\/strong>, wobei Platzhalter (@yield und @section) für die Inhaltsinjektion erstellt werden.<\/li>\n
  2. \nAls n?chstes werden untergeordnete Ansichten oder Teilansichten verarbeitet<\/strong>, wobei ihr Inhalt in die Layout-Platzhalter eingefügt wird.<\/li>\n<\/ol>\n\n

     Aufgrund dieser Reihenfolge funktionieren Standardvariablenprüfungen nicht, wenn Sie JavaScript-Dateien basierend auf dem Inhalt der untergeordneten Ansicht bedingt zum Layout hinzufügen m?chten. Für eine flexiblere Handhabung von seitenspezifischem JavaScript müssen Sie die Anweisungen @stack<\/strong> und @push<\/strong> von Blade verwenden.<\/p>\n\n\n

     ---

     \n\n

     \n \n \n 3. Bedingtes Einbinden von JavaScript in bestimmte Ansichten mithilfe von Stack und Push\n<\/h2>\n\n

     Zum Hinzufügen von JavaScript zu bestimmten Ansichten bieten die @stack- und @push-Direktiven von Laravel eine effiziente L?sung, die es Ihnen erm?glicht, Skripte bedingt in das Layout einzuschlie?en.<\/p>\n\n

     \n \n \n Schritt 1: Definieren Sie einen Stapel in Ihrem Layout\n<\/h3>\n\n

     Erstellen Sie in Ihrem Layout einen Stapel für seitenspezifische Skripte:
     \n<\/p>\n\n

        import '.\/custom.js';\n<\/pre>\n\n\n\n
     \n  \n  \n  Schritt 2: Skripte aus untergeordneten Ansichten übertragen\n<\/h3>\n\n
     In der spezifischen Blade-Datei, die das JavaScript ben?tigt, in den Skriptstapel verschieben:
     \n<\/p>\n\n
        @vite('resources\/js\/custom.js')\n<\/pre>\n\n\n\n
     Bei diesem Setup werden ?custom.js“ nur einbezogen, wenn diese bestimmte Ansicht geladen wird. Diese Methode bietet eine saubere L?sung, die mit der Renderreihenfolge von Laravel funktioniert und sicherstellt, dass JavaScript-Dateien nach Bedarf bedingt eingebunden werden.<\/p>\n\n\n
     \n\n
     \n  \n  \n  Wo soll @push deklariert werden?\n<\/h2>\n\n
     Die Platzierung von @push-Anweisungen in einer Blade-Ansicht ist in erster Linie für die Lesbarkeit und die Reihenfolge der Ausführung wichtig. So nutzen Sie @push effektiv:<\/p>\n\n
     \n
     \nPlatzierung in der Ansicht<\/strong>: W?hrend Sie @push an einer beliebigen Stelle in einer Blade-Ansicht platzieren k?nnen, empfiehlt es sich, es am Ende der Datei zu platzieren, normalerweise nach dem @section-Inhalt. Dadurch bleibt der skriptbezogene Code vom Hauptinhalt getrennt, was die Lesbarkeit und Wartbarkeit verbessert.\n<\/li>\n<\/ol>\n\n
     import { defineConfig } from 'vite';\nimport laravel from 'laravel-vite-plugin';\n\nexport default defineConfig({\n    plugins: [\n        laravel({\n            input: ['resources\/js\/app.js'],\n            refresh: true,\n        }),\n    ],\n});\n<\/pre>\n\n\n\n
     \n
     \nReihenfolge mehrerer @push-Anweisungen<\/strong>: Wenn Sie mehrere @push-Deklarationen für denselben Stack haben (z. B. @push('scripts')), werden diese in der Reihenfolge angeh?ngt, in der sie in der Ansicht erscheinen. Zum Beispiel:\n<\/li>\n<\/ol>\n\n
     \n\n\n