2011-12-05 3 views
37

눈에 거슬리는 눈에 거슬리는 자바 스크립트의 차이점은 무엇입니까? 간결함이 인정됩니다. 짧은 예제도 환영합니다.눈에 띄지 않는 자바 스크립트와 눈에 거슬리지 않는 자바 스크립트의 차이

+0

[HTML에서 onClick()을 사용하는 이유는 무엇입니까?] (http://stackoverflow.com/questions/5871640/why-is-using-onclick-in-html-a-bad-practice) –

+0

하나 ("obtrusive")는 요소에 동작을 적용하는 예전 스타일 (DOM 0)입니다. 다른 ("눈에 잘 띄지 않는") jQuery 명성의 존 Resig에 의해 추진 스타일입니다. 모두 받아 들일 수 있습니다 –

답변

32

우려 사항을 분리합니다. HTML과 CSS가 JS 코드에 묶여 있지 않습니다. JS 코드가 일부 HTML 요소에 인라인되지 않습니다. 귀하의 코드에는 모든 것을위한 하나의 큰 기능 (또는 비 기능)이 없습니다. 짧고 간결한 기능이 있습니다.

모듈러. 문제를 올바르게 구분할 때 이런 일이 발생합니다. 예를 들어, 멋진 캔버스 애니메이션은 상자를 그리기 위해 벡터가 작동하는 방식을 알 필요가 없습니다.

JavaScript가 설치되어 있지 않거나 가장 최근의 브라우저를 실행하지 않는 사람을 죽이지 마십시오. 경험을 정상적으로 저하시킬 수있는 방법을 사용하십시오.

작게 만 수행해야하는 경우 가비지을 만들지 마십시오. 사람들은 DOM 요소를 다시 선택하고 의미 론적 HTML을 버리고 거기에 번호가 매겨진 ID를 던지거나 문서 모델이나 다른 기술을 이해하지 못해 발생하는 이상한 일들을 끊임없이 복잡하게 만듭니다. 쓰레기 속도까지 모든 것을 느리게하고 오버 헤드의 산을 가져 오는 "마술"추상화 레이어.

+0

"쓰레기통을 만들지 마십시오."- 작은 예를 들어 주시겠습니까? – Abdul

+1

각 텍스트 필드에'onkeypress = "someFilter();"'같은 것을 추가하고, jQuery를 사용하는 대신 HTML에 혼합하고, 여러 선택기를 사용하여 한꺼번에 처리하는 것입니까? – Abdul

23

마크 업 없음 자바 스크립트 눈에 거슬리지입니다 : 돌출

<div id="informationHeader">Information</div> 

: HTML 및 자바 스크립트 (외부 자바 스크립트 파일에 자바 스크립트를 정의)

  • 우아한 저하

    <div onclick="alert('obstrusive')">Information</div> 
    
  • +7

    이것은 프로그래머의 관점에서 온 것입니다 : 당신은 모든 것을 별도의 JS 스크립트 파일에 넣을 수 있고 여전히 사용자에게 방해가되는 사이트를 가질 수 있습니다 ... – nnnnnn

    +0

    @nnnnnn StackOverflow는 프로그래머를위한 웹 사이트입니다. – crmpicco

    +0

    @crmpicco - 예, 알고 있습니다. 내 요점은 "눈에 거슬리지 자바 스크립트"의 개념은 프로그래머에 미치는 영향보다 사용자에 미치는 영향에 대한 자세한 것입니다. 사용자는 그들은 단지 사이트가 브라우저와 함께 작동하는지 걱정, JS는 HTML에 혼합이 있는지 여부를 상관하지 않습니다. – nnnnnn

    8
    1. 분리 (중요 페이지의 부분은 여전히 ​​JavaScript가 비활성화 된 상태로 작동합니다.)

    장황한 설명을 보려면 해당 주제의 Wikipedia page을 확인하십시오.

    +0

    인라인 DOM 0 핸들러를 사용하는 동안 페이지가 정상적으로 성능이 저하 될 수 있습니다. –

    +0

    @MattMcDonald : 그들이 할 수 없다는 말은 아닙니다. 하지만 HTML과 JavaScript의 분리 원칙을 깨면 – Matt

    +0

    대답이 더 명확 해집니다. –

    2

    마이크의 대답을 확장하려면 다음과 같이하십시오. UJS 비헤이비어 사용은 "나중에"추가됩니다.

    <div id="info">Information</div> 
    
    ... etc ... 
    
    // In an included JS file etc, jQueryish. 
    $(function() { 
        $("#info").click(function() { alert("unobtrusive!"); } 
    }); 
    

    UJS는 완만 한 저하 (내가 좋아하는 종류)를 의미 할 수있다, 예를 들어, 다른 방법은 아마 해당 링크를 제공함으로써, #info 클릭 기능을 얻을 수 있습니다. 즉, 자바 스크립트가 없거나 스크린 리더 등을 사용하면 어떻게됩니까?

    +1

    JavaScript에 대해 jQuery가 중요하다고 생각합니다. 정적 HTML에서 이벤트를 볼 수 있습니다. 왜냐하면 동적으로 생성 된 DOM에 똑같은 이벤트가 있기 때문입니다. – austincheney

    +0

    @austincheney 그건 jQuery와 특별히 관련이 없습니다. UJS는 프레임 워크 중립적입니다. –

    0

    눈에 띄지 않고 눈에 띄지 않고, 지나치게 단정하거나, 과묵하지 않습니다.

    obtrusive - "다른 사람에게 자신이나 의견을 부과하는 것처럼 obtrude 처분을 나타내거나 게재합니다."

    억지로시키다 -"특히 영장 또는 초대없이 추력 (일) 앞으로 또는 사람에 따라, "을

    는 그래서, 내 의견으로는, 자신의 의견을 부과 말하고 눈에 거슬리지 자바 스크립트의 가장 중요한 부분은

    사용자의 관점에서 그것은 방해가되지 않습니다. 즉, 브라우저 설정에 의해 자바 스크립트가 해제 되어도 사이트가 계속 작동합니다. 자바 스크립트를 사용하거나 사용하지 않으면 사이트에 계속 액세스 할 수 있습니다. 화면 판독기, 키보드 및 마우스, 기타 접근성 도구가 포함될 수 있습니다. 사이트가 이러한 사용자에게 "환상적"이지는 않지만 여전히 작동 할 것입니다.

    "점진적 향상"이란 용어로 생각하면 사이트의 핵심 기능은 액세스하는 방법에 관계없이 모든 사람이 사용할 수 있습니다. 그런 다음 JavaScript 및 CSS (대부분의 사용자)를 사용할 수있는 사용자의 경우 대화 형 요소를 사용하여 사용자 인터페이스를 향상시킬 수 있습니다.

    다른 중요한 "눈에 거슬리지 않는"요소는 "관심사의 분리"입니다. 프로그래머가 사용자가 신경 쓰지 만 사용자의 경험에서 벗어난 JavaScript 측면을 막을 수 있습니다. 프로그래머의 관점에서 인라인 스크립트를 피하면 마크 업을 훨씬 더 예쁘고 쉽게 유지할 수 있습니다. 일반적으로 일련의 인라인 이벤트 처리기에 분산되어 있지 않은 스크립트를 디버그하는 것이 훨씬 쉽습니다.

    관련 문제