jquery实现原理

www.themegallery.com
事件绑定
基本事件 可以多次添加
blur( [fn] ) change( [fn] ) click( [fn] ) dblclick( [fn] ) error( [fn] ) focus( [fn] ) focusin( [fn] ) focusout( [fn] ……..
链式调用
$(“#id”).attr(“title”,”哈哈哈”).css(“color”,”#0f0”)
猜想实现方式：
attr:function(){ //一些操作 return this }, css:function(){ //一些操作 return this }
www.themegallery.com
Jquery的实现原理
Javascript的设计模式
www.themegallery.com
大纲
1 2
jquery结构
链式调用和隐式递归
3
4 5
事件绑定 live的实现原理
AJAX在jquery中的实现
Javascript设计模式
www.themegallery.com
Байду номын сангаас
Jquery对象关系图
www.themegallery.com
bind(type, [data], fn)
hover(over, out)
toggle(fn, fn2, [fn3, fn4, ...])
www.themegallery.com
live
www.themegallery.com
AJAX
早期的两种AJAX实现方式
<script type="text/javascript" id="voidScript" src="void(0)"> </script> //一个隐藏了的iframe标签 function getScript(url) { var iframe =document.getElementById("hideIframe"); var script = document.getElementById("voidScript"); function getPages(url) { script.src =url; iframe.src = url; } } getScript(“test.php?userName=abc&callback=changeTitle"); getPages("test.php?param=value"); iframe.contentWindow.document.body.onload = function () { Function changeTitle (title){ iframe.contentWindow.document.body.innerHTML; } } //test.php //一些处理…… echo $_GET[„callback‟]. “(“.$tile.”)”;
www.55bbs.com
www.themegallery.com
www.themegallery.com
问题
1、 找出数字数组中最大的元素（使用Match.max函数） 2、 实现如下语法的功能：var a = (5).plus(3).minus(6); //2 3、 给每个js数组、实现php数组中的array_map方法
www.themegallery.com
result.code
} return xhr;
} });
www.themegallery.com
Javascript Design Pattern
//Factory Pattern
var productManager = {};
productManager.createProductA = function () { console.log('ProductA'); } productManager.createProductB = function () { console.log('ProductB'); } productManager.factory = function (typeType) { return new productManager[typeType]; } productManager.factory("createProductA");
www.themegallery.com
Jquery中的AJAX
function XHR() { $.ajax({ var xhr; url: try { "page.php", processData: false, xhr = new XMLHttpRequest(); } catch(e) { data: xmlDocument, var IEXHR=["Msxml3.XMLHTTP","Msxml2.XMLHTTP","Microsoft.XMLHTTP"]; beforeSend : function (XHR) { for (var XHR.setRequestHeader(name,val); i=0,len=IEXHRVers.length;i< len;i++) { try { } xhr = new ActiveXObject(IEXHRVers[i]); success: function(result){ } catch(e) {continue;} }}
隐式递归
$(“a”).addClass(“red”).bind(“click”,”hide”)
所有的A标签都加上了 red样式，和click事件
猜想实现方式：
//用于循环 addClass : function(className){ for(var i=0;i<this.length;i++){ this[i].addClass2(className); } return this }, //用于添加样式 addClass2 : function (className){ }