Jquery的基本架构

 

引入

    以前学习原生JS然后切换到用JQ的时候总觉得很不习惯,甚至有点排斥用JQ。后来自己写项目一直到公司实习用JQ的这段时间,才深深感受到JQ的强大~JQ不仅做到兼容很多浏览器,还能很方便地使用JS动画和各种交互,所以最突出的有点就方便!方便!方便!(重要的事情说三遍)。我找到了一个关于源码解析的很好的链接开始我的学习。

JQuery的基本架构

  • 整体架构

    在学习JQuery之前,肯定有很多人都知道JQ的核心理念,那就是"The Write Less,Do More".

以JQuery-2.1.1为例(到现在最新版本已经出到JQuery-2.1.4),JQ   版本结构  为:

;(function(global, factory) {
factory(global);
}(typeof window !== "undefined" ? window : this, function(window, noGlobal) {
var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context );
};
jQuery.fn = jQuery.prototype = {};
// 核心方法
// 回调系统
// 异步队列
// 数据缓存
// 队列操作
// 选择器引
// 属性操作
// 节点遍历
// 文档处理
// 样式操作
// 属性操作
// 事件体系
// AJAX交互
// 动画引擎
return jQuery;
}));

JQ库一共有多个模块,模块并不是独立的,而是互相依赖的,模块依赖网 为:

  • 自执行匿名函数

(function(window, factory) {
factory(window)
}(this, function() {
return function() {
//jQuery的调用
}
}))

JQ源码里有很多这样的函数,这种函数的写法一看上去就让人看晕了,来,我们换种写法

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

这样是不是就清楚多了?换个样子是不是就认识了?这就是我们熟悉的自执行匿名函数啊~在自执行匿名函数剖析这篇文章里我提到过很多自执行匿名函数的写法,但达到的效果是一样的,让我们再来复习一下使用自执行匿名函数的好处和这里参数window和undefined的作用

好处

  使用匿名函数可以防止全局变量的污染,小括号可以实现立即初始化,这样就可以形成单例模式的效果只执行一次。(这样还学到了单例模式的一个实例喔,设计模式无处不在~)

参数作用

  1.window

  作用:为了防止需要window时多次在作用域链上去查找window,这样将window传入函数内可以很快就找到window

  2.undefined

  作用:在一些浏览器中undefined可以被改写,因为它不是关键字

  var undefined = '我不是undefined'
  ;(function(window) {
   alert(undefined);// IE8或IE7 ---> '我不是undefined'
  })(window)
  • 类数组对象结构

  提到JavaScript中的类数组对象,就让我想起了像arguments、document.getElementsByTagName等。

什么是类数组呢?

  1.类数组具有length属性

  2.类数组不具有数组的方法(如.push,.join等)

  所以,类数组不是数组,如果要使用数组的方法,要把类数组转化为数组

     function abc(a,b,c){
var arr = Array.prototype.slice.call(arguments);
return arr;
} var arr = abc(1,2,3);
arr.push(0);
arr.splice(1,2);
alert(arr); //1,0

  

  回到JQ里的类数组对象,JQ里的类数组对象既可以像对象一样处理,也可以像数组一样使用数组的方法。

JQ里的类数组对象

Query的入口都是统一的$, 通过传递参数的不同,实现了9种方法的重载

1. jQuery([selector,[context]])
2. jQuery(element)
3. jQuery(elementArray)
4. jQuery(object)
5. jQuery(jQuery object)
6. jQuery(html,[ownerDocument])
7. jQuery(html,[attributes])
8. jQuery()
9. jQuery(callback)

JQ对象通过对象键值对的关系保存着属性,原型保存着方法

------------------------------------------------------------------

* JQ对象如果想要转换成DOM对象,可以加下标或者用.get()
eg. $('#div')[0]
$('#div').get(0)

   对JQ的基本架构了解了才会让我们更好地去读JQ代码~希望我能逐步提高自己的JS水平写出有水准的js代码~接下来我还会继续学习JQ源码~

