js 面向对象代码
贴上一段同事写的代码,值的纪念
<script type="text/javascript">
//创建箱子类
function Box(option) {
var self = this;
var _option = {
height: 12,
width: 12
};
//合并参数对象 : 记得引用Jquery.js
$.extend(_option, option);
this.height = _option.height;
this.width = _option.height;
//绑定事件列表
var _events = {};
//创建一个方法,并带有回调函数
this.push = function(option, callback) {
if (option.height > this.height) {
console.error("over height", this);
return;
}
if (option.width > this.width) {
console.error("over width", this);
return;
}
//判断是否有回调函数
if (callback instanceof Function)
//调用回调函数,并给它传值(参数:_option)
callback.call(this, _option);
}
//绑定事件
this.on = function(name, event) {
if (name == null || !name)
return null;
if (!(event instanceof Function))
if (self[name] instanceof Function) {
return self[name]();
}
if (event instanceof Function)
_events[name] = self[name] = function() {
event.apply(this);
return this;
}
}
//解除绑定事件
this.unbind = function(name) {
delete self[name];
delete _events[name];
//链式表达式
return this;
}
}
//创建box1对象
var box1 = new Box();
//创建box2对象
var box2 = new Box();
//调用方法
box1.push({
height: 12,
width: 12
//回调函数
}, function(option) {
console.log("push回调函数已调用..", option);
});
//动态给对象绑定事件
box1.on("click", function() {
this.width += 10;
console.log("width递增10,click事件被调用..", this.width);
});
box1.on("heihei", function() {
console.log("heihei事件被调用..", this.width);
});
//事件普通调用
box1.click();
//链式表达式调用方法
box1.on("click").click().heihei().on("heihei");
//打印box1的宽度
console.log(box1.width);
//打印box2的宽度
console.log(box2.width);
//解除绑定事件
box1.unbind("heihei");
//测试解除
box1.heihei();
</script>
js 面向对象代码的更多相关文章
- 前端学习:JS(面向对象)代码笔记
前端学习:JS(面向对象)代码笔记 前端学习:JS面向对象知识学习(图解) 创建类和对象 创建对象方式1调用Object函数 <body> </body> <script ...
- 前端学习:JS面向对象知识学习(图解)
前端学习:JS面向对象知识学习(图解) 前端学习:JS(面向对象)代码笔记 JS面向对象图解知识全览 创建类和对象 方式1:使用Object()函数 方式2:使用自变量 方式3:使用工厂函数 创建多个 ...
- 如何把js的代码写的更加容易维护(一)--面向对象编程
总是头疼javascript的代码写起来不可维护,那么看看下面的代码: (function (w, $) { var app = { init: function () { var me = this ...
- 带你一分钟理解闭包--js面向对象编程
上一篇<简单粗暴地理解js原型链--js面向对象编程>没想到能攒到这么多赞,实属意外.分享是个好事情,尤其是分享自己的学习感悟.所以网上关于原型链.闭包.作用域等文章多如牛毛,很多文章写得 ...
- 20个JS优化代码技巧
原文网址链接为:http://www.jstips.co/ .截取了一部分本人认为比较实用的技巧分享给大家.其中一小部分技巧为JS面向对象的写法,不宜一一列出.关于JS面向对象的写法可参考本人前几篇随 ...
- JS面向对象(2) -- this的使用,对象之间的赋值,for...in语句,delete使用,成员方法,json对象的使用,prototype的使用,原型继承与原型链
相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...
- 浅谈JS面向对象之创建对象
hello,everybody,今天要探讨的问题是JS面向对象,其实面向对象呢呢,一般是在大型项目上会采用,不过了解它对我们理解JS语言有很大的意义. 首先什么是面向对象编程(oop),就是用对象的思 ...
- js面向对象,有利于复用
需求:在网页上添加个天气预报. 以前总是在需要执行js的地方,直接写function(){}.在需要同样功能的地方直接copy,或者稍微修改. 然后在网上看看有没有好点的方法,然后就看到js面向对象编 ...
- 原生JS面向对象思想封装轮播图组件
原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...
随机推荐
- crontab定时任务写法记录
基本格式 : * * * * * command 分 时 日 月 周 命令 第1列表示分钟1-59 每分钟用*或者 */1表示 第2列表示小时1-23(0表示0点) 第3列表示日期1-31 第4列表示 ...
- static_new
<?php //在::操作符的左边写上类的名称来静态地访问某个成员,这样就可以避免创建类的实例. //这样不仅可以省略掉实例化类的代码,而且还会更高效,因为类的每个实例都会占用一小部分的系统资源 ...
- 2018年长沙理工大学第十三届程序设计竞赛 C 取手机 【概率】
链接:https://www.nowcoder.com/acm/contest/96/C 来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言65536 ...
- iOS:学习runtime的理解和心得 (转)
Runtime是想要做好iOS开发,或者说是真正的深刻的掌握OC这门语言所必需理解的东西.最近在学习Runtime,有自己的一些心得,整理如下, 一为 查阅方便 二为 或许能给他人一些启发, 三为 希 ...
- socket编程详解
http://www.cnblogs.com/skynet/archive/2010/12/12/1903949.html http://blog.csdn.net/hguisu/article/de ...
- Ubuntu dpkg 查询已安装的软件包
要检查特定的包,比如firefox是否安装了,使用这个命令: dpkg -s firefox 要列出你系统中安装的所有包,输入下面的命令: dpkg --get-selections 你同样可以通过g ...
- 利用Tkinter做的自动生成JSONSchema的小工具
前面讲到可以使用JSONSchema做json数据校验, 但是每个接口数据都手动写jsonschema太痛苦了, 就写了个小脚本,可以直接复制接口文档的mock数据然后生成一个简单的jsonschem ...
- Linux查看端口占用进程
Linux查看端口占用进程 netstat -anlp|grep 8081 tcp /java 此处3195为进程ID
- HDU 4034 Graph:反向floyd
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4034 题意: 有一个有向图,n个节点.给出两两节点之间的最短路长度,问你原图至少有多少条边. 如果无解 ...
- delphi完美经典-第16章 Delphi数据库程序设计----使用BDE组件
第16章 Delphi数据库程序设计----使用BDE组件 Delphi访问数据库的方式有:ADO.BDE.dbExpress.InterBase Express. 一.TDataSet组件 虽然De ...