JQuery源码片段分析

(function(window){

	/**

	  *   jQuery是一个函数

	                              是一个对象

	                              是一个构造器函数

	  */

	var jQuery = function( selector, context ) {

		return new jQuery.fn.init( selector, context );

	},

	//fn就是jQuery对象上的一个属性，该属性指向了prototype

	//jQuery的 prototype中的方法是根据jQuery的选择器获取到的jQuery对象，然后jQuery对象调用这些方法的

	//利用jQuery的选择器得到的jQuery对象就相当于利用jQuery的构造器创建出来的对象

	jQuery.fn = jQuery.prototype = {

		each: function( callback, args ) {

			return jQuery.each( this, callback, args );

		},

		ready:function(){}

	};

	//window对象动态的添加了一个属性jQuery,把匿名函数中的jQuery对象赋值给了window的jQuery对象

	//$实际上是window的一个属性，也是jQuery对象

	window.jQuery = window.$ = jQuery;

	jQuery.fn = jQuery.prototype = $.prototype = $.fn = window.$.fn = window.jQuery.fn = window.jQuery.prototype

	//在jquery中，可以把一个方法加入到jQuery或者$本身上, 直接利用jQuery或者$调用,这样的方法称为全局方法，也称为全局插件

	//在jquery中，可以把一个方法加入到jQuery或者$的prototype或者fn上，可以利用jquery的选择器获取到的jquery对象调用这些方法,这样的方法也称为插件方法

})(window);

自定义创建一个JQuery方法


1.回顾Js对象的prototype属性

在JS的世界中的所有事物都是对象：字符串、数字、数组、日期，等等。对象是拥有属性和方法的数据。每个对象都存在Prototype属性，

该属性可以让我们向js对象添加属性和方法，而在JQuery的世界，通过分析源码可以知道，JQuery同样是存在prototype属性，并且以$.fn

的形式存在($.fn等价于$.prototype)，有了该属性，我们就可以动态地给JQuery对象添加属性和方法了。

我们可以理解为$.fn.方法名或者$.prototype.方法名 就是用来创建对象方法和属性，需要使用对象去调用，

$.方法名 是用来创建全局/静态方法和属性，使用$直接调用(注意:$ = JQuery = Window.JQuery = Window.$)


2.$.fn.myeach 和$.myeach的区别

/**

 * 匿名函数，外部不能直接访问

 *

 */

(function($){

	/**

	 * $.fn等价于$.prototype，$.fn.myeach如果利用JAVA面向对象的思想去理解，可以理解为在JQuery的世界，创建

	 * 了一个非静态的成员方法myeach，也就是JAVA中的对象的成员方法，这个成员方法是属于对象的 ，需要获取JQuery对象去调用，$().myeach()

	 */

	$.fn.myeach = function(){}

	/**

	 * $.myeach相当于创建了一个静态的方法，该方法是属于类的，也就是全局方法，可以直接使用$.myeach()去调用，不能使用JQuery对象去调用

	 */

	$.myeach = function(){}

})($);

综上所述，可以理解为$.fn.方法名 是创建对象的成员方法的，需要用对象去调用，$.方法名，去创建静态方法的也就是全局方法，不能使用对象去调用，直接使用$或者JQuery符号去调用

3.自定义一个$.myeach(obj,callback)方法和$().myeach(callback)方法

<!DOCTYPE html>

<html>

  <head>

    <title>jquery-plugin-myeach.html</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">

    <meta name="description" content="this is my page">

    <meta name="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

	<script src="../js/jquery-1.4.2.js"></script>

	<script src="jquery-plugin-myeach.js"></script>

  </head>

  <body>

    This is my HTML page. <br>

		<div>asfd</div>

		<div>asfd</div>

		<div>adsf</div>

  </body>

</html>


/**

 * 匿名函数

 * @param $ JQuery对象，等同于JQuery

 */

