Javascript 进阶 面向对象编程 继承的一个样例
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 进阶 继承,这篇使用一个例子来展示js如何面向对象编程,以及如何基于类实现继承. 1. ...
- JavaScript的面向对象编程(OOP)(一)——类
在学习JavaScript面向对象的编程之前,需要知道,并了解面向对象的一些基本的常识.初学者中大多数都以为面向对象中,面向对象的编程是很重要和占据很大一部分精力.笔者在之前也是认为OOP是面向对象的 ...
- C++ Primer 学习笔记_69_面向对象编程 --继承情况下的类作用域
面向对象编程 --继承情况下的类作用域 引言: 在继承情况下,派生类的作用域嵌套在基类作用域中:假设不能在派生类作用域中确定名字,就在外围基类作用域中查找该名字的定义. 正是这样的类作用域的层次嵌套使 ...
- Python 面向对象编程 继承 和多态
Python 面向对象编程 继承 和多态 一:多继承性 对于java我们熟悉的是一个类只能继承一个父类:但是对于C++ 一个子类可以有多个父亲,同样对于 Python一个类也可以有多个父亲 格式: c ...
- Python面向对象编程——继承与派生
Python面向对象编程--继承与派生 一.初始继承 1.什么是继承 继承指的是类与类之间的关系,是一种什么"是"什么的关系,继承的功能之一就是用来解决代码重用问题. 继承是一种创 ...
- Javascript 面向对象编程—继承和封装
前 言 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类) ...
- javascript进阶——面向对象特性
面向对象的javascript是这门语言被设计出来时就考虑的问题,熟悉OOP编程的概念后,学习不同的语言都会发现不同语言的实现是不同的,javascript的面向对象特性与其他具有面向对象特性的语言的 ...
- javascript的面向对象编程
面象对象编程技术的核心理念:封装.继承.多态:在一些主流的高级编程语言中,比如:C#,VB.NET,JAVA,PHP等都是很容易实现的,而如果要在javascript中实现面象对象编程,可就不那么直接 ...
- python面向对象编程 继承 组合 接口和抽象类
1.类是用来描述某一类的事物,类的对象就是这一类事物中的一个个体.是事物就要有属性,属性分为 1:数据属性:就是变量 2:函数属性:就是函数,在面向对象里通常称为方法 注意:类和对象均用点来访问自己的 ...
随机推荐
- HTML学习笔记 div布局及table布局案例 第三节 (原创)参考使用表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 移动端1px 边框完整方案(四个方向)
使用stylus(预处理) 需要一个函数接收两个参数 第一个需要在哪个方向出现边框 第二个边框颜色 $border1px(face,$color) 根据传入的方向属性,调整其他参数 l 左右方向 t ...
- PLSQL锁表之后改如何操作
(1)查看哪个表被锁select b.owner,b.object_name,a.session_id,a.locked_mode from v$locked_object a,dba_objects ...
- ASP.NET Core 异常处理与日志记录
1. ASP.NET Core 异常处理与日志记录 1.1. 异常处理 1.1.1. 异常产生的原因及处理 1.1.2. ASP.NET Core中启动开发人员异常页面 1.2. 日志记录 1.2.1 ...
- C#多功能DataGridView打印类(WinForm)
; printPreviewDialog.ShowDialog(); } catch { ...
- 【分享】jQuery无插件实现 鼠标拖动图片切换 功能
前言 我就想随便叨逼叨几句,爱看就看几句,不爱看就直接跳过看正文就好啦~ 这个方法是仿写页面时我自己研究出来,可能有比我更简单的方法. 但我不管,因为我没查我不知道,我就觉得我的最好啦,耶耶耶~ 效果 ...
- ANDROID基础ACTIVITY篇之Activity的加载模式
在这之前首先让我们先了解一下什么是Task Task,简单的说,就是一组以栈的模式聚集在一起的Activity组件集合.它们有潜在的前后驱关联,新加入的Activity组件,位于栈顶,并仅有在栈顶的A ...
- 怎样在一个HTML中嵌入另一个HTML页面(iframe标签用法)
iframe 怎么 在一个网页中嵌入另一个网页呢,我们可以用html中的iframe标签搞定. iframe支持所有浏览器.下面来看语法: <iframe src="规定在 ifram ...
- netty 入门二 (传输bytebuf 或者pojo)
基于流的数据传输:在基于流的传输(如TCP / IP)中,接收的数据被存储到套接字接收缓冲器中. 不幸的是,基于流的传输的缓冲区不是数据包的队列,而是字节队列. 这意味着,即使您将两个消息作为两个独立 ...
- Cngigure和BUS实现远端配置
1 server依赖 <?xml version="1.0" encoding="UTF-8"?><project xmlns="h ...