ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript 画像回転機能の継承_JavaScript スキル

JavaScript 画像回転機能の継承_JavaScript スキル

WBOY
WBOYオリジナル
2016-05-16 18:27:061155ブラウズ

まず、過去数日間のアニメーション用に JS がどのように構築されたかを見てみましょう:

コードをコピーします コードは次のとおりです。 :

var photo=function(){
var Index=0,a,b,c,d;
return {
show:function(){},
auto:function(){ }
}
}
var aa=photo();
//基本的に、return は一部のメソッドを返すために使用されます。
///1: 初期化できない場合はautoを実行します。
///2: 初期化中、これを aa に指定することはできません。
//上記の 2 つの質問は非常に不便です。

1: ここには書きたくない:

var aa=photo("id");
aa.auto()//もう 1 つの文ですが、非常に見苦しいです。

理想的な状況は、
var aa=photo("id") のときに自動的に再生するかどうかをプログラムに指示することです。
2: 同じページに 2 つのアニメーションがある場合。
例:
コードをコピーします コードは次のとおりです:

var aa=photo ("id1");
aa.auto()
var bb=photo("id2");

そしてすべてにユーザー コントロールがあり、アニメーションの A タグ、それぞれが独自のアニメーションを担当する方法。お互いに干渉しないでください。 (実際、これにはプライベート変数の問題が関係しており、これがそれを示しています);

ステートメント: インターネット上には上記の問題を解決する方法がたくさんあります。以下は私が思いついたことです。だから私はそれを皆さんと共有するためにここにいます、そして専門家はそれを笑うでしょう。
はい、バスの中でこの問題をまた解きました。 「JavaScript 言語のエッセンス」ページ 52 5.4 関数化
この関数コンストラクターのソース コードを見てみましょう:

//太字は強調を示します
//このメソッドは「JavaScript 言語」のエッセンスです5.4 機能化の 52 ページ。
varconstructor = function (spec,my){
var that、他のプライベートインスタンス変数;
my = my ||
my
that =新しいオブジェクト
その
return that に特権メソッドを追加します。

次のメソッドを見てください:



var photo = function(spec){
var _this={},index,a,c , d;
//ここでユーザー制御のタグを初期化できます
//たとえば、この外部
a.onmouseover=function(){
_this.go();//
}
_this.show=function(){};
_this.go=function(){};宣言したばかりのメソッドを直接呼び出すことができます
_this.auto()//
return _this;
}

var bb=photo({index:1;}) を直接呼び出すことができます;
var aa=photo({index:2});
//上記は bb aa の 2 つの異なるアニメーションを作成しますが、相互に影響しません。
// JavaScript 言語の本質を機能的に理解するのに問題がある場合。アドバイスをお願いします...



このアニメーションは最終的には完璧です。しかし、プライベート変数が多すぎます。デフォルト値を設定できる場合、ユーザーはオプションでそれを渡すことができます。
の方が良いので、次の関数を追加できます: (これは多くの人が使用します)





コードをコピー
コードは次のとおりです。 var Extend = function(destination, source) { for (source の var プロパティ) {
destination[property] = source[property] ;
}
戻り先;
}
// Extend が何に使用されるかは誰もが知っています。



最後に、今日書いた画像回転のソースコードを投稿します:
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。