JS面向对象、prototype、call()、apply()和实例
首先是转载,地址:
http://jaychaoqun.javaeye.com/blog/392110
接下来是理解之后的实例
004 |
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" /> |
005 |
< title >简易拖放效果</ title > |
013 |
var isIE = (document.all) ? true : false; |
014 |
var $ = function (id) { |
015 |
return "string" == typeof id ? document.getElementById(id) : id; |
018 |
//初始化一个 Class 对象, 它有一个成员,是一个方法, 这个方法返因另一个方法(方法是对象,所以可以作为参数或者返回值) |
021 |
return function() { //使用new操作符时,就会在新产生的对象上调用这个方法 |
022 |
this.initialize.apply(this, arguments); //这里就是调用 this 对象上的 initialize方法, 并传递 arguments,这里的this是new之后构造出来的对象 |
028 |
var Extend = function(destination, source) { |
029 |
for (var property in source) { |
030 |
destination[property] = source[property]; |
036 |
var Bind = function(object, fun) { |
038 |
return fun.apply(object, arguments); |
044 |
var BindAsEventListener = function(object, fun) { |
045 |
return function(event) { |
046 |
return fun.call(object, (event || window.event)); |
051 |
//oTarget绑定目标,sEventType事件类型,fnHandler事件方法 |
052 |
function addEventHandler(oTarget, sEventType, fnHandler) { |
053 |
if (oTarget.addEventListener) { //FF |
054 |
oTarget.addEventListener(sEventType, fnHandler, false); |
055 |
} else if (oTarget.attachEvent) { //IE |
056 |
oTarget.attachEvent("on" + sEventType, fnHandler); |
058 |
oTarget["on" + sEventType] = fnHandler; |
063 |
//oTarget绑定目标,sEventType事件类型,fnHandler事件方法 |
064 |
function removeEventHandler(oTarget, sEventType, fnHandler) { |
065 |
if (oTarget.removeEventListener) { //FF |
066 |
oTarget.removeEventListener(sEventType, fnHandler, false); |
067 |
} else if (oTarget.detachEvent) { //IE |
068 |
oTarget.detachEvent("on" + sEventType, fnHandler); |
070 |
oTarget["on" + sEventType] = null; |
074 |
//SimpleDrag是一个方法,方法体,这里相当于一个类 |
075 |
var SimpleDrag = Class.create(); |
076 |
SimpleDrag.prototype = { |
077 |
//对象初始化,实现Class中的this.initialize |
078 |
initialize: function(drag) { |
079 |
this.Drag = $(drag); //绑定目标 |
080 |
this._x = this._y = 0; //初始值 |
081 |
this._fnMove = BindAsEventListener(this, this.Move); |
082 |
this._fnStop = Bind(this, this.Stop); |
083 |
this.Drag.style.position = "absolute"; |
084 |
addEventHandler(this.Drag, "mousedown", BindAsEventListener(this, this.Start));//监听鼠标按下事件 |
087 |
Start: function(oEvent) { |
088 |
this._x = oEvent.clientX - this.Drag.offsetLeft; |
089 |
this._y = oEvent.clientY - this.Drag.offsetTop; |
090 |
addEventHandler(document, "mousemove", this._fnMove); //对象开始拖动后,监听鼠标移动事件 |
091 |
addEventHandler(document, "mouseup", this._fnStop); //同时监听鼠标放开事件 |
094 |
Move: function(oEvent) { |
095 |
this.Drag.style.left = oEvent.clientX - this._x + "px"; |
096 |
this.Drag.style.top = oEvent.clientY - this._y + "px"; |
100 |
removeEventHandler(document, "mousemove", this._fnMove); |
101 |
removeEventHandler(document, "mouseup", this._fnStop); |
105 |
< div id = "idDrag" style = "border:5px solid #0000FF; background:#C4E3FD; 50px; height:50px;" ></ div > |
107 |
new SimpleDrag("idDrag"); |
原文地址:https://www.cnblogs.com/luluping/p/1851892.html