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里面的方法究竟是怎么定义的。