jQuery 源码基本框架
抽丝剥茧, 7000+ 行的 jQuery 源码基本可以概括为以下的伪代码
(function (window, undefined) {
//将 document 封装成 jQuery 对象并缓存
var rootjQuery,
//dom ready 事件的委托队列
readyList,
//快速地识别 html 标记 如 <div> 或者 #id
rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,
jQuery = function (selector, context) {
return new jQuery.fn.init(selector, context, rootjQuery);
};
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
init: function (selector, context, rootjQuery) {
// $(""), $(null), $(undefined), $(false)
if (!selector) {
return this;
}
var match = rquickExpr.exec(selector);
// $('<div></div>')
jQuery.parseHTML(match[1])
return this;
// $(#id)
return document.getElementById(selector);
// $('.class'), $('.class', context), $('#class', context)
// 其中 context 是jQuery元素
return (context || rootjQuery).find(selector);
// $('.class', domElm)
return this.constructor(context).find(selector);
// selector is function
return rootjQuery.ready(selector);
return jQuery.makeArray(selector, this);
},
ready: function (fn) {
// Add the callback
jQuery.ready.promise().done(fn);
return this;
}
}
jQuery.init.prototype = jQuery.fn;
jQuery.extend = jQuery.fn.extend = function () {
};
rootjQuery = jQuery(document);
// Sizzle 代码
(function (window, undefined) {
function Sizzle(selector, context, results, seed) {
if (support.qsa) {
return querySelectorAll(selector)
}
return select(selector.replace(rtrim, "$1"), context, results, seed);
}
function select(selector, context, results, seed) {
var match = tokenize(selector);
}
function tokenize(selector, parseOnly) {
}
jQuery.find = Sizzle;
})(window);
// 对 jQuery 对象的扩展
jQuery.extend({});
// 对 jQuery.fn 对象的扩展
jQuery.fn.extend({});
window.$ = window.jQuery = jquery;
})(window);
jQuery 源码基本框架的更多相关文章
- jQuery源码整体结构(源码2.0.3)
拨开jQuery的面纱,最近了解了下jQuery源码整体框架.主要包括: (1) jQuery 核心模块 (2) sizzle 选择器引擎 (3) Deferred 异步队列 (4) Supp ...
- jQuery源码分析之整体框架
之前只是知道jQuery怎么使用,但是我觉得有必要认真的阅读一下这个库,在分析jQuery源码之前,很有必要对整个jQuery有个整体的框架概念,才能方便后面对jQuery源码的分析和学习,以下是我总 ...
- 三.jQuery源码解析之jQuery的框架图
这张图片是对jQuery源码截图,一点一点拼出来的. 现在根据这张图片来对jQuery框架做一些说明. 一.16~9404行可以发现,最外层是一个自调用函数.当jQuery初始化时,这个自调用函数包含 ...
- 读jQuery源码之整体框架分析
读一个开源框架,大家最想学到的就是设计的思想和实现的技巧.最近读jQuery源码,记下我对大师作品的理解和心得,跟大家分享,权当抛砖引玉. 先附上jQuery的代码结构. (function(){ / ...
- jQuery源码学习感想
还记得去年(2015)九月份的时候,作为一个大四的学生去参加美团霸面,结果被美团技术总监教育了一番,那次问了我很多jQuery源码的知识点,以前虽然喜欢研究框架,但水平还不足够来研究jQuery源码, ...
- jQuery源码:从原理到实战
jQuery源码:从原理到实战 jQuery选择器对象 $(".my-class"); document.querySelectorAll*".my-class" ...
- JQuery源码解析(一)
写在前面:本<JQuery源码解析>系列是基于一些前辈们的文章进行进一步的分析.细化.修改而写出来的,在这边感谢那些慷慨提供科普文档的技术大拿们. 要查阅JQ的源文件请下载开发版的JQ.j ...
- jQuery源码笔记(一):jQuery的整体结构
jQuery 是一个非常优秀的 JS 库,与 Prototype,YUI,Mootools 等众多的 Js 类库相比,它剑走偏锋,从 web 开发的实用角度出发,抛除了其它 Lib 中一些中看但不实用 ...
- jquery 源码解析
静态与实力方法共享设计 遍历方法 $(".a").each() //作为实例方法存在 $.each() //作为静态方法存在 Jquery源码 jQuery.prototype = ...
随机推荐
- STM32F072B-DISCO 深入研究 USB系统
调试USB例题需要用到2个上位机程序: PC端HID交互程序,提供了VC源程序. 图形方式的按钮输入.LED输出操作: 总线扑捉器: main程序初始化部分很简单: /* Initialize USB ...
- 内存模型(memory models)和命名空间(namespace)
继续<C++ premier plus > 先来解释一下scope和linkage,所谓scope,是指变量的作用范围,所谓linkage,是指变量能否在不同文件中共享 1,自动变量(au ...
- Matlab编程-图形处理功能
绘图功能最基本的命令行:plot(y). 二维图形: (1) >> y=rand(100,1); >> plot(y) y是随机的实向量,以生成y的索引为横坐标,y为纵坐标绘图 ...
- 第十七章、程序管理与 SELinux 初探 工作管理 (job control)
工作管理 (job control) 这个工作管理 (job control) 是用在 bash 环境下的,也就是说:『当我们登陆系统取得 bash shell 之后,在单一终端机介面下同时进行多个工 ...
- 内存数据库MemSQL ——基于内存,MVCC+哈希表、跳表
本周数据库业界探讨最火热的话题就是MemSQL,究竟是不是"旧瓶装新酒"引发了诸多的辩论,同时也引发了究竟是产品技术重要还是DBA重要的疑问.网络中有一些关于MemSQL的介绍,基 ...
- Oracle keep详解
原题目 select * from dept where deptno=(select max(deptno) keep(dense_rank last order by count(1)) fr ...
- android 加载图片防止内存溢出
图片资源: private int fore[]; private int back[]; fore = new int[]{R.drawable.a0, R.drawable.a1, R.drawa ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(44)-工作流设计-设计表单
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(44)-工作流设计-设计表单 系列目录 设计表单是比较复杂的一步,完成一个表单的设计其实很漫长,主要分为四 ...
- android异步任务载入数据界面实现
android 异步任务的一个后台方法本质是开启一个线程完毕耗时操作,其它onPostExecute方法和onPreExecute方法执行在UI主线程用于更新UI界面.为了提高用户体验常见的异步任务载 ...
- QStandardItemModel角色控制及QTreeView加入不同的右键菜单
1.概述 QTreeView最长用的一个功能就是作为导航栏,像vs里的项目结构树,word的文档结构图,资源管理器的文档结构,等等都是利用树形结构组织的,在前面已经讲述了Qt中使用标准化项目模型QSt ...