资讯专栏INFORMATION COLUMN

从jQuery学到的几件事情

jlanglang / 2980人阅读

摘要:最近想看一下源码,搜到了这样一篇博客从源码学到的件事情本文基于这篇视频博客,提炼了一些内容,分享给大家。的状态选择符,比如存放在里面

最近想看一下jQuery源码,搜到了这样一篇博客《从jQuery源码学到的10件事情》
http://www.paulirish.com/2010/10-things-i-learned-from-the-jquery-source/

本文基于这篇视频博客,提炼了一些内容,分享给大家。

说明:
这篇文章写于2010年,作者在视频里使用的是jQuery 1.4版本,我根据视频里讲到的内容,对应目前的1字头1.11版本做了一些调整,一些被抛弃或者被移除的内容页做了删减,并在此感谢原作者https://github.com/paulirish

黑箱/Black box

黑箱系统的概念是给定输入返回输出的一个系统,黑箱把实现过程进行封装。这里说的jQuery黑箱是为js全局变量window输出jQuery 和 $,而过程被封装到黑箱里,与外界互不干扰。

jQuery 1.4版本的黑箱是利用了类似如下的自执行函数

</>复制代码

  1. (function( window, undefined){})(window)

作者给了一个比较通用的实现黑箱的方法

</>复制代码

  1. undefined = true;
  2. (function(window, document, undefined){
  3. if(foo == undefined) {
  4. }
  5. })(this, document)

jQuery的黑箱里多传了第三个形参叫做undefined,而传实参的时候并没有传值,js里没有传值的形参会被设置为undefined,保证了黑箱内部undefined的正确性。js中,undefined作为一个全局属性,是可以被赋值的,比如上述代码中的undefined = true;

以自执行函数的模式实现黑箱的另外一个好处是利于压缩,比如下述的情况,我们只需要在黑箱内部使用简单的变量。

</>复制代码

  1. (function(A, B, C)){
  2. B.getElementById("")
  3. })(this, document)

作者为匿名函数自执行举了很多例子,比如下面这个,为页面的某一部分不停地更新(以及不断地执行)

</>复制代码

  1. (function loop(){
  2. doStuff();
  3. $("#update").load("awesomething.php",function(){
  4. loop();
  5. })
  6. //setTimeout(loop, 100)
  7. })()

jQuery 1.11版本的黑箱采用了全新的工厂方法,本文不探究

noConflict的实现

这个函数的差异不大,1.11 版本代码如下

</>复制代码

  1. var
  2. // Map over jQuery in case of overwrite
  3. _jQuery = window.jQuery,
  4. // Map over the $ in case of overwrite
  5. _$ = window.$;
  6. jQuery.noConflict = function( deep ) {
  7. if ( window.$ === jQuery ) {
  8. window.$ = _$;
  9. }
  10. if ( deep && window.jQuery === jQuery ) {
  11. window.jQuery = _jQuery;
  12. }
  13. return jQuery;
  14. };

我们可以看到防冲突的实现是先把之前的JQuery 和 $ 存起来,noConflict被调用的时候,再还给它们

与原生js属性命名的转换

1.4版本用的是props对象来存放jquery对属性操作与原生js属性操作的对应关系
1.11版缩减版本是这样的

</>复制代码

  1. jQuery.extend({
  2. propFix: {
  3. "for": "htmlFor",
  4. "class": "className"
  5. },
  6. prop: function( elem, name, value ) {
  7. //...
  8. name = jQuery.propFix[ name ] || name;
  9. },
  10. propHooks: {
  11. //...
  12. }
  13. });
  14. jQuery.each([
  15. "tabIndex",
  16. "readOnly",
  17. "maxLength",
  18. "cellSpacing",
  19. "cellPadding",
  20. "rowSpan",
  21. "colSpan",
  22. "useMap",
  23. "frameBorder",
  24. "contentEditable"
  25. ], function() {
  26. jQuery.propFix[ this.toLowerCase() ] = this;
  27. });

propFix 这个对象是存放对应关系表的,比如class转换成className,prop函数负责处理这个关系表。
而下面的each很有意思,遍历数组中那些属性,然后把他们小写格式对应到自己,放到 propFix