(function($){

	/**

	 * 把myeach加入到jQuery或者$的prototype或者fn上，以后可以使用JQuery选择器获取的JQuery对象进行调用，如$()

	 * @param {Object} callback 回调函数

	 */

	$.fn.myeach = function(callback){

		var array = $(this);

		for(var i=0;i<array.length;i++){

			//this代表当前正在遍历的对象

			callback.call($(array[i]),$(array[i]));

		}

	}

	/**

	 * 直接给JQuery添加方法，以后不需要通过JQuery对象去进行调用，可以直接使用JQuery或$符号调用

	 * @param {Object} obj  可以来自于利用jquery的选择器创建的jquery对象，也可以来自于一个数组(来源于后台)

	 * @param {Object} callback 回调函数

	 */

	$.myeach = function(obj,callback){

		var array = obj;

		for(var i=0;i<array.length;i++){

			//this代表当前正在遍历的对象

			callback.call($(array[i]),$(array[i]));

		}

	}

})($);

$().ready(function(){

	//利用JQuery选择器获取JQuery对象调用myeach函数

	$("div").myeach(function(){

		//this代表当前正在遍历的div对象

		alert($(this).text());//把每个DIV标签中的文本打印出来

	});

	//使用JQuery符号$调用全局myeach函数，注意$=window.$=JQuery，其实就是window中的属性

	$.myeach($("div"),function(e){

		alert($(e).text());//把每个DIV标签中的文本打印出来

	});

});

2.自定义一个扩展插件方法extend()，并创建$.each()和$().each()方法

/**

 * 匿名函数

 */

(function($){

	/**

	 * 把插件直接添加到JQuery和$上，可以直接利用JQuery和$去调用，而不需要创建对象，这种称为全局方法或全局插件

	 */

	$.myextend=function(json){

		for(var i in json){

			$[i] = json[i];//把每个json对象直接加入到JQuery，相当于添加了全局的方法，这样可以不需要使用对象去调用

		}

	}

	/**

	 * 在JQuery中，可以把一个方法加入到jQuery或者$的prototype或者fn上，可以利用jquery的选择器获取到的jquery对象调用这些方法,这样的方法也称为插件方法，需要创建对象去调用

	 */

	$.fn.myextend=function(json){

		for(var i in json){

			$.fn[i] = json[i];//把每个json对象加入到JQuery对象的fn也就是prototype属性，这样可以使用对象去调用

		}

	}

})($);

$().ready(function(){

	/**

	 * 使用JQuery对象去调用$.fn中定义的方法

	 */

	$().myextend({

		_each:function(callback){

			var array = $(this);

			for(var i=0;i<array.length;i++){

				callback.call($(array[i]),$(array[i]));

			}

		}

	});

	/**

	 * 使用$符号去定义全局方法

	 */

	$.myextend({

		_each:function(obj,callback){

			var array = obj;

			for(var i=0;i<array.length;i++){

				callback.call($(array[i]),$(array[i]));

			}

		}

	});

	$("div")._each(function(){

		alert($(this).text());//把每个DIV标签的内容显示 

	});

	$._each($("div"),function(e){

		alert($(e).text());//把每个DIV标签的内容显示

	});

});

调用过程如下





