將JS類中的多次重復代碼重構為單個源-有解無憂

我試圖將多個檔案中的多個代碼合并為一個。它們都有不同的 js 類，但內部都有相同的光滑滑塊設定。我的意思是部分initSlider() {...});知道如何將它們合并為一個嗎？

    // Code inside File one
    window.$ = window.jQuery = $ = jQuery;

    class BRPScarousel{
      constructor() {
          this.els = $('.msbrps');
          this.slidesToShow = maxbrp_data.slides_to_show;
          this.initSlider();
      }
      initSlider() {
        $('.new_products').css("visibility","visible");
        this.els.not('.slick-initialized').slick({ 
        // always the same
        });
      }
    }
    var sc = new BRPScarousel();
    

    // Code inside File two
    window.$ = window.jQuery = $ = jQuery;  

    class XCPScarousel{
      constructor() {
          this.els = $('.msxcps');
          this.slidesToShow = maxcrp_data.slides_to_show;
          this.initSlider();
      }
      initSlider() {
        $('.bestr_products').css("visibility","visible");
        this.els.not('.slick-initialized').slick({ 
        // always the same
        });
      }
    }
    var sc = new XCPScarousel();

uj5u.com熱心網友回復：

從對@Zulfe 回答的評論中......

“對于 OP 的用例，需要一個完全單一的（但由于實作了足夠通用的原因）ProductCarousel。在實體化時，除了幻燈片特定資料物件（例如maxbrp_data ormaxcrp_data等）之外，還必須傳遞兩個根節點選擇器一個this.els（例如'.msbrps'or'.msxcps'等）和另一個用于initSlider（例如'.new_products'or'.bestr_products'等）。原因需要有一個初始化任務，例如在 DOMContentLoaded 時間處理需要初始化的任何內容。

// e.g. file ... src/utils/ProductCarousel.js

class ProductCarousel {
  constructor(data, elementsSelector, sliderSelector) {
    
    this.els = $(elementsSelector);
    this.slidesToShow = data.slides_to_show;
    this.sliderSelector = sliderSelector
    
    this.initSlider();
  }
  initSlider() {
    $(this.sliderSelector).css("visibility", "visible");
    this.els.not('.slick-initialized').slick({ 
      // always the same
    });
  }
}
export default ProductCarousel;

// end of file.

// e.g. file ... src/main.js

import ProductCarousel from 'src/utils/ProductCarousel.js'

$(document).ready(() => {
  
  const brpsCarousel =
    new ProductCarousel(maxbrp_data, '.msbrps', '.new_products');
  const xcpsCarousel =
    new ProductCarousel(maxcrp_data, '.msxcps', '.bestr_products');
});

// end of file.

uj5u.com熱心網友回復：

為此使用繼承。

class SimpleCarousel {
    constructor(className, data) {
        this.els = $('.'   className);
        this.slidesToShow = data.slides_to_show;
        this.initSlider();
    }

    initSlider() {
        $('.bestr_products').css("visibility", "visible");
        this.els.not('.slick-initialized').slick({
            // always the same
        });
    }
}

class BRPScarousel extends SimpleCarousel {
    constructor() {
        super('msbrps', maxbrp_data);
    }
}

class XCPScarousel extends SimpleCarousel {
    constructor() {
        super('msxcps', maxcrp_data);
    }
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/421142.html

標籤：

上一篇：如何處理ctime包含在CPP中一個類的范圍內？

下一篇：單擊任何按鈕時提交PHP表單