特效Speed

我们知道在jQuery里一些动画我们可以直接通过normal,fast,slow 来定义实现速度,这个在源码里是这样定义的

</>复制代码

  1. jQuery.fx.speeds = {
  2. slow: 600,
  3. fast: 200,
  4. // Default speed
  5. _default: 400
  6. };

调皮的原作者做了这样一些事情:

</>复制代码

  1. var isIE
  2. //...
  3. jQuery.fx.speeds._default = isIE ? 800 : 400
  4. jQuery.fx.speeds.veryfast = 200;
  5. $("...").fadeIn("veryfast")

一种是可以对default属性做条件判断,还有一种自定义速度,比如"veryfast"

.ready

ready函数 1.11版本和1.4版本有较大的差距,新版中很多东西我也不太能理解,我们就简单的把核心拿出来看一下

</>复制代码

  1. jQuery.ready.promise = function( obj ) {
  2. //...省略若干
  3. } else if ( document.addEventListener ) {
  4. // 使用addEventListener "DOMContentLoaded" 监听ready事件
  5. document.addEventListener( "DOMContentLoaded", completed, false );
  6. // 备选方案 "load"
  7. window.addEventListener( "load", completed, false );
  8. //如果IE
  9. } else {
  10. // Ensure firing before onload, maybe late but safe also for iframes
  11. //IE下 attachEvent 的"onreadystatechange"
  12. document.attachEvent( "onreadystatechange", completed );
  13. // A fallback to window.onload, that will always work
  14. //备选方案onload
  15. window.attachEvent( "onload", completed );
  16. // If IE and not a frame
  17. // continually check to see if the document is ready
  18. var top = false;
  19. try {
  20. top = window.frameElement == null && document.documentElement;
  21. } catch(e) {}
  22. if ( top && top.doScroll ) {
  23. (function doScrollCheck() {
  24. if ( !jQuery.isReady ) {
  25. try {
  26. // Use the trick by Diego Perini
  27. // http://javascript.nwbox.com/IEContentLoaded/
  28. top.doScroll("left");
  29. } catch(e) {
  30. return setTimeout( doScrollCheck, 50 );
  31. }
  32. // detach all dom ready events
  33. detach();
  34. // and execute any waiting functions
  35. jQuery.ready();
  36. }
  37. })();
  38. }
  39. }
  40. }
  41. return readyList.promise( obj );
  42. };

.ready 利用了下面的.promise去做确保载入完成的工作,重点是
document.addEventListener( "DOMContentLoaded", completed, false );
window.addEventListener( "load", completed, false );
document.attachEvent( "onreadystatechange", completed );
window.attachEvent( "onload", completed );
兼容性考量的四种检查方式

其中从top开始,做了一件事情就是IE下面,dom节点判断是否有scroll,在IE下如果dom有scroll,没有scroll到的元素对ready会有影响,这里面我的理解不够,总之jQuery里用到了一个叫做Diego Perini的技巧,可以在注释里的地址看到更多内容。

选择器

</>复制代码

  1. $("#id").find("tag.thing") --- faster
  2. $("#id tag.thing") ------- using sizzle

原作者在这里说了一个jquery效率的问题,上面的方法更快一些,而下面的方法稍微慢,简单地说是因为下面的方法调用了sizzle,通过sizzle其实转换成上述的模式,而id的调用则是直接过jQuery.init.

这里需要扩展一下,我们来看一下1.11里jQuery对象究竟长啥样

</>复制代码

  1. jQuery = function( selector, context ) {
  2. // The jQuery object is actually just the init constructor "enhanced"
  3. // Need init if jQuery is called (just allow error to be thrown if not included)
  4. return new jQuery.fn.init( selector, context );
  5. }

jQuery对象其实是return了一个它自己的构造函数叫做init,我们再来看一下init做了些什么

