zoukankan      html  css  js  c++  java
  • jQuery 源码分析..

    目标:了解jquery原型继承,实现jquery选择器的基础 $("id"),$("input") ...
    实现方式:代码及相关文字解释。从最简单方式逐步推进。
    首先用一个实现一个简单的实现:$("id") 返回一个jquery对象有一个方法tagName();于是我想到这样的:
    $ = window.JQuery = function(id){
    	return new JQuery(id);
    }

    写到这里我实在写不下去了应为我想返回一个jquery对象,但是当我new调用的自身的构造函数,直接死循环。
    那么我们可不可以new出一个另外的对象返回呢?
    $ = window.JQuery = function(id){
    	return new JQuerylite(id);
    }
    JQuerylite = function(id){
    	this.dom = document.getElementById("dv");
    	this.tagName = function(){
    		alert(this.dom.tagName);
    	}
    }
    $("dv").tagName();
    这样是可以实现的,但是不够完美,通过了两个无关的构造函数,实在浪费。我们可以换种思路,我们可以将JQuerylite修改成一个jquery的内部函数, 我们知道其实函数也是构造方法,这样一来我们的对象不仅指的是juqery对象,同时我们还有jquery原生的方法。一举两得下面是我们修改后的例子。
    $ = window.JQuery = function(id){
    	return new JQuery.prototype.init(id);
    }
    JQuery.prototype = {
    	init:function(id){
    		this.dom = document.getElementById("dv");
    		this.tagName = function(){
    			alert(this.dom.tagName.toLowerCase());
    		};
    		this.version = '1.71';
    	},
    	version:'1.7',
    	name:'JQuery'
    }
    alert($("dv").version);//1.71
    alert($("dv").name);//undefined
    $("dv").tagName();//div

    alert($("dv").name);//undefined,这个课不是我们想要的,我们需要的是JQuery里面的name值,为什么没有呢?
    我前面的javascript深入了解(面向对象)里面也讲过,这里我再回顾一遍吧,当我们new 出来的JQuery.prototype.init(id),其实是调用的是JQuery.prototype.init的构造方法,如此一来我们共享的原型应该是JQuery.prototype.init.prototype = {},所以我们这里调用不到了,不过还有个方法是想法子将JQuery的prototype赋值给JQuery.prototype.init.prototype就行了。下面看例子:
    $ = window.JQuery = function(id){
    	return new JQuery.prototype.init(id);
    }
    JQuery.prototype = {
    	init:function(id){
    		this.dom = document.getElementById("dv");
    		this.tagName = function(){
    			alert(this.dom.tagName.toLowerCase());
    		};
    		this.version = '1.71';
    	},
    	version:'1.7',
    	name:'JQuery'
    }
    JQuery.prototype.init.prototype = JQuery.prototype;
    alert($("dv").version);//1.71
    alert($("dv").name);//undefined
    $("dv").tagName();//div

    到此我们已经把基本的构造得到了,下一步我们来写个选择器的简单例子,用来练习一下吧:
    实现以$(selector,context).size() 得到dom个数,selector 可以是id或者是标签名,context 是范围。
    (function(){
    $ = window.JQuery = function(selector,context){
    	return new JQuery.prototype.init(selector,context);
    }
    JQuery.prototype = {
    	init:function(selector,context){
    		var selector = selector ? selector : document;
    		var context = context ? context : document;
    		var dom;
    		if(dom = context.getElementById(selector)){
    			this[0] = dom;
    			this.length = 1;
    		}else{
    			dom = context.getElementsByTagName(selector);
    			for(var i=0; i<dom.length; i++){
    				this[i] = dom[i];
    			}
    			this.length = dom.length;
    		}
    	},
    	version:'1.7',
    	size:function(){
    		return this.length;
    	}
    }
    JQuery.prototype.init.prototype = JQuery.prototype;
    })();
    alert($("div").size());//3
    alert($("dv").size());//1

    就是想讲一下jquery一个机制,jquery的选择器当然比这个要强大的更多。为什么要用私有作用域((function(){})();)包起来呢?其实是为了怕会影响其他的外部函数和变量。想了解匿名函数的原理还需要看我原来写的文章javascript深入了解(私有作用域)。

  • 相关阅读:
    CF1480C Searching Local Minimum
    如何根据IP地址查到主机名
    转贴:关于内部重定向(forward)和外部重定向(redirect)
    读懂vmstat
    Javascript在网页页面加载时的执行顺序
    安全测试学习笔记一
    Linux文件查找命令find,xargs详述
    mvn常用命令
    prototype.js 让你更深入的了解javascript的面向对象特性
    【转】Velocity研究学习文档
  • 原文地址:https://www.cnblogs.com/yangzhi/p/3576557.html
Copyright © 2011-2022 走看看