jQuery构造函数分析】的更多相关文章

在我的上一篇文章里面 阐述了jQuery的大致框架,知道了所有代码都是写在了一个自调用匿名函数里面,并且传入了window对象,源码是这样的: (function( window, undefined ) {...})( window ); 我们通过alert(jquery) 知道它是一个对象,那么这个对象是怎么构造出来的呢?我们使用$(document)类似的写法获取元素,就好像直接调用了普通的方法一样,jQuery就是普通的函数吗?如果是构造函数为什么不是 new $(document)的常…
分析完了字符串情况剩下的就不多了. 5.参数selector是函数 这个就是很容易想到了,首先说一下dom加载.我们通常在head里面写脚本的时候需要等待文档加载在进行处理,js是这么写的 window.onload=function(){ your code... } 但是这样是需要等待所有资源都加载完毕才会执行,如果页面有很多图片的话就会加载的很慢.dom2级呢有一个加载完成事件DOMContentLoad比较好用,这个事件是会在html文档结构加载完毕触发.比如说这个页面有10个img元素…
接着上一篇随笔讨论. 如果selector是其他字符串情况就比较多了比较复杂了 // Handle HTML strings if ( typeof selector === "string" ) {...} 开始分不同的情况处理 // Are we dealing with HTML string or an ID? if ( selector.charAt(0) === "<" && selector.charAt( selector.le…
一.jQuery总体架构 jQuery作为一款强大的js库,由以下模块构成: (function(window,undefined){ var jQuery=function(selector,context){ //... }; //工具方法utilities //回调函数 callbacks //异步队列 Defered Object //浏览器功能测试 Support //数据缓存 Data //队列 Queue //属性操作 Attributes //事件系统 Events //选择器…
JQuery安全分析: JQuery的风险均来源于对输入的数据没有进行有效性检验.客户端的Javascript需要检验:来源于服务器的数据.来源于当前页面的用户输入,服务器端需要检验来源于用户端的数据. JQUERY的下列方法存在XSS的风险,在使用前应该对输入的内容进行编码或检查 .html(val) $("#MyH").html("as>/" <img src=abc.jpg onerror='alert(0);'>alert('s');&qu…
转载 https://www.cnblogs.com/cndotabestdota/p/5664112.html +function ($) { "use strict";}(window.jQuery);全面分析   +function ($) { "use strict"; }(window.jQuery); 怎么理解? 匿名函数闭包 我们先来理一理函数表达式和函数声明的区别 函数表达式: 函数可以是匿名函数,也可以有函数名,但是这种函数无法直接使用,只有通过表…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta ht…
$()函数到底做的什么 jQuery在前端领域路人皆知,对于一向喜欢玩js的博主来说,虽然能力有限,但是还是很喜欢研究他的做为.那么一个简单的美元符号$与一对常见的()括号,jQuery底层到底做了哪些工作,如果你是前端新人,并喜欢刨根问底,你可以看一下下面的介绍.如果你是有经验的牛人,你可以指出错误,毕竟博主还是个半瓶子醋,没法完全理解. 一.函数调用 $(selector, context) : $()这一个简单的代码,其实调用了jQuery的构造函数,其中的selector和context…
在我的上一篇随笔里面分析了jQuery的构造函数,jQuery对象中有一个原型方法init才是是真正的构造函数,通过init的原型对象跟jQuery的原型对象保持引用关系使得init的实例可以正常调用jQuery的原型方法,就好像是jQuery的实例一样.下面就来看看init这个幕后的构造函数是怎么写的: init: function( selector, context, rootjQuery ) { ... } 可以看到这个方法接受3个参数,其前两个参数是jQuery方法传递过来的 var…
我的jQuery版本为1.7* 这个版本代码比之前的版本优化了很多,结构也清晰了不少,就用最新的吧. 打开jQuery源代码 首先你能看到所有代码被一个 (function(window,undefined){ })(window) 这是个什么东西.. 首先,这是一个匿名函数(不懂?那就先去谷歌下吧): 其次,这是一个自调用匿名函数: 这段代码做了三件事 第一件:创建一个只给jQuery用的空间,我们估且就叫 “私有空间”,与C++的命名空间很相似,为了保证jQuery不与其他JavaScrip…
作者:zccst 看一下是如何写的 jQuery.extend({ prop:"" method:function(){} }); 可以看出,这些方法是jQuery的静态属性和方法(也即是工具方法),将来既可以直接提供给用户使用,也可以在内部使用. 具体实现的工具属性和方法有(同时也标注了哪些在内部使用) jQuery.extend({        expando  :  生成唯一JQ字符串(内部)        noConflict()  :  防止冲突        isRead…
+function ($) { "use strict"; }(window.jQuery); 怎么理解? 匿名函数闭包 我们先来理一理函数表达式和函数声明的区别 函数表达式: 函数可以是匿名函数,也可以有函数名,但是这种函数无法直接使用,只有通过表达式左侧的变量来调用. var a = function(){ alert('Function expression'); } var b = new a(); 函数声明:必需要有函数名  function a(){ alert('Func…
每次看到三元表达式就会惶惶然分不清怎样读,正如语文中的断句一样,jquery源代码中的三元表达式更是不知怎样断句. 附jquery中的inArray实现. 大家熟悉jquery的应该都不陌生inArray的使用方法. 在源代码实现中,先推断了arr是否存在,假设不存在.则可直接返回-1.否则进行兴许推断,当存在indexOf方法时,则直接使用call来调用indexOf方法. 否则继续. 在jquery代码中处处体现代码构建者对于javascript的深刻理解.譬如这里对arr.length的缓…
我分析的jQuery版本是1.8.3.Sizzle代码从3669行开始到5358行,将近2000行的代码,这个引擎的版本还是比较旧,最新的版本已经到v2.2.2了,代码已经超过2000行了.并且还有个专门的Sizzle主页. 从一个demo开始,HTML代码如下: <div id="grand_father"> <div id="father"> <div id="child1" class="child&…
该方法接受一个JSON字符串,返回解析后的对象. 传入一个畸形的JSON字符串会抛出一个异常.比如下面的都是畸形的JSON字符串: {test: 1} ( test 没有包围双引号) {'test': 1} (使用了单引号而不是双引号) 另外,如果你什么都不传入,或者一个空字符串.null或undefined,parseJSON都会返回 null . 源码分析: parseJSON: function( data ) { if ( typeof data !== "string" ||…
所谓静态方法是jQuery本身得公共方法,并不需要通过实例化来调用,一般也称为工具方法,下面先来列绝下jQuery.noConflict方法的用法: noConflict() 方法让渡变量 $ 的 jQuery 控制权. 该方法释放 jQuery 对 $ 变量的控制. 该方法也可用于为 jQuery 变量规定新的自定义名称. var jq=$.noConflict(); 下面来做个测试: <script src='jquery-1.7.1.js'></script> <scr…
这次分析的方法跟前面不同,虽然pushStack也是原型方法之一,但是我们几乎从不用在页面调用,在参考手册里面也没有这个方法的使用说明,但是这个方法还是非常重要的,在使用很多jQuery的其他方式都会隐式的调用此方法: 它为以下方法提供支持:‰ ‰ jQuery 对象遍历:.eq()..first()..last()..slice()..map().‰ ‰ DOM 查找.过滤:.find()..not()..filter()..closest()..add()..andSelf().‰ ‰ DO…
问题提出  JQuery不支持hide和show作为事件形式出现, 实际上这两个仅仅是JQuery对象的一个方法(fn): 有一类UI交互需求,根据一个DOM对象的或者显示对附属的DOM对象做相同操作, 一般情况下, 利用jquery hide和show方法的扩展参数中的回调函数,是可以实现的,例如: $( "#book" ).hide( "slow", function() { $( "#booklet" ).hide() }); 如果附属DO…
( function( global, factory ) { "use strict"; if ( typeof module === "object" && typeof module.exports === "object" ) { module.exports = global.document ? factory( global, true ) : function( w ) { if ( !w.document ) {…
最近在拜读艾伦在慕课网上写的JQuery课程,感觉在国内对JQuery代码分析透彻的人没几个能比得过艾伦.有没有吹牛?是不是我说大话了? 什么是Sizzle引擎? 我们经常使用JQuery的选择器查询元素,查询的选择器有简单也有复杂:    简单点:“div”.“.navi”.“div.navi”. 复杂点:"div input[type='checkbox']"."div.navi + .section p". Query实现查询时也是优先使用DOM标准查询函数,…
最原始的事件注册 addEventListener方法大家应该都很熟悉,它是Html元素注册事件最原始的方法.先看下addEventListener方法签名: element.addEventListener(event, function, useCapture) event:事件名,例如“click”,这里要提醒的一点是不要加前缀“on”;    function:事件触发时执行的函数;    userCapture:默认为false,表示event事件在冒泡阶段触发.如果设置为true,则…
最近看了一些jquery的进阶教程,感觉很不错,与大家分享下! jQuery——构造函数 ◦体积小(v1.2.3 15kb)◦丰富的DOM选择器(CSS1-3 + XPath) ◦跨浏览器(IE6,FF,Safari,Opera)◦链式代码◦强大的事件.样式支持◦强大的AJAX功能◦易于扩展,插件丰富 jQuery的构造函数接收四种类型的参数: jQuery(expression,context) jQuery(html) jQuery(elements) jQuery(fn) 第一种根据表达式…
jQuery().end()的作用是返回当前jQuery对象的上一个状态. 1.end()源码: // 所有通过pushStack方法获得的jQuery对象都可以通过end方法返回之前的状态   // 如果有preObject对象这返回该对象,否则调用构造函数返回jQuery的空对象     end: function() {         return this.prevObject || this.constructor(null);     }, end()的源码很简单,但是需要了解pr…
1.总体架构 1.1自调用匿名函数 //自调用匿名函数 (function(window,undefined){ //jquery code})(window); 1.这是一个自调用匿名函数.第一个括号内创建一个匿名函数,第二个括号,立即执行2.为什么要创建这样一个“自调用匿名函数”呢???通过定义一个匿名函数,创建一个“私有”的命名空间,该命名空间的变量和方法,不会破坏全局的命名空间.这点非常有用也是js框架必须支持的功能,jQuery应用,必须要确保jQuery创建的变量不能和导入他的程序所…
概述 JQuery是一个JavaScript库,jQuery的核心思想是“先选中某些网页元素,然后对其进行某种处理”(find something, do something),也就是说,先选择后处理,这是jQuery的基本操作模式.所以,绝大多数jQuery操作都是从选择器开始的,返回一个选中的结果集. JQuery选择器 jQuery 参考手册 - 选择器:http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp   JQuery构…
一个工厂 (function(global, factory){ "use strict" // operation_1 })(typedef window !== "undefined" ? window : this, function (window, noGlobal) { // operation_2 }) =====> (function(args,...){...})(params,...) // 一种自执行方法,形式为(function(){}…
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐进增强)优雅的处理能力以及 Ajax 等方面周到而强大的定制功能无不令人惊叹. 另外,阅读源码让我接触到了大量底层的知识.对原生JS .框架设计.代码优化有了全新的认识,接下来将会写一系列关于 jQuery 解析的文章. 我在 github 上关于 jQuery 源码的全文注解,感兴趣的可以围观一下…
说到jquery可能是大家最经常用到的,在日常的编写程序中最经常使用到,在使用jquery插件的同时,深入的解读jquery源码有利于我们学到设计的思想和实现的技巧 在jquery源码的分析中,其中艾伦 Aaron的博客有深入的介绍,其在慕课网上也有相应的源码的解读,感兴趣的同学可以去看看 此博客是鉴于自己对jquery的学习中的所记录的,学习的jquery源码 jquery源码整体分析 //采用闭包传入window (function( window, undefined ) {//doing…
jQuery整体架构源码解析 最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐进增强)优雅的处理能力以及 Ajax 等方面周到而强大的定制功能无不令人惊叹. 另外,阅读源码让我接触到了大量底层的知识.对原生JS .框架设计.代码优化有了全新的认识,接下来将会写一系列关于 jQuery 解析的文章. 我在 github 上关于 jQuery 源码的…
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐进增强)优雅的处理能力以及 Ajax 等方面周到而强大的定制功能无不令人惊叹. 另外,阅读源码让我接触到了大量底层的知识.对原生JS .框架设计.代码优化有了全新的认识,接下来将会写一系列关于 jQuery 解析的文章. 我在 github 上关于 jQuery 源码的全文注解,感兴趣的可以围观一下…