Estoy tratando de fusionar varios códigos de varios archivos en uno. Todos tienen diferentes clases de js pero todas las mismas configuraciones de control deslizante en el interior. Me refiero a la parte initSlider() {...}); ¿Alguna idea de cómo fusionarlos en uno?
// 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();Del comentario sobre la respuesta de @Zulfe...
"Para el caso de uso del OP, se necesita exactamente un
ProductCarouselúnico (pero por una causa lo suficientemente genérica). En el momento de la creación de una instancia, además del objeto de datos específico de la presentación de diapositivas (por ejemplo,maxbrp_dataomaxcrp_data, etc.), tiene que pasar ambos nodos raíz selectores uno parathis.els(p. ej'.msbrps'o'.msxcps', etc.) y otro parainitSlider(p. ej'.new_products'o'.bestr_products', etc.). tarea, que, por ejemplo, en el momento de DOMContentLoaded se ocupa de todo lo que se debe inicializar".
// eg 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. // eg 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.Utilice la herencia para esto.
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); } }