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

$() 即调用了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…

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源码中就有. 自…

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

第一次尝试使用Office Word,方便程度大大超过网页在线编辑,不过初次使用,一些内容不甚熟悉,望各位大神见谅~ 在上次的文章中,把整个jQuery的结构进行了梳理,得到了整个jQuery的简化结构,如下: (function(){ (21 , 94) 定义了一些变量和函数 jQuery = function(){}; (96 , 283) 给JQ对象,添加一些方法和属性 (285 , 347) extend : JQ的继承方法 (349 , 817) jQuery.extend() : 扩…

先看一下源码 //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…

艾伦说啊,学习javascript,必须要学会看源码,通过高手的源码,你可以从中吸取很多书本上难以看到的技巧. 看源码就好像喝鸡汤,所有的营养都在这汤里了.这汤就是源码,高手写的源码,就是最好的鸡汤. 这也是他短短两年时间,快速在前端界崭头露角,成为一名新星的原因.一般人,他不会说的,但是我觉得,好东西就要分享. 这样才能让前端界有更多新星出现,为推进整个前端的健康发展做出贡献. 他的这些源码经验,不知道会不会在他的新书里出现.如果有,算是提前爆料了. 下面就是我这些天,一边实践,一边总结的一些…

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

一个工厂 (function(global, factory){ "use strict" // operation_1 })(typedef window !== "undefined" ? window : this, function (window, noGlobal) { // operation_2 }) =====> (function(args,...){...})(params,...) // 一种自执行方法,形式为(function(){}…

前言 上一章我们介绍了如何搭建ethereum的debug环境.为了更深入的了解ethereum,我们需要了解一些ethereum的相关的知识,本章我们将介绍这些知识. ethereum相关知识 在学习ethereum的过程中,我们可能会遇到下面的一些知识: hash merkle tree merkle patricia tree rlp Hash(散列函数) Hash,一般翻译做“散列”,也有直接音译为“哈希”的,就是把任意长度的输入(又叫做预映射pre-image)通过散列算法变换成固定长…

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的源码有些晦涩难懂,本文分享一些我看源码的方法,每一个模块我基本按照这样的顺序去学习. 当我读到难度的书或者源码时,会和<如何阅读一本书>结合起来进行学习.推荐读读这本书,你可以从这里和这里下载. 第一部分:检视阅读 1. 收集参考资料:官方文档.书籍.百度/谷歌,专题/博客等,快速的浏览,对涉及的知识点.范围.深度.是否有参考意义等有大致的了解和判断,知道这些文章的作者想要解释或解决什么问题. 第二部分:分析阅读 2. 细读官方文档,官方有非…

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

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

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

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

一.对外提供接口 对外提供了jQuery. //可以通过jQuery或者$来找到jQuery (function(window,undefined){ //(21,94) 定义了一些变量和函数 jQuery=function(){}; window.jQuery=window.$=jQuery;//对外接口 })(window) jQuery本身是一个构造函数,包括了很多静态方法(工具方法)和实例方法.静态方法更底层. function jQuery(){} //jQuery是一个构造函数 //…

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

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

注释:本文使用$.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 源码解析一:jQuery 类库整体架构设计解析 一文,大致描述了 jQuery 源码整体大致架构,主要分为以下几个点:   A 通过自执行函数,在内部将 jQuery (jQuery 为一个函数,同时,在 JS 中,函数也为对象)以 window.jQuery=window.$ 引入,供用户直接便可使用 $.jQuery 调用.       B 以 C#.Jav…

在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…

一般我们在创建构造函数即使用的时候会这样写,使用的时候会使用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源码…

近来一直利用业余时间在看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;…

(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…