将 JS 类中的多次重复代码重构为单个源

Question

我正在尝试将多个文件中的多个代码合并为一个。都有不同的 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();

Answer 1

为此使用 inheritance。

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);
    }
}

Answer 2

来自对@Zulfe 回答的评论...

"For the OP's use case one needs exactly a single (but of cause generic enough implemented) ProductCarousel. At instantiation time one, in addition to the slideshow specific data object (e.g. maxbrp_data or maxcrp_data, etc.), has to pass both root node selectors one for this.els (e.g. '.msbrps' or '.msxcps', etc.) and another one for initSlider (e.g. '.new_products' or '.bestr_products', etc.). Of cause there needs to be an initialization task, which e.g. at DOMContentLoaded time takes care of whatever needs to be initialized."

// 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.

将 JS 类中的多次重复代码重构为单个源

Refactor multiple times repeating code inside JS Classes into a single source

javascript

oop

refactoring

types

class

将 JS 类 中的多次重复代码重构为单个源

Refactor multiple times repeating code inside JS Classes into a single source

javascript

oop

refactoring

types

class

将 JS 类中的多次重复代码重构为单个源