Jquery源码学习(第一天)

jQuery是面向对象的设计
通过window.$ = window.jQuery = $; 向外提供接口,将$挂在window下,外部就可以使用$和jQuery

$("#div1").css()   //$("#div1")是jQuery的一个实例对象,css()是实例的方法【实例的方法只能jQuery对象使用】
$("#div1").html()

$.trim()
$.proxy()      //工具方法,相当于静态方法,【jQuery对象和原生js对象都可以使用】

(function(window , undefined){
【1】jQuery源码采取闭包形式(匿名函数自执行),好处是里面的代码都是局部的,不会与外部冲突

【2】为什么要传入window?
1、根据函数作用域链,若没有传入window,就会一层一层向上查找window,而window对象是 最顶层的对象,查找速度就会非常慢,传入后,只需要查找参数即可
2、便于压缩,可以用w参数代表window对象,所有用到window的都是w,节约空间

【3】为什么传入undefined?
在某些浏览器版本中undefined可以被修改
var undefined = 10;
alert(undefined); //IE10弹出undefined,IE7 8弹出10
为防止undefined被修改,这里传入undefined,jQuery首先找到的是参数中传入的undefined,不会找到外层或被修改的undefined

【4】   <script>
        "use strict" //严格模式不允许 a = 10 ; var num = 010 不规范的写法  一般不推荐使用严格模式
     </script>

【5】jQuery(document)可以直接使用,但是jQuery将每一个对象都赋值给了一个变量

    var rootJQuery = jQuery(document)这样做的原因:  jQuery(document)不可被压缩成一个字符,而rootJQuery可以

【6】 判断是不是undefined: window.a == undefined;    typeof window.a == ‘undefined‘ 用这个兼容IE6 7 8 9
})(window);

基本的面向对象的编程
function Aaa(){     //会自动生成Aaa.prototype.constructor = Aaa
}
Aaa.prototype.init = function(){};
Aaa.prototype.css = function(){};
var a1 = new Aaa();
a1.init();
a1.css();

两种为原型添加属性的方式比较:

一:
Aaa.prototype.name = ‘zz‘;
Aaa.prototype.age = ‘18‘
alert( a1.constructor ); //function Aaa(){}

二:

//prototype被覆盖,其中的constructor : Aaa不再了,所以{}形式需要在里面加上constructor : Aaa,否则constructor是空的Object

Aaa.prototype = {name : ‘zz‘,age : ‘18‘};   
alert( a1.constructor ); //Object(){}

jQuery的设计思想:可以实现$().css()方式编程的原理
function jQuery(){
return new jQuery.prototype.init();
}
jQuery.prototype.init = function(){};
jQuery.prototype.css = function(){};
jQuery.prototype.init.prototype = jQuery.prototype;   //对象的引用关系,对象的原型是一个对象

时间: 2024-10-09 13:36:50

Jquery源码学习(第一天)的相关文章

jquery源码学习(一)core部分

