jquery封装
jQuery 封装的基本概念
jQuery 封装的核心是通过闭包和原型链将常用 DOM 操作、事件处理、动画效果等功能封装成简洁的 API。其设计目标是简化 JavaScript 开发，提供跨浏览器兼容性。
实现简易 jQuery 封装
以下是一个简化版的 jQuery 封装示例，展示如何实现基础功能：
(function(window) {
// 构造函数
function jQuery(selector) {
return new jQuery.fn.init(selector);
}
// 原型方法
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
init: function(selector) {
if (!selector) return this;
if (selector.nodeType) {
this[0] = selector;
this.length = 1;
return this;
}
const elements = document.querySelectorAll(selector);
Array.from(elements).forEach((el, i) => {
this[i] = el;
});
this.length = elements.length;
return this;
},
css: function(property, value) {
if (value === undefined) {
return this[0].style[property];
}
for (let i = 0; i < this.length; i++) {
this[i].style[property] = value;
}
return this;
},
on: function(event, handler) {
for (let i = 0; i < this.length; i++) {
this[i].addEventListener(event, handler);
}
return this;
}
};
// 初始化方法挂载到原型
jQuery.fn.init.prototype = jQuery.fn;
// 暴露到全局
window.$ = window.jQuery = jQuery;
})(window);封装的关键技术点
-
闭包隔离作用域
通过立即执行函数（IIFE）避免污染全局命名空间，仅暴露$和jQuery到全局。 -
链式调用设计
每个方法返回this（即当前对象实例），支持连续调用如$('div').css('color', 'red').on('click', handler)。 -
原型继承优化
将公共方法定义在jQuery.prototype上，所有实例共享方法，减少内存占用。 -
兼容性处理
实际 jQuery 源码中会针对不同浏览器特性（如事件绑定、AJAX 等）做兼容性判断。
扩展封装功能
可根据需求进一步扩展方法：
jQuery.fn.extend({
hide: function() {
return this.css('display', 'none');
},
show: function() {
return this.css('display', 'block');
}
});实际应用示例
// 使用封装的 jQuery
$('#demo').css('color', 'blue').on('click', () => {
console.log('Clicked!');
});注意事项
- 完整 jQuery 封装需处理更多边界情况（如参数类型校验、DOM 操作性能优化等）。
- 现代开发中可直接使用原生 JavaScript 或现代框架（如 React/Vue），但理解 jQuery 封装原理有助于掌握设计模式。