JQ的基本架构的更多相关文章

  1. Jquery的基本架构

    引入  以前学习原生JS然后切换到用JQ的时候总觉得很不习惯,甚至有点排斥用JQ.后来自己写项目一直到公司实习用JQ的这段时间,才深深感受到JQ的强大~JQ不仅做到兼容很多浏览器,还能很方便地使用JS ...

  2. jQuery 2.0.3 源码分析 Deferred(最细的实现剖析,带图)

    Deferred的概念请看第一篇 http://www.cnblogs.com/aaronjs/p/3348569.html ******************构建Deferred对象时候的流程图* ...

  3. 仿JQ基础架构,可扩展。

    (function(win,doc,fn){     var events = [];//拷贝核心方法    var publicEvent = ["extend","f ...

  4. jq大体架构。先记录再慢慢剖析

    //工具方法 Utilities //回调函数列表 Callbacks Object //异步队列 Deferred Object //浏览器功能测试 Support //数据缓存 Data //队列 ...

  5. Web应用程序系统的多用户权限控制设计及实现-项目架构【3】

    本章主要讲述Web权限管理系统的项目架构,及开发中需要的基本类和相关的CSS,JS文件. 1.1系统结构 本系统搭建开发工具为Visual Studio 2012,采用ASP.NET MVC 4.0技 ...

  6. 我的CSS架构

    写在前面 都是自己看别人的架构,自己积累下来的一些东西,这里只是阐述自己的一些观念.借此希望同行交流交流下看法,共勉. 不同架构的CSS 业务流程不同,团队配员不同.会有各种各样的CSS架构. 有的会 ...

  7. jq模糊匹配

    jq是一般程序员在前台开发的时候都会使用的技术,其中模糊匹配查询在动态添加标签的时候经常用到,这里我写出我经常用到的几个模糊匹配的方法.其中有:^(前缀).$(后缀).*(包含)例如有这样一段代码: ...

  8. jQuery源码学习(1):整体架构

    整体架构 $().find().css().hide() 从jQuery的表达式可以看出两点: jQuery的构建方式 jQuery的调用方式 下面从这两方面来窥探jQuery的整体架构: 分析一:无 ...

  9. js菜鸟进阶-jQuery源码分析(1)-基本架构

    导读: 本人JS菜鸟一枚,为加强代码美观和编程思想.所以来研究下jQuery,有需要进阶JS的同学很适合阅读此文!我是边看代码(jquery2.2.1),边翻“javascript高级程序设计”写的, ...

随机推荐

  1. Codeforces Round #207 (Div. 1) A. Knight Tournament(STL)

    脑子又卡了...来一发set的,STL真心不熟. #include <stdio.h> #include <string.h> #include <iostream> ...

  2. 配置hooks使svn提交后自动同步客户端代码(客户端与服务端在同一台机器上)

    1.配置svn的hooks 2.实例演示 1.配置svn的hooks 1.1)配置情况 承接上篇svn搭建的文章,今次继续使用上篇文章的配置 上篇文章的地址:linux下搭建svn代码库 svn仓库所 ...

  3. web页面实现指定区域打印功能

    web页面实现指定区域打印功能 使用CSS,定义一个.noprint的class,将不打印的内容放入这个class内. 详细如下: <style media=print type="t ...

  4. ubuntu安装Lua

    1.网站下载LUA包 curl -R -O http://www.lua.org/ftp/lua-5.2.3.tar.gz 2.下载ubuntu的编译支持sudo apt-get install bu ...

  5. android-对话框

    一.常用对话框 AlertDialog: 功能最丰富,实际应用最广的对话框(以下三种对话框都是该对话框的子类) ProgressDialog:进度对话框.这个对话框只是对进度条的包装 DatePick ...

  6. MySQL数据库基本数据类型

    1.整型 2. 浮点数类型和定点数类型 3.日期与时间类型 4.字符串类型 5. 二进制类型

  7. Spark Kill Application

    yarn application -kill <applicationId>

  8. FK JavaScript:ArcGIS JavaScript类库加载不成功而导致的程序异常

    现象:页面加载时,有时候成功,有时候出错,出错的地方为init.js 加载esri的类库 经过仔细对比,发现出错时dojo加载的类库中,对象的很多属性都为undefined,而加载成功时,该对象的相关 ...

  9. WebApp 设计要素

    从去年开始就负责公司WebApp的产品跟设计工作,最近整体大改了两个版本,也算累积了一些实际的经验.在不断学习的过程中,发现对于WebApp可以直接用于项目上的资料比较零碎,在这里总结一下,供初做 W ...

  10. java类集框架图(google找的,备个份)