클라이언트 쪽에서 방해받지 않는 JavaScript 해킹에 대한 피드백

Question

Backbone.js가 아키텍처의 주요 부분 인 SPA 애플리케이션을 개발 중입니다.

우리는 또한 버튼 그룹 [1]이있는 트위터 부트 스트랩 맛이 있습니다. 그래서 html에는 체크 박스 나 라디오처럼 작동하는 버튼이 있습니다.

투명 I 코드의 다음 부분을 해킹 [2] Backbone.ModelBinder의 사용을 통해 이러한 버튼을 포함하는 백본 뷰 백본 모델에 바인딩하기 위해 :

# Twitter Bootstrap compatibility 
addButtonGroupModelBindingSupport = -> 
    $(@el).one 'mousedown keydown', '.btn-group[data-toggle="buttons-radio"] button', -> 
     $(@).closest('.btn-group').find('button').prop 'type', 'radio' 

installTwitterBootstrapModelBindingSupport = -> 
    backboneView = Backbone.View 
    ButtonGroupModelBinderSupportView = Backbone.View.extend 
     constructor: -> 
      backboneView.apply @, arguments 
      addButtonGroupModelBindingSupport.call @ 
      return 

    Backbone.View = ButtonGroupModelBinderSupportView 

installTwitterBootstrapModelBindingSupport() 

이 코드 모듈 내부에 이 모델은 ModelBinder를 내 보내서 한 번만 실행됩니다. Backbone.View에서 필요한 동작을 혼합하여 본질적인 JavaScript가 방해받지 않는 방식으로 주입됩니다.

그래서 나는 버튼에 더 이상 버튼이 아니라고 말하고 있습니다. 지금까지 내가 크롬 파이어 폭스와 IE에게 말할 수있는 것은 괜찮습니다.

Fooled, ModelBinder는 해당 버튼을 확인란이나 라디오로 적절하게 처리하므로 모든 것이 필요에 따라 작동합니다.

이 해킹이 너무 까다로운 경우 더 많은 숙련 된 프런트 엔드 개발자의 의견을 듣는 것이 좋습니다.

[1]

http://twitter.github.com/bootstrap/components.html#buttonGroups [2] https://github.com/theironcook/Backbone.ModelBinder

Answer 1

나는 당신의 대상 브라우저/플랫폼 모두 당신을 위해 일하는 경우가 그런 식으로 잘못 말할 수는 없지만, 그것은 확실히 이례적인 일이다. 나는이 방법으로 몇 가지 단점을 참조하십시오

• 는 표준 HTML 아니다. 버튼에 유효한 types은 submit, reset 및 button입니다. See specification here
• 일반적이지 않으므로 팀의 다른 개발자가 혼자 작업하지 않는다고 가정 할 때 오해 할 수 있습니다.
• 이 특별한 경우에도 작동하지만 다른 플러그인/구성 요소를 사용해야 할 때 다음과 같이 작동하면 작동하지 않는 해킹을 발견 할 수 있습니다.
• 그것은 귀하의 경우 문제가되지 않을 수도 있지만 $('input').something() 같은 선택기 해킹 버튼

AFAIK, 당신은 입력 요소가 필요하지만 원하는 이런 종류의 시나리오를 (처리하는 일반적인 방법을 찾을 수 없습니다 보기에 더 예쁜 UI 요소가 표시되도록하려면 두 요소가 페이지에서과 동기화 됨 - 꽤 스타일이 지정된 div와 실제 입력 (보이지 않음). 다음은 그 몇 가지 예입니다 : Select2, Fancy Checkboxes and Radio Buttons. 좀 더 일반적인 것이기 때문에 js를 조금 더 작성해야하는 경우에도 더 나은 방법이 될 수 있습니다.