javascript 图片轮换 函数化继承
更新时间：2010年05月18日 01:31:19 作者：
一直让我困扰的是，我不知道如何去让这个效果 自动播放，或者费了很多周折。这可能叫初始化。
先看下前几天的动画是如何构造JS的：
var photo=function(){
var index=0,a,b,c,d;
return {
show:function(){},
auto:function(){}
}
}
var aa=photo();
//基本上是 用return 返回了一些方法。
// 1：无法初始化就执行 auto。
// 2:在初始化的时候，我没办法把this指向aa。
//上面两个问题，会很不方便。
1：我不愿意让自己去这洋写：
var aa=photo("id");
aa.auto()//多一句话，很不好看。
理想状态是我在
var aa=photo("id")的时候就告诉程序是否自动播放。
2：如果有两个动画在同一个页面。
比如：
var aa=photo("id1");
aa.auto()
var bb=photo("id2");
bb.auto()
那么他们都有用户控制动画的A标签，如何各自负责自己的动画。不互相干扰。（其实他涉及到私有变量的问题，还有this指向）;
申明：网上有很多解决上面问题的方法。下面的只是我弄明白了。所以来给大家分享，高手见笑了。
不错，又是在公车上，我解决了这个问题。《javascript语言精粹》第52页 5.4函数化
我来看一下这个 函数化构造器的源代码：
//加粗表示强调
//这个方法是 《javascript语言精粹》第52页 5.4函数化 上的。
var constructor = function (spec,my){
var that,其他的私有实例变量;
my = my || {};
把共享的变量和函数添加到my中
that = 一个新对象
添加给that 的特权方法
return that;
}
看下面的方法：
var photo = function(spec){
var _this={},index,a,c,d;
//这里可以初始化用户控制的a标签
//比如这洋
a.onmouseover=function(){
_this.go();//可以调用哦
}
_this.show=function(){};
_this.auto=function(){};
_this.go=function(){};
// 这里可以直接调用刚才申明好的方法
_this.auto()//可以直接调用
return _this;
}
var bb=photo({index:1;});
var aa=photo({index:2});
//上面创建了 bb aa 两个不同的动画，不会互相影响哦。
// 如果我对javascript语言精粹 的函数化 理解有问题。还请指教...
最后这个动画就比较完美了。可是私有变量太多了。如果可以设置默认值，可以使用者选择性的传进来。会比较好
所以可以添加下面这个函数：（这是很多人都使用的啦）
var Extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}
// 看到 Extend 大家都知道 他是做什么用的了。
最后贴出我今天写的这个 图片轮换的源代码：
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
复制代码 代码如下:
var photo=function(){
var index=0,a,b,c,d;
return {
show:function(){},
auto:function(){}
}
}
var aa=photo();
//基本上是 用return 返回了一些方法。
// 1：无法初始化就执行 auto。
// 2:在初始化的时候，我没办法把this指向aa。
//上面两个问题，会很不方便。
1：我不愿意让自己去这洋写：
复制代码 代码如下:
var aa=photo("id");
aa.auto()//多一句话，很不好看。
理想状态是我在
var aa=photo("id")的时候就告诉程序是否自动播放。
2：如果有两个动画在同一个页面。
比如：
复制代码 代码如下:
var aa=photo("id1");
aa.auto()
var bb=photo("id2");
bb.auto()
那么他们都有用户控制动画的A标签，如何各自负责自己的动画。不互相干扰。（其实他涉及到私有变量的问题，还有this指向）;
申明：网上有很多解决上面问题的方法。下面的只是我弄明白了。所以来给大家分享，高手见笑了。
不错，又是在公车上，我解决了这个问题。《javascript语言精粹》第52页 5.4函数化
我来看一下这个 函数化构造器的源代码：
//加粗表示强调
//这个方法是 《javascript语言精粹》第52页 5.4函数化 上的。
var constructor = function (spec,my){
var that,其他的私有实例变量;
my = my || {};
把共享的变量和函数添加到my中
that = 一个新对象
添加给that 的特权方法
return that;
}
看下面的方法：
复制代码 代码如下:
var photo = function(spec){
var _this={},index,a,c,d;
//这里可以初始化用户控制的a标签
//比如这洋
a.onmouseover=function(){
_this.go();//可以调用哦
}
_this.show=function(){};
_this.auto=function(){};
_this.go=function(){};
// 这里可以直接调用刚才申明好的方法
_this.auto()//可以直接调用
return _this;
}
var bb=photo({index:1;});
var aa=photo({index:2});
//上面创建了 bb aa 两个不同的动画，不会互相影响哦。
// 如果我对javascript语言精粹 的函数化 理解有问题。还请指教...
最后这个动画就比较完美了。可是私有变量太多了。如果可以设置默认值，可以使用者选择性的传进来。会比较好
所以可以添加下面这个函数：（这是很多人都使用的啦）
复制代码 代码如下:
var Extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}
// 看到 Extend 大家都知道 他是做什么用的了。
最后贴出我今天写的这个 图片轮换的源代码：
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
相关文章
表格相同内容单元格的合并在以前也有过类似的教程，本文为大家讲解的是使用Javascript合并，具体示例及效果图如下，感兴趣的朋友可以参考下2013-08-08
这篇文章主要为大家详细介绍了OpenLayer3自定义测量控件MeasureTool，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
这篇文章主要介绍了Javascript对象Clone用法,实例分析了javascript对象克隆的相关技巧,需要的朋友可以参考下2015-06-06
这篇文章主要为大家介绍了JavaScript Fetch API请求和响应拦截详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章介绍了echarts安装与配置的方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
这篇文章主要介绍了ES6 新增的创建数组的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要介绍了JavaScript更改原始对象valueOf的方法,涉及javascript使用自定义valueOf函数替换掉原始object中valueOf的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
这篇文章主要为大家详细介绍了js前端导出Excel的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
javascript 中动画制作方法 animate()属性
这篇文章主要介绍了javascript 中动画制作方法 animate()属性，animate是所有dom元素都有的方法，可以用来最做过度动画，关键帧动画，下面文章的相关介绍需要的小伙伴可以参考一下2022-04-04
微信小程序事件对象中e.target和e.currentTarget的区别详解
这篇文章主要介绍了微信小程序事件对象中e.target和e.currentTarget的区别详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
最新评论