jQuery 함수 성능

Question

jquery로 큰 웹 스크립트를 작성하고있었습니다. 다양한 작업을 수행하며 그 중 하나가 DOM 요소와 상호 작용합니다. 간단한 자바 스크립트 함수를 사용했습니다.

function mymainclass() { 

// declared variables here 
this.var1 = new String 
// Some functions 
this.fn1 = function() { ... } 

} 

그런 다음 JavaScript에서 프로토 타입 함수를 사용하여 다른 함수를 추가했습니다.

mymainclass.prototype.afn1 = function() { 
... 
} 

나는이 방법을 사용하여 좋은 진전을 내가 "학습 JQuery와"책에 부록 C를 읽기 전에 약 300 라인을 작성 완료. Javascript 클로저에 관한 것이었고 jQuery fn 함수를 사용하는 것이 좋습니다. 따라서 프로토 타입으로 함수를 추가하는 대신 다음을 사용합니다.

jQuery.fn.afn1 = function() { 
.... 
return this; 
} 

전체 코드를 처음부터 다시 작성했습니다. 새로운 사용으로 인해 행복했습니다.

$('..').afn1('..','..',...); 

코딩에서 훨씬 더 뛰어납니다. 그러나 새로운 코드에서 일을 시도 할 때 이전 코드보다 훨씬 느리다는 것을 알았습니다. 이전 코드 속도는 jQuery.fn이 사용 된 488ms와 비교하여 총 50.56ms입니다.

는 내가 jQuery를 플러그인 방법에 대한 조언을 부탁드립니다. 필자가 작성한 스크립트에서 4000 또는 5000 줄을 읽은 후 코드가 매우 느리고 처음부터 코드를 다시 고려해야 할 것입니다. 내가 무엇을하여야한다? 같은 문제를 찾았습니까? 나는 또한 싶습니다

는 빨리 실행되도록 스크립트를 최적화 할 방법을 알고있다. FireBug를 사용하여 속도를 추적합니다.

Answer 1

일반적으로 당신은 당신이 DOM을 대상으로하는 jQuery 플러그인 제작을 사용할 것입니다.

자바 스크립트 프로토 타입에 익숙하고보다 복잡한 응용 프로그램을 작성하는 경우 원시 상속을 사용하여 코드를 작성한 다음 jQuery 플러그인을 추가하여 DOM 구현을 단순화하는 것이 좋습니다. 모든 인스턴스가 중복 필요없이 같은 프로토 타입 메소드를 상속 이후

프로토 타입, 당신의 자바 스크립트 코드를 확장하는 빠르고 메모리 효율적인 방법입니다.

$('#elem').myClass(); 

나 :

myClass = function(elem) { 
    this.elem = elem; 
} 

myClass.prototype = { 
    myMethod: function() { 
     // do stuff 
     this.elem.className = 'foo'; 
    } 
} 

$.fn.myClass = function() { 
    return this.each(function() { 
     var instance = new myClass(this); 
     instance.myMethod(); 
    } 
}; 

이제이 클래스 나는 두 가지 방법을 사용할 수 있습니다 필요한 경우

나는 네이티브 환경에서 응용 프로그램을 작성하고 다음 플러그인을 추가하는 경향이

var id = document.getElementById('elem'); 
var instance = new myClass(id); 
instance.myMethod();