jquery框架概览(二)
(function(window, undefined) {
})(window)
window对象作为参数传进闭包的好处
- JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员
- 在函数中定义一个变量时,这个变量只对当前函数可见,javascript会搜索当前函数的作用域,如果没有找到,则继续向上层搜索,而查询是要消耗性能的.
- 在对jQuery代码进行压缩时,window就能在jQuery内部用任意的简写字母代替
undefined为什么作为参数传进去
- undefined可以在js中被修改,这样jQuery内容使用的undefined就被修改了
代码的38~41行
var _jQuery = window.jQuery,
_$ = window.$;
在js中如果也定义了$和jQuery, jQuery和$就保存了这两个变量,避免了冲突
代码的61~63行定义了jQuery函数(返回的是一个对象)
jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
},
代码的96行就定义了jQuery.fn,就能知道它其实就是jQuery的原型
jQuery.fn = jQuery.prototype={}
代码的283行含义把jQuery构造函数的原型的init的构造函数的原型对jQuery构造函数的原型有引用关系
jQuery.fn.init.prototype = jQuery.fn;
上面的有些绕口看代码吧
function jQuery(){
return new jQuery.prototype.init();
}
jQuery.prototype.init=function(){};
jQuery.prototype.css=function(){console.log("2")};
jQuery.prototype.init.prototype=jQuery.prototype;
jQuery().css();
下面是代码的示意图

代码的66~82行是一些正则
// Used for matching numbers
core_pnum = /[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,
- [+-]? 表示匹配一个+号或者一个-号也可能一个都没有
- (?:\d*\.|)
(?:) 表示不捕获 \d*表示0个或者多个数字,.表示一个小数点,|表示或者为空
- \d+ 表示1个或者多个数字
- (?:[eE][+-]?\d+|)
[eE]表示e或者E,[+-]?\d表示有且只有一个符号或者一个都没有,多个数字
- core_pnum
- 其实就是保存着一个字符串"[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)",方便和后续的组合成一个正则
// Used for splitting on whitespace
core_rnotwhite = /\S+/g,
- /\S+/g 表示所有的非空白的字符
// A simple way to check for HTML strings
// Prioritize #id over <tag> to avoid XSS via location.hash (#9521)
// Strict HTML recognition (#11290: must start with <)
rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,
- 匹配的是<p>aaa或者#id
// Match a standalone tag
rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>|)$/,
- 匹配独立的标签比如<p></p>
// Matches dashed string for camelizing
rmsPrefix = /^-ms-/,
- 匹配ie浏览器的前缀比如chrome的前缀(-webkit-)
rdashAlpha = /-([\da-z])/gi,
- 匹配一个-号加数字或者字母
jquery框架概览(二)的更多相关文章
- 从零实现一个简易的jQuery框架之二—核心思路详解
如何读源码 jQuery整体框架甚是复杂,也不易读懂.但是若想要在前端的路上走得更远.更好,研究分析前端的框架无疑是进阶路上必经之路.但是庞大的源码往往让我们不知道从何处开始下手.在很长的时间里我也被 ...
- jquery框架概览(一)
参照jQuery 2.0.3版本(http://files.cnblogs.com/files/snoy/jquery-2.0.3.js")来进行的源码分析 从代码的最外层可以看到是一个II ...
- MVC系列——MVC源码学习:打造自己的MVC框架(二:附源码)
前言:上篇介绍了下 MVC5 的核心原理,整篇文章比较偏理论,所以相对比较枯燥.今天就来根据上篇的理论一步一步进行实践,通过自己写的一个简易MVC框架逐步理解,相信通过这一篇的实践,你会对MVC有一个 ...
- JavaScript 框架设计(二)
JavaScript 高级框架设计 (二) 上一篇,JavaScript高级框架设计(一)我们 实现了对tag标签的选择 下来我们实现对id的选择,即id选择器. 我们将上一篇的get命名为getTa ...
- jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法
一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...
- javaScript之jQuery框架
一.jQuery简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨 ...
- 深入理解jQuery框架-框架结构
这是本人结合资料视频总结出来的jQuery大体框架结构,如果大家都熟悉了之后,相信你们也会写出看似高档的js框架: jquery框架的总体结构 (function(w, undefined){ //定 ...
- jQuery框架学习第十一天:实战jQuery表单验证及jQuery自动完成提示插件
jQuery框架学习第一天:开始认识jQueryjQuery框架学习第二天:jQuery中万能的选择器jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQuer ...
- 手写 jQuery 框架
1.测试页面; <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
随机推荐
- PAT Advanced 1115 Counting Nodes in a BST (30) [⼆叉树的遍历,BFS,DFS]
题目 A Binary Search Tree (BST) is recursively defined as a binary tree which has the following proper ...
- HDU 2094产生冠军(set思维题)
Problem Description 有一群人,打乒乓球比赛,两两捉对撕杀,每两个人之间最多打一场比赛.球赛的规则如下:如果A打败了B,B又打败了C,而A与C之间没有进行过比赛,那么就认定,A一定能 ...
- jQuery下锚点的平滑跳转
对于锚点的平滑跳转,我觉得要谨慎使用,在个人站点或是这个效果含有功能提示可以用一用,在一般的商业性质的网站上,权衡来讲,不用更好,当然,这只是我的个人意见.jQuery库已经为我们做了很多的工作了,所 ...
- php empty,isset,is_null判断比较(差异与异同)
php empty,isset,is_null判断比较(差异与异同) 作者: 字体:[增加 减小] 类型:转载 做php开发时候,想必在使用:empty,isset,is_null 这几个函数时候,遇 ...
- nginx调整large_client_header_buffers
https://nginx.org/en/docs/http/ngx_http_core_module.html#large_client_header_buffers Syntax: large_c ...
- 同步nginx日志到s3 bulket
1.此处用的是增量同步 #!/bin/bash rm -rf /var/log/nginx/access.log.*.* local_host="`hostname --i`" a ...
- php开启opcache
OPcache 通过将 PHP 脚本预编译的字节码存储到共享内存中来提升 PHP 的性能, 存储预编译字节码的好处就是 省去了每次加载和解析 PHP 脚本的开销. 一.php.ini配置opchche ...
- 14)载入png图片
1)之前在窗口中载入图片 一般都是bmp的 但是 我想从网上下一些图片,这些图片可能是png的 2)那么就有了下面的操作 3)png图片可以直接做成透明的. 4)首先是创建窗口的基本代码: #i ...
- PAT Advanced 1154 Vertex Coloring (25) [set,hash]
题目 A proper vertex coloring is a labeling of the graph's vertices with colors such that no two verti ...
- 新手学习Web前端的三个高效学习方法,基础要重视
作为新手,出于对风险的担心,不免在学习一项新技能或者转投一个新行业的时候,有所犹豫与徘徊.毕竟,在这场类似冒险的选择中,我们需要投入时间.精力以及承受相关的经济损失.但是,只有勇敢迈出第一步,才能为生 ...