这一部分是jquery的核心 jquery的构造器 jquery的核心工具函数 构造器 jQuery = function( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' // Need init if jQuery is called (just allow error to be thrown if not included) return new jQu

jquery源码学习-初始(1)

最近几天一直在研究jquery源码,由于水平太低看得昏头转向.本来理解的也不是很深刻,下面就用自己的想法来说下jquery是如何定义构造函数初始化的.如果有什么不对的地方,希望个位高手指出. 首先要了解下什么时候自执行匿名函数 ,它的用途就是 相当于创建一个命名空间,只要把自己所有的代码写在这个特殊的函数包装内,外部不能访问,除非你允许. 基本格式 (function(){ //代码 })(); (function(){ var a = 10; function $(){ alert(a); }

jQuery源码学习笔记:总体架构

1.1.自调用匿名函数: (function( window, undefined ) { // jquery code })(window); 这是一个自调用匿名函数,第一个括号内是一个匿名函数,第二个括号立即执行,传参是window. 1.为什么有自调用匿名函数? 通过定义匿名函数,创建了一个"私有"空间,jQuery必须保证创建的变量不能和导入它的程序发生冲突. 2.为什么传入window? 传入window使得window由全局变量变成局部变量,jQuery访问window时,

jQuery源码学习:常用正则表达式

常用的数字正则(严格匹配) 正则 含义 ^[1-9]\d*$ 匹配正整数 ^-[1-9]\d*$ 匹配负整数 ^-?[1-9]\d*$ 匹配整数 /^(([1-9]\d*)|(0+))$/; 匹配非负整数(正整数 + 0) ^-[1-9]\d*|0$ 匹配非正整数(负整数 + 0) /^(([1-9]\d*)|0)\.\d+$/ 匹配正浮点数 ^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$ 匹配负浮点数 ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\

jQuery源码学习笔记:构造jQuery对象

3.1源码结构: (function( window, undefined ) { var jQuery = (function() { // 构建jQuery对象 var jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context, rootjQuery ); } // jQuery对象原型 jQuery.fn = jQuery.prototype = { constructor:

jQuery源码学习笔记:扩展工具函数

// 扩展工具函数 jQuery.extend({ // http://www.w3school.com.cn/jquery/core_noconflict.asp // 释放$的 jQuery 控制权 // 许多 JavaScript 库使用 $ 作为函数或变量名,jQuery 也一样. // 在 jQuery 中,$ 仅仅是 jQuery 的别名,因此即使不使用 $ 也能保证所有功能性. // 假如我们需要使用 jQuery 之外的另一 JavaScript 库,我们可以通过调用 $.noC

jQuery源码学习笔记五 六 七 八 转

jQuery源码学习笔记五 六 七 八 转 Js代码   <p>在正式深入jQuery的核心功能选择器之前,还有一些方法,基本都是数组方法,用于遴选更具体的需求,如获得某个元素的所有祖选元素啦,等等.接着是其缓存机制data.</p> <pre class="brush:javascript;gutter:false;toolbar:false"> //@author  司徒正美|なさみ|cheng http://www.cnblogs.com/ru

jquery源码学习

jQuery 源码学习是对js的能力提升很有帮助的一个方法,废话不说,我们来开始学习啦 我们学习的源码是jquery-2.0.3已经不支持IE6,7,8了,因为可以少学很多hack和兼容的方法. jquery-2.0.3的代码结构如下 首先最外层为一个闭包, 代码执行的最后一句为window.$ = window.jquery = jquery 让闭包中的变量暴露倒全局中. 传参传入window是为了便于压缩 传入undefined是为了undifined被修改,他是window的属性,可以被修

菜鸟的jQuery源码学习笔记(二)

jQuery对象是使用构造函数和原型模式相结合的方式创建的.现在来看看jQuery的原型对象jQuery.prototype: 1 jQuery.fn = jQuery.prototype = { 2 //成员变量和方法 3 } 这里给原型对象起了一个别名叫做jQuery.fn.要注意的是这个jQuery.fn可不是jQuery对象的属性,而是jQuery构造方法本身的属性,它是不会传给它所创建的对象的.如果你在控制台敲$().fn的话输出的结果会是undefined.接下来看看原型对象里面有些

jquery源码学习(二)sizzle部分 【转】

一,sizzle的基本原理 sizzle是jquery选择器引擎模块的名称,早在1.3版本就独立出来,并且被许多其他的js库当做默认的选择器引擎.首先,sizzle最大的特点就是快.那么为什么sizzle当时其他引擎都快了,因为当时其他的引擎都是按照从左到右逐个匹配的方式来进行查找的,而sizzle刚好相反是从右到左找的. 举个简单的例子 “.a .b .c”来说明为什么sizzle比较快.这个例子如果按照从左到右的顺序查找,很明显需要三次遍历过程才能结束,即先在document中查找.a,然后