js 实现$方法

实现 $ 方法

在 JavaScript 中，$ 方法通常用于简化 DOM 操作，类似于 jQuery 的选择器功能。以下是几种实现方式：

基础实现

function $(selector) {
    return document.querySelector(selector);
}

扩展实现（支持多种参数类型）

function $(param) {
    if (typeof param === 'string') {
        return document.querySelector(param);
    } else if (typeof param === 'function') {
        document.addEventListener('DOMContentLoaded', param);
    } else if (param instanceof HTMLElement) {
        return param;
    }
}

类 jQuery 实现

function $(selector, context) {
    const elements = (context || document).querySelectorAll(selector);
    return elements.length === 1 ? elements[0] : Array.from(elements);
}

链式调用实现

function $(selector) {
    const elements = document.querySelectorAll(selector);
    return {
        elements,
        css: function(prop, value) {
            this.elements.forEach(el => el.style[prop] = value);
            return this;
        },
        hide: function() {
            this.elements.forEach(el => el.style.display = 'none');
            return this;
        },
        show: function() {
            this.elements.forEach(el => el.style.display = '';
            return this;
        }
    };
}

ES6 类实现

class $ {
    constructor(selector) {
        this.elements = document.querySelectorAll(selector);
    }

    css(prop, value) {
        this.elements.forEach(el => el.style[prop] = value);
        return this;
    }

    on(event, handler) {
        this.elements.forEach(el => el.addEventListener(event, handler));
        return this;
    }
}

这些实现可以根据具体需求进行调整和扩展。基础版本适合简单场景，而链式调用和类实现更适合需要更多功能的项目。