12 2013 档案
摘要：通过阅读jQuery为属性操作封装的基本方法和为处理兼容性问题提供的hooks，发现jQuery在属性操作方面并没有做过多的设计，只是处理一下兼容性问题，然后调用基础的DOM操作方法。以下是对JQuery提供的基础方法的阅读：jQuery.fn.extend({ // 调用access方法进行参数整理之后调用$.attr方法 attr: function( name, value ) { return jQuery.access( this, jQuery.attr, name, value, arguments.length > 1 ); }, // 遍历jQuery对象中的所有元素，
阅读全文
摘要：在阅读attr、remove方法时，看到一些对浏览器兼容性做处理的hooks。接下来看一下这些hooks都做了哪些兼容性处理1、attrHooks。主要处理IE6-9 input的type属性无法写入的问题。 attrHooks: { type: { set: function( elem, value ) { // 如果value是radio，并且elem是input if ( !jQuery.support.radioValue && value === "radio" && jQuery.nodeName(elem, "in.
阅读全文
摘要：挂载到$上的几个属性操作方法分析，发现属性操作用到了sizzle封装的方法attr: function( elem, name, value ) { var hooks, ret, nType = elem.nodeType; // 如果elem不存在，或者是文本节点、注释或者是属性节点，直接返回。 if ( !elem || nType === 3 || nType === 8 || nType === 2 ) { return; } // 当不支持getAtrribute方法时（估计是处理浏览器兼容问题） if ( typeof elem.getAttribute ==...
阅读全文
摘要：下载了jQuery的UI组件，发现内容还挺多的，还是决定先把jQuery的源码看完一遍之后再涉足UI组件。考虑到队列和动画使用较少，特别是动画，基本开始使用css3完成。因此暂时略过，开始看jQuery对属性操作的处理。该部分大约500行代码，预计一周看完。jQuery提供的属性操作方法有两种1、挂载到jQuery对象上 // 获取或设置属性值。当参数只有name时，获取jQuery集合中的第一个元素的name属性的值。 //name和value都有时，为jQuery集合中的所有元素增加name属性，value为值的属性 $(elem).attr(name, [value]); // ...
阅读全文
摘要：看了一下队列剩下的几个方法，在没有应用场景的情况下，对它所做的一些处理不能明白。后续希望可以通过动画部分代码的阅读能搞清楚这些处理的意义。jQuery.fn.extend({// 推迟队列中函数的执行 delay: function( time, type ) { // 估计需要看了动画部分的代码才能知道是怎么回事 time = jQuery.fx ? jQuery.fx.speeds[ time ] || time : time; type = type || "fx"; // 推一个匿名函数到栈中，该函数通过setTimeout延迟特定的函数执行。 retur...
阅读全文
摘要：继续阅读队列提供的方法。jQuery.extend({ queue: function( elem, type, data ) {}, // 将data按照某种类型存储到elem对应的队列中，并等待执行。同时返回目前队列中的所有数据 dequeue: function( elem, type ) { // 出列操作，如果想要执行队列中的所有方法，则有多少个方法就需要执行多少次dequeue方法 // 如果指定类型就按照指定类型查找，否则默认是“fx” type = type || "fx"; // 拿出队列中的所有数据 var queue = jQuery.queue...
阅读全文
摘要：jQuery的队列依赖缓存机制事件，它同时是animate的基础。它不像事件机制、缓存机制、回调机制一样有自己的命名空间，由于比较简单，所以直接挂在到$和jQuery对象上。它提供的基础方法有：jQuery.extend({ queue: function( elem, type, data ) { var queue; // 如果存在elem，也就是至少有一个参数 if ( elem ) { // 如果有第二个参数，使用第二个参数加上“queue”，否则使用“fx” + “queue”（动画队列的名称） type = ( type || "fx" ) + "qu
阅读全文
摘要：Data封装的方法的后面四个方法 和 dataAttr方法阅读。Data.prototype = { key: function( owner ) {}, set: function( owner, data, value ) {}, get: function( owner, key ) {}, // 该方法集中处理了几种情况。该方法看似没什么用，其实它是暴露给用户的data方法的统一处理入口。 access: function( owner, key, value ) { var stored; // 如果key和value没有传入，或者（（key传入了并且key是Strin...
阅读全文
摘要：缓存机制提供的入口有：$.data([key],[value]) // 存取数据$.hasData(elem) // 是否有数据$.removeData([key]) // 删除数据$.acceptData(elem) // 检测元素是否可以使用缓存机制存数据$(elem).data([key],[value]) // 存取数据$(elem).removeData([key]) // 删除数据已经阅读了缓存机制为用户提供的入口，并且重点阅读了$(elem).data()方法（其它方法都是直接调用data_user对象的方法），接下来重点看data_user对象封装的属性和方法Data.prot
阅读全文
摘要：1、从用户调用的入口开始阅读，因为这是我们比较熟悉的部分（主要做参数的调整，根据不同的完成不同的功能） // 进入jQuery Data模块的入口 使用方法有三种，不传参，传一个参，传两个参。示例$("div").data("name", "value") // 如果不传参则返回该元素上的所有数据，传一个参数则返回该元素上对应的属性值，传两个参数则为该元素绑定该属性并赋值 data: function( key, value ) { var attrs, name, // 取出jQuery对象中的第一个DOM对象，数据是存储在DOM对
阅读全文
摘要：1、首先看一下涉及到jQuery缓存机制的代码结构：// 定义一些jQuery内部的变量，方便后续使用var data_user, data_priv, // 后续会被赋值为两个Data对象 rbrace = /(?:\{[\s\S]*\}|\[[\s\S]*\])$/, // 匹配花括号和方括号及其中间的内容 rmultiDash = /([A-Z])/g;//匹配大写字母// 定义Data的构造函数function Data() {}// 为Data构造函数添加一个uid属性Data.uid = 1;// 哪些类型的对象可以使用Data存储数据的：元素节点、文档节点、ObjectDa...
阅读全文
摘要：1、自定义事件（用户手动trigger的一般都是自定义事件）trigger: function( event, data, elem, onlyHandlers ) { var i, cur, tmp, bubbleType, ontype, handle, special, // 如果没有传入elem（绑定到那个DOM元素上的事件），则默认为document eventPath = [ elem || document ], //core_hasOwn是hasOwnProperty的替代，检测event上是否有type属性，如果有就将其赋值给type，否则说明eve...
阅读全文
摘要：1、通过一步步调试的的方法观察了一下存放到cache中的事件及其处理程序的数据格式：{ events : { // 根据事件类型存放添加到该元素上的所有事件，下面以click为例 click : [ // click 事件类型。已数组的形式，按绑定的先后循序存放不同的事件处理函数相关内容（已对象的形式） { data : "", // 事件绑定时传入的data guid : 1, // jQuery分配的事件的id，用来查找对应的事件，以便删除或进行其它操作 namespace : "", // 事件的命名空间 needsConte...
阅读全文
摘要：对原生js不熟悉看jQuery会困难很多。后续需要更多的关注下原生jsjQuery封装之后的事件触发，其中一个分支（处理普通事件）是通过：elem.addEventListener( type, eventHandle, false );来完成的。通过这一句，为元素绑定一个事件监听器，并绑定eventHandler事件处理程序。该事件监听程序内部调用dispatch方法处理并执行用户真正绑定到该元素上的所有事件处理程序。相当于在所有的事件处理程序外围又包括了一个方法。接下来看下dispatch内部做了哪些事情：// 这里的event参数其实是一个普通的原生event对象，是从elem.addE
阅读全文
摘要：看了几天，决定整理一下jQuery事件处理的整体设计思路1、通过add方法给选中的元素注册事件处理程序（通过缓存系统将事件储存到cache，而不是绑定到元素上） a、在存储之前，会为事件处理程序增加guid属性（jQuery里的唯一标识）， b、先从cache中取出已经储存的以当前元素为桥梁的对象的events属性，如果没有就新建一个。 c、再从cache中取出已经储存的以当前元素为桥梁的对象的handler属性（是一个方法），如果没有就新建一个。 备注：cache中存储的对象有两个属性：events、handler。2、通过dispatch方法分派事件处理函数（从缓存中读取出所有的事...
阅读全文
摘要：继续了解jQuery对浏览器兼容的处理1、keyHooks对键盘按键的封装keyHooks: { // 一些键盘相关的属性 props: "char charCode key keyCode".split(" "), // 新的event对象和原生的event对象作为参数传入filter filter: function( event, original ) { // 如果event中没有which属性，新声明一个which属性并赋值 if ( event.which == null ) { // 原生event中如果有charCode，就将它的ch..
阅读全文
摘要：通过之前对event.add方法的分析，发现jQuery在事件注册期间，将用户绑定的事件通过jQuery的缓存系统储存在了$.cache中，jQuery对事件主要做的事情：1、事件管理 a、事件注册时，通过add方法，将事件储存在$.cahce[ 唯一ID ][ $.expand ][ 'events' ]上，events内部是“事件类型”：“事件处理函数数组”形式的对象 b、事件触发时，通过trigger和handler从cache中查找并执行 c、事件销毁时，通过removie方法从cache中查找并删除2、浏览器兼容的处理 a、差异： firefox、chrome、opr
阅读全文
摘要：1、jQuery事件绑定的用法：$( "elem" ).on( events, [selector], [data], handler );events:事件名称，可以是自定义事件名称selector:选择器data:事件触发时传递给事件处理函数handler:事件处理函数2、on方法源码分析on: function( types, selector, data, fn, /*INTERNAL*/ one ) { var origFn, type; // 如果types是对象，则说明是传入了多个事件 if ( typeof types === "object&qu
阅读全文
摘要：// data html字符串 // context 如果指定了context，则碎片将在此范围内被创建，默认是document // keepScripts 如果是true，则将有scripts加入html字符串 parseHTML: function( data, context, keepScripts ) { //如果data不存在或者data不是字符串则直接返回null if ( !data || typeof data !== "string" ) { return null; } // 如果context是Boolean则说明用户没有传入context，而是传
阅读全文
摘要：1、首先定义构造函数function Cl(){ var that = this; that.a = "a"; that.b = "b";}2、将Cl构造函数的prototype赋值给一个变量var pro = Cl.prototype;3、在构造函数的prototype上绑定方法pro.init = function(){ this.getName();};pro.getName = function(){ return "cl";};4、抛出构造函数5、使用时var o = new Cl();o.init();备注：想学习jQue
阅读全文
摘要：jQuery.when()方法是jQuery内部使用回调机制的范例。// 参数为多个方法，这些方法全部执行完成之后执行回调 when: function( subordinate /* , ..., subordinateN */ ) { var i = 0, // 将传入的参数切成数组 resolveValues = core_slice.call( arguments ), length = resolveValues.length, // 未执行完成的方法 、 remaining = length !== 1 || ( subordinate &&...
阅读全文
摘要：jQuery.extend({ /* * deferred对象的一大好处，就是它允许你自由添加多个回调函数。 *$.ajax("test.html") .done(function(){ alert("哈哈，成功了！");} ) .fail(function(){ alert("出错啦！"); } ) .done(function(){ alert("第二个回调函数！");} ); *deferred对象的另一大好处，就是它允许你为多个事件指定一个回调函数，这是传统写法做不到的。 当两个操作都成功了才执行成功的回调
阅读全文
摘要：// 对option的一个缓存，避免每次都需要createOptions，option是创建Callback对象时的传入的参数// 每个option被存入optionsCache中类似于{memory:true, once:true,...}var optionsCache = {};// 将字符串表达转成对象表达，并存在缓存中，一个内部使用的方法。function createOptions( options ) { var object = optionsCache[ options ] = {}; jQuery.each( options.match( core_rnotwhit...
阅读全文
摘要：// 该方法被绑定在jQuery对象上，只能通过$.noConflict()调用 noConflict: function( deep ) { // 取消$在window上的绑定，方法是将_$绑定到window对象上，从而解除其对jQuery的引用 if ( window.$ === jQuery ) { window.$ = _$; } // 如果传入参数deep为ture，说明用户解除window对象的jQuery属性对jQuery对象的引用，执行$同样的操作 if ( deep && window.jQuery === jQuery ) { ...
阅读全文
摘要：// extend方法为jQuery对象和init对象的prototype扩展方法// 同时具有独立的扩展普通对象的功能jQuery.extend = jQuery.fn.extend = function() { /* *target被扩展的对象 *length参数的数量 *deep是否深度操作 */ var options, name, src, copy, copyIsArray, clone, target = arguments[0] || {}, i = 1, length = arguments.length, ...
阅读全文