javascript 圖片輪換 函數化繼承

來源:互聯網
上載者:User

先看下前幾天的動畫是如何構造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 大家都知道 他是做什麼用的了。

最後貼出我今天寫的這個 圖片輪換的原始碼: xmlns="http://www.w3.org/1999/xhtml">


1
2
3
4
5
1
2
3
4

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.