>  기사  >  웹 프론트엔드  >  JavaScript: Fluent API 기술 익히기

JavaScript: Fluent API 기술 익히기

WBOY
WBOY원래의
2023-09-04 08:09:051575검색

Babylon.js v2.0을 디자인하는 동안 (a 웹에서 3D를 구축하기 위한 라이브러리), 나는 최근에 더 많은 것을 원하고 있음을 깨달았습니다. API는 smooth입니다. 즉, 커뮤니티가 더 쉽게 읽을 수 있기를 바랍니다. 기술 문서 작성에 소요되는 시간을 줄이면서 작업을 이해하고 구축해 보세요.

이 튜토리얼에서는 유창한 API에 대해 다룰 것입니다: 고려해야 할 사항, 방법 이를 작성하고 브라우저 간 성능에 미치는 영향.

Fluent API란 무엇인가요?

JavaScript:掌握流畅 API 的艺术

이 Wikipedia 문서에 설명된 유창한 API는 다음과 같습니다. 보다 읽기 쉬운 코드를 제공하도록 설계된 객체 지향 API입니다. JQuery는 유창한 API를 통해 수행할 수 있는 작업의 훌륭한 예입니다.

으아아아

Smooth API를 사용하면 다음을 연결할 수 있습니다. 이 객체를 반환하면 함수가 호출됩니다.

쉽게 만들 수 있어요 다음과 같은 유창한 API:

으아아아

보시다시피 트릭은 this 객체를 반환합니다(현재 인스턴스 참조). 이 경우) 체인이 계속되도록 허용합니다.

혹시 모르신다면 JavaScript에서 "this" 키워드가 작동하는 방식에 대해 이 훌륭한 기사를 읽어 보시기 바랍니다. 기사 작성자: Mike West.

그러면 연쇄 통화를 할 수 있습니다:

으아아아

다음을 수행하기 전에 Babylon.js와 동일합니다. 이것이 일부를 생성하지 않는지 확인하고 싶습니다. 성능 문제.

공연은 어때요?

그래서 벤치마크 테스트를 해봤습니다!

으아아아

as foofoo2가 똑같은 일을 한다는 것을 알 수 있습니다. 오직 차이점은 foo 可以链接,而 foo2 할 수 없다는 것입니다.

분명히 콜 체인 차이점은 다음과 같습니다.

으아아아

그리고

으아아아

이 코드가 주어졌을 때 실행했습니다. Chrome, Firefox, IE에 관심이 있는지 알아보세요. 성능.

JavaScript:掌握流畅 API 的艺术

이것이 결과입니다 나는 다음을 얻습니다:

  • Chrome에서 일반 API는 Fluent API보다 6% 느립니다.
  • On Firefox, 두 API 모두 거의 동일하게 실행됩니다(Fluent API는 1% 더 느림).
  • On IE, 두 API 모두 거의 동일하게 실행됩니다(Fluent API는 2% 더 느립니다).

문제는 함수에 연산을 추가했다는 겁니다(Math.cos) 함수에 의해 수행되는 일종의 처리를 시뮬레이션합니다.

다 삭제하면 return 문만 유지하세요. 일부 브라우저에서는 작동하지 않습니다. 차이점(실제로는 10,000,000회 시도에 대해 1~2밀리초에 불과) 너 여러 브라우저에서 직접 테스트할 수 있습니다. 당신이 없다면 이 장치는 편리하며 dev.modern.IE에 무료 도구가 많이 있습니다. 가상 머신에서 성능 테스트를 수행하지 마십시오 실제 장치의 경우.

그래서 내 결론은 이렇습니다. 어서 해봐요!

유창한 API는 훌륭합니다. 더 읽기 쉬운 코드를 생성하고 문제나 성능 손실 없이 사용할 수 있습니다!

더 많은 연습 자바스크립트

이 내용이 다소 놀랍게 들릴 수도 있지만 Microsoft 다양한 오픈 소스 JavaScript 주제에 대한 무료 학습 콘텐츠가 많이 있으며 우리는 Microsoft Edge의 출시와 함께 우리의 임무는 더 많은 것을 창조하는 것입니다. 내가 직접 확인해 보세요:

  • HTML5 및 WebGL을 사용한 3D 소개 바빌론.JS
  • 다음 명령을 사용하여 단일 페이지 애플리케이션을 구축하세요. ASP.NET 및 AngularJS
  • HTML의 최첨단 그래픽

또는 우리 팀의 학습 시리즈:

  • 당신을 위한 실용적인 퍼포먼스 팁 HTML/JavaScript Faster(반응형 디자인에서 디자인까지 7부작 시리즈) 캐주얼 게임부터 성능 최적화까지)
  • 최신 네트워크 플랫폼으로 빠른 시작(기본 사항) HTML, CSS, 자바스크립트)
  • 범용 Windows 애플리케이션 개발 HTML 및 JavaScript Jump Start(이미 생성한 JS 사용) 앱 구축)

추가 무료 도구: Visual Studio Community, Azure 평가판 및 Mac, Linux 또는 Windows용 브라우저 간 테스트 도구 윈도우.

이 글은 웹 개발 기술의 일부입니다. Microsoft의 시리즈. Microsoft Edge와 새로운 EdgeHTML 렌더링 엔진을 여러분과 공유하게 되어 기쁩니다. 무료 Mac, iOS, Android 또는 Windows 장치에서 가상 머신 또는 원격 테스트 @http://dev.modern.ie/.

위 내용은 JavaScript: Fluent API 기술 익히기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.