JavaScript链式调用实现：创建工厂与原型方法

链式调用是JavaScript中一种高效的编程风格，它允许开发者通过连续调用一系列方法，构建简洁的代码来处理复杂的DOM操作。这种方法的核心是利用构造函数和原型链的概念。以下是对链式调用在JavaScript中的实现方式的详细解释： 首先，我们有一个私有类`_$`，它接受一个类数组（即包含多个元素的数组或类数组对象）作为参数。`_$`构造函数内部创建了一个空数组`elements`来存储HTML元素。当传入的参数是字符串时，构造函数会尝试通过`getElementById`获取对应的DOM元素，并将其添加到数组中。 ```javascript function _$(els) { this.elements = []; for (var i = 0, len = els.length; i < len; i++) { var element = els[i]; if (typeof element === 'string') { element = document.getElementById(element); } this.elements.push(element); } } ``` `_$`类的原型（`.prototype`）上定义了一系列操作方法，如`each`、`setStyle`、`show`和`addEventListener`等。这些方法的作用分别是对HTML元素集合执行遍历、设置样式、显示元素以及添加事件监听器。例如，`each`方法接受一个回调函数，将每个元素传递给它，执行完成后返回当前的`this`对象，以便支持链式调用。 ```javascript _$.prototype = { each: function(fn) { for (var i = 0; i < this.elements.length; i++) { fn.call(this, this.elements[i]); } return this; // 返回当前实例，允许链式调用 }, setStyle: function(prop, value) { // ... 实现设置样式的方法 }, show: function() { // ... 实现显示元素的方法 }, addEvent: function(eventName, callback) { // ... 实现添加事件的方法 }, }; ``` 最后，为了让外部可以使用链式调用，`_$`构造函数作为公开接口被暴露在`window`对象上，通过`window.$`函数返回一个新的`_$`实例。当用户调用`$.method()`时，实际上是调用了原型上的相应方法，然后返回当前实例，形成链式调用。 通过这种方式，JavaScript链式调用允许开发者以简洁的方式编写针对DOM操作的代码，提高了代码的可读性和维护性。同时，这种设计也体现了JavaScript面向对象编程的特点，即复用和扩展。