jQuery源码中有哪些值得借鉴的地方

1.首先要考虑的是选择器。
内部搜索方法也值得一看，当querySelectors在浏览器中不流行时，许多开发人员发现这种方法既方便又强大。
2.关于构造函数，Jquery中的构造函数使用封装和继承，不仅可以在原型上添加实例方法，还可以添加静态方法。
继承采用原型叠加继承、原型添加继承、复制继承，这些封装思想可以作为参考。
3.设计模式的使用，jQuery中的单例模式，代理设计模式，装饰设计模式4.关于处理兼容性问题，可以了解jQuery中不同浏览器之间的差异，也可以学到很多处理兼容性问题的知识，并立即适用。
5.实现项目的具体功能功能，如ajax、promise、事件绑定、事件代理、复制功能、动画处理等...从功能代码实现中可以了解代码严谨性、性能优化等。
使用代码和原生js6.插件机制，插件机制的支持也是jQuery能够发展壮大的原因，因为它扩展了jQuery的功能。

关于jQuery代码的书写形式

1.定义jQuery变量时添加var关键字。

这是所有JavaScript开发过程都需要记住的事情，而不仅仅是jQuery。
不要这样定义它：>$loading=$('#loading');//这是一个全局定义

2.使用var定义变量

如果使用多个变量，请按如下方式定义它们。

var页面=0,$loading=$('#loading'),$body=$('body');

不要给所有变量添加var关键字

3.定义jQuery变量

声明或定义变量时，使用jQuery请注意，如果要定义变量，请在变量前面添加$符号，如下所示：

var$loading=$('#loading');

定义为：这样做的好处是你可以有效地提醒自己和其他阅读你代码的人这是一个jQuery变量。

使用DOM时请记住缓存。

>

jQuery代码开发通常需要操作DOM。
，DOM操作是一个非常消耗资源的过程，许多人更喜欢使用jQuery，如下所示。

$('#loading').html('完成');$('#loading').fadeOut();

代码很好，可以成功运行并产生结果，但请注意，每次定义和调用$('#loading')时，您实际上是在创建一个新变量。
如果需要重用它，请务必将其定义在变量中，以便可以有效地缓存其内容。
如下：

var$loading=$('#loading');$loading.html('Complete');$loading.fadeOut();

此方法可以提高性能。

5.使用链式操作

上面的例子可以写得更简洁：

var$loading=$('#loading');$loading.html('Finished').fadeOut();

6.简化jQuery代码

尝试集成所有代码。
不要写这样的代码：

//！小人$button.click(function(){$target.css('width','50%');$target.css('border','1pxSolid#202020');$target.css('color','#fff');});

你应该这样写：

$button.click(function(){$target.css({'宽度':'50%','边框':'1px实心#202020','color':'#fff'});});

7.避免使用全局类型选择器

Don'不要写类似$('.something>*');的内容更好的写法：$('.something').children();

8.不要重复多个ID

不要写：$('#something#children');最好写：$('#children');

9.加快速度||或&&使用。
>

不要写这样的东西：if(!$something){$something=$('#something');}你可以提高性能通过编写：$something=$something||$('#something');

10.尝试使用更少的代码

建议不要像if(string.length>0){..}那样写，而是像if(string.length){..}那样写。

11.尝试使用.on方法。

如果您想使用较新版本的jQuery类库，请使用.on。
其他方法最终将使用.on来实现。

请使用最新版本的jQuery。

最新版本的jQuery性能有所提升，但最新版本可能不支持ie6/7/。
8、因此，您应根据实际情况自行选择。

13.尝试使用本机Javascript。

如果使用原生Javascript，也可以实现jQuery提供的功能。
在这种情况下，我们建议使用本机JavaScript来实现它。

深入分析jQuery的ready函数是如何工作的(工作原理)_jquery

