큐를 사용하여 jquery 애니메이션 알고리즘 시뮬레이션 example_jquery

이 문서의 예에서는 대기열을 사용하여 jquery를 시뮬레이션하는 애니메이션 알고리즘을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

Aaron은 최근 알고리즘 연구에 푹 빠졌습니다. 아마도 많은 뇌 세포 비용이 소요될 것입니다. 저는 노력을 아끼기 위해 기성품을 선택하는 것을 좋아합니다. 그가 작성한 소스 코드를 발견하고 실행하는 것이 꽤 재미있었기 때문에 이를 분석하여 첫째로 내부의 영양분을 흡수하고 둘째로 소스 코드 학습 기술을 심화시키기 위해 사용했습니다. 이 소스코드는 정말 js의 내부강도를 높이는 비결이라고 합니다. 믿기지 않으시면 저와 함께 맛보러 오세요.

코드 복사 코드는 다음과 같습니다.

//즉시 함수를 실행하면 할 말이 없습니다. 아래 데모를 시청하세요
/**
(함수($){
//여기서의 $는 다음에 나오는 즉시 실행 함수의 반환값으로 제공됩니다
})(함수(){
//이 함수를 실행한 결과는 $
입니다. 쿼리 반환
}())

*/
(함수($) {
​ window.$ = $;
})(함수() {

//ID 문자열을 일치시키는 데 사용됩니다
//(?: 그룹화 없음을 나타냄), 일반 콘텐츠 참조
//하지만 개인적으로는 #
뒤에 문자가 하나 이상 있어야 하기 때문에 *를 기호로 바꾸는 것이 더 낫다고 생각합니다. var rquickExpr = /^(?:#([w-]*))$/;
//얼핏 보면 제이쿼리의 중증 환자인 것 같습니다
함수 aQuery(선택기) {
           새 aQuery.fn.init(선택기) 반환;
}

/**
* 애니메이션
* @return {[유형]} [설명]
​​*/
var animation = function() {

var self = {};
        var Queue = [] //애니메이션 큐
        var 실행 = false //애니메이션 잠금
        var first = true; //추가 인터페이스를 통해 트리거됨

var getStyle = function(obj, attr) {
                 return obj.currentStyle ? obj.currentStyle[attr] : getCompulatedStyle(obj, false)[attr];
}
//모두 특정 애니메이션 효과이므로 이해하는데 어려움은 없습니다
        var makeAnim = function(element, options, func) {
            var width = options.width
// 특정 실행 알고리즘을 패키징했습니다
                           //css3
                         //setTimeout
                element.style.webkitTransitionDuration = '2000ms';
                  element.style.webkitTransform = 'translate3d(' 너비 'px,0,0)';

//모니터링 애니메이션 완료
               element.addEventListener('webkitTransitionEnd', function() {
                  func()
            });
}

var _fire = function() {
//추가된 애니메이션이 실행됩니다
                if (!fireing) {
            var OnceRun = Queue.shift();
                     if (onceRun) {
//반복 트리거 방지
                    실행 = true;
                           //다음
                     OnceRun(function() {
불 = 거짓;
//여기서 직렬 호출의 효과가 매우 교묘하게 생성됩니다
                       _fire();
                     });
                    } else {
                    실행 = true;
                }
            }
}

자신을 반환 = {
//큐 추가
               추가: 기능(요소, 옵션) {
//전체 알고리즘의 핵심은 다음과 같습니다
//배열에 함수를 추가하는 것과 같습니다
//[함수(func){},...]
                              // _fire의 OnceRun 메소드이고 이때 func가 전달되었습니다.
                             // Aaron은 사전 컴파일 등의 프로그래밍에서 이 기술을 사용하는 것을 좋아합니다.
Queue.push(함수(func) {
                        makeAnim(요소, 옵션, func);
                });

//큐가 있으면 즉시 애니메이션을 실행합니다
If (첫 번째 && Queue.length) {
//이 스위치는 나중에 추가되는 요소의 대기열을 제어하는 ​​데 아주 좋은 역할을 합니다
                      1번 = 거짓;
//이것은 _fire();
를 직접 실행하는 것과 같습니다. // Aaron은 A를 설치하고 의도적으로 self.fire를 추가하는 것을 좋아합니다. 어쩌면 그는 원시인 것일 수도 있습니다
                       self.fire();
                }
            },
//트리거
화재: function() {
                   _fire();
            }
}
}();

aQuery.fn = aQuery.prototype = {
         실행: 기능(옵션) {
animation.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 하는 게 낫지 않을까요?
//초기화 변수가 하나 더 추가된 것은 단지 쿼리를 줄이기 위한 것인데, 최적화 아이디어는 어디에나 있습니다.
init.prototype = aQuery.fn;
쿼리 반환;
}());

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

//전화
oDiv.onclick = function() {

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

html을 첨부하시면 직접 수정하실 수 있습니다. 탐색하려면 크롬을 사용하는 것을 잊지 마세요.

코드 복사 코드는 다음과 같습니다.

클릭

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.