query原理的简单分析,让你扒开jquery的小外套。

 

引言

  最近LZ还在消化系统原理的第三章,因此这部分内容LZ打算再沉淀一下再写。本次LZ和各位来讨论一点前端的内容,其实有关jquery,在很久之前,LZ就写过一篇简单的源码分析。只不过当时刚开始写博客,写的相对来讲比较随意,直接就把源码给贴上来了,尽管加了很多注释,但还是会略显粗糙。

  这次LZ再次执笔,准备稍微规范一点的探讨一下jquery的相关内容。

jquery的外衣

  jquery是一个轻量级的JS框架,这点相信大部分人都听过,而jquery之所以有这样一个称呼,就是因为它悄悄披了一件外衣,将自己给隐藏了起来。

//以下截取自jquery源码片段
(function( window, undefined ) {
/* 源码内容 */
})( window );

  上面这一小段代码来自于1.9.0当中jquery的源码,它是一个无污染的JS插件的标准写法,专业名词叫闭包。可以把它简单的看做是一个函数,与普通函数不同的是,这个函数没有名字,而且会立即执行,就像下面这样,会直接弹出字符串。

    (function( window, undefined ) {
alert("Hello World!");
})( window );

  可以看出来这样写的直接效果,就相当于我们直接弹出一个字符串。但是不同的是,我们将里面的变量变成了局域变量,这不仅可以提高运行速度,更重要的是我们在引用jquery的JS文件时,不会因为jquery当中的变量太多,而与其它的JS框架的变量命名产生冲突。对于这一点,我们拿以下这一小段代码来说明。

    var temp = "Hello World!";
(function( window, undefined ) {
var temp = "ByeBye World!";
})( window );
alert(temp);

  这段代码的运行结果是Hello而不是ByeBye,也就是说闭包中的变量声明没有污染到外面的全局变量,倘若我们去掉闭包,则最终的结果会是ByeBye,就像下面这样。

    var temp = "Hello World!";
// (function( window, undefined ) {
var temp = "ByeBye World!";
// })( window );
alert(temp);

  由此就可以看出来,jquery的外衣就是这一层闭包,它是很重要的一个内容,是编写JS框架必须知道的知识,它可以帮助我们隐藏我们的临时变量,降低污染。

jquery的背心

  刚才我们说了,jquery将自己声明的变量全部都用外衣遮盖起来了,而我们平时使用的Jquery和$,却是真真实实的全局变量,这个是从何而来,谜底就在jquery的某一行代码,一般是在文件的末尾。

window.jQuery = window.$ = jQuery;

  这一句话将我们在闭包当中定义的jQuery对象导出为全局变量jQuery和$,因此我们才可以在外部直接使用jQuery和$。window是默认的JS上下文环境,因此将对象绑定到window上面,就相当于变成了传统意义上的全局变量,就像下面这一小段代码的效果一样。

    var temp = "Hello World!";
(function( window, undefined ) {
var temp = "ByeBye World!";
window.temp = temp;
})( window );
alert(temp);

  很明显,它的结果应该是ByeBye,而不是Hello。因为我们在闭包中导出了temp局部变量为全局变量,从而覆盖了第一行声明的全局变量temp。可以看出,就是通过导出的方式,jquery露出了自己的小背心。

jquery的内裤

  内裤保护的是我们的核心器官,因此非常重要。那么jquery的内裤也一样,也是最核心的功能,就是选择器。而选择器简单理解的话,其实就是在DOM文档中,寻找一个DOM对象的工具。

  首先我们进入jquery源码中,可以jquery对象的声明,看过以后会发现,原来我们的jquery对象就是init对象。

    jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context, rootjQuery );
}

  这里出现了jQuery.fn这样一个东西,它的由来可以在jquery的源码中找到,它其实代表的就是jQuery对象的原型。

jQuery.fn = jQuery.prototype;
jQuery.fn.init.prototype = jQuery.fn;

  这两句话,第一句把jQuery对象的原型赋给了fn属性,第二句把jQuery对象的原型又赋给了init对象的原型。也就是说,init对象和jQuery具有相同的原型,因此我们在上面返回的init对象,就与jQuery对象有一样的属性和方法。

  我们不打算深究init这个方法的逻辑以及实现,但是我们需要知道的是,jQuery其实就是将DOM对象加了一层包裹,而寻找某个或者若干个DOM对象是由sizzle选择器负责的,它的官方地址是http://sizzlejs.com/,有兴趣的猿友可以去仔细研究下这个基于CSS的选择器。

  下面是LZ截取的一个jQuery对象的属性和方法截图,方法这里就不提了,对于属性来说,我们最需要关注的只有一个属性,就是[0]属性,[0]其实就是原生的DOM对象。

  很多时候,我们在jQuery和DOM对象之间切换时需要用到[0]这个属性。从截图也可以看出,jQuery对象其实主要就是把原生的DOM对象存在了[0]的位置,并给它加了一系列简便的方法。这个索引0的属性我们可以从一小段代码简单的看一下它的由来,下面是init方法中的一小段对DOMElement对象作为选择器的源码。

    // Handle $(DOMElement)
