Laravel 中创建可复用滑块组件的两种方法

本文介绍了在 Laravel 项目中创建可复用滑块组件的两种实用方法：使用 Blade include 和使用 View Composers。通过这两种方法，开发者可以避免代码重复，提高代码的可维护性和可读性，并更有效地管理视图逻辑。文章详细阐述了每种方法的实现步骤，并提供了示例代码，帮助开发者快速上手。

创建可复用滑块组件

在 Laravel 项目中，经常会遇到需要在多个页面中使用相同或相似的滑块组件的情况。为了避免代码重复，提高可维护性，我们可以将滑块组件封装成可复用的模块。本文将介绍两种实现方法：Blade include 和 View Composers。

方法一：使用 Blade include

Blade include 是 Laravel 提供的简单而强大的视图包含机制。我们可以将滑块组件的代码抽取到一个单独的 Blade 模板文件中，然后在需要使用该组件的页面中使用 @include 指令引入。

1. 创建滑块组件 Blade 模板文件：

   在 resources/views 目录下创建一个名为 slider.blade.php 的文件，并将滑块组件的 HTML 代码放入其中。

   <div class="section">     <div class="section-wrapper section-padding">         <div class="container">             <h2 class="section-title testimonials-title">What value our Clients set upon our Partnership</h2>              <div id="navWrapper" class="testimonials-nav">                 <div id="prevArrow" class="testimonials-nav__arrow">                     @@##@@                 </div>                 <div id="navText" class="testimonials-nav__text"></div>                 <div id="nextArrow" class="testimonials-nav__arrow">                     @@##@@                 </div>             </div>         </div>          <div class="testimonials-slider-wrapper">             <div id="testimonialsSlider" class="testimonials-slider">                 <div id="testimonialsSliderRow" class="testimonials-slider-row">                     @foreach($testimonials as $testimonial)                         <div class="testimonial">                              <div class="testimonial-image d-none d-lg-block" style="background-image: url({{ $testimonial->bg_image }})"></div>                             <div class="testimonial-image d-lg-none" style="background-image: url({{ isset($testimonial->bg_image_mobile) ? $testimonial->bg_image_mobile : $testimonial->bg_image }})"></div>                              <div class="testimonial-text">{{ $testimonial->short_description }}</div>                              <div class="testimonial-person">                                 <div class="testimonial-person__image">                                     @@##@@person_image }}" alt="{{ $testimonial->image_alt }}" title="{{ $testimonial->image_title }}">                                 </div>                                 <div class="testimonial-person__name">{{ $testimonial->person_name }}</div>                                 <div class="testimonial-person__position">{{ $testimonial->person_position }} - {{ $testimonial->person_location }}</div>                             </div>                         </div>                     @endforeach                  </div>             </div>         </div>     </div> </div>

   注意: 为了提高组件的通用性，可以考虑将变量名设置为更通用的名称。

2. 在需要使用滑块组件的页面中使用 @include 指令：

   在需要显示滑块的 Blade 模板文件中，使用 @include 指令引入 slider.blade.php，并传递所需的数据。

   @include('slider', [     'testimonials'=>[         (object) [             'bg_image'=>'image1.jpg',             'short_description'=>'test1',             'person_image'=>'test.jpg',             'image_alt'=>'test',             'image_title'=>'test',             'person_name'=>'Name',             'person_position'=>'Test',             'person_location'=>'test'         ],         (object) [             'bg_image'=>'image2.jpg',             'short_description'=>'test2',             'person_image'=>'test.jpg',             'image_alt'=>'test',             'image_title'=>'test',             'person_name'=>'Name',             'person_position'=>'Test',             'person_location'=>'test'         ]     ] ])

   这种方法的缺点是需要在每个使用滑块组件的页面中手动映射数据，如果映射逻辑比较复杂，会导致视图代码变得臃肿。

方法二：使用 View Composers

View Composers 是一种将数据绑定到视图的更高级的方法。它可以将数据准备逻辑从控制器转移到专门的类中，使控制器更加简洁，视图更加清晰。

1. 创建 View Composer 类：

   在 app/Http/ViewComposers 目录下创建一个 View Composer 类，例如 MyViewComposer.php。

   <?php  namespace AppHttpViewComposers;  use IlluminateViewView;  class MyViewComposer {     public function compose(View $view)     {         $view->with('slider', view('slider', [             'testimonials'=>[                 (object) [                     'bg_image'=>'image.jpg',                     'short_description'=>'test',                     'person_image'=>'test.jpg',                     'image_alt'=>'test',                     'image_title'=>'test',                     'person_name'=>'Name',                     'person_position'=>'Test',                     'person_location'=>'test'                 ],                 (object) [                     'bg_image'=>'image.jpg',                     'short_description'=>'test',                     'person_image'=>'test.jpg',                     'image_alt'=>'test',                     'image_title'=>'test',                     'person_name'=>'Name',                     'person_position'=>'Test',                     'person_location'=>'test'                 ]             ]          ]));     } }

   这个类负责准备滑块组件所需的数据，并将其绑定到视图中。

2. 在视图中使用滑块组件：

   在需要显示滑块的 Blade 模板文件中，添加以下代码：

   {!! $slider ?? '' !!}

   这会输出由 View Composer 生成的滑块组件的 HTML 代码。

3. 注册 View Composer：

   创建一个 Service Provider，例如 ViewComposerServiceProvider.php，并将其放置在 app/Providers 目录下。

   <?php  namespace AppProviders;  use AppHttpViewComposersMyViewComposer; use IlluminateSupportFacadesView; use IlluminateSupportServiceProvider;  class ViewComposerServiceProvider extends ServiceProvider {     /**      * Register bindings in the container.      *      * @return void      */     public function boot()     {         // Here you can register all the bindings         View::composer(             'welcome', MyViewComposer::class         );     }      /**      * Register the service provider.      *      * @return void      */     public function register()     {         //     } }

   这个 Service Provider 负责注册 View Composer，将其绑定到特定的视图。

4. 将 Service Provider 添加到 config/app.php：

   在 config/app.php 文件的 providers 数组中添加 AppProvidersViewComposerServiceProvider::class。

   return [     'providers'=>[         //..         AppProvidersViewComposerServiceProvider::class     ] ];

   完成以上步骤后，滑块组件将自动加载到 welcome.blade.php 视图中。

总结

本文介绍了两种在 Laravel 项目中创建可复用滑块组件的方法：Blade include 和 View Composers。Blade include 简单易用，但需要在每个使用滑块组件的页面中手动映射数据。View Composers 可以将数据准备逻辑从控制器转移到专门的类中，使控制器更加简洁，视图更加清晰，但配置相对复杂。开发者可以根据实际情况选择合适的方法。

注意事项:

• 可以创建多个 View Composers，并将它们绑定到不同的视图，从而实现更灵活的组件复用。
• 可以使用模板方法或基类来减少 View Composers 中的重复代码。
• 建议将视图逻辑尽量保持简单，复杂的逻辑应该放在控制器或 View Composers 中处理。