indentscore.js로 시작합니다

키 테이크 아웃

<.> alterscore.js는 다양한 사용 사례에 대한 기능적 유틸리티를 제공하고 코드를 쉽게 읽고 쓸 수 있으며 기본 JavaScript에서 항상 사용할 수있는 기능을 제공하는 JavaScript 라이브러리입니다.

라이브러리에는 읽기 가능한 루프를 작성하기위한 _.each (), 직관적이고 간단한 템플릿을위한 _.template (), 부울 함수를 사용하여 배열을 필터링하기위한 _.filter ()와 같은 일반적인 방법이 포함되어 있습니다. <.> alterscore.js는 가벼우 며 USA Today, LinkedIn 및 Khan Academy를 ​​포함한 많은 유명 프로젝트에서 사용됩니다. alterscore.js, jQuery 및 Spotify Web API를 사용한 데모 애플리케이션은 라이브러리가 API에서 데이터를 가져오고 표시하는 데 어떻게 사용되는지 보여주고 사용자가 결과를 필터링 할 수있는 방법을 보여줍니다.

이 기사는 Agbonghama Collins와 Ryan Chenkie가 검토 한 동료입니다. Sitepoint 콘텐츠를 최선을 다해 Sitepoint의 동료 리뷰어 덕분에! <.> alterscore.js는 Jeremy Ashkenas가 작성한 JavaScript 라이브러리로, 웹 프로젝트에 직면 할 때 개발자로서 우리가 볼 수있는 다양한 사용 사례에 대한 기능적 유틸리티를 제공합니다.

. 는 읽기 쉬운 코드를 만듭니다 <li> <code>는 쓸기 쉬운 코드를 만듭니다 1 : 1 기본 방법이없는 기능을 제공합니다.
• 자체적으로 템플릿 엔진으로 사용할 수도 있습니다.
밑줄은 가벼운 라이브러리 (5.7kb, 미니 화 및 Gzipped)이며 다음과 같은 다양한 큰 이름 프로젝트에서 사용됩니다.
USA TODAY 링크드 인 칸 아카데미
• 이제 더 구체적으로 설명하고 주요 기능으로 다이빙을 시작합시다.
좋은 부분 이 튜토리얼에서는 밑줄의 가장 일반적인 방법 중 세 가지를 강조하겠습니다.

_ _. template () _. filter ()

나는 개별적으로 사용되는 방법을 설명하고 함께 묶어 튜토리얼 끝에서 찾을 수있는 데모 응용 프로그램을 구축 할 것입니다. 이 데모의 코드는 Github에서 사용할 수 있습니다. 예제를 따라 가려면 좋아하는 CDN에서 도서관 사본을 가져와야합니다. 그리고 길을 따라 도움이 필요하거나 더 많은 것을 찾기가 궁금하다면 밑줄의 문서가 광범위하다는 것을 잊지 마십시오. 또한 크고 활발한 커뮤니티가 있습니다. 즉, 도움이 쉽게 찾을 수 있습니다.

_ 코드의 어느 시점 에서이 스 니펫과 비슷한 것이없는 단일 프로젝트는 없습니다.

밑줄은 더 읽을 수있는 구문을 사용하여 동등한 코드를 작성할 수 있습니다.

_.isEmpty({});
// true

깔끔한? _.Each ()는 두 개의 매개 변수를 가져옵니다

반복 할 배열 (또는 객체) 콜백 함수.

