成功是属于有毅力、乐观心态的大才之士,博主没有做到,仅仅一次打击,就让我迷失。我没放弃,我回来了。
之前一直没有放太多的精力去探索js,写代码,用到基于Jquery开发的框架的时候,难免有点无味,没有丝毫的成就感。别人东西好,就得用,但是用得时候,必须要偷其中的技术,形成自己的编码风格。
博主没有看枯燥理论书籍,完全是看成熟的例子,分解+猜想,比做下笔记,有误导之处,忘多包涵
<%@ page language="java" contentType="text/html; charset=gb2312"
pageEncoding="gb2312"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>仿jQuery框架</title>
<script type="text/javascript">
//将其他工具的$赋值给临时变量
window._$ = window.$;
//工厂方法
var sgls = window.$ = function(){
return new sgls.prototype.init(); //创建的是init()对象
}
sgls.prototype.init = function(){
return this; //this是指init()对象
}
sgls.prototype.fun = function(){
alert('callback!');
}
//还原$所代表的含义-指另外框架赋值给他的意义
sgls.prototype.revivification = function(){
alert('yes');
window.$ = window._$
}
//sgls()得到的是init这个对象,需要将sgls.prototype中的方法copy到init对象中
//刚开始对init.prototype很迷惑,其实任何方法都可以当成一个构造函数,也就是可以构造出对象,都有prototype这个属性
sgls.prototype.init.prototype = sgls.prototype;
//$().revivification();
$().fun();
</script>
</head>
<body>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=gb2312"
pageEncoding="gb2312"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>prototype的探索</title>
<script type="text/javascript">
var fun_name = function(){
//可以有var类型变量、this.型、方法名,返回值
var name = 'shangguanls';
this.age = '24';
this.show_name = function(){
alert(name);
}
return this;
}
fun_name.prototype.other = function(){
alert('this is extend function');
}
//无论怎样 typeof fun_name总是一个method,对于method就是constructor、他有prototype2
//只要是方法,我就认为通过它可以创建对象
//因为它有返回值、我当它是一个方法函数,不当做构造函数,所以不new
var c = fun_name();
c.show_name(); //输出shangguanls、好奇怪是不是?对象都没创建怎么this就有了对象呢
alert(c.age); //输出24;
//c.other(); //这里调用不了,我猜想是prototype添加的方法需要new才能够附到对象中,这没有new,所以对象不存在other
//alert(typeof(c.other)); 为undefined 所以other方法不存在
//创建对象,有返回值没关系,照样new,不过new出来的对象是返回值返回的对象 -通过测试得出的,可能不准确
var c = new fun_name();
c.show_name();
alert(c.age);
c.other(); //可以调用
</script>
</head>
<body>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=gb2312"
pageEncoding="gb2312"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>prototype的探索</title>
<script type="text/javascript">
//前面的代码为什么要这么麻烦,我可以不要这个init的工厂函数,试试看
var thought = function(){
this.name = 'shangguanls';
return this; //这里为什么不要this 而是new
}
thought.prototype = {
fun : function(){
alert('thought should be practise');
},
other : function(){
alert('you should be notice the comma above!');
}//这里注意不能加分号
}
//这里我就省了略了将init.prototype继承sgls.prototype
var c = new thought(); //如果按照上面this是返回值,那么,必须这里要new,只有new才能将prototype中
c.fun(); //的函数附加到thought的对象中
//下面情况不管用
//thought().fun(); //看来前面的代码是对的,不new就得不到原型中的方法,就无法用工厂方法
//thought().other();
</script>
</head>
<body>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=gb2312"
pageEncoding="gb2312"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>匿名函数的探索</title>
<script type="text/javascript">
//首先看看局部变量的作用域和java的区别
var fun = function(){
for(var i = 0; i < 3; i++){
var item = 'fine_'+i;
}
alert(item);
}
//这里让我有了新的体会:fun可以看成构造函数也就是可以new;也可以看成是普通函数也就是可以直接调用
fun();//这里显示是fine_2也就是item最后改变的值
//为了不让外边看到item,也就是不能调用,如果调用就显示item。
//从上边我们知道局部变量的作用域和java的区别:js局部变量生命周期在上一层。
//所以为了能不让外边看到就得让他undefined,就是加一层匿名函数
var ftn = function(){
for(var i = 0; i < 3; i++){
(function(){
var item = 'fine_'+i;
alert(item);
})() //这里加()是让匿名函数立即运行
//alert(item); //这里加个试试
}
//alert(item); //这里应该是undefined,不对,涉及闭包问题,精力好在研究
}
ftn();
//
</script>
</head>
<body>
</body>
</html>