extend扩展jQuery工具方法(一)
来源:互联网 发布:slam包括的算法 编辑:程序博客网 时间:2024/05/16 19:42
jQuery原型初始内容 ##:
在jQuery.2.03.js文件中的96~283行,定义了jQuery.prototype原型对象,它包括19个属性:jquery, constructor, selector, length, toArray, get, pushStack, each, ready, slice, first, last, eq, map, end, push, sort, splice。这些属性中jquery、constructorhe、selector这三个属性用于jQuery版本、指向修订以及默认选择符外,其余的属性都是用于数组操作,例如length、toArray、eq等等。原型prototype包含的内容不多,大部分都是类数组操作方法,而原型方法内部却使用了很多的jQuery静态工具方法。
jQuery.extend({…}) 扩展jQuery类方法
在jQuery.2.03.js中的352~823行是jQuery静态方法区,整个内容很长,快接近500行的代码量。虽然jQuery文件代码量很多,但是每个部分所聚集的代码都翻译了这部分jQuery代码所起的整体作用。此次扩展对象33个属性,可以将它们进行归类:版本控制、DOM加载完成事件、js类型判断、脚步解析、数组操作、权限控制、时间和其他工具方法。
jQuery.extend({ expando: null, noConflict: null, isReady: false, readyWait: 1, holdReady: null, ready: null,isFunction: null, isArray: null, isWindow: null, isNumeric: null, type: null, isPlainObject: null, isEmptyObject: null, error: null, parseHTML: null, parseJSON: null, parseXML: null, noop: null, globalEval: null, camelCase: null, nodeName: null, each: null, trim: null, makeArray: null, inArray: null, merge: null, grep: null, map: null, guid: null, proxy: null, access: null, now: null, swap: null});
expando版本
在一个页面html中,可能会引入多个jQuery版本,每个版本都必须有唯一的标识,因为jQuery、$都是直接绑定到window对象上。
//版本号加随机数,实际值可能为:"jQuery203021317612077109516";var expando = "jQuery" + (core_version + Math.random()).replace(/\D/g, "");
noConflict归还命名空间
在jQuerye文件的38、40行中_$
、_jQuery已经存了window.$
和window.jQuery,也就是实现将window中的$
和jQuery缓存起来,然后定义jQuery函数和别名$
。
var rootjQuery, _$ = window.$, _jQuery = window.jQuery, jQuery = function(selector, context) { return jQuery.fn.init(selector, context, rootjQuery); };jQuery.extend({ //比较两个都想相等的条件是: 两个对象的引用地址相同;使用noConflict函数也是一个页面引入了多个jQuery相同版本的文件 noConflic: function(deep) { //首先比较下$别名是否已经和jQuery相同 if(window.$ === jQuery) { window.$ = _$; } if(deep && window.jQuery === jQuery) { window.jQuery = _jQuery; } } });//将jQuery绑定到window上作为全局属性,同时取个别名$if ( typeof window === "object" && typeof window.document === "object" ) { window.jQuery = window.$ = jQuery;}//所有的jQuery对象都需要指向rootjQueryrootjQuery = jQuery(document);
ready加载
在DOM操作中,有addEventListener来加载事件,而DOM内置事件类型有:加载事件(beforeunload、unload、load、pageshow和pagehide、DOMContentLoaded、readystatechange)、窗口事件(scroll、reszie、haschange和popstate)、文本操作事件(cut、copy和paste)、焦点事件(focus、focusin、focusout和blur)、鼠标事件MouseEvent、键盘事件KeyboardEvent等等。传统的window窗体内容加载是绑定window的onload事件。同时,事件本身可以注册多个处理器,处理器根据绑定的先后顺序进行执行。但jQuery自定义了一个特殊的ready事件,该事件先于DOM的load事件。
HTML DOM文档加载是按顺序进行的,这与浏览器的渲染方式相关。一般浏览器渲染操作的顺序大致按如下几个步骤: 1、解析HTML结构; 2、加载外部脚本(.js文件)和样式表(.css文件); 3、解析并执行脚本代码; 4、构造HTML DOM模型; 5、加载图片等外部文件; 6、页面加载完毕。load事件处理器是在页面加载完毕后才执行,而ready事件是在构造完DOM模型后开始执行。此外,load事件是注册在window上,而ready是注册在window.document上。
//这种方式,只能给onload绑定一个事件处理器window.onload = function() { //逻辑内容}/** * @param eventName 事件名. * @param handler 事件处理器(处理函数). * @param useCapture 指定事件是否在捕获或冒泡阶段执行, true在捕获阶段执行,false在冒犯阶段执行 * addEventListener(eventName, handler, useCapture); 绑定事件处理器 * removeEventListener(eventName, handler, useCapture); 解绑定事件处理器 * 在IE8以下,attachEvent(eventName, handler)和detachEvent(eventName, hander);区别在于eventName必须加前缀"on",如"onclick" *///通过addEventListener可以给docuemnt添加多个事件处理器,当然这里可以先检查下window.addEventListener,然后绑定调用window.attachEvent(IE)。window.addEventListener(function() { // 处理器1});window.addEventListener(function() { // 处理器2});window.addEventListener(function() { // 处理器3});// ... ...window.addEventListener(function() { // 处理器n});var readyList = [];jQuery.extend({ //判断当前document绑定的ready事件处理器是否已经执行过了 isReady: false, //一个计数器,用于记录有多少ready事件处理器已经绑定 readyWait: 1, ready: function(wait) { if(wait === true? --jQuery.readyWait : jQuery.isReady) { return ; } jQuery.isReady = true; if(wait !== true && --jQuery.readyWait > 0){ return; } //如果有函数绑定,则执行 execite(readyList); if(jQuery.fn.trigger) { jQuery(document).trigger("ready").off("ready"); } }, //确定是否保持ready状态,如果否则调用ready触发事件。需要在$().ready(...)前调用,这样ready就会处于等待,如果需要执行则需要jQuery.holdReady(false); holdReady: function(hold) { if(hold) { jQuery.readyWait++; } else { jQuery.ready(true); } }});
- extend扩展jQuery工具方法(一)
- jQuery extend 扩展方法
- JQuery的extend扩展方法
- JQuery的extend扩展方法
- JQuery的extend扩展方法
- jQuery 的 extend 扩展方法
- JQuery的extend扩展方法
- jquery的extend和fn.extend (扩展jQuery类或jQuery对象方法)
- 【jQuery】使用$.extend()扩展工具函数
- jQuery.extend()、jQuery.fn.extend()扩展方法详解
- jQuery.extend()、jQuery.fn.extend()扩展方法详解
- 【jquery扩展】jquery扩展方法extend(),以及扩展插件
- jQuery扩展插件方法 $.extend()和$.fn.extend()
- jQuery.extend扩展利器
- jQuery 源码学习(一)jQuery.extend()
- jquery extend jquery插件扩展
- jQuery中的$.extend方法来扩展JSON对象
- 类似jQuery的extend扩展方法的实现
- 安卓开发规范
- Codeforces GYM 100646E: Su-Su-Sudoku 题解
- java-包,权限修饰符
- 网站根目录权限设置
- javaweb验证码代码
- extend扩展jQuery工具方法(一)
- Web服务器工作原理概述
- Python语言基础
- spring入门到精通(一)
- 1048. Find Coins 解析
- day_05文件系统及vi编辑器
- 含有虚函数的空类的内存大小
- 浅谈hibernate的sessionFactory和session
- python学习之函数