返回顶部

OutOfMemory.CN技术专栏-> javascript-> jQuery2.1.1源码整体架构

jQuery2.1.1源码整体架构

更多

一、整体架构

jQuery一共13个模块,从2.1版开始jQuery支持通过AMD模块划分,jQuery在最开始发布的1.0版本是很简单的,只有CSS选择符、事件处理和AJAX交互3大块,所以源码学习很重要,浏览器兼容、各种属性的获取、逻辑流程、性能等都可以在学习源码的过程中体会到。 架构表

从这个架构图里面可可以清晰的看出jquery内部是如何工作的, 整体架构一目了然。

二、 代码开始如何进行整体架构

首先是jquery代码的开始

(function(window, undefined) {
var jQuery = function() {}
// ...
window.jQuery = window.$ = jQuery;
})(window);

这里首先用了“JS高级程序中”关于第7章,模仿块级作用域的知识,js中是没有块级作用域的这和其它面向对象的语言有很大区别。而这里为了不污染全局变量采用了这种写 法,而且这个函数是自执行的。undefined 并不是作为关键字,因此可以允许用户对其赋值。同时这里也用了立即调用表达式 上面的代码等同于

var factory = function(){
return function(){
    //执行方法
}
}
var jQuery = factory();

看到这里会发现 JQuery中有很多类似的东西:

$(document).ready(function() {
// ...代码...
})
//document ready 简写
$(function() {
// ...代码...
})
$(document).load(function() {
// ...代码...
})。

这些都是加载文档的方式,需要记住的是ready先执行,load后执行。 在源码中还会经常出现:

jQuery.extends()
jQuery.fn.extends()
jQuery.extend = jQuery.fn.extend

分别扩展jquery 以及jquery 原型 类似面向对象语言里面的类方法和实例方法

还会出现:

jQuery.prototype = jQuery.fn jQuery.fn.init.prototype 
return jQuery.fn.init

这些都是方便jquery直接创建实例。

jquery对象是可以像数组一样被操作的,下面是常用调用的方式,他们都可以被当做数组或对象操作

. jQuery([selector,[context]])
. jQuery(element)
. jQuery(elementArray)
. jQuery(object)
. jQuery(jQuery object)
. jQuery(html,[ownerDocument])
. jQuery(html,[attributes])
. jQuery()
. jQuery(callback)

为什么可以这样操作,因为在jquery内部通过一种叫做类数组对象的方式存储数据,既可以当做数组操作也可以当做对象处理。

推荐阅读:
支持

0

反对

0

感谢本文作者www.blogways.net!

您可以通过下面的社交媒体联系/了解作者的更多信息:

发表评论