本文深入分析了jQuery的ready函数是如何工作的。
分享给大家参考，具体如下：jQuery是一个很棒的脚本库，第一个版本由JohnResig于2006年1月在BarCampNYC发布。
您可以从http://jquery.com/下载最新版本并且随着本文的发布，已经更新到了jQuery2.1.4。
这里我们以jQuery1.8.3为例。
学习jQuery有很多方法。
今天我们就从jQuery的ready函数开始吧。
本示例中的代码来自jQuery脚本库。
如果你使用过jQuery，那么你一定使用过ready函数，该函数用于注册页面准备好时可以执行的函数。
问题是我们的网站什么时候准备好？1、处理onload事件最基本的方式就是页面上的onload事件。
我们可以采用事件注册的方式，分为DOM0方式和DOM2方式。
为了浏览器兼容，使用DOM2方式编写，如下所示。
2.DOMContentLoaded事件，但onload事件只有在所有页面元素加载完成后才会触发，包括页面上的图像等。
如果网页上有大量图片，用户可能在看到图片之前就已经开始操作页面了。
我们的页面未初始化且事件未注册这是正确的吗？除了众所周知的onload事件（与DOM中的onload事件类似）之外，我们还需要考虑DOMContentLoaded事件，并且会在解析完所有DOM后触发该事件。
这样，对于标准浏览器，我们也可以注册该事件的处理。
这样我们就可以更早地捕获上传。
3、浏览器中没有默认onreadystatechange事件怎么办？如果浏览器有_document.onreadystatechange事件，当该事件触发并且document.readyState=complete时，可以认为DOM树已经加载。
然而，这个事件不是很可靠，例如，当页面上有图像时，它可以在onload事件之后触发。
换句话说，只有当不包含二进制资源的页面被缓存作为备份时，它才能正确运行。
DOMContentLoaded函数有什么作用？最后，您仍然需要调用jQuery.ready函数。
4、doScroll检测方法MSDN有一个关于JScript方法不起眼的说法。
当页面DOM未加载时，调用doScroll方法会抛出异常。
然后我们反过来使用，如果没有异常的话，页面DOM就加载完成了！2007年，DiegoPerini报告了一种使用doScroll方法调用来检测IE是否加载的方法。
详细说明可以在这里找到。
原理是，当IE处于非iframe时，只能通过doScroll是否可以运行来不断地决定DOM是否加载。
在此示例中，尝试每50毫秒运行一次doScroll。
注意，在页面未加载时调用doScroll会引发异常，所以使用try-catch来捕获异常。
5.document.readyStatestatus如果我们注册ready函数的时间太晚，并且在页面加载完成后才注册自己的ready函数，那么就不需要检查上面的层，只需查看当前页面的readyState即可。
如果完成了，我们就可以执行我们要注册的ready函数了。
然而，ChrisS报告了一个非常特殊的错误情况，我们不得不推迟执行。
setTimeout在网页上经常被用作定时器，因此您可以指定毫秒数作为执行间隔。
当启动的程序需要在很短的时间内运行时，我们会为其指定很小的次数，或者如果需要立即运行，我们甚至将毫秒数设置为0，但实际上setTimeout有一个最小执行时间当指定的时间短于这个时间时，浏览器会使用最小的一个允许的时间作为setTimeout间隔。
也就是说，即使我们将setTimeout毫秒设置为0，被调用的程序也不会启动。
这个最小的时间间隔就是年轻人在哪里？这取决于浏览器和操作系统。
在JohnResig的新书《JavascriptNinja的秘密》中提到，所有浏览器在OSX上都有10毫秒的最小延迟，在Windows上有（大约）15毫秒的延迟。
10毫秒，Windows系统上的最小时间间隔约为10毫秒。
15毫秒。
另外，MDC中对setTimeout的介绍还提到，Firefox中定义的最小超时间隔（DOM_MIN_TIMEOUT_VALUE）是10毫秒，而HTML5定义的最小超时间隔是4毫秒。
由于规范是这样写的，所以似乎没有办法使用setTimeout来缩短这个最小时间间隔。
这样，通过将其设置为1，我们就可以让程序在浏览器支持的最小间隔后运行。
6.完整代码jQuery中的完整代码如下。
位于jQuery1.8.3源代码的第#842行。
那么应该给谁打电话呢？必要时，我们只需要注册这些进程，在调用ready函数时判断页面是否完全加载即可。
这段代码放在1.8.3中代码的#244行，如下所示：参考jQuery。
页面上的脚本库执行完毕后，会执行jQuery的初始化函数，并在初始化函数中创建ready函数。
在我们通过ready函数注册事件处理之前，jQuery就完成了页面检测代码的注册。
所以。
当页面完全加载后，我们注册的函数就会被调用。
补充：jqueryready简写模式jqueryready功能：可以简写为：希望这篇文章对大家进行jQuery编程有所帮助。

