• 技术文章 >web前端 >js教程

    jquery中被誉为工厂函数的是什么?

    青灯夜游青灯夜游2020-11-30 16:16:41原创2239

    jquery中被誉为工厂函数的是“$()”,它本质上就是一个DOM对象,但是它所使用的方法都封装在了jQuery上,所以我们不能通过“$()”来使用JavaScript的方法,同样DOM对象也不能使用jQuery上的方法。

    相关推荐:《jQuery教程

    jquery中被誉为工厂函数的是“$()”。在jQuery中,无论我们使用哪种类型的选择符都需要从一个“$”符号和一对“()”开始。

    “$”是jQuery“类”的一个别称,$()构造了一个jQuery对象;所以,“$()”可以叫做jQuery的构造函数。

    工厂函数“$()”本质上就是一个DOM对象,但是它所使用的方法都封装在了jQuery上,所以我们不能通过“$()”来使用JavaScript的方法,同样DOM对象也不能使用jQuery上的方法。

    我们以$为开始,引出整个jQuery的架构

    以jQuery的1.11.3版本举例,$作为一个函数名出现的地方是在源码的最后:

    	window.jQuery = window.$ = jQuery;

    其中的jQuery是前面定义的一个函数,在源码第70行中出现

    	jQuery = function( selector, context ) {
    		// The jQuery object is actually just the init constructor 'enhanced'
    		// Need init if jQuery is called (just allow error to be thrown if not included)
    		return new jQuery.fn.init( selector, context );
    	}

    这个函数相当于一个工厂函数,它内部返回了一个对象,这样就可以不用new的方式创建jQuery对象了
    所以new $().xxx 和 $().xxx 就没有区别了,这也符合jQuery的设计理念“write less, do more”

    在源码第2882行中:

    	// Give the init function the jQuery prototype for later instantiation
    	init.prototype = jQuery.fn;

    init的原型对象替换为jQuery.fn,其实就是替换成了jQuery这个函数自己的原型对象jQuery.prototype
    在源码89行中:

    	jQuery.fn = jQuery.prototype

    这样做我们可以很方便的写jQuery的扩展方法
    举个例子:

    	jQuery.fn.alertMsg = function(msg){
    		alert('msg');
    	}

    使用:

    	$().alertMsg('Hello World!');

    jQuery的整体架构到这里就差不多了

    下面是一个简化版的jQuery架构,便于理解

    	(function () {
    	    function jQuery(selector) {
    	        return new jQuery.prototype.init(selector);
    	    }
    	    // jQuery对象的构造函数
    	    jQuery.prototype.init = function (selector) {
    	       
    	    }
    	    // jQuery原型上的css方法
    	    jQuery.prototype.css = function (config) {
    	        
    	    }
    	    // 将jQuery原型上的方法都放到init的原型链上
    	    jQuery.prototype.init.prototype = jQuery.prototype;
    	    window.$ = window.jQuery = jQuery;
    	})();

    关系图解:
    在这里插入图片描述

    更多编程相关知识,请访问:编程学习网站!!

    以上就是jquery中被誉为工厂函数的是什么?的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:jquery
    上一篇:jquery中如何数组去重复数据 下一篇:jquery中的on()和click()区别是什么
    大前端线上培训班

    相关文章推荐

    • jquery怎么判断input是否为空• jquery的ajax()函数传值中文乱码怎么办• jquery如何判断数组包含指定元素• jquery如何判断是否是ie6浏览器

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网