Javascript的难点就是面向对象编程,上一篇介绍了Javascript的两种继承方式:Javascript 进阶 继承,这篇使用一个例子来展示js如何面向对象编程,以及如何基于类实现继承。
1、利用面向对象的写法,实现下面这个功能,实时更新数据的一个例子:
2、使用对上面类的继承,完成下面的效果:
好了,不多说,js的训练全靠敲,所以如果觉得面向对象不是很扎实,可以照着敲一个,如果觉得很扎实了,提供了效果图,可以自己写试试。
1、第一个效果图代码:
/**
* Created with JetBrains WebStorm.
* User: zhy
* Date: 14-6-7
* Time: 下午4:55
* To change this template use File | Settings | File Templates.
*/
/**
* @param id
* @param value
* @param parentEle 父元素
* @constructor
*/
function PlaceFieldEditor(id, value, parentEle)
{
this.id = id;
this.value = value;
this.parentEle = parentEle;
this.initValue = value ;
this.initElements();
this.initEvents();
}
PlaceFieldEditor.prototype = {
constructor: PlaceFieldEditor,
/**
* 初始化所有元素
*/
initElements: function ()
{
this.txtEle = $("<span/>");
this.txtEle.text(this.value);
this.textEle = $("<input type='text' />");
this.textEle.val(this.value);
this.btnWapper = $("<div style='display: inline;'/>");
this.saveBtn = $("<input type='button' value='保存'/>");
this.cancelBtn = $("<input type='button' value='取消'/>");
this.btnWapper.append(this.saveBtn).append(this.cancelBtn);
this.parentEle.append(this.txtEle).append(this.textEle).append(this.btnWapper);
this.convertToReadable();
},
/**
* 初始化所有事件
*/
initEvents: function ()
{
var that = this;
this.txtEle.on("click", function (event)
{
that.convertToEditable();
});
this.cancelBtn.on("click", function (event)
{
that.cancel();
});
this.saveBtn.on("click", function (event)
{
that.save();
});
},
/**
* 切换到编辑模式
*/
convertToEditable: function ()
{
this.txtEle.hide();
this.textEle.show();
this.textEle.focus();
if(this.getValue() == this.initValue )
{
this.textEle.val("");
}
this.btnWapper.show();
},
/**
* 点击保存
*/
save: function ()
{
this.setValue(this.textEle.val());
this.txtEle.html(this.getValue().replace(/\n/g,"<br/>"));
var url = "id=" + this.id + "&value=" + this.value;
// alert(url);
console.log(url);
this.convertToReadable();
},
/**
* 点击取消
*/
cancel: function ()
{
this.textEle.val(this.getValue());
this.convertToReadable();
},
/**
* 切换到查看模式
*/
convertToReadable: function ()
{
this.txtEle.show();
this.textEle.hide();
this.btnWapper.hide();
},
setValue: function (value)
{
this.value = value;
},
getValue: function ()
{
return this.value;
}
}
;
引入到页面代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript" src="PlaceFieldEditor.js"></script>
<script type="text/javascript">
$(function ()
{
$("ul li").each(function ()
{
new PlaceFieldEditor($(this).attr("id"), "请输出成绩...", $(this));
});
});
</script>
<style type="text/css">
body
{
font-size: 12px;
color: #333;;
}
ul li
{
line-height: 30px;
}
</style>
</head>
<body>
<ul>
<li id="1">张三:</li>
<li id="2">李四:</li>
<li id="3">王二:</li>
</ul>
</body>
</html>
嗯,代码就不详细说了,都比较简单,使用了jQuery,如果不喜欢可以使用原生js,本人比较喜欢把jQuery当作js的工具使用。
2、第二个效果图的js代码:
/**
* Created with JetBrains WebStorm.
* User: zhy
* Date: 14-6-7
* Time: 下午5:34
* To change this template use File | Settings | File Templates.
*/
function PlaceAreaEditor(id, value, parentEle)
{
PlaceAreaEditor.superClass.constructor.call(this, id, value, parentEle);
}
extend(PlaceAreaEditor, PlaceFieldEditor);
PlaceAreaEditor.prototype.initElements = function ()
{
this.txtEle = $("<span/>");
this.txtEle.text(this.value);
this.textEle = $("<textarea style='width:315px;height:70px;' />");
this.textEle.text(this.value);
this.btnWapper = $("<div style='display: block;'/>");
this.saveBtn = $("<input type='button' value='保存'/>");
this.cancelBtn = $("<input type='button' value='取消'/>");
this.btnWapper.append(this.saveBtn).append(this.cancelBtn);
this.parentEle.append(this.txtEle).append(this.textEle).append(this.btnWapper);
this.convertToReadable();
};
写了PlaceAreaEditor继承了PlaceFieldEditor,然后复写了initElements方法,改变了text为textarea。
extend的方法,上一篇博客已经介绍过:
/**
* @param subClass 子类
* @param superClass 父类
*/
function extend(subClass, superClass)
{
var F = function ()
{
};
F.prototype = superClass.prototype;
//子类的prototype指向F的_proto_ , _proto_又指向父类的prototype
subClass.prototype = new F();
//在子类上存储一个指向父类的prototype的属性,便于子类的构造方法中与父类的名称解耦 使用subClass.superClass.constructor.call代替superClass.call
subClass.superClass = superClass.prototype;
}
最后页面代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript" src="PlaceFieldEditor.js"></script>
<script type="text/javascript" src="com.zhy.extend.utils.js"></script>
<script type="text/javascript" src="PlaceAreaEditor.js"></script>
<script type="text/javascript">
$(function ()
{
$("ul li div").each(function ()
{
new PlaceAreaEditor($(this).attr("id"), "请留言...", $(this));
});
});
</script>
<style type="text/css">
body
{
font-size: 12px;
color: #333;;
}
ul li
{
padding: 5px 0 8px 0 ;
}
</style>
</head>
<body>
<ul>
<li id="1"><h3>我要改剧本,不让~~</h3>
<div>
</div>
</li>
<li id="2"><h3>悬崖上有桥么,有?没有~ </h3>
<div>
</div>
</li>
<li id="3"><h3>你敢打坏我的灯?不租~ </h3>
<div>
</div>
</li>
</ul>
</body>
</html>
好了,结束~~ 上面的例子是根据孔浩老师的例子修改的,感谢孔浩老师,孔老师地址:
www.konghao.org。孔老师录制了很多Java相关视频,有兴趣的可以去他网站学习!
代码或者讲解有任何问题,欢迎留言指出。
分享到:
相关推荐
Javascript 面向对象的JavaScript进阶 Javascript技术
JavaScript作为一门浏览器语言的核心思想;面向对象编程的基础知识及其在... 《JavaScript面向对象编程指南》着重介绍JavaScript在面向对象方面的特性,展示如何构建强健的、可维护的、功能强大的应用程序及程序库
《JavaScript面向对象编程指南》内容包括:JavaScript作为一门浏览器语言的..., 《JavaScript面向对象编程指南》着重介绍JavaScript在面向对象方面的特性,展示如何构建强健的、可维护的、功能强大的应用程序及程序库。
面向对象编程的基础知识及其在JavaScript中的运用;数据类型、操作符以及流程控制语句;函数、闭包、对象和原型等概念,以代码重用为目的的继承模式;BOM、DOM、浏览器事件、AJAX和JSON;如何实现JavaScript中缺失的...
NULL 博文链接:https://goyourauntie.iteye.com/blog/1179204
JavaScript面向对象编程--继承.mht,JavaScript面向对象编程--继承.mht,JavaScript面向对象编程--继承.mht,JavaScript面向对象编程--继承.mht
JavaScript面向对象程序设计(1): 前言 JavaScript面向对象程序设计(2): 数组 JavaScript面向对象程序设计(3): 对象 JavaScript面向对象程序设计(4): 函数 JavaScript面向对象程序设计(5): 类 JavaScript面向对象程序...
原型是理解继承概念的关键, 我们将会教你如何建立原型, 如何检测一个对象是否是另外一个对象的原型, 及其 JavaScript 的模型与Java 面向对象编程之间的区别。我们同样会向你展示如何检测对象所包含的各种属性的方法...
JavaScript面向对象编程指南是完整的扫描版...
从一个整体的角度来说明一下Javascript的面向对象的编程。
JavaScript面向对象编程指南 pdf,学习JavaScript实用,难得。
JavaScript面向对象编程.pdf
《零基础学javascript》光盘里面的资料,JavaScript编程100例 ,pdf文档,适合初级学者,适合刚开始学javascript的人士
javaScript进阶面向对象ES6 : 面向对象tab栏切换(先删除所有选项卡操作再设置选中的选项卡)、添加(先创建元素再追加元素到对应的父元素里面)、删除(阻止冒泡防止触发点击事件 根据索引号删除对应的选项及内容 ...