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

在前端开发中，jQuery 的 $ 功能非常强大且方便，它允许开发者通过选择器快速获取和操作 DOM 元素。如果你想要封装一个类似的功能，可以使用原生的 JavaScript 来实现。以下是一个简单的示例，展示如何封装一个类似 jQuery $ 函数的基础版本：

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

        // 返回匹配选择器的元素（集合）
        var elements = document.querySelectorAll(selector);
        return (elements.length > 1) ? elements : (elements[0] || null);
    };

    // 扩展 $ 对象，添加更多方法（可选）
    $.fn = {
        // 示例方法：隐藏元素
        hide: function() {
            this.style.display = 'none';
            return this; // 支持链式调用
        },
        // 示例方法：显示元素
        show: function() {
            this.style.display = 'block';
            return this; // 支持链式调用
        }
        // 可以继续添加更多方法...
    };

    // 为单个元素扩展方法（如果返回的是单个元素）
    var enhanceElement = function(element) {
        if (!element || typeof element !== 'object') return element;
        for (var key in $.fn) {
            if ($.fn.hasOwnProperty(key)) {
                element[key] = $.fn[key];
            }
        }
        return element;
    };

    // 重写 $ 函数，使其支持链式调用
    global.$ = function(selector) {
        var result = $(selector); // 调用原始的 $ 函数
        if (result instanceof NodeList) { // 如果返回的是元素集合，则分别扩展方法
            var enhancedElements = [];
            for (var i = 0; i < result.length; i++) {
                enhancedElements.push(enhanceElement(result[i]));
            }
            return enhancedElements; // 返回扩展了方法的元素集合
        } else {
            return enhanceElement(result); // 返回扩展了方法的单个元素
        }
    };
})(window); // 将 $ 绑定到全局对象（window）上，以便在全局范围内使用

这个示例代码创建了一个全局的 $ 函数，它接受一个选择器作为参数，并返回匹配该选择器的 DOM 元素（或元素集合）。此外，它还允许你通过 $.fn 对象扩展 $ 函数的功能，为其添加更多的方法。这些方法可以通过链式调用的方式使用，类似于 jQuery。

请注意，这个示例只是一个简单的起点，它并没有实现 jQuery 的所有功能。如果你需要更高级的功能（如事件处理、动画效果等），你可能需要投入更多的时间和精力来扩展和完善这个基础框架。

另外，随着现代前端框架（如 React、Vue、Angular 等）的流行，直接操作 DOM 的需求已经减少了很多。这些框架提供了更高级和声明式的方式来管理 UI，因此在某些情况下，你可能不需要（或不想）自己封装类似 jQuery 的工具函数。