javascript 图片轮换函数化继承_javascript技巧-js教程-PHP中文网

javascript 图片轮换函数化继承_javascript技巧

php中文网

发布： 2016-05-16 18:27:06

原创

1462人浏览过

先看下前几天的动画是如何构造JS的：

度加剪辑

度加剪辑（原度咔剪辑），百度旗下AI创作工具

380

查看详情

复制代码代码如下:

 
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 大家都知道 他是做什么用的了。 

最后贴出我今天写的这个图片轮换的源代码：