计划按如下顺序完成这篇笔记:
我们认为读者在阅读本篇之前,对jQuery的使用是熟悉的。
首先,预热一下语法。
//代码段1
运行输出:this is a function be called immediately.
可以传参数给这个参数,在JavaScript中,$和_都是合法的变量名。
可以通过如下方法获得返回值。
也可以将需要返回的数值或方法直接附加为window的属性,达到“返回”的目的。
2.1、通过jQ('#id')可以通过id取到dom对象。
2.2、对jQ对象(即通过jQ方法返回的对象),可以使用html()方法获取其内容或者设置其内容,语法如下:
jQ('#id').html();//返回其内容
jQ('#id').html('new content');//设置其内容
2.3、可以用$$代替jQ,语法如下:
$$('#id').html();
获取到dom对象后直接返回了。这种做法不足取,需要封装一下,最好以function object(function是js中的一等公民,功能最强)的形式返回。
而且希望返回值是jQ“类”的实例。
Uncaught RangeError: Maximum call stack size exceeded ,死循环了。
直接new不可用用的话,那可以用工厂方法。
上面的最后一行代码,意图构建两个不同的对象,结果返回的对象相同,这是错误的。
改正后的代码如下所示。
根据new关键字的语义:
var ret = new jQ.prototype.getInstance(id);
等同于
var ret ={};
jQ.prototype.getInstance.apply(ret);//即通过ret调用getInstance方法,getInstance方法中的this绑定为ret
ret.__proto__ = jQ.prototype.getInstance.prototype;//指定ret的原型为getInstance的原型,这里会出问题,因为getInstance的原型是Object(几乎是空)。
为了弥补new关键字的缺憾,修正代码如下:
window.$$ = jQ;
调用的语句修改为:
console.log($$('#divTest',window).html()); //output : blabla
$$('#divTest',window).html('BRAND NEW'); //页面内容随之改变
console.log($$('#divTest',window).html()); //output : BRAND NEW
- Java程序员的JavaScript学习笔记(1——理念)
- Java程序员的JavaScript学习笔记(2——属性复制和继承)
- Java程序员的JavaScript学习笔记(3——this/call/apply)
- Java程序员的JavaScript学习笔记(4——this/闭包/getter/setter)
- Java程序员的JavaScript学习笔记(5——prototype)
- Java程序员的JavaScript学习笔记(6——面向对象模拟)
- Java程序员的JavaScript学习笔记(7——jQuery基本机制)
- Java程序员的JavaScript学习笔记(8——jQuery选择器)
- Java程序员的JavaScript学习笔记(9——jQuery工具方法)
- Java程序员的JavaScript学习笔记(10——jQuery-在“类”层面扩展)
- Java程序员的JavaScript学习笔记(11——jQuery-在“对象”层面扩展)
- Java程序员的JavaScript学习笔记(12——jQuery-扩展选择器)
- Java程序员的JavaScript学习笔记(13——jQuery UI)
- Java程序员的JavaScript学习笔记(14——扩展jQuery UI)
我们认为读者在阅读本篇之前,对jQuery的使用是熟悉的。
第7篇到第9篇是一个单元,在这个单元中,我们将深入jQuery内部,充分学习JavaScript的最佳设计、编程实践。
作者博客:http://blog.csdn.net/stationxp
作者微博:http://weibo.com/liuhailong2008
转载请取得作者同意
首先,预热一下语法。
1、预热语法
看下面代码://代码段1
(function(){
console.log('this is a function be called immediately.')
})();
第一对小括号中是一条语句,返回一个函数,然后通过第二对小括号对这个函数直接进行调用。
运行输出:this is a function be called immediately.
可以传参数给这个参数,在JavaScript中,$和_都是合法的变量名。
//代码段2
(function(_){
console.log(_); //输出:window,视浏览器输出的具体内容不同
})(this);
在全局上下文中this指向window。
可以通过如下方法获得返回值。
//代码段3
var f = (function(_){
function func(){
console.log('i am invoked by ' + this , 'arguments:' + _ );// output : i am invoked by [object Window] arguments:param value
}
return func;
})('param value');
f();
也可以将需要返回的数值或方法直接附加为window的属性,达到“返回”的目的。
//代码段4
(function(){
function func($$){
console.log('i am invoked by ' + this );
}
window.func = func; // 相当于直接定义了全局函数func
window.$$ = new func(); //相当于定义了全局变量 $$ ,在JavaScript中,$$ 是合法的变量名。
})();
func();
console.log($$.toString());// output : [object Object]
2、预期功能
我们将实现一个js代码框架,jQ,预期实现如下功能:2.1、通过jQ('#id')可以通过id取到dom对象。
2.2、对jQ对象(即通过jQ方法返回的对象),可以使用html()方法获取其内容或者设置其内容,语法如下:
jQ('#id').html();//返回其内容
jQ('#id').html('new content');//设置其内容
2.3、可以用$$代替jQ,语法如下:
$$('#id').html();
3、实现
3.1、基于前面的语法基础,我们视图实现2.1提出的功能。
代码段5
<!DOCTYPE html>
<html>
<head>
<title>jQ</title>
<meta charset="utf-8">
<script type="text/javascript" language="javascript">
(function(){
var jQ = function(id){
if(!id){
return {}; // return empty object
}
if(id[0]=='#'){
id = id.substr(1);//remove the first letter '#'
}
var domEle = document.getElementById(id);
if(!domEle){
return {};
}
return domEle;
}
window.jQ = jQ;
})();
console.log(jQ('#divTest'));
</script>
</head>
<body>
<div id="divTest">blabla</div>
</body>
</html>
获取到dom对象后直接返回了。这种做法不足取,需要封装一下,最好以function object(function是js中的一等公民,功能最强)的形式返回。
而且希望返回值是jQ“类”的实例。
//代码段6
(function(){
var jQ = function(id){
var ret = new jQ();
ret.innerDom = 'blabla';
return ret;
}
jQ.prototype = {
innerDom : null
}
window.jQ = jQ;
})();
console.log(jQ('#divTest'));
Uncaught RangeError: Maximum call stack size exceeded ,死循环了。
直接new不可用用的话,那可以用工厂方法。
//代码段7
(function(){
var jQ = function(id){
var ret = jQ.prototype.getInstance(id);
return ret;
}
jQ.prototype = {
innerDom : null,
getInstance :function(id){
//todo : init innerDom by id
return this; // 调用者,即jQ
}
}
window.jQ = jQ;
})();
console.log(jQ('#divTest')===jQ('#divTest1')); // output : true
上面的最后一行代码,意图构建两个不同的对象,结果返回的对象相同,这是错误的。
改正后的代码如下所示。
//代码段8
(function(){
var jQ = function(id){
var ret = new jQ.prototype.getInstance(id); // 增加new关键字
return ret;
}
jQ.prototype = {
innerDom : null,
getInstance :function(id){
//todo : init innerDom by id
return this; // 调用者,即jQ
}
}
window.jQ = jQ;
})();
console.log(jQ('#divTest')===jQ('#divTest1')); // output : false
根据new关键字的语义:
var ret = new jQ.prototype.getInstance(id);
等同于
var ret ={};
jQ.prototype.getInstance.apply(ret);//即通过ret调用getInstance方法,getInstance方法中的this绑定为ret
ret.__proto__ = jQ.prototype.getInstance.prototype;//指定ret的原型为getInstance的原型,这里会出问题,因为getInstance的原型是Object(几乎是空)。
为了弥补new关键字的缺憾,修正代码如下:
//代码段9
(function(){
var jQ = function(id){
var ret = new jQ.prototype.getInstance(id);
return ret;
}
jQ.prototype = {
innerDom : null,
getInstance :function(id){
//todo : umimpl init innerDom by id
this.innerDom = 'dom by '+id;
return this; //this调用者,即新创建的对象
},
html:function(){
//todo : impl the method
return this.innerDom;//this调用者,即新创建的对象
}
}
jQ.prototype.getInstance.prototype = jQ.prototype;//新增加代码,由于是传引用,不用担心循环引用的问题
window.jQ = jQ;
})();
console.log(jQ('#divTest').html()); //output : dom by #divTest
console.log(jQ('#divTest2').html()); //output : dom by #divTest2
3.2、现在增加2.2描述的功能:html方法
//代码段10
<!DOCTYPE html>
<html>
<head>
<title>jQ</title>
<meta charset="utf-8">
</head>
<body>
<div id="divTest">blabla</div>
<script type="text/javascript" language="javascript">
(function(){
var jQ = function(id){
var ret = new jQ.prototype.getInstance(id);
return ret;
}
jQ.prototype = {
innerDom : null,
getInstance :function(id){
if(id && id[0]=='#'){
id = id.substr(1);//remove the first letter '#'
}
if(id){
var elm = window.document.getElementById(id);
this.innerDom = elm;
}
return this;
},
html:function(newhtml){
if(arguments && arguments.length>0){
if (this.innerDom && this.innerDom.innerHTML){
this.innerDom.innerHTML = newhtml;
}
}else{
return this.innerDom && this.innerDom.innerHTML;
}
}
}
jQ.prototype.getInstance.prototype = jQ.prototype;
window.jQ = jQ;
})();
console.log(jQ('#divTest',window).html()); //output : blabla
jQ('#divTest',window).html('BRAND NEW'); //页面内容随之改变
console.log(jQ('#divTest',window).html()); //output : BRAND NEW
</script>
</body>
</html>
3.3、通过$$引用
2.3描述的功能更简单,只需在window.jQ = jQ;后面加一句:window.$$ = jQ;
调用的语句修改为:
console.log($$('#divTest',window).html()); //output : blabla
$$('#divTest',window).html('BRAND NEW'); //页面内容随之改变
console.log($$('#divTest',window).html()); //output : BRAND NEW
功德圆满!