一.首先是最常见的闭包 (Closure) 范式自执行函数的写法,这里用匿名函数封装(构造块级作用域),避免了匿名函数内部的代码与外部之间发生冲突(如使用了相同的变量名). (function() {// ...})(); 二.自执行函数和其他函数类似,都可以传入参数:jQuery源码中将window作为一个参数传入, window是DOM对象模型的最顶层对象,把全局变量传进来,就避免了到外层去寻找,提高效率: (function(window) {// ...})(window); 当然你也可…

这篇主要说一下在源码中jquery对象是怎样设计实现的,下面是相关代码的简化版本: (function( window, undefined ) { // code 定义变量 jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context, rootjQuery ); }, // code 定义变量 jQuery.fn = jQuery.prototype = { jquery: core…

jquery源码中涉及了大量原生js中的知识和概念,文章是我在学习两者的过程中进行的整理和总结,有不对的地方欢迎大家指正. 本文使用的jq版本为2.0.3,附上压缩和未压缩版本地址: http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.js http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js 查看源码可以发现整体结构是这样: (function( window, undefined…

jquery源码中noConflict(防止$和jQuery的命名冲突)的实现原理 最近在看jquery源码分析的视频教学,希望将视频中学到的知识用博客记录下来,更希望对有同样对jquery源码有困惑的童鞋能有一点点的帮助(我是从一个小白的角度出发,感觉挺容易理解的,顺带说下视频中jquery源码选取的是2.0.3版本). 我们都知道,使用$和jQuery效果是一样的,比如: <button id="btn">点我</button> $("#btn&q…

所有文章搬运自我的个人主页:sheilasun.me 引子 最近打算试试看看jQuery的源码,刚开个头就卡住了.无论如何都理解不了jQuery源码入口部分中的 return new jQuery.fn.init( selector, context ) 看了好多帖子都没看懂,觉得自己很蠢,心里很苦,吃宵夜都不香了.昨晚去游泳,游完8*100后靠在池壁上喘气,有人从我旁边出发,水花溅起的瞬间,我突然,想通了!这大概就是回光返照 (划掉)福至心灵吧! 下面一点点地说下我对jQuery入口源码的理解…

前言 jQuery源码中有赌博网站? 起因是公司发的一份自查文件,某银行在日常安全运营过程中发现在部分jQuery源码中存在赌博和黄色网站链接. 链接分为好几个: www.cactussoft.cn blindsignals.com www.planeart.cn/?p=877 如果你的代码中使用了jQuery或者间接使用了jQuery,请最好自查一下. 不要以为只有从网上随便抄来的jQuery源码才会存在这个问题,正常的jQuery源码也可能有,比如阿里的CDN上的jQuery源码中就有. 自…

(function( window, undefined ) {})(window);这个,为什么要将window和undefined作为参数传给它? (function( $, undefined ) {})(jQuery); 同理 因为 ecmascript 执行JS代码是从里到外,因此把全局变量window或jQuery对象传进来,就避免了到外层去寻找,提高效率.undefined在老一辈的浏览器是不被支持的,直接使用会报错,js框架要考虑到兼容性,因此增加一个形参undefined. 还…

接上一篇,jquery源码的这种写法叫做匿名函数自执行 (function( window, undefined ) { // code })( window ); 函数定义了两个参数window和undefined,执行函数传入了window对象. 参数window 因为变量对象的作用域链的关系,我们知道即使不传入window对象,函数内部也是可以访问到它的,那么,这里传入window对象的意义主要有两点: 1.提高性能 按照变量对象的作用域链顺序,函数会先在内部查找window变量,而函数内…

/*! * Includes Sizzle.js 选择器,独立的库 * http://sizzlejs.com/ */ (function( window, undefined ) { //"use strict"; var // rootjQuery = jQuery(document) = $();压缩有用 rootjQuery, // dom是否加载完 readyList, // core_strundefined == 'undefined' core_strundefined…

先看一下源码 //65-72行 // Matches dashed string for camelizing //匹配连字符 ‘-’ 和其后的第一个字母或数字,如果是字母,则替换为大写,如果是数字,则保留数字 rdashAlpha = /-([a-z]|[0-9])/ig, //匹配 IE 中的 ‘-ms-’,替换为 ‘ms-’,这是因为 IE 中,‘-ms-’ 对应小写的 ‘ms’,而不是驼峰式的 ’Ms‘ rmsPrefix = /^-ms-/, // Used by jQuery.cam…

$() 即调用了jQuery.fn.init方法 jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context, rootjQuery ); } 下面是init方法代码: init: function( selector, context, rootjQuery ) { var match, elem; if ( !selector ) { return this; } if ( typ…

1. 避免使用 $.fn.each 或 $.each 因为它比原生的 for/while 真的会慢一些,循环次数越多差距越大. 另外,对象的 for-in 比 for 是要快一丢丢的,但数组的 for-in 要比 for 慢. 但是吧,方便呀,可以少好多变量,其实无所谓啦. 2. 选择器 始终要相信,原生的普遍要快一些,jquery 也是如此, id 选择器 $('#id') / 元素标签选择器 $('input') / 类选择器 $('.class') 都是原生的 而伪类选择器 $(':hid…

代码的本质突出顺序.有序这一概念,尤其在javascript——毕竟javascript是单线程引擎. javascript拥有函数式编程的特性,而又因为javascript单线程引擎,我们的函数总是需要有序的执行.优秀代码常常 把函数切割成各自的模块,然后在某一特定条件下执行,既然这些函数是有序的执行,那么我们为什么不编写一个统一管理的对象,来帮助我们管理这些函数——于是,Callbacks(回调函数)诞生. 本文原创于linkFly,原文地址,遵循MIT协议. 这篇文章主要分为以下知识 什么…

终于动笔开始 jQuery 源码解析第二篇,写文章还真是有难度,要把自已懂的表述清楚,要让别人听懂真的不是一见易事. 在 jQuery 源码解析一:jQuery 类库整体架构设计解析 一文,大致描述了 jQuery 源码整体大致架构,主要分为以下几个点:   A 通过自执行函数,在内部将 jQuery (jQuery 为一个函数,同时,在 JS 中,函数也为对象)以 window.jQuery=window.$ 引入,供用户直接便可使用 $.jQuery 调用.       B 以 C#.Jav…

如果是做 web 的话,相信都要对 Dom 进行增删查改,那大家都或多或少接触到过 jQuery 类库,其最大特色就是强大的选择器,让开发者脱离原生 JS 一大堆 getElementById.getElementsByName...官方提供超长方法 api . jQuery 整体源码,本人也还在阅读中,暂时记录一下.(为什么要看源码,原因很简单---- 一 好好了解一下 jQuery 原理  二 为了装逼显摆).   一  使用 jQuery 时候,首先需引入 jQuery 文件,而之后,大家…

近来一直利用业余时间在看jquery2.1.1源码,大约看了两千行了.平时看的时候,做了一些笔记,贴出来分享. 1. Array.prototype.slice.call 可以将伪数组转化为真正的数组 其实,这里所谓的“伪数组”就是有length属性,并且有“0”.“1”.“2”等这些属性的对象,如下代码: var obj = { 0: "A", 1: "B", 2: "C", length: 3 }; var slice = [].slice;…

本人是一名.net程序员..... 你一个.net coder 看什么jQuery 源码啊? 原因吗,很简单.技多不压身吗(麻蛋,前端工作好高...羡慕). 我一直都很喜欢JavaScript,废话不多说了,直接切入正题. 最近看了好几篇jQuery 源码的文章,对于jQuery的无new构建  很是不解. 查了很多资料,总算是搞明白了. jQuery的无new构建 jQuery框架的核心就是从HTML文档中匹配元素并对其执行操作. 回想一下使用 jQuery 的时候,实例化一个 jQuery…

(function (window, undefined) { //构建jQuery对象 var document = window.document, navigator = window.navigator, location = window.location; var jQuery = (function () { var jQuery = function (selector, context) { return new jQuery.fn.init(selector, context…

最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐进增强)优雅的处理能力以及 Ajax 等方面周到而强大的定制功能无不令人惊叹. 另外,阅读源码让我接触到了大量底层的知识.对原生JS .框架设计.代码优化有了全新的认识,接下来将会写一系列关于 jQuery 解析的文章. 我在 github 上关于 jQuery 源码的全文注解,感兴趣的可以围观一下…

分离构造器 通过new操作符构建一个对象,一般经过四步: A.创建一个新对象 B.将构造函数的作用域赋给新对象(所以this就指向了这个新对象) C.执行构造函数中的代码 D.返回这个新对象 最后一点就说明了,我们只要返回一个新对象即可.其实new操作符主要是把原型链跟实例的this关联起来,这才是最关键的一点,所以我们如果需要原型链就必须要new操作符来进行处理.否则this则变成window对象了. 改造jQuery无new的格式,我们可以通过instanceof判断this是否为当前实例:…

写在前面: 先讲讲ajax中的相关函数,然后结合函数功能来具体分析源代码. 相关函数: >>ajax全局事件处理程序 .ajaxStart(handler) 注册一个ajaxStart事件处理器.当一个Ajax请求开始,并且同时无其它未完成的Ajax请求时,jQuery触发ajaxStart事件. .ajaxSend(handler) 注册一个ajaxSend事件处理器.当一个Ajax请求被发送时触发ajaxSend事件. .ajaxSuccess(handler) 注册一个ajaxSucce…

注释:本文使用$.fn.method指代调用一系列选中的元素的方法.例如,$.fn.addClass,指代$('div').addClass(‘blue’) 或 $('a.active’).addClass(‘in-use’)这些用法.$.fn指代jQuery对象. 1.Sizzle’s weight:Sizzle 是jQuery基于CSS选择器的DOM查找引擎.它可以将$(‘div.active’)转换成一个可操作的元素数组.Sizzle是jQuery很大的一个组成部分,但是它的规模之大的确令…

在JQuery源码中发现,JQuery定义一个类,但不用new关键字去创建该类对象,而使用方法调用()方式去创建该对象. 很多时候我们是这样写类,然后使用new创建对象的: function Person(name,age){ this.name=name; this.age=age; } Person.prototype={ setName : function(n){this.name=n;}, getName : function(){return this.name;} } var p…

在深入看jquery源码中,大家会发现源码写的相当巧妙.那我今天也通过几个源码中用到的技巧来抛砖引玉,希望大家能共同研究源码之精华,不要囫囵吞枣. 1.将类数组转化成数组 我想大家首先想到的方法是for in循环,这是很对的,也是行之有效的.但是并非是效果最优的.因为需要循环,然后把循环出来的值push进新数组里,估计怎么也得10行代码吧... 那么jquery中是怎么用的呢? Array原型上的slice方法. 我们在控制台中打上Array.prototype.slice 那么会出来一个完整的…

一般我们在创建构造函数即使用的时候会这样写,使用的时候会使用new 关键字,先实例化,然后使用. function test(name, age) { this.name = name; this.age = age; this.sayHello = function(){ console.log(this.name+ ', say hello'); } } ); ls.sayHello(); 然而在使用jquery 的时候 都是直接使用其方法,不需要使用new 关键字. 看了下jquery源码…

笔记(二)也分为三部分: 一. 介绍: 注释说明:v2.0.3版本.Sizzle选择器.MIT软件许可注释中的#的信息索引.查询地址(英文版)匿名函数自执行:window参数及undefined参数意义 'use strict' 严格模式:代码规范及其不推荐严格模式理由rootjQuery根节点:document 获取及其声明意义readyList DOM加载相关……typeof undefined 字符串形式'undefined'的存放及其意义. 先看开头的注释: /*! * jQuery J…

1.逐行分析jQuery源码的奥秘 - 网易云课堂  http://study.163.com/course/courseMain.htm?courseId=465001#/courseDetail?tab=1   此课程免费,网易邮箱登录即可看 妙味课堂:一起学习jQuery源码[逐行分析jQuery源码的奥秘] - 妙味视频教程 - 妙味茶馆 - Powered by Discuz!  http://bbs.miaov.com/forum.php?mod=viewthread&tid=738…

jQuery是面向对象的设计通过window.$ = window.jQuery = $; 向外提供接口,将$挂在window下,外部就可以使用$和jQuery $("#div1").css() //$("#div1")是jQuery的一个实例对象,css()是实例的方法[实例的方法只能jQuery对象使用]$("#div1").html() $.trim()$.proxy() //工具方法,相当于静态方法,[jQuery对象和原生js对象都可以…

什么是类型转化器? jQuery支持不同格式的数据返回形式,比如dataType为 xml, json,jsonp,script, or html 但是浏览器的XMLHttpRequest对象对数据的响应只有 responseText与responseXML 二种 所以现在我要定义dataType为jsonp,那么所得的最终数据是一个json的键值对,所以jQuery内部就会默认帮你完成这个转化工作 jQuery为了处理这种执行后数据的转化,就引入了类型转化器,如果没有指定类型就依据响应头Con…

1. 总体架构 1.1自调用匿名函数 self-invoking anonymous function 打开jQuery源码,首先你会看到这样的代码结构: (function( window, undefined ) { // jquery code })(window); 1.这是一个自调用匿名函数.在第一个括号内,创建一个匿名函数:第二个括号,立即执行 2.为什么要创建这样一个“自调用匿名函数”呢? 通过定义一个匿名函数,创建了一个“私有”的命名空间,该命名空间的变量和方法,不会破坏全局的命…