배열의 각 요소에 대해 는 콜백 함수를 호출합니다 (문서에서

iteratee ). 콜백 내부에서는 세 가지 매개 변수에 액세스 할 수 있습니다.
• 현재 반복 지수 (아티스트)의 배열 값. 예를 들어, 위의 스 니펫의 경우 첫 번째 반복을 위해 "Pharrel Williams"를 얻을 수 있습니다. 우리의 경우 현재 반복 (인덱스)의 수는 0에서 2까지 다양합니다. 우리가 반복하는 배열 (아티스트)
보시다시피 코드가 더 읽기 쉬우 며 Artists [i]가 필요하지 않고 배열의 개별 요소에 액세스 할 수 있습니다. Codepen에서 SitePoint (@SitePoint)에 의해 _.Each _.Each를 참조하십시오 > 다음으로 템플릿 엔진의 동작 방식을 볼 수 있습니다 _. template () : 직관적이고 간단한 단일 페이지 응용 프로그램이 증가한 이래로 신뢰할 수있는 프론트 엔드 템플릿 엔진을 갖는 것이 작업 스택의 근본적인 요구가되었습니다. 밑줄은 PHP 또는 Ruby on Rails와 같은 언어에 익숙한 사람들을 위해 템플릿 엔진을 제공합니다. 이전 스 니펫에서 계속해서 _.template () 작동 방식을 보여 드리겠습니다. 다음과 같이 코드에 몇 줄을 추가하여 다음을 수행합니다.
• 여기서 우리는 문자열 인수와 함께 _.template () 함수를 호출하고 있으며, 여기에는 구분 제고기 내부의 일부 데이터가 포함됩니다 (). 이런 식으로 호출되면 _.template ()가 계속 사용할 수있는 함수를 반환합니다. 우리는 ArtistTemplate ()을 사용하여 새로운 기능을 호출하여 인수로 문자 그대로 전달할 수 있습니다. 이렇게하면 원래 전달한 문자열을 _.template ()로 반환하여 템플릿의 자유 변수에 해당하는 객체 속성을 대체합니다. 우리의 경우 는 객체의 아티스트 속성의 값으로 대체됩니다. 밑줄의 템플릿 엔진은 단일 값을 대체 할뿐만 아니라 템플릿 자체 내부의 스크립트 실행을 허용합니다. 단일 수정으로 스 니펫을 더욱 강력하게 만들 수 있습니다.

우리는 _.each ()를 템플릿을 나타내는 문자열에 통합하여 템플릿이 호출되는 방식을 변경하게합니다. 우리는 이제 _.template () 함수 내부를 반복하고 있기 때문에 전체 아티스트 배열을 ArtistTemplate ()로 전달할 수 있습니다 (이전에는 개별 아티스트를 통과했습니다). 이 코드의 출력은 이전 예에서와 동일합니다.

_.template ()가 JavaScript 코드를 평가하려면 대신 사이의 코드를 둘러싸 야합니다. _.template에 의해 생성 된 템플릿을 호출하면 함수를 호출하는 것처럼 스 니펫을 한 단계 더 발전시키고 태그를 사용하여 하나의 템플릿을 호출 할 수 있습니다. 이렇게하면 재사용 가능한 템플릿을 만들 수 있습니다. 아티스트 목록에 대해 다른 래퍼 템플릿을 가질 수 있고 포함 된 각 항목에 대한 템플릿을 호출 할 수 있기 때문입니다. Codepen에서 sitepoint (@sitepoint)의 펜 _.template ()을 참조하십시오 마지막으로 _.filter () 함수 를 살펴 보겠습니다 _. Filter () : 부울 함수 만 있으면됩니다 _. filter ()는 어레이와 콜백 함수를 인수로 수신합니다. 그런 다음 배열의 각 요소에 대한 함수를 호출하고 기능이 진실한 것으로 평가 된 요소를 포함하는 새 배열을 반환합니다.

. 우리의 콜백 함수는 _.Each () 사례에서와 같이 세 가지 인수를 받게됩니다. 이를 명확히하기 위해 스 니펫을 몇 가지 수정합시다.

당신이 추측 한 바와 같이, 우리의 템플릿에서 우리는 배열 인수로 [ 'acdc']를 받게됩니다. 다음은 우리가 지금까지 얻은 것의 데모입니다.

Codepen에서 sitepoint (@sitepoint)의 펜 _.filter ()를 참조하십시오 충분히 말했다. 조금 더 의미가있는 무언가를 위해 일을하게합시다.

우리의 데모 애플리케이션

