キューを使用して jquery アニメーション アルゴリズムをシミュレートする example_jquery

この記事の例では、キューを使用して jquery をシミュレートするアニメーション アルゴリズムについて説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

アーロンは最近、アルゴリズムの研究に夢中になっています。これにはおそらく多くの脳細胞が費やされるでしょう。私は、労力を節約するために既製のものを選ぶのが好きです。彼が書いたソース コードを見つけて、それを実行するのがとても楽しかったので、それを分析するために使用しました。第一に、内部の栄養素を吸収し、第二に、ソース コード学習のスキルを深めるためにです。実はこのソースコードにjsの内部強度を向上させる秘密があると言われています。信じられない方は、ぜひ一緒に試してみてください。

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

//関数をすぐに実行します。何も言うことはありません。以下のデモをご覧ください
/**
(関数($){
//ここでの $ は、その後に続く即時実行関数の戻り値によって提供されます
})(関数(){
//この関数の実行結果は $
です aQuery
を返します }())

*/
(関数($) {
window.$ = $;
})(関数() {

//ID 文字列の照合に使用されます
//(?: ここではグループ化がないことを示します)、通常のコンテンツを参照してください
//しかし個人的には、#
の後に少なくとも 1 文字が必要なので、* を記号に変更した方が良いと思います。 var rquickExpr = /^(?:#([w-]*))$/;
//一見すると重度の jquery 患者です
関数 aQuery(セレクター) {
return new aQuery.fn.init(selector);
}

/**
*アニメーション
* @return {[タイプ]} [説明]
​​*/
var アニメーション = function() {

var self = {};
var Queue = [] //アニメーションキュー
; var firing = false //アニメーション ロック
var first = true; // インターフェースの追加によってトリガーされます

var getStyle = function(obj, attr) {
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
}
//これらはすべて特定のアニメーション効果であり、理解するのが難しいものは何もありません
var makeAnim = function(element, options, func) {
var width = options.width
// 特定の実行アルゴリズムをパッケージ化しました
//css3
//setTimeout
element.style.webkitTransitionDuration = '2000ms';
element.style.webkitTransform = 'translate3d(' width 'px,0,0)';

//モニタリングアニメーションが完了しました
element.addEventListener('webkitTransitionEnd', function() {
func()
});
}

var _fire = function() {
//追加されたアニメーションがトリガーされています
if (!fireing) {
var OnceRun = Queue.shift();
if (onceRun) {
//繰り返しトリガーを防止します
起動 = true;
//次
OnceRun(function() {
fire = false;
//ここではシリアル呼び出しの効果が非常に巧妙に生み出されています
_fire();
});
} else {
起動 = true;
}
}
}

自分自身を返す = {
//キューを追加
add: function(要素, オプション) {
//ここにアルゴリズム全体の鍵があります
//配列に関数を追加するのと同等
//[function(func){},...]
// これは _fire の OnceRun メソッドであり、そのときに func が渡されました。
// アーロンは、プリコンパイルなどのプログラミングでこのテクニックを使用するのが好きです。
Queue.push(function(func) {
makeAnim(element, options, func);
});

//キューがある場合は、すぐにアニメーションをトリガーします
If (最初の && Queue.length) {
//このスイッチは、後で追加される要素のキューイングを制御する上で非常に良い役割を果たします
1 番目 = false;
//これは _fire();
を直接実行するのと同じです // アーロンは A をインストールするのが好きで、意図的に self.fire を追加します。おそらく彼は先見の明があるのでしょう
self.fire();
}
},
//トリガー
火災: function() {
_fire();
}
}
}();

aQuery.fn = aQuery.prototype = {
実行: function(options) {
anime.add(this.element, options);
これを返します;
}
}

var init = aQuery.fn.init = function(selector) {
var match = rquickExpr.exec(selector);
var 要素 = document.getElementById(match[1])
This.element = 要素;
これを返します;
}
//このコード行を過小評価するところでした
//jqueryの使い方が上手になりました
//直接 aQuery.fn.init = aQuery.fn にした方が良いのではないでしょうか?
//もう 1 つの init 変数はクエリを減らすためのもので、最適化の考え方が随所にあります。
init.prototype = aQuery.fn;
aQuery を返します;
}());

//ドム
var oDiv = document.getElementById('div1');

//
を呼び出します oDiv.onclick = function() {

$('#div1').run({
'幅': '500'
}).run({
'幅': '300'
}).run({
'幅': '1000'
});
};

HTML を添付すると、自分で調整できます。ブラウズには必ずChromeを使用してください。

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

この記事が皆さんの jQuery プログラミングに役立つことを願っています。