</>复制代码

  1. // Initialize a jQuery object
  2. init = jQuery.fn.init = function( selector, context ) {
  3. var match, elem;
  4. // HANDLE: $(""), $(null), $(undefined), $(false)
  5. //超级省略...下略
  6. // Handle HTML strings
  7. // HANDLE: $(html) -> $(array)
  8. // HANDLE: $(html, props)
  9. // HANDLE: $(#id)
  10. // HANDLE: $(expr, $(...))
  11. // HANDLE: $(expr, context)
  12. // HANDLE: $(DOMElement)
  13. // HANDLE: $(function)
  14. return jQuery.makeArray( selector, this );
  15. };
  16. // Give the init function the jQuery prototype for later instantiation
  17. init.prototype = jQuery.fn;

从上面的摘取的代码注释中,我们可以看到jq自己的构造函数里处理了哪些情况,其中包括html标签名和id的获取,意味着这两种获取是最底层的,此外$()的其他处理都要经过其他的函数,效率上不如上述处理情况。
同时我们也能看到init的原型被赋予了jQuery.fn, 关于jQuery对象的相关内容,感兴趣的朋友可以再多去了解一些。

jQ的状态选择符,比如:not,:has,:eq存放在
Sizzle.selectors.pseudos里面

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/78104.html

相关文章

  • 这 5 个前端组件库,可以让你放弃 jQuery UI

    摘要:目前正在广泛使用的框架之一就是。是一系列使用编写的自定义控件,用于创建快速响应式的和可扩展的控件。的组件主要是使用,并提供了交互式,动态和高度可定制的小部件。例如,演示了如何使用自定义控件,嵌套面板和其它元素。 在建立Web应用时,通常都需要用到一些有用的UI组件。无论应用中需要的是日历,滑块,图形或其它用于提升或简化用户交互的组件,那么都面临两种选择:要么自己来创建这些组件,要么使用...

    1fe1se 评论0 收藏0
  • 面试集 - 收藏集 - 掘金

    摘要:计算数组的极值微信面试题获取元素的最终前端掘金一题目用代码求出页面上一个元素的最终的,不考虑浏览器,不考虑元素情况。 Excuse me?这个前端面试在搞事! - 前端 - 掘金金三银四搞事季,前端这个近年的热门领域,搞事气氛特别强烈,我朋友小伟最近就在疯狂面试,遇到了许多有趣的面试官,有趣的面试题,我来帮这个搞事 boy 转述一下。 以下是我一个朋友的故事,真的不是我。 ... ja...

    crossea 评论0 收藏0
  • 【译】前端练级攻略

    摘要:由于系统变得越来越复杂,人们提出了称为预处理器和后处理器的工具来管理复杂性。后处理器在由预处理器手写或编译后对应用更改。我之前建议的文章,,也涵盖了预处理器相关的知识。 译者:前端小智 原文:medium.freecodecamp.org/from-zero-t… medium.freecodecamp.org/from-zero-t… 我记得我刚开始学习前端开发的时候。我看到了很多文章及...

    wuyumin 评论0 收藏0
  • 关于MQ几件小事(七)如果让你设计一个MQ,你怎么设计

    摘要:能不能支持数据丢失啊可以的,参考我们之前说的那个数据零丢失方案其实一个肯定是很复杂的,其实这是个开放题,就是看看你有没有从架构角度整体构思和设计的思维以及能力。其实回答这类问题,说白了,起码不求你看过那技术的源码,起码你大概知道那个技术的基本原理,核心组成部分,基本架构构成,然后参照一些开源的技术把一个系统设计出来的思路说一下就好 比如说这个消息队列系统,我们来从以下几个角度来考虑一下 (1...

    Vixb 评论0 收藏0
  • 关于redis几件小事(三)redis的数据类型与使用场景

    摘要:这个是类似的一种结构,这个一般就是可以将结构化的数据,比如一个对象前提是这个对象没嵌套其他的对象给缓存在里,然后每次读写缓存的时候,可以就操作里的某个字段。 1.string 这是最基本的类型了,就是普通的set和get,做简单的kv缓存。 2.hash 这个是类似map的一种结构,这个一般就是可以将结构化的数据,比如一个对象(前提是这个对象没嵌套其他的对象)给缓存在redis里,然后每次...

    zhaochunqi 评论0 收藏0

发表评论

0条评论

jlanglang

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<