使用$.noConflict()后，怎么让$重新指定window.jQuery

jQuery默认使用“$”运算符。
$符号只是对window.jQuery对象jQuery.noConflict()的引用。
这有助于确保jQuery不会与其他库的$objects冲突。
运行此函数后，您只能使用jQuery变量访问jQuery对象。
例如，当使用$("divp")时，应将其替换为jQuery("divp")。
1.“$”操作符1.jQuery默认使用“$”操作符，其他框架如prototype也使用“$”。
因此，如果jQuery是在其他库之后引入的，那么jQuery将获得“$”的使用权。
”。
这种情况很容易理解，因为JS是从上到下实现的。
2.如果jQuery在其他使用“$”的库之前引入，那么jQuery就不会占用“$”。
提示：这个方法在你使用“$”的时候很有用其他JavaScript库$的功能我们在jquery中获取变量时使用$，但是有很多插件可以使用$如果我们想同时引用它，就会出现问题，为了防止这种情况发生，jquerynoconflict()介绍2.定义。
jQuery.noConflictjQuery.noConflict方法有一个可选的boolean参数，用于指定是否同时交出$reference、是否传递jQuery对象本身：jQuery.noConflict([removeAll])函数说明：默认情况下，执行noConflict会将jQuery.noConflict([removeAll])函数的控制权转移到第一个创建$的库；执行noConflict会将$和jQuery对象本身的所有控制权转移到第一个创建的库。
通过创建3.解析jQuery.noConflict源码，在jQuery源码的开头，首先要做的是：//MapoverjQueryincaseofoverwrite_jQuery=window.jQuery,//Mapoverthe$incaseofoverwrite_$=window.$jQuery传递两个private对象变量在window环境下赋值对象，防止变量被强行覆盖。
一旦调用noConflict方法，则使用_jQuery,$_,jQuery,$的区别来定义传输控制方法，具体代码如下：noConflict:function(deep){if(window.$===jQuery){window.$=_$;}if(deep&&window.jQuery===jQuery){window.jQuery=_jQuery;}returnjQuery;}我们来看一个问题上面的参数设置如果不设置deep，则会覆盖window.$，此时$jQuery别名无效，但jQuery本身完好无损。
如果另一个库或类代码重新定义了$变量，则对它的所有控制权都会被转移。
另一方面，如果deep设置为true，_jQuery将取代window.jQuery，$和jQuery都将无效。
这个过程的优点在于，无论是框架的混合，还是冲突性很强的执行环境，比如多个版本的jQuery并存，这都是由于noConflict方法提供的传递机制以及事实它们返回一个未包装的jQuery对象，可以通过设置变量冲突来彻底解决。
4、jQuery.noConflict的实例1、将$指向的对象赋值回原来的对象：jQuery.noConflict();jQuery("divp").hide();//使用jQuery$("content")。
style.display="none";//使用其他库中的$()。
2.恢复别名$的使用，然后创建函数并执行，$仍然存在并作为别名使用jQuery。
在这个函数中，原来的$object是无效的。
这个函数对于大多数不依赖于其他库的插件来说非常强大：jQuery.noConflict();(function($){$(function(){//使用$作为jQuery的别名的代码});})(jQuery);...//代码3对于其他使用$作为别名的库，可以将jQuery.noConflict()与开箱即用的结合起来，使代码更加紧凑：jQuery.noConflict()(function(){//CodeusingjQuery});...//其他库使用$作为代码的别名4.创建一个新的别名，以便下次在代码中使用jQuery对象时使用library:varj=jQuery.noConflict();j("divp").hide();//基于jQuery的代码$("content").style.display="none";//基于$()的代码5.完全转换jQ查询被移动到新的命名空间：vardom={};dom.query=jQuery.noConflict(true);//结果：dom.query("divp").hide();//新的jQuery代码$("content").style.dis