JS面向对象思想（OOP）
直接看js好了，模拟创建一个奥运会
function 奥运会Class(主题) { // 删除主题 // delete this.主题; this.主题 = 主题; this.开幕时间; this.闭幕时间; this.公告簿 = ""; //模拟开幕 this.开幕 = function () { this.开幕时间 = "2012年7月28日03时12分(北京时间)"; this.公告薄 = "奥运主题：" + this.主题 + " " + "开幕时间：" + this.开幕时间 + " " + "伦敦奥运会开幕了 "; this.公告发布event(this, this.公告薄); } //模拟闭幕 this.闭幕 = function () { this.闭幕时间 = "2012年8月13日 04:00（北京时间)"; this.公告薄 += this.闭幕时间 + "伦敦奥运会闭幕了 "; this.公告发布event(this, this.公告薄); } //模拟事件的方法 this.公告发布event = function(sender, e) { } //构建集合对象 this.国家集合 = new Array(); this.运动员集合 = new Array(); this.裁判集合 = new Array(); this.项目集合 = new Array(); //创建一个通用查询 this.通用查询 = function (对象源, 查询集合对象名称, 查询字段, value) { for (var aa in 对象源) { if (aa == 查询集合对象名称) { var source = 对象源[aa]; if (aa == 查询集合对象名称) { for (var i = 0; i <= source.length; i++) { var s = source[i.toString()]; if (s[查询字段] == value) { return s; } } } } } return null; } } //闭包扩展,在原型上扩展方法 奥运会Class.prototype.添加国家 = function(国家名称, 地区) { var 国家 = new 国家Class(国家名称, 地区);//创建国家 国家.所属奥运会 = this; this.国家集合.push(国家);//添加国家到国家集合 this.公告簿 += 国家名称 + " " + 地区 + " " + "已经加入本届奥运会 ";;//发布消息 this.公告发布event(this, this.公告簿); //动态移除成员 或者是方法等 // delete this.公告簿; //链式编程,进行优化 return this; } 奥运会Class.prototype.添加项目 = function(项目名称) { var 项目 = new 项目Class(项目名称);//创建项目 项目.所属奥运会 = this; this.项目集合.push(项目);//添加项目到国家项目 //发布消息 this.公告簿 += 项目名称 + " " + "已经加入本届奥运会" + " Number:" + this.项目集合.length + " ";//发布消息 this.公告发布event(this, this.公告簿); return this; } 奥运会Class.prototype.添加裁判 = function(名称, 所属项目) { var 裁判 = new 裁判Class(名称);//创建裁判 裁判.所属奥运会 = this; 裁判.所属的项目 = 所属项目; this.裁判集合.push(裁判);//添加裁判到裁判集合 //发布消息 this.公告簿 += 名称 + " " + "裁判已经加入本届奥运会" + " Number:" + this.裁判集合.length + " "; this.公告发布event(this, this.公告簿); return this; } 奥运会Class.prototype.添加运动员 = function(名称, 国家) { var 运动员 = new 运动员Class(名称, 国家);//创建运动员 运动员.所属奥运会 = this; this.运动员集合.push(运动员);//添加运动员到运动员集合 国家.添加运动员(运动员); //发布消息 this.公告簿 += 名称 + " " + "加入本届奥运会" + " Number:" + this.运动员集合.length + " "; this.公告发布event(this, this.公告簿); return this; } //国家对象 function 国家Class(国家名称, 地区) { this.名称 = 国家名称; this.地区 = 地区; this.所属奥运会 = null; this.运动员集合 = new Array(); this.添加运动员 = function(运动员) { this.运动员集合.push(运动员); } } // 运动员对象 function 运动员Class(姓名, 所属国家) { this.姓名 = 姓名; this.所属奥运会 = null; this.项目集合 = new Array(); this.所属国家 = 所属国家; this.添加项目 = function(项目) { this.项目集合.push(项目); 项目.所属运动员集合.push(this); } } //裁判对象 function 裁判Class(姓名) { this.姓名 = 姓名; this.所属奥运会 = null; this.所属的项目 = null } //项目对象 function 项目Class(名称) { this.名称 = 名称; this.所属奥运会 = null; this.成绩 = ""; this.奖牌 = ""; this.所属裁判 = null; this.所属运动员集合 = new Array(); this.设置比赛成绩 = function() { } this.浅表克隆 = function() { var clone = new 项目Class(); for (var a in this) { clone[a] = this[a]; } return clone; } this.添加比赛成绩 = function(所属运动员, 成绩单) { for (var i = 0; i <= this.所属运动员集合.length; i++) { if (this.所属运动员集合[i.toString()].姓名 == 所属运动员.姓名) { var s = this.所属运动员集合[i.toString()]; for (var ii = 0; ii <= s.项目集合.length; ii++) { if (s.项目集合[ii.toString()].名称 == 成绩单.名称) { var ss = s.项目集合[ii.toString()]; s.项目集合[ii.toString()] = 成绩单; this.所属奥运会.公告簿 += 所属运动员.姓名 + " " + 成绩单.名称 + " " + 成绩单.成绩 + " "; this.所属奥运会.公告发布event(this, this.所属奥运会.公告簿); return; } } } } } }
<script src="OOP奥运会.js" type="text/javascript">
</script>
<script type="text/javascript">
var 奥运会 = new 奥运会Class("游伦敦，看世界!!!!!!!");
function Button2_onclick() {
//消息发布
奥运会.公告发布event = function (sender, e) {
document.getElementById("TextArea1").value = e;
}
奥运会.开幕();
}
function Button3_onclick() {
//消息发布
奥运会.公告发布event = function (sender, e) {
document.getElementById("TextArea1").value = e;
}
//依次添加国家地区
/* 奥运会.添加国家("中国", "亚洲");
奥运会.添加国家("日本", "亚洲");
奥运会.添加国家("美国", "北美洲");
奥运会.添加国家("德国", "欧洲");
*/
//链式编程，可以这样写，也可以以上面的方式写
奥运会.添加国家("中国", "亚洲").添加国家("日本", "亚洲").添加国家("美国", "北美洲").添加国家("德国", "欧洲");
}
function Button4_onclick() {
//消息发布
奥运会.公告发布event = function (sender, e) {
document.getElementById("TextArea1").value = e;
}
//添加运动项目
奥运会.添加项目("跳水").添加项目("举重").添加项目("柔道").添加项目("篮球").添加项目("排球").添加项目("田径");
}
function Button5_onclick() {
//消息发布
奥运会.公告发布event = function (sender, e) {
document.getElementById("TextArea1").value = e;
}
//添加裁判
奥运会.添加裁判("张三").添加裁判("李四").添加裁判("陈三");
//为裁判添加运动项目
var 跳水 = 奥运会.通用查询(奥运会 ,"项目集合" ,"名称","跳水");
var 张三 = 奥运会.通用查询(奥运会 ,"裁判集合" ,"姓名","张三");
跳水.所属裁判= 张三;
张三.所属的项目 =跳水;
var 举重 = 奥运会.通用查询(奥运会 ,"项目集合" ,"名称","举重");
var 李四 = 奥运会.通用查询(奥运会 ,"裁判集合" ,"姓名","李四");
举重.所属裁判= 李四;
李四.所属的项目 =举重;
var 柔道 = 奥运会.通用查询(奥运会 ,"项目集合" ,"名称","柔道");
var 陈三 = 奥运会.通用查询(奥运会 ,"裁判集合" ,"姓名","陈三");
柔道.所属裁判= 陈三;
陈三.所属的项目 =柔道;
}
function Button6_onclick() {
//消息发布
奥运会.公告发布event = function (sender, e) {
document.getElementById("TextArea1").value = e;
}
//创建运动员
var 中国 = 奥运会.通用查询(奥运会, "国家集合", "名称", "中国");
奥运会.添加运动员("郭晶晶", 中国);
var 日本 = 奥运会.通用查询(奥运会, "国家集合", "名称", "日本");
奥运会.添加运动员("小日本田", 日本);
var 美国 = 奥运会.通用查询(奥运会, "国家集合", "名称", "美国");
奥运会.添加运动员("布迪亚 ", 美国);
for (var i = 0; i < 10; i++) {
var 中国 = 奥运会.通用查询(奥运会, "国家集合", "名称", "中国");
奥运会.添加运动员("郭晶晶"+i, 中国).添加运动员("Z-" + i, 中国).添加运动员("Z-G" + i, 中国);
var 日本 = 奥运会.通用查询(奥运会, "国家集合", "名称", "日本");
奥运会.添加运动员("小日本田"+i, 日本).添加运动员("R-" + i, 日本).添加运动员("R-B" + i, 日本);
var 美国 = 奥运会.通用查询(奥运会, "国家集合", "名称", "美国");
奥运会.添加运动员("布迪亚 "+i, 美国).添加运动员("U-" + i, 美国).添加运动员("U-S" + i, 美国);
}
}
function Button7_onclick() {
//消息发布
奥运会.公告发布event = function (sender, e) {
document.getElementById("TextArea1").value = e;
}
//给运动员分配运动项目
var 中国=奥运会.通用查询(奥运会 ,"国家集合" ,"名称","中国");
var 郭晶晶=奥运会.通用查询(中国 ,"运动员集合" ,"姓名","郭晶晶");
var 跳水 =奥运会.通用查询(奥运会 ,"项目集合" ,"名称","跳水");
郭晶晶.添加项目(跳水);
var 日本=奥运会.通用查询(奥运会 ,"国家集合" ,"名称","日本");
var 小日本田=奥运会.通用查询(日本 ,"运动员集合" ,"姓名","小日本田");
小日本田.添加项目(跳水);
var 美国=奥运会.通用查询(奥运会 ,"国家集合" ,"名称","美国");
var 布迪亚 =奥运会.通用查询(美国 ,"运动员集合" ,"姓名","布迪亚 ");
布迪亚 .添加项目(跳水);
}
function Button8_onclick() {
//消息发布
奥运会.公告发布event = function (sender, e) {
document.getElementById("TextArea1").value = e;
}
//为运动设置成绩
var 中国=奥运会.通用查询(奥运会 ,"国家集合" ,"名称","中国");
var 郭晶晶=奥运会.通用查询(中国 ,"运动员集合" ,"姓名","郭晶晶");
var 跳水1 =奥运会.通用查询(奥运会 ,"项目集合" ,"名称","跳水").浅表克隆();
//先得到要修改数据对象的引用
var 跳水1set =奥运会.通用查询(郭晶晶 ,"项目集合" ,"名称","跳水");
跳水1.成绩="99分";
跳水1set.添加比赛成绩(郭晶晶,跳水1);
var 日本=奥运会.通用查询(奥运会 ,"国家集合" ,"名称","日本");
var 小日本田=奥运会.通用查询(日本 ,"运动员集合" ,"姓名","小日本田");
var 跳水2 =奥运会.通用查询(奥运会 ,"项目集合" ,"名称","跳水").浅表克隆();
var 跳水2set =奥运会.通用查询(小日本田 ,"项目集合" ,"名称","跳水");
跳水2.成绩="25分";
跳水2set.添加比赛成绩(小日本田,跳水2);
}
function Button9_onclick() {
//消息发布
奥运会.公告发布event = function (sender, e) {
document.getElementById("TextArea1").value = e;
}
奥运会.闭幕();
}
</script>
具体效果
喜欢的人可以下载看看，体会OOP思想http://files.cnblogs.com/BABLOVE/JSOOP%E5%A5%A5%E8%BF%90%E4%BC%9A.rar
使用avalon 实现一个序列号功能
avalon“操作数据即操作DOM”的能力，让我们可以专致于业务，写出更专业，更优雅，更易维护的代码来。现在让我们看看如何实现一个序列号输入功能。它的需求以下：
- 每输入4个字符就跳到下一个输入框。
- 不能输入超过4个字符。
- 支持复制贴粘功能，每4个字符自动对位到相应的输入框。
先给出代码：
<!DOCTYPE html><html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="avalon.js"></script> <style> input:focus{ border: 1px solid #a9ea00; background:#f0f0f0; } </style> <script> var model = avalon.define("xxx", function(vm) { vm.seriesNumber = [{value: ""}, {value: ""}, {value: ""}, {value: ""}] vm.focusIndex = NaN //获得焦点，实现输入框中的跳转操作 vm.focus = function(a, b) { var el = this; if (a === avalon(el).data("index")) { setTimeout(function() { el.focus() el.select(); }, 0); } } vm._focus = function() { model.$unwatch() model.focusIndex = avalon(this).data("index") model.$watch() } //通过贴粘实现智能输入 vm.paste = function(e) { var index = avalon(this).data("index") var text = "" if (e.clipboardData) { avalon.log("w3c") text = e.clipboardData.getData("text/plain"); } else if (window.clipboardData) { avalon.log("ie") text = clipboardData.getData("Text") } var array = text.match(/w{4}/g) || [] for (var i = 0; i < array.length; i++) { var el = model.seriesNumber[index + i] if (el) { el.value = array[i] } } var last = Math.min(index + i, 3) setTimeout(function() { model.focusIndex = last }, 0) } }) //绑定$watch，实现输入字数限制与智能跳转 model.seriesNumber.forEach(function(el, index) { el.$watch("value", function(a, b) { if (a.length >= 4) { model.focusIndex = index + 1 //跳转 el.value = a.slice(0, 4) } }) }) //刚开始时聚焦到第一个输入框中 avalon.ready(function() { model.focusIndex = 0 }) </script> </head> <body> <div ms-controller="xxx" ms-each-el="seriesNumber"> <input ms-duplex="el.value" ms-on-paste="paste" ms-focus="_focus" ms-bind="focusIndex: focus" ms-data-index="$index"> </div> <h2>1234aaaabbbb6789</h2> </body></html> |
首先，我们要监听一个input里面的内容变化，马上能想到用ms-duplex，该绑定能逐字符地监听变化。但由于存在多个INPUT，为了方便循环处理，我们用到一个数组。但数组VM中只能监听它的长度变化。因此整成对象数组，然后监听这些对象的某个字符串属性就行了。
这个value值的变动，我们可以绑定$watch回调，当输入值超过4个字符串时，进行跳转操作。
el.$watch("value", function(a, b) { if (a.length >= 4) { model.focusIndex = index + 1 //跳转 el.value = a.slice(0, 4) } }) |
如果实现跳转操作呢，我们使用另一个新属性focusIndex 来监听，当它变化时，我们再调用一个跳转方法。而这个跳转方法需要得到元素节点。这唯有万能绑定ms-bind 能干这事。
ms-bind="vmProp:vmCallback"
vmCallback的this指向被绑定元素，并传入此绑定属性的前后两个值。vmProp的值每次变动都会调用vmCallback。
贴粘时，我们需要用到paste事件，但avalon默认没此绑定，需要用ms-on传入事件名，这里面做些兼容处理，逐一修改seriesNumber 数组对象的value 值就行了。
整个流程简单利落，除了跳转时我们用到一些DOM方法，其他都是对数据的操作。这与以往jQuery, Prototype.js, YUI的实现思路完全不同。打个比喻，avalon带来的技术体验，如同书法与打印机的区别。jQuery好优雅，能让你精确控制每一步DOM操作，DOM操作越是复杂，如同繁体字那样纵横捭阖，越是显得jQuery游刃有余。avalon好干净，不要准备文房四宝，一张A4，一台打印机就行了，刷刷地出来你要的东西，干脆利落，没什么人情味，但效率奇高，是工业革命的先声。从历史的发展过程来看，书法这种讲究技术，渗杂着许多人个品味地艺术被整齐划一的印刷术逼到一死角，被剥夺了文化传承者的角色。jQuery这些也一样，DOM操作最快，也比不上MVVM这种印刷机般的技术，后者能不着痕迹地同步视图，里面精密的算法保证不会存在冗余无用的DOM操作。前者还存在“糟糕的书法者”问题，最好的笔砚，在某些人手里也是潦草不堪，看守打印机工作就没这问题。从势利的角度来看，就是怎么能够给资本家带来好处，怎么在相对时间内能够有更多更快， 更稳定的产出，就怎么快被采纳，人性使然。
相关文章
标签: avalon
分类: javascript