JavaScript 프로토 타이핑 자습서 [폐쇄

StackOverflow https://stackoverflow.com/questions/1351527

문제

나는 많은 기능을 가진 JS 스크립트를 가지고 있습니다.

function id(i) {
    if(document.getElementById)
        return document.getElementById(i);
    return;
}

문서를 입력 할 때 많은 바이트를 저장합니다. 내 문제는 요소에서 클래스 및 기타 속성을 자주 추가하고 제거하는 것입니다. 나는 이것을 할 수 있기를 원한다 :

id('main').addClass("someClass");

이것을 설명 할 수있는 좋은 JavaScript 프로토 타이핑 자습서를 아는 사람이 있습니까? 감사.

도움이 되었습니까?

해결책

당신이 찾고있는 기술은 메소드 체인입니다. 기본적으로 "ID"함수는 "addClass"메소드가있는 객체 인스턴스를 반환해야합니다. 그리고 그 방법은 "이것을 반환"할 것입니다.

다음은이 개념을 설명하는 자습서입니다.
http://javaScriptant.com/articles/32/chaining-your-javaScript-methods

나는 또한이 책을 강력히 추천 할 것입니다.
http://jsdesignpatterns.com/

다른 팁

jquery와 같은 것을 사용하는 것을 고려해 보셨습니까? 문제가 발생하면 단순히 다음과 같습니다.

$("#main").addClass("someClass");

그리고 당신은 끝났습니다. 목표가 이것을 직접 구현하는 것이라면 (그렇다면 왜?) 요소에 3 개의 클래스가 있으면 실제 속성은 다음과 같습니다.

"one two three"

물론 다른 측면은 확장 방법을 작성하는 것입니다.

모든 브라우저에서이를 달성 할 수는 없습니다. 특히 IE6 또는 7의 요소에서 사용 가능한 방법을 확장 할 수는 없습니다.

솔직히 말해서 개발에 jQuery를 포함 시키면 시간을 절약 할 수 있습니다.

Cletus가 말한 것처럼 가능하다면 프레임 워크를 사용하는 것이 가장 좋습니다.

그러나 Anthonywjones는 옳지 않습니다. 일반 요소 객체에서 사용 가능한 메소드를 확장 할 수는 없지만 ~할 수 있다 여전히 개별 요소에 추가하십시오.

ID 기능은 AddClass 메소드로 반환 된 요소를 확장 할 수 있습니다.

function get(id){
    el = document.getElementById(id);
    el.addClass = function(cls){
        // your addClass code here
        // (remember IE uses className, others use class)
    };
    return el;
}

이 기능을 지원하는 브라우저의 요소 객체 (페이지의 모든 요소에 자동으로 추가)에 추가 한 다음 IE의 ID 기능에 메소드를 추가 할 수도 있습니다. 메모리를 저장하고 응용 프로그램 속도를 높일 수 있습니다. 특히 많은 요소 방법을 추가하기 시작할 때 조금.

이 동작은 Mootools 가이 문제를 해결하는 방법입니다. 가능한 경우 프레임 워크를 사용하는 것이 좋습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top