if ( selector.nodeType ) {
/* 可以看到,这里将DOM对象赋给了jQuery对象的[0]这个位置 */
this.context = this[0] = selector;
this.length = 1;
return this;
}

  这一小段代码可以在jquery源码中找到,它是处理传入的选择参数是一个DOM对象的情况。可以看到,里面很明显的将jQuery对象索引0的位置以及context属性,都赋予了DOM对象。代码不仅说明了这一点,也同时说明了,我们使用$(DOMElement)可以将一个DOM对象转换为jQuery对象,从而通过转换获得jQuery对象的简便方法。

  

jquery的大腿

  大腿是非常性感令男人垂涎的地方,要说jquery最性感最令我们向往的,便是它的ready方法了,千万不要告诉LZ你使用jquery却从未用过$(function(){})或者是ready方法。这里LZ不打算带各位去看jquery的实现原理,因为比较复杂,而且这里我们的主旨不是为了一点一点的剖析源码,而是简介一下jquery的实现原理。

  实现类似jquery的ready方法的效果我们是可以简单做到的,它的实现原理就是,维护一个函数数组,然后不停的判断DOM是否加载完毕,倘若加载完毕就触发所有数组中的函数。遵循着这一思想,LZ拿出很久之前写的一个小例子,来给各位看一下。

(function( window, undefined ) {
var
jQuery = {
isReady:false,//文档加载是否完成的标识
readyList:[],//函数序列
//onload事件实现
ready : function(fn){
//如果是函数,加入到函数序列
if(fn && typeof fn == 'function' ){
jQuery.readyList.push(fn);
}
//文档加载完成,执行函数序列。
if(jQuery.isReady){
for(var i = 0;i < jQuery.readyList.length ;i++){
fn = jQuery.readyList[i];
jQuery.callback(fn);
}
return jQuery;
}
},
//回调
callback : function(fn){
fn.call(document,jQuery);
}
};
//导出对象
window.$ = window.jQuery = jQuery;
//判断加载是否完成
var top = false;
try {
top = window.frameElement == null && document.documentElement;
} catch(e) {}
if ( top && top.doScroll ) {
(function doScrollCheck() {
try {
top.doScroll("left");
jQuery.isReady = true;
jQuery.ready();
} catch(e) {
setTimeout( doScrollCheck, 50 );
}
})();
}
}(window));

  这段代码是LZ从之前的例子摘出来的,它的实现逻辑非常简单,但是可以达到jQuery的ready方法的效果,各位有兴趣的可以加入这个JS文件测试一下效果。需要注意的是,上面没有考虑浏览器兼容性,那段判断文档加载是否完成的代码是针对IE写的,因此只能在IE下测试。

  代码当中已经嵌入了简单的注释,因此LZ这里就不多做解释了,全部的源码可以在LZ的另一篇文章jquery源码分析找到,有兴趣的猿友也可以看下,那里模拟了一个非常简陋的jquery。

jquery的胳膊

  我们缺了胳膊依旧可以生活,甚至可以用脚写程序,但是不得不承认,有了胳膊的我们会更加如虎添翼。而对于jquery来说,extend方法便是它的胳膊,没有它我们依然可以很好的使用jquery,但是有了它,我们会更加畅快。

  这里LZ不再详细分析extend方法,有兴趣的朋友可以参考LZ很久之前的一篇文章jquery扩展函数详解,那里有较为详细的分析和解释。这里LZ只简单说两个extend方法的常用方式。

  1、使用jQuery.fn.extend可以扩展jQuery对象,使用jQuery.extend可以扩展jQuery,前者类似于给类添加普通方法,后者类似于给类添加静态方法。

  2、两个extend方法如果有两个object类型的参数,则会将后面的参数对象属性扩展到第一个参数对象上面,扩展时可以再添加一个boolean参数控制是否深度拷贝。

小结

  本次对于jquery的简单分析就到此为止了,由于LZ并不专注于前段开发,所以对于jquery一直是采取着适可而止的研究方式。不过只要还在做Web开发,就离不开前端,因此我们也不能放弃前端。

版权声明


作者:zuoxiaolong(左潇龙)

