jQuery技术

jquery源码分析(二)——架构设计(2)

字号+ 作者:H5之家 来源:H5之家 2017-09-07 10:16 我要评论( )

2、arguments:选择器和使用的上下文环境(比较生涩:举个例子,比如在地图上找深圳这个地方,选择器好比深圳这个地名,熟悉的人可能一下子用经纬度定位了,东经11346'~11437',北纬2227'~2252'(参数context都不

2、arguments:选择器和使用的上下文环境(比较生涩:举个例子,比如在地图上找深圳这个地方,选择器好比深圳这个地名,熟悉的人可能一下子用经纬度定位了,东经­113°46'~114°37',北纬22°27'~22°52'(参数context都不用传了^^),对歪国仁来说,可能第一眼的先定位到我们的公鸡版图:也就是context:china,这样搜索速度就加快了。对国人(闭眼也能找着祖国哈^^)来说直接找广东—靠海—靠香港:也就是context:广东)。

3、接下来看看怎么分析selector参数类型以及相应的做了什么处理。

问题来了,看到这个正则这么长有没有要晕,要吐的感觉,

rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,这里写的什么。呃这个暂时不解释,后面专门奉上一个正则表达专题供大家解读…………。

(1) $(""), $(null), $(undefined), $(false);这几种情况直接返回 this,这里this是什么呢? 注意不是JQuery本身,而是jQuery.fn.init

(2)、字符串类型

a:HTML标签形式的——$(<>):通过document.createElement 创建节点。类似 $("<div></div>")、$("<div>aaa</div><div>aaa</div>") 两种情况;

而其他情况如:$(“</div>111”)、$("#id")、$(".class")、$("div")、$("#id .class div"),其中requickExpr匹配的是$(“</div>111”)、$("#id")。如果传入的是$(“</div>111”),则match=["</div>111","</div>",null];如果传入的是$("#id"),则match=["#id",null,“id”]。

b:HTML字符串——$(html) -> $(array):创建DOM并扩充到jQuery对象

c:#id——$(#id):直接通过document.getElementById获取dom节点。

d:选择器表达式——$(expr, $(...)):

(3)、DOMElement:直接返回将该对象,只是修改了context属性和length属性。

(4)、function:用过jquery基本上都会初始化代码写到 $(function(){……})里,就是DOMLoaded 加载完毕之后回调执行改匿名函数。

(5)、slector.slector = undefined 这个眼戳暂时没看懂,有谁看懂提下谢谢 。

上面涉及到的函数这里先提前脑补一下:$.parseHTML 、$.merge、$.isPlainObject(

$.parseHTML:将字符串转换为存储DOM节点的数组 。第一个参数为传入的字符串,第二个为指定的根节点,第三个是boolean值 (“<script></script>”是否可以转化为<script>标签),默认为false,不转换。

$.merge:合并两个数组,在jQuery内部不仅可以合并数组,也可以合并类数组。

$.isPlainObject():判断传入的参数是否是由 {}或new Object 创建的对象。

3、下面看看jQuery原型挂载了什么?

jQuery.fn = jQuery.prototype = { // The current version of jQuery being used jquery: version, constructor: jQuery, selector: "", length: 0, toArray: function() { return slice.call( this ); }, get: function( num ) { return num != null ? ( num < 0 ? this[ num + this.length ] : this[ num ] ) : slice.call( this ); }, pushStack: function( elems ) { var ret = jQuery.merge( this.constructor(), elems ); ret.prevObject = this; ret.context = this.context; return ret; }, each: function( callback, args ) { return jQuery.each( this, callback, args ); }, map: function( callback ) { return this.pushStack( jQuery.map(this, function( elem, i ) { return callback.call( elem, i, elem ); })); }, slice: function() { return this.pushStack( slice.apply( this, arguments ) ); }, first: function() { return this.eq( 0 ); }, last: function() { return this.eq( -1 ); }, eq: function( i ) { var len = this.length, j = +i + ( i < 0 ? len : 0 ); return this.pushStack( j >= 0 && j < len ? [ this[j] ] : [] ); }, end: function() { return this.prevObject || this.constructor(null); }, push: push, sort: deletedIds.sort, splice: deletedIds.splice };

1、先来看这三个属性:push、sort、splice 都是数组Array()原型上挂载的方法。仅供jQuery内部使用(私有方法),与jQuery外部工具方法(对外可使用)不同

2、first、last、eq这几个方法都是都是又来获取数组某个元素的。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • JQuery知识点

    JQuery知识点

    2017-09-07 12:05

  • jQuery LigerUI 使用教程表格篇(1)

    jQuery LigerUI 使用教程表格篇(1)

    2017-09-06 16:01

  • 9.1 技巧:搭建jQuery Mobile基础页面

    9.1 技巧:搭建jQuery Mobile基础页面

    2017-09-06 14:50

  • JQuery之事件

    JQuery之事件

    2017-09-05 17:14

网友点评
v