程序员当累了,开始码字写回忆录了,个人极度厌倦单纯的转载翻译,以下内容均经过本人细嚼慢咽慢慢消化后得来。
本人才疏学浅,欢迎任何形式的批评指正。
本人QQ:568341288
不知是哪个伟人说过,“讲任何事都要有上下文”,首先交代一下上下文。
1.javascript基础,请参见http://www.w3school.com.cn/js/index.asp
2.HTML DOM基础,请参见http://www.w3school.com.cn/htmldom/index.asp
3.其他有必要一阅的资料
https://developer.mozilla.org/en-US/
http://msdn.microsoft.com/en-us/library/aa155073.aspx
http://www.w3schools.com/default.asp
(如果此时你并不知道什么是object,function,prototype,closure,lambda,那可以不用浪费时间向下看
建议登录http://jquery.com/,先亲手用用
学会应用的时候,再来看才比较有效)
这次主要讲一下jQuery对象。
1.jQuery是什么?jQuery顾名思义就是javascript+query,即javascript的查询技术
简单的说,jQuery是javascript的一个函数,
它的参数是DOM选择器
它的返回值是一个jQuery对象
2.什么是jQuery对象
个人理解,jQuery对象是一个包含许多函数方法的特殊数组,这个特殊数组的元素是通过选择器得到的DOM对象
晃刀的流氓有很多,敢捅人的又有几个?
说再多描述定义也是废话,根据jQuery的源码,下面就来写一个简单的jquery
(function(window,undefined){//直接执行的匿名函数,传入window对象,阻止闭包的影响
var jQ=(function(){//再次匿名函数执行,防止window对象的全局函数的影响
var jQ=function(selector, context){//新建一个叫jQ的函数
return new jQ.fn.init(selector, context);//简单的可以理解为通过一个函数,创建一个jQ对象
}
jQ.fn=jQ.prototype={//扩展jQ的原型方法,将原型又复制为jQ的一个属性
constructor:jQ,//因为原型被完全重写,所以构筑函数需要重新赋值
init:function(selector, context){//返回jQ对象的函数
var elems,length=0;
if(context){//简单就使用getElememtsByTagName做查询函数
try{
elems=context.getElementsByTagName(selector);//带上下文的查询
}catch(e){
elems=document.getElementsByTagName(selector);
}
}else{
elems=document.getElementsByTagName(selector);//得到dom对象数组
}
length=elems.length//得到元素长度
this.length=0;//初始化jQ对象长度
this.content=elems;//讲dom数组保存
for(var i=0;i<length;i++){
Array.prototype.push.call(this,elems[i])//调用数组方法
}
return this;
},
version:'0.1',
getLength:function(){
return this.length;//添加一个简单的方法
}
}
jQ.fn.init.prototype=jQ.fn;//jQ.fn.init继承了jQ的全部方法,而jQ实际上就是jQ.fn.init创建的,jQ对象就具有了jQ的所有方法
return jQ;
})()
window.jQ=window.$$=jQ;//见jQ函数赋值给window对象,并复制出$$方法,方便使用
})(window)
//页面使用
var dd=document.getElementById('dd')
var divs=$$('div',dd)//带上下文的查询
console.log(divs)
一些需要啰嗦几句的点:
1.闭包
这里主要用到了避免闭包影响的手段,直接执行匿名函数
深入理解请参考:http://jibbering.com/faq/notes/closures/
2.函数Function,对象Object和原型prototype
javascript的世界里,万物皆是Object,Function是特殊对象,Function本身是Object,又能通过prototype创建新的Object
一篇比较透彻的分析:http://mckoss.com/jscript/object.htm
3.对象的赋值
var obj={name:'xxxx'};
obj={address:'shanghai'}
obj的name属性就丢失了
必须obj={name:'xxxx',address:'shanghai'}
至于对象的extend方法将在以后讲解
4.call的使用
call是本人认为javascript(或者说本人会的所有变成语言中)最狗血的方法,简单的说就是借刀杀人
通过改变this,让每个js方法都充满了无限的可能性
具体使用可详见:https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call
5.关于对象原型继承
此例最后jQ.fn.init.prototype=jQ.fn;将jQ.fn.init的原型赋值为jQ的原型
一方面实现了对jQ的封装(jQ.fn.init本身是jQ的属性)
另一面,将jQ.fn.init将jQ的方法继承用于创建jQ对象
创建jQ对象即是jQ对象的实例,又具有jQ的所有方法包括init
写着写着,发现要把一个简单的问题完全将清楚是十分困难的事,如果没有上下文简直就是浪费时间
一段小小的代码,要完完全全讲清楚,基本上可以出本书了,有些只能起新文章细讲了。
当然,我认为,一个优秀的程序员,有三件事是最重要:会读代码,敢于实践,会copy。