封装一个类似jquery的$功能的方法

在前端开发中，封装一个类似 jQuery 的 $ 功能的方法通常意味着创建一个能够选择 DOM 元素并执行一些常见操作的简洁 API。以下是一个简单的示例，展示了如何使用原生 JavaScript 来实现这样的功能：

(function(global) {
    var $ = function(selector) {
        // 如果选择器是函数，则当 DOM 加载完成后执行
        if (typeof selector === 'function') {
            document.addEventListener('DOMContentLoaded', selector);
            return;
        }

        // 如果选择器是字符串，则返回匹配的元素列表
        if (typeof selector === 'string') {
            var elements = document.querySelectorAll(selector);
            return elements.length > 1 ? elements : elements[0];
        }

        // 如果选择器已经是元素，则直接返回
        return selector;
    };

    // 扩展原型，添加一些常用方法
    $.fn = {
        // 示例方法：添加类名
        addClass: function(className) {
            if (this.length) {
                for (var i = 0; i < this.length; i++) {
                    if (!this[i].classList.contains(className)) {
                        this[i].classList.add(className);
                    }
                }
            } else {
                if (!this.classList.contains(className)) {
                    this.classList.add(className);
                }
            }
            return this; // 实现链式调用
        },
        // 你可以继续添加更多方法，比如 removeClass, toggleClass, on, off 等
    };

    // 使选择器返回的结果能够使用原型链上的方法
    var extend = function(elements) {
        var obj = Object.create($.fn);
        obj.length = elements.length;
        for (var i = 0; i < elements.length; i++) {
            obj[i] = elements[i];
        }
        return obj;
    };

    // 重写 $ 函数，使其返回扩展后的对象
    var original$ = $;
    $ = function(selector) {
        var result = original$(selector);
        if (Array.isArray(result) || result.nodeType) { // 如果是元素列表或单个元素
            return extend(Array.isArray(result) ? result : [result]);
        }
        return result; // 如果是执行函数，则直接返回结果（通常是 undefined）
    };

    // 将 $ 添加到全局对象上，以便在全局范围内使用（类似 jQuery）
    global.$ = $;
})(window); // 传入 window 对象作为全局对象

这个示例代码创建了一个全局的 $ 函数，它可以用来选择 DOM 元素，并且为选定的元素添加了一些基本的方法，比如 addClass。你可以继续扩展这个原型，添加更多的方法，以实现类似 jQuery 的功能。注意，这个示例仅用于教学目的，并未包含错误处理、兼容性处理或性能优化等方面的代码。在实际项目中，你可能需要考虑这些因素。