封装jquery的心得

最新推荐文章于 2024-10-10 10:50:43 发布

╰执ヽ

最新推荐文章于 2024-10-10 10:50:43 发布

阅读量177

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/gh4188/article/details/128007152

版权

本文分享了封装jQuery的心得，讲解了jQuery如何通过匿名函数自执行来构建核心框架，避免命名空间污染。jQuery.prototype被用作中间层，确保返回的是jQuery实例。初始化过程包括构造函数和原型的定义，以及$.fn.extend和$.extend用于扩展jQuery对象和选择器的功能。

摘要由CSDN通过智能技术生成

首先jq整体是一个匿名函数自执行，
在网页加载时就已经执行
jQuery将jQuery.prototype赋值给jQuery.prototype.init的prototype作为中转站，最终return出了一个jQuery实例。将上述代码写在一个自执行函数内（形成私有作用域，避免命名空间污染），就构成了jQuery的核心框架。
然后初始化即

	function jQuery(selector){
   
		// 返回new 一个初始化函数
		return new jQuery.fn.init(selector);
	}

定义其构造函数显式原型

jQuery.fn =jQuery.prototype = {
   
		constructor:jQuery,
		jquery:"9.0.0",
		length:0,
	}

下一步初始化函数

jQuery.fn.init =function(selector){
   
		// 获取到选择列表
		var list = document.querySelectorAll(selector);
		// 当前对象的长度
		this.length = list.length;
		for(var i=0;i<list.length;i++){
   
			//遍历类别对 this赋值
			this[i] = list[i];
		}
	}
		// 如何让new  init 产生对象拥有JQuery显示原型上的所有方法呢？
	jQuery.fn.init.prototype = jQuery.fn;
	// 全局对jQuery与$可以访问
	window.$=window.jQuery = jQuery;

$.function() 是在jquery原型对象设置的方法。我们可以通过 $.fn.extend(）去扩展。例如

 $.fn.extend({
   
            getMax:function(a,b){
      //getMax 自定义方法。3
                var result=a>b?a:b;
                console.log(result);
            }
        });
        $("input").getMax(1,2); //使用方法
 //官网
 jQuery.extend = jQuery.fn.extend = function() {
   
	var options, name, src, copy, copyIsArray, clone,
		target = arguments[ 0 ] || {
   },
		i = 1,
		length = arguments.length,
		deep = false;

	// Handle a deep copy situation
	if ( typeof target === "boolean" ) {
   
		deep = target;

		// Skip the boolean and the target
		target = arguments[ i ] || {