jquery是怎样开始工作(1)
学习js有段时间了,想从头把jquery的源码学习一遍,并把自己学到的知识写作笔记,算是激励自己把jquery源码学下去。希望各位高手多多指指点点。
废话说完,直接看一段最简单的jquery代码:
$("p").hide();简单的解释就是:
1. “$” 字符是一个变量名,是函数JQuery的别名。所以也可以写成JQuery("p").hide();其实在jquery源码 中,会先定义一个JQuery函数,最后会执行window.$ = window.JQuery = JQuery。
2. $("p")就是函数调用了,传入的参数是字符串"p",然后会针对传入的参数进行一系列操作,最终返回的是一个对象。 这里面的逻辑比较复杂,在之后的学习中会一一道来。
3. $("p").hide()就是调用返回来的对象上的hide()方法了。
那么照着上面的理解,我们就可以写一个很经典的"hello word"的例子了:
(function(window){
var MyJquery = function(selector){
// 把selector参数传入init中让它去初始化
return new init(selector);
};
// 初始化函数,它负责处理传入的参数
var init = function(selector){
alert("传入的参数是"+selector);
}
// init是函数不能直接添加方法,可以通过其原型对象添加方法。当然源码上不是这样实现的,我这里
// 只是为了理解方便,以后会逐步接近源码。
init.prototype.hello = function(){
alert("hello world");
}
window.$ = window.MyJquery = MyJquery;
})(window);简单理解下:这个主体代码就是一个自执行的匿名函数,为的是让函数中的变量不和全局环境中的变 量冲突,因为JS中一个函数就是一个作用域。又由于函数把window变量作为参数穿了进去,并且把变量$和MyJquery挂在了window上面,所以在外部就可以通过变量$和MyJquery访问函数里面的属性了。
我们把上面的JS叫做MyJquery.js,然后就可以像访问jquery一样访问了:
$("p").hello();当然真正的jquery源码可没有这么简单,下节我学习jquery里面的方法究竟是怎么定义的。