잊지 마십시오.이 데모의 코드는 Github에서 사용할 수 있습니다.

우리는 API를 소비하는 작은 응용 프로그램을 작성하고 얻은 정보를 표시하며 사용자가 표시되는 것을 필터링 할 수 있습니다. 이를 위해 우리는 다음을 사용할 것입니다

<..> aUNDSCORE.js jQuery Spotify Web Api

보다 구체적으로, 응용 프로그램은 Spotify의 일부 아티스트 정보를 가져오고 밑줄 _.template, _.each 및 _.filter를 사용하여 페이지에 표시하고 사용자가 장르별로 결과를 좁힐 수 있도록합니다.

이렇게하려면 코드를 세 가지 모듈로 나눕니다.

_isawesome.config : 응용 프로그램에서 사용할 정보를 보유합니다. _isawesome.template : 템플릿 컴파일을 처리합니다 _isawesome : 이것은 사용자 작업에 응답하고 UI 업데이트를 담당하는 주요 모듈입니다.

모두 모듈 패턴을 따릅니다 구성 모듈 구성 모듈에는 쿼리 할 API의 URL과 함께 사용할 템플릿의 ID와 Spotify에서 얻을 수있는 아티스트의 ID가 포함되어 있습니다. 이렇게하면 배열에 추가 요소를 추가하여 더 많은 아티스트를 추가 할 수 있습니다. 템플릿 모듈 이 모듈은 구성 모듈에서 getTemplates ()를 호출하여 템플릿을 컴파일하는 모듈입니다. 메인 모듈

이 모듈은 구성 모듈에서 얻은 URL로 ajax 요청을 보내고 템플릿 모듈에서 템플릿을 사용하여 컨텐츠를 렌더링합니다. 그 외에도이 모듈은 사용자가 클릭 한 필터를 기반으로 항목을 필터링해야합니다. 필터와 템플릿이 모두 HTML의 일부로 포함됩니다. 필터링을 구현하기 위해 HTML 5 데이터 속성 및 JQuery의 데이터 인터페이스에 의존합니다. 이것은 편의성의 문제이지만,이 작업을 기본적으로하고 싶다면 브라우저 지원이 매우 좋습니다.

이것은 필터링을 수행하는 데 사용할 버튼의 마크 업입니다.

이것은 필터 기능으로 전달할 객체의 예입니다.

우리는 태그 내부에 index.html의 일부로 템플릿에 대한 HTML을 갖게되며, 이는 일반적인 텍스트/JavaScript와 다른 것으로 유형을 설정하여 실행되는 것을 방지합니다. 일관성을 위해서 우리는 그것을 밑줄/템플릿으로 설정합니다.

우리는 두 개의 템플릿이 있습니다. 첫 번째에는 아티스트 목록이 포함되어 있고 두 번째에는 개별 아티스트가 표시됩니다. 위에서 보았 듯이, 우리는

내장 된 템플릿

를 사용합니다. 다른 템플릿 ( 'Item-list') 내에서 하나의 템플릿 ( 'item-tpl')을 호출 할 것입니다. 그런 다음 파일 하단에는 라이브러리와 세 스크립트가 포함됩니다. 또한 더 시각적으로 매력적으로 만들기 위해 헤더에 몇 가지 기본 스타일이 있습니다. 그리고 그게 다야.

Codepen에서 Sitepoint (@sitepoint)에 의해 펜 밑줄이 굉장히 굉장합니다.

결론 밑줄은 함께 일하는 기쁨이며, 내가 시연 한대로 깨끗하고 읽을 수 있으며 관리하기 쉬운 코드를 작성할 수 있습니다. 응용 프로그램에 추가 할 수있는 몇 가지가 더 있습니다 (예 : _.pluck ()를 사용하여 필터를 동적으로 생성하도록 함). 그러나 시작하기에 충분하다고 생각합니다.

