setTimeout 最终版本面向对象可扩展

最新推荐文章于 2023-09-12 09:41:51 发布

代码-君

最新推荐文章于 2023-09-12 09:41:51 发布

阅读量611

点赞数

分类专栏： javascriptDOM 编程艺术随书笔记

javascriptDOM 编程艺术随书笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Object.extend=function(destination, source) { //extend方法表示继承 destination目标对象 source源对象目标对象继承源对象所有属性方法
 for (var property in source) { //循环所有property属性和方法
 destination[property] = source[property]; //source对象的property属相和方法赋值给destination对象的property属性和方法
}
return destination; //返回扩展后的destination
}
//extend方法的所用是 destination目标对象的property属性继承source对象的property属性
function message(opt){ //opt参数是对象 message继承原型prototype属性的方法内的所有属性和方法 message的实例也拥有原型特性
 this.objecs={ // message实例对象的objecs对象三个属性
 oid:'',
 oleft:0,
 otop:0
 };
 this.settings={ //message实例对象的settings对象三个属性
 x_max:200,
 y_max:100,
 times:100
 };
 this.objecs = Object.extend(this.objecs, opt); //message实例化对象的objecs属性 = Object对象的extend方法
 //Object对象的extend方法传递两个参数 this.objecs对象和opt对象
 //this.objecs对象继承opt对象的所有属性和方法
}
message.prototype.postitionMessage = function(){ //message对象的原型的方法postitionMessage
 if(this.objecs.oid==''){ // 如果 message实例的objecs对象的oid属性为空
 return;
 }
 this.parap = document.getElementById(this.objecs.oid); //id为message实例对象的objescs对象的oid属性
 this.parap.style.cssText = "position:absolute;left:"+this.objecs.oleft+"px;top:"+this.objecs.otop+"px;";
 this.movieMessage();
}
message.prototype.movieMessage = function(){
 var self = this;
 var xpos = parseInt(this.parap.style.left);
 var ypos = parseInt(this.parap.style.top);
 if(xpos<this.settings.x_max){xpos+=1;};
 if(ypos<this.settings.y_max){ypos+=1;};
 this.parap.style.cssText = "position:absolute;left:"+xpos+"px;top:"+ypos+"px;";
 if(xpos<this.settings.x_max || ypos<this.settings.y_max){
 setTimeout(function(){self.movieMessage()},self.settings.times);
 }
}

</script>
</head>
<body>
Whee0
Whee1
</body>
</html>

思路和编写过程

面向对象可扩展
步骤1 需要一个类公用参数都写入类的内部以便实例对象和类的原型可以继承类内部的方法和属性
写一个Message类

面向对象可扩展
步骤1 需要一个类公用参数都写入类的内部以便实例对象和类的原型可以继承类内部的方法和属性
写一个Message类
function Message(){

}
类内部的第一部分需要的是获取DOM对象的id,初始化x,y的位置。实现代码如下:
function Message(){
this.objecs={
oid:"", //oid属性初始值为空代表的是DOM的ID
oleft:0, //x轴的初始化位置
otop:0 //y轴的初始化位置
}
}
类内部还需要第二部分作用是DOM对象移动的最大距离和一个时间属性表示每过多久执行一次，实现代码如下:
function Message(){
this.objecs={
oid:"",
oleft:0,
otop:0
}
this.settings={
x_max:200, //x轴的目标距离
y_max:100, //y轴的目标距离
times:100 //每次执行的间隔时间
}
}
步骤2 需要对类进行扩展以便可以实现所需要的功能用prototype原型来进行扩展实例化后的对象将会继承类的原型的所有方法和属性
写一个Message类的原型的postitionMessage方法函数用来获取DOM对象和初始化DOM对象和调用另外一个执行动画的方法函数
实现代码如下:
Message.prototype.positionMessage = function(){
if(this.objecs.oid == ""){return}; //如果oid属性值为空就返回不执行下面代码为空说明并没有需要执行的DOM对象
this.para = document.getElementById(this.objecs.oid) //获取DOM对象
this.para.style.cssText = "position:absolute;left:"+this.objecs.oleft+"px;top:"+this.objecs.otop+"px;";
//初始化DOM对象的位置
this.moveMessage(); //调用一个实行动画功能的方法函数
}
步骤3 需要写一个用来执行动画的方法函数moveMessage 实现代码如下:
Message.protorype.moveMessage = function(){
var self = this; //将this赋值给self 因为在setTimeout内部this的指向是window对象这里我们不需要window对象需要的是类实例化后的对象
var xpos = parseInt(this.parap.style.left); //获取DOM对象x轴的位置并且用parseInt转化为数字
var ypos = parseInt(this.parap.style.top); //获取DOM对象y轴的位置并且用parseIne转化为数字
if(xpos<this.settings.x_max){xpos+=1;}; //判断如果获取DOM对象x轴的位置小于x轴的目标位置那么x轴每次加1
if(ypos<this.settings.y_max){ypos+=1;}; //判断如果获取DOM对象y轴的位置小于y轴的目标位置那么y轴每次加1
this.para.style.cssText = "position:absolute;left:"+xpos+"px;top:"+ypos+"px;";
//DOM对象每移动一次的新位置
if(xpos<this.settings.x_max||ypos<this.settings.y_max){ //如果DOM对象的x轴的位置小于目标位置并且y轴位置也小于目标位置
setTimeout(function(){self.moveMessage()},self.setting.times);
//每个self.setting.times的时间就调用一次方法函数moveMessage() 自调用函数可以在条件为true的情况下重复执行
}
}
步骤4 实例化类因为我们写的是可以适用于多个DOM对象的所以可以实例化两个已经更多的对象
var whee0 = new Message()
var whee1 = new Message()
我们需要一个函数用来在window对象加载的时候执行实现代码如下：
function messageObject(){
var whee0 = new Message()
var whee1 = new Message()
}
问题提出:messageObject函数内部目前只是写入了Message类而Message类的作用只是来存放一些公共参数并没有去调用动画方法函数
而动画方法函数是对象的原型方法positionMessage方法函数调用的所以还需要在这个函数内部写入这个方法以便加载的时候来执行这个方法
内部的一些功能实现代码如下:
function messageObject(){
var whee0 = new Message();
var whee1 = new Message();
whee0.positionMessage(); //对象获取positionMessage方法函数
whee1.positionMessage();
}
完整代码如下:

