贴上一段同事写的代码,值的纪念

<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 面向对象代码的更多相关文章

  1. 前端学习:JS(面向对象)代码笔记

    前端学习:JS(面向对象)代码笔记 前端学习:JS面向对象知识学习(图解) 创建类和对象 创建对象方式1调用Object函数 <body> </body> <script ...

  2. 前端学习:JS面向对象知识学习(图解)

    前端学习:JS面向对象知识学习(图解) 前端学习:JS(面向对象)代码笔记 JS面向对象图解知识全览 创建类和对象 方式1:使用Object()函数 方式2:使用自变量 方式3:使用工厂函数 创建多个 ...

  3. 如何把js的代码写的更加容易维护(一)--面向对象编程

    总是头疼javascript的代码写起来不可维护,那么看看下面的代码: (function (w, $) { var app = { init: function () { var me = this ...

  4. 带你一分钟理解闭包--js面向对象编程

    上一篇<简单粗暴地理解js原型链--js面向对象编程>没想到能攒到这么多赞,实属意外.分享是个好事情,尤其是分享自己的学习感悟.所以网上关于原型链.闭包.作用域等文章多如牛毛,很多文章写得 ...

  5. 20个JS优化代码技巧

    原文网址链接为:http://www.jstips.co/ .截取了一部分本人认为比较实用的技巧分享给大家.其中一小部分技巧为JS面向对象的写法,不宜一一列出.关于JS面向对象的写法可参考本人前几篇随 ...

  6. JS面向对象(2) -- this的使用,对象之间的赋值,for...in语句,delete使用,成员方法,json对象的使用,prototype的使用,原型继承与原型链

    相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...

  7. 浅谈JS面向对象之创建对象

    hello,everybody,今天要探讨的问题是JS面向对象,其实面向对象呢呢,一般是在大型项目上会采用,不过了解它对我们理解JS语言有很大的意义. 首先什么是面向对象编程(oop),就是用对象的思 ...

  8. js面向对象,有利于复用

    需求:在网页上添加个天气预报. 以前总是在需要执行js的地方,直接写function(){}.在需要同样功能的地方直接copy,或者稍微修改. 然后在网上看看有没有好点的方法,然后就看到js面向对象编 ...

  9. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

随机推荐

  1. Javaweb基础--->Servlet(转载)

    今天看到这篇博客,感觉还不错,拿来借鉴学习一下. 一.Servlet 是什么? Java Servlet 是运行在 Web 服务器或应用服务器上的程序,它是作为来自 Web 浏览器或其他 HTTP 客 ...

  2. dojo 官方翻译 dojo/domReady 版本1.10

    官方地址:http://dojotoolkit.org/reference-guide/1.10/dojo/domReady.html#dojo-domready dom加载完成后,执行. requi ...

  3. Docker alpine 设置东八时区

    FROM alpine:3.8 RUN echo 'http://mirrors.ustc.edu.cn/alpine/v3.5/main' > /etc/apk/repositories &a ...

  4. Python 3 并发编程多进程之进程与线程

    Python 3 进程与线程 进程即正在执行的一个过程.进程是对正在运行程序的一个抽象. 进程的概念起源于操作系统,是操作系统最核心的概念,也是操作系统提供的最古老也是最重要的抽象概念之一.操作系统的 ...

  5. Spark Structured Streaming框架(5)之进程管理

    Structured Streaming提供一些API来管理Streaming对象.用户可以通过这些API来手动管理已经启动的Streaming,保证在系统中的Streaming有序执行. 1. St ...

  6. Spring- 异常org.xml.sax.SAXParseException; systemId: http://www.springframework.org/schema/context/; lineNumber: 1; columnNumber: 55; 在 publicId 和 systemId 之间需要有空格。

    抛出异常 六月 03, 2018 7:40:44 下午 org.springframework.context.support.AbstractApplicationContext prepareRe ...

  7. Spring MVC的工作原理和机制

    Spring  MVC的工作原理和机制 参考: springMVC 的工作原理和机制 - 孤鸿子 - 博客园https://www.cnblogs.com/zbf1214/p/5265117.html ...

  8. 恢复delete删除的数据

    SELECT * FROM tablename AS OF TIMESTAMP TO_TIMESTAMP('2010-12-15 11:10:17', 'YYYY-MM-DD HH:MI:SS')

  9. 分享知识-快乐自己:Nginx概述及如何使用

    概述: 什么是 Nginx? Nginx (engine x) 是一款轻量级的 Web 服务器 .反向代理服务器及电子邮件(IMAP/POP3)代理服务器. 什么是反向代理? 反向代理(Reverse ...

  10. python-字典和json

    Python的字典和JSON在表现形式上非常相似 #这是Python中的一个字典 dic = { 'str': 'this is a string', 'list': [1, 2, 'a', 'b'] ...