query 原理的更多相关文章

  1. 在 LINQ to Entities 查询中无法构造实体或复杂类型

    public List<CustomerType> GetCustomerTypesBySchemaTypeCode(int schemaTypeCode) { var query = ( ...

  2. Oracle undo我们需要掌握什么

    <Oracle undo我们需要掌握什么> 引言:undo 是Oracle数据库的重要组件,刚入门的朋友建议要把undo的原理和机制理解明白,尤其是和redo组件的区别和联系.了解undo ...

  3. 深入Dapper.NET源码 (文长)

    目录 前言.目录.安装环境 Dynamic Query 原理 Part1 Dynamic Query 原理 Part2 Strongly Typed Mapping 原理 Part1 : ADO.NE ...

  4. MySQL的Query Cache原理分析

    QueryCache(下面简称QC)是根据SQL语句来cache的.一个SQL查询如果以select开头,那么MySQL服务器将尝试对其使用QC.每个Cache都是以SQL文本作为key来存的. 原理 ...

  5. Elasticsearch由浅入深(十)搜索引擎:相关度评分 TF&IDF算法、doc value正排索引、解密query、fetch phrase原理、Bouncing Results问题、基于scoll技术滚动搜索大量数据

    相关度评分 TF&IDF算法 Elasticsearch的相关度评分(relevance score)算法采用的是term frequency/inverse document frequen ...

  6. Elasticsearch由浅入深(七)搜索引擎:_search含义、_multi-index搜索模式、分页搜索以及深分页性能问题、query string search语法以及_all metadata原理

    _search含义 _search查询返回结果数据含义分析 GET _search { , "timed_out": false, "_shards": { , ...

  7. 数据库原理及应用-用户接口及SQL查询语言(Query Language)

    2018-02-07 20:41:39 一.DBMS的用户接口 查询语言 访问DBMS的访问工具(GUI) API 相关类库 二.SQL语言 SQL语言可以细分为四种: 1.Data Definiti ...

  8. xss和sql注入原理学习

    8.4 Web跨站脚本攻击 8.4.1  跨站脚本攻击的原理(1) 跨站脚本在英文中称为Cross-Site Scripting,缩写为CSS.但是,由于层叠样式表 (Cascading Style ...

  9. Direct3D Draw函数 异步调用原理解析

    概述 在D3D10中,一个基本的渲染流程可分为以下步骤: 清理帧缓存: 执行若干次的绘制: 通过Device API创建所需Buffer: 通过Map/Unmap填充数据到Buffer中: 将Buff ...

随机推荐

  1. Android Fragment 真正彻底的解决(下一个)

    转载请注明出处:http://blog.csdn.net/lmj623565791/article/details/37992017 上篇博客中已经介绍了Fragment产生原因.以及一些主要的使用方 ...

  2. Struts2流程

    Struts2流程 1.client浏览器初始化时发出HTTP请求 2.依据web.xml配置,上述请求被FilterDispatcher接收 3.依据struts.xml配置,找到须要调用的Acti ...

  3. 触摸屏touchstart 与 click

    设计效果:当手指点击或触摸红框线menuList之外的部分时,弹框menuList消失. 问题:在优化触屏版的时候发现如图问题.当menuList弹出.手指触摸屏幕向下滑动时,menuList弹框不消 ...

  4. Hadoop之环境搭建

    初学Hadoop之环境搭建   阅读目录 1.安装CentOS7 2.安装JDK1.7.0 3.安装Hadoop2.6.0 4.SSH无密码登陆 本文仅作为学习笔记,供大家初学Hadoop时学习参考. ...

  5. 深入解析java乱码

    1.什么是编码 ,为什么要编码 先前从没有思考这么深入的问题,觉得一切理所当然,直到有一天java的乱码让我跪了,他不在听我的话,到处是乱码,这次我不打算放过它,我要收拾了它. 大家都知道,文本文件, ...

  6. 在Mac电脑上为Dash制作docSet文档

    Dash是mac上的一款查看API的工具,里面能够直接下载大部分的API文档,可是有时候我们假设想把自己手里已有的文档也集成到Dash中,就须要我们自己动手了,事实上Dash官方也有教程怎样制作doc ...

  7. jQuery实现按键盘方向键翻页

    1.jQuery代码: $(document).ready(function(){ var prevpage=$("#pre").attr("href"); v ...

  8. Asp.Net MVC5入门学习系列②

    原文:Asp.Net MVC5入门学习系列② 添加一个Controller(控制器) 因为我们用的是Asp.Net MVC,MVC最终还是一套框架,所以我们还是需要遵循它才能玩下去,或者说是更好的利用 ...

  9. 深入理解JavaScript(1)

    才华横溢的Stoyan Stefanov,在他写的由O’Reilly初版的新书<JavaScript Patterns>(JavaScript模式)中,我想要是为我们的读者贡献其摘要,那会 ...

  10. Warning: Cannot modify header information - headers already sent by (output started at

    一般来说在header函数前不能输出html内容,类似的还有setcookie() 和 session 函数,这些函数需要在输出流中增加消息头部信息.如果在header()执行之前有echo等语句,当 ...