JQuery--JQuery面向对象编程快速入门-插件开发的更多相关文章

  1. PHP面向对象编程快速入门

    面向对象编程(OOP)是我们编程的一项基本技能,PHP4对OOP提供了良好的支持.如何使用OOP的思想来进行PHP的高级编程,对于提高PHP编程能力和规划好Web开发构架都是非常有意义的.下面我们就通 ...

  2. .Net Core WebAPI 基于Task的同步&异步编程快速入门

    .Net Core WebAPI 基于Task的同步&异步编程快速入门 Task.Result async & await 总结 并行任务(Task)以及基于Task的异步编程(asy ...

  3. COM编程快速入门

    COM编程快速入门 COM编程快速入门 http://www.vckbase.com/index.php/wv/1642   COM是一种跨应用和语言共享二进制代码的方法.与C++不同,它提倡源代码重 ...

  4. Haskell 函数式编程快速入门【草】

    什么是函数式编程 用常规编程语言中的函数指针.委托和Lambda表达式等概念来帮助理解(其实函数式编程就是Lambda演算延伸而来的编程范式). 函数式编程中函数可以被非常容易的定义和传递. Hask ...

  5. 【PHP】PHP面向对象编程--phpOOP入门

     PHP从入门到精通 之PHP的面相对象编程 面向对象编程(Object Oriented Programming, OOP, 面向对象程序设计)是一种计算机编程架构,OOP的一条基本原则是计算机程序 ...

  6. python笔记 面向对象编程从入门到高级

    目录: 一.概念 二.方法    2.1组合 2.2继承 2.3多态 2.4封装 2.5归一化设计 三.面向对象高级   3.1   反射(自省) 3.2   内置方法__getatter__, __ ...

  7. jQuery UI 之 EasyUI 快速入门

    jQuery EasyUI 基础 转载自(http://www.shouce.ren/api/view/a/3350) jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面 ...

  8. jQuery UI 之 LigerUI 快速入门

    LigerUI 快速开发UI框架 LigerUI 是基于jQuery 的UI框架,其核心设计目标是快速开发.使用简单.功能强大.轻量级.易扩展.简单而又强大,致力于快速打造Web前端界面解决方案,可以 ...

  9. jquery的使用 超级快速入门 熟练使用

    如何使用jquery,首先需要引入jquery的js库文件,可以是免费的cdn资源,也可以是本地下载的资源 使用方法:$(function(){                  这里面写你要执行的代 ...

随机推荐

  1. flask配置详解

    直接修改config对象 flask会有一个可用的配置对象保存着载入的配置值: Flask 对象的 config 属性,这是 Flask 自己放置特定配置值的地方,也是扩展可以存储配置值的地方.但是, ...

  2. 快速傅里叶变换与快速数论变换瞎学笔记$QwQ$

    $umm$先预警下想入门$FFT$就不要康我滴学习笔记了,,, 就,我学习笔记基本上是我大概$get$之后通过写$blog$加强理解加深记忆这样儿的,有些姿势点我可能会直接$skip$什么的,所以对除 ...

  3. 洛谷$P1935$ [国家集训队]圈地计划 网络流

    正解:最小割 解题报告: 传送门 就文理分科模型嘛$QwQ$?所以就,跑个最小割呗,然后就做完辣?仔细想想细节发现并麻油那么简单嗷$QwQ$ 先考虑如果没有这个$k\cdot C_{i,j}$的贡献就 ...

  4. 洛谷P1832 A+B Problem（再升级） 题解 完全背包方案计数

    题目链接:https://www.luogu.com.cn/problem/P1832 题目大意: 给定一个正整数n,求将其分解成若干个素数之和的方案总数. 解题思路: 首先找到所有 \(\le n\ ...

  5. 查看磁盘型号和内存及raid信息

    1.查看磁盘型号 工具:smartmontools #smartctl --help #smartctl --all /dev/sda -d megarid,1 (第一块磁盘的信息) #smartct ...

  6. bootstrap4.4 Stretched link的使用

    Stretched link功能介绍:扩大可点击区域. 原理 .stretched-link::after { position: absolute; top: 0; right:0; bottom: ...

  7. 20.用PyInstaller打包py程序的步骤及问题解决

    最近写了一个移动和复制文件的代码,代码完成之后,想将其打包成一个可以在任何电脑上使用的软件, 于是在网上查找相关资料,可以用PyInstaller打包成.exe程序,以下是具体步骤: 1.安装PyIn ...

  8. Java截图小程序源码

    Java编写的全屏截图小程序 package cnom.test.testUtils; import java.awt.AWTException; import java.awt.Dimension; ...

  9. 别再埋头刷LeetCode之：北美算法面试的题目分类，按类型和规律刷题，事半功倍

    算法面试过程中,题目类型多,数量大.大家都不可避免的会在LeetCode上进行训练.但问题是,题目杂,而且已经超过1300道题. 全部刷完且掌握,不是一件容易的事情.那我们应该怎么办呢?找规律,总结才 ...

  10. JDK12 的下载和没有jre的解决及环境配置

    一.下载直接在官网上下载并点击安装即可,步骤省.jdk12下载中途已经没有跳出窗口下载jre的过程了,需要手动生成jre. 二.没有jre的解决:1.cmd 2.切换到jdk的安装目录,执行命令:bi ...