如何用原生JavaScript实现类似Slick Carousel的元素自定义函数调用？

当然可以用原生JavaScript实现类似Slick Carousel的初始化方式，核心思路有两种，同时也有对应的技术名称：

1. 直接扩展DOM元素原型（原型扩展） #

通过给Element对象的原型添加自定义方法，让所有DOM元素都能直接调用该方法，和jQuery的实现逻辑高度相似：

// 扩展Element原型，添加自定义方法
Element.prototype.customFunction = function() {
  // this指向当前调用方法的DOM元素
  console.log('当前操作的元素:', this);
  // 这里可以编写轮播初始化逻辑，比如添加类、绑定事件等
  this.classList.add('carousel-initialized');
  
  // 返回this以支持链式调用（可选，参考jQuery的设计）
  return this;
};

// 使用示例
const myElement = document.getElementById('example-1');
myElement.customFunction();

// 链式调用示例
myElement.customFunction().style.border = '1px solid #ccc';

注意：直接扩展原生原型可能存在命名冲突风险，若要避免可以使用Symbol作为方法名：

const customFuncSymbol = Symbol('customFunction');
Element.prototype[customFuncSymbol] = function() {
  // 逻辑同上
};

// 调用方式
myElement[customFuncSymbol]();

2. 封装DOM包装器（包装器模式） #

如果不想污染原生DOM原型，可以封装一个类似jQuery的包装对象，把DOM元素包裹在自定义对象中，通过对象方法操作元素：

// 自定义包装器函数，模拟jQuery的选择器逻辑
function $carousel(selector) {
  const elements = document.querySelectorAll(selector);
  
  return {
    // 自定义初始化方法
    init: function() {
      elements.forEach(el => {
        // 对每个选中的元素执行轮播初始化
        el.classList.add('carousel-ready');
        // 绑定切换事件、初始化轮播结构等逻辑
      });
      // 返回自身支持链式调用
      return this;
    },
    // 可扩展更多轮播相关方法
    slideTo: function(index) {
      elements.forEach(el => {
        // 实现跳转到指定轮播项的逻辑
      });
      return this;
    }
  };
}

// 使用示例，和Slick的调用方式几乎一致
$carousel('#example-1').init();
// 链式调用
$carousel('#example-1').init().slideTo(2);

技术名称说明 #

• 第一种直接扩展DOM原型的方式，技术上称为DOM原型扩展（DOM Prototype Extension）；
• 第二种包装器模式，属于链式API设计的一种具体实现，也被称为DOM包装器（DOM Wrapper），这正是jQuery和Slick Carousel采用的核心设计模式。

内容的提问来源于stack exchange，提问作者Rob