. > 당신은 어떻습니까? 밑줄과 함께 일 했습니까? 당신은 기꺼이 시도 하시겠습니까? 비슷한 기능을 제공하는 대안 (예 : Lodash)을 시도 했습니까? 아래 의견에 알려주십시오.

자주 묻는 질문 (FAQS) alterscore.js

alterscore.js의 주요 목적은 무엇입니까? JavaScript의 내장 기능을 보충하도록 설계되어 추가 기능을 제공하고 생산성을 향상시킵니다. 배열, 객체, 기능 등을 포함하여 100 개가 넘는 기능을 제공합니다. 이러한 기능은보다 효율적이고 간단한 방식으로 데이터와 객체를 조작하는 데 도움이되므로 개발자에게 귀중한 도구가됩니다. alterscore.js를 시작하는 방법?

시작하려면 어떻게 시작해야합니까? alterscore.js, 먼저 프로젝트에 포함시켜야합니다. 공식 웹 사이트에서 라이브러리를 다운로드하여 HTML 파일에 연결하거나 CDN을 사용하여이를 수행 할 수 있습니다. 프로젝트에 포함되면 밑줄 문자 (_)와 함수 이름으로 호출하여 함수를 사용할 수 있습니다. >

alterscore.js는 광범위한 기능을 제공하지만 가장 유용한 기능 중 일부는 다음과 같습니다. _.Each :이 기능을 사용하면 배열 또는 객체 요소를 반복 할 수 있습니다. _.map :이 함수는 함수를 사용하여 배열 또는 객체의 모든 요소를 ​​변환하여 새 배열을 만듭니다. _. 필터 :이 함수는 진실 테스트를 통과하는 모든 요소가있는 새 배열을 반환합니다. _.find :이 함수는 진실 테스트를 통과하는 첫 번째 요소를 리턴합니다. _.reduce :이 함수는 함수를 반복적으로 적용하여 배열 또는 객체를 단일 값으로 줄입니다.

다른 javaScript 라이브러리와 함께 intercore.js를 사용할 수 있습니까?

. 예, alterscore.js는 다른 JavaScript 라이브러리와 호환되도록 설계되었습니다. 내장 된 JavaScript 객체를 확장하지 않으므로 페이지에서 실행되는 다른 라이브러리 나 스크립트와 충돌하지 않습니다.

는 여전히 유지 관리되고 업데이트 되었습니까?

예. aUNTSSCORE.JS는 적극적으로 유지 관리되고 정기적으로 업데이트됩니다. 도서관은 오픈 소스입니다. 이는 전 세계의 개발자가 개발 및 개선에 기여한다는 것을 의미합니다.
alterscore.js는 Lodash와 같은 다른 유틸리티 라이브러리와 어떻게 비교됩니까?

두 aldscore.js. Lodash는 비슷한 기능을 제공하지만 몇 가지 차이점이 있습니다. Lodash는 alterscore.js의 슈퍼 세트입니다. 그러나 Underscore.js는 작고 가벼워서 성능이 우려되는 프로젝트에 적합한 선택입니다.

node.js 환경에서 indercore.js를 사용할 수 있습니까? alterscore.js는 node.js 환경에서 사용할 수 있습니다. 'NPM 설치 밑줄'을 실행하여 Node.js 패키지 관리자 인 NPM을 사용하여 설치할 수 있습니다. alterscore.js의 '밑줄'이란 무엇입니까? 유틸리티 라이브러리의 밑줄 문자를 사용하기위한 JavaScript의 컨벤션입니다.

alterscore.js의 개발에 기여할 수 있습니까? 누구나 개발에 기여할 수 있습니다. 버그 보고서를 제출하거나 새로운 기능을 제안하거나 코드를 기여할 수도 있습니다.

alterscore.js에 대해 자세히 알아볼 수 있습니까? 공식 웹 사이트는 포괄적 인 문서를 제공하며 온라인으로 제공되는 수많은 자습서와 기사가 있습니다. 또한 alterscore.js를 다루는 몇 권의 책과 온라인 과정이 있습니다.

위 내용은 indentscore.js로 시작합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!