问题提出由于Message类内部的第一部分
this.objecs={
oid:"",
oleft:0,
otop:0
}
是用来初始化存放dom对象的ID属性和初始化位置的而上面的代码并没有传递参数进入Message所以还需要传递ID属性和初始化位置的参数
在实例化类的时候设置参数实现代码如下:
function messageObject(){
var whee0 = new Message({oid:"message0",oleft:100,otop:50}); //将对象传入Message类
var whee1 = new Message({oid:"message0",oleft:120,otop:50});
whee0.positionMessage(); //对象获取positionMessage方法函数
whee1.positionMessage();
}
Message类的修改代码如下:
function Message(opt){ //opt参数最为接受传入的对象
this.objecs={
oid:"",
oleft:0,
otop:0
}
this.settings={
x_max:200, //x轴的目标距离
y_max:100, //y轴的目标距离
times:100 //每次执行的间隔时间
}
}

问题提出 opt参数对象并没有使用到我们还需要写一段代码让opt参数能够使用上为此可以写一段可以实现覆盖的代码
由于所有对象都是Object对象的子对象所以我们写一个Object对象上写一个方法函数
实现代码如下：
Object.extend = function(destination, source){)
这个函数有两个参数分别代表目标对象和源对象
需要实现的功能是让目标对象可以继承源对象的所以属性和方法因为是继承所有所以需要一个循环由于循环需要获取的是属性的值所以使用for...in...循环
实现代码如下:
Object.extend = function(destination, source){
for(var property in source){ //由于需要继承的是source内的所有属性所以要循环这个对象
destination[property] = source[prooerty] //将source对象内部的每个属性都赋值给destination的属性
}
return destination; //返回扩展后的destination
}

问题提出这段代码写好了应该如何使用我们再看看Message类因为是这个类来获取和初始化DOM对象的id属性和位置的
function Message(opt){ //opt参数最为接受传入的对象
this.objecs={
oid:"",
oleft:0,
otop:0
}
this.settings={
x_max:200, //x轴的目标距离
y_max:100, //y轴的目标距离
times:100 //每次执行的间隔时间
}
}
现在我们需要的是让pot对象参数内部的属性来覆盖objecs对象内部的属性所以就需要使用上面写的覆盖代码实现代码如下
this.objecs = Object.extend(this.objecs,opt)
将this.objecs对象重新写为可以覆盖的代码将这段代码加入到Message类中实现代码如下:
function Message(opt){ //opt参数最为接受传入的对象
this.objecs={
oid:"",
oleft:0,
otop:0
}
this.objecs = Object.extend(this.objecs,opt);
this.settings={
x_max:200, //x轴的目标距离
y_max:100, //y轴的目标距离
times:100 //每次执行的间隔时间
}
}