[javascript] Chosen과 Select2의 차이점은 무엇입니까?

선택된선택 2는 selectboxes을 확장하기위한 두 개의 인기 라이브러리입니다.

둘 다 적극적으로 관리되는 것 같습니다. Chosen은 더 오래되었으며 jQuery와 프로토 타입을 모두 지원합니다.

Select2는 jQuery 일 뿐이며, 문서에 따르면 Select2는 Chosen에서 영감을 받았지만 개선 사항 (있는 경우)이나 다른 이유는 자세히 설명하지 않습니다.

두 개의 라이브러리에는 거의 동일한 기능 세트가 있으며, 내가 찾은 유일한 비교는 다소 결정적인 jsperf 테스트 페이지입니다.

이 라이브러리 중 다른 라이브러리에 비해 어떤 장점이 있습니까?



답변

Select2 3.3.1 현재 README.md에 문서화되어 있습니다.

선택된 2가 지원하지 않는 것은 무엇입니까?

  • 큰 데이터 세트 작업 : Chosen에서는 전체 데이터 세트를 optionDOM에 태그 로로드해야하므로 작은 데이터 세트로 작업하는 것으로 제한됩니다. Select2는 함수를 사용하여 결과를 즉석에서 찾아 결과를 부분적으로로드 할 수 있습니다.
  • 결과 페이징 : Select2는 큰 데이터 세트에서 작동하고 페이징을 지원해야하는 한 번에 적은 양의 일치하는 결과 만로드합니다. 사용자가 현재로드 된 결과 세트의 맨 아래로 스크롤하면 결과의 ‘무한 스크롤’을 허용하는 Select2가 검색 기능을 호출합니다.
  • 결과에 대한 사용자 정의 마크 업 : 선택은 텍스트 결과 렌더링 만 지원 option합니다. 이는 태그가 지원하는 유일한 마크 업이기 때문입니다 . Select2는 결과를 나타내는 모든 종류의 마크 업을 생성하는 데 사용할 수있는 확장 점을 제공합니다.
  • 결과를 즉석에서 추가하는 기능 : Select2는 사용자가 입력 한 검색어로 결과를 추가 할 수있는 기능을 제공하므로 태그 지정에 사용할 수 있습니다.

답변

IMHO 선택은 “유지”되지만 “활성으로 유지”되지는 않습니다. 341 개의 이슈와 51 개의 풀 요청이 선택되었습니다. Select2에는 128 개의 이슈와 25 개의 풀 요청이 있습니다. 이것들의 패턴은 기본적으로

  • 어느 쪽이 당신에게 더 매력적인 지 골라주세요
  • 하나 또는 두 개의 앱에서 사용
  • 사용자 지정 문제 또는 제한 사항과 충돌
  • 문제 및 풀 요청을 통해 커뮤니티와 협력하려고 할 수 있습니다.
  • 결국이 과정에서 배운 것을 사용하여 자신을 구축하고 자신을 구축하십시오.

어느 것을 선택하든 유스 케이스가 정확히 스위트 스팟에 있으면 둘 중 하나가 작동합니다. 그렇지 않은 경우 결국 직접 작성하거나 크게 사용자 지정해야합니다. 어느 경우 에나, 어느 것을 선택하는 것이 특별히 중요하지는 않습니다. @Andy Ray 및 @paul과 함께 Select2가 더 나은 초기 선택이라고 생각합니다.


답변

또 다른 차이점 가치에 대한 언급은입니다 Chosen에서 개발 Sass하고 CoffeeScript반면 Select2알기 CSSJS. 필자가 개인적으로 선택할 수 Sass있으며 CoffeeScript디버깅을 어렵게 만드는 불필요한 복잡성 계층입니다.

두 가지를 모두 시도한 후에도 둘 다 사용하지 않기로 결정했습니다. Select2항목에 기능을 만들 려고 하면 <select>요소에 첨부 할 때 단순히 할 수 없으므로 매우 털이 많은 것으로 밝혀졌습니다. 뛰어 넘다.

새 요소를 양식의 DOM에 추가하는 selectize.js 를 사용하여 정했습니다<option>...</option> . 또한 사용 LESS하지만-나는 그것을 우회하고 CSS프로젝트에서 직접 컴파일 된 것을 조정합니다 .


답변

chosen.js 및 select2.js

  • 두 가지 모두에 대한 MIT 라이센스
  • 종속성 :
    • Select2 : jQuery
    • 선택된 : tbc
  • 데스크탑 브라우저 지원 :
    • 선택 2 : IE8 +
    • 선택 : IE8 +
  • 장치 지원 :
    • 선택 2 : 불분명
    • 선택 : iPhone, iPod Touch 및 Android 모바일 장치에서 비활성화
  • 무게 (최소화) :
    • 선택 2 : 57KB
    • 선택 : 27KB
  • 사용법 : Select2는 더 많은 “팬시”UI를 지원합니다 ( ‘템플릿’참조)
  • 두 코드 저장소는 모두 Github에서 사용할 수 있습니다
    • Select2 : 기여 : 매우 활동적
    • 선택 : 기여 : Select2보다 약 3 배 적은

select2.js 기여
chosen.js 기여

추신. 누락 된 포인트에 대해 자세히 알면이 답변을 업데이트하려고합니다.


답변

먼저, Chosen과 Select2가 두 개의 훌륭한 플러그인이며 Chosen에 대한 제 개인적인 경험입니다. 그들이 선택한 모든 것은 선택에 관한 것입니다.

문제 으로 Pēteris Caune에 의해 지적은 select2 세이며, 아직 공식적인 수정이 없습니다. API에 대한 좋은 문서는 없습니다. 그것은 여러 번 지적되었지만 (시계 문제 671) 아직 아무것도 없습니다. 선택 하기 전에 div를 숨기면 선택한이 기본적으로 작동하지 않는 이 문제 를 해결하는 데 거의 2 년이 걸렸습니다 overflow:hidden(그리고 witdh:X%문제를 찾지 않으면 기본적으로 알 수없는 옵션 을 사용해야 함 ).

문제 92에서 DelvarWorld가 말한 것처럼 주요 문제는 수정 속도라고 말합니다.

내 풀 요청 이이 문제를 해결하지만 선택한 다른 하나 및 많은 것들과 마찬가지로 무시됩니다. 이 프로젝트에는 너무 작은 코드 기반을 가진 기고자가 너무 많습니다.

먼저 MIT 라이센스로 Chosen을 선택했지만 모든 문제 (드롭 다운 컷, API 찾기, 오버플로 숨겨진 시간 찾기)가 있었기 때문에 더 나은 문서가 있고 드롭 다운 컷 버그가 없으므로 select2로 전환하기로 결정했습니다. 더 빠른 수정.


답변

, 선택 2에서 작동하지만 선택된에서 작업을하지 않는 기능 중 하나는 select이 내부 요소 overflow: hiddenoverflow: auto.

여기에 이미지 설명을 입력하십시오

선택된 관련 문제 : https://github.com/harvesthq/chosen/issues/86


답변

이 두 가지 플러그인을 사용하여 발견 한 차이점은 다음과 같습니다.

  • select2를 사용하면 옵션의 모든 위치에서 검색 할 수 있습니다. 예를 들어 ABCDEFG라는 옵션이 있고 CDE를 입력하면 검색 결과에 해당 옵션이 표시되지만 선택하면 AB ..를 입력해야 결과를 얻을 수 있습니다.

  • 더 큰 데이터 세트의 경우 선택은 특히 IE에서 select2보다 빠르다는 것을 알았습니다.