#플러그인/라이브러리 대신 사용자 정의 코드 - 단순성 쇼케이스

이것은 무거운 라이브러리나 복잡한 프레임워크에 의존하지 않고도 일반적인 웹 기능을 얼마나 빠르고 쉽게 구현할 수 있는지 보여주는 세 번째 기사입니다. 이번에는 자동화를 최대한 활용하여 잘린 콘텐츠에 대한 "자세히 보기" 버튼 작업을 했습니다.

자유롭게 코드를 사용해 보세요

코드는 간단하고 바닐라 JavaScript입니다. 라이브러리도 없고 마법도 없습니다. 매우 가볍고 통합하기 쉽습니다. IntersectionObserver를 사용하므로 요소가 표시될 때까지 요소에서 실행되지 않으므로 성능 오버헤드가 절약됩니다(단, 소규모 웹페이지에서는 이 최적화를 제거하는 것이 좋습니다).

https://gist.github.com/TomJPro/39e96d2cd6cbfcf908ad99273b2211a5

완전히 새로운 단순함의 세계를 발견하세요

문제가 복잡해 보였기 때문에 이를 위한 라이브러리가 있다고 가정했습니다. 하지만 직접 작성해 보니 복잡한 해결 방법이 필요하다는 생각에 머리가 꼼짝 못하게 되었습니다. 내 마음이 거짓말을 한 것이었습니다! 이제는 다른 개발자들도 문제를 지나치게 생각하거나 하나의 거대한 솔루션으로 가능한 모든 시나리오를 해결하려고 하기 때문에 이러한 라이브러리가 존재한다고 확신합니다. 우리가 밀리초를 계산하는 세상에서는 이러한 방식이 실제로 작동할 수 없습니다.

작업을 수행하는 첫 번째 간단한 코드 조각을 작성했을 때 라이브러리의 100kb에 비해 단 20줄에 불과했고 각 프로젝트에 맞게 사용자 정의하기가 훨씬 더 쉬웠습니다. 솔직히 새로운 세계를 발견한 기분이었어요.

내가 어떻게 만들었는지 보고 싶으세요?

실시간 스트리밍을 즐기고 있어요. 다음에 저랑 얘기하러 오세요!

실시간 스트리밍 시청

최종 생각

JS, HTML, CSS 등 단 몇 분 만에 코딩된 세 가지 공통 기능(예: 캐러셀, "자세히 보기"를 사용한 줄 자르기 및 유사한 스크립트)을 본 후에는 여러분이 자주 사용하지 않는다는 점을 분명히 느끼셨기를 바랍니다. 무거운 라이브러리는 필요하지 않습니다. 때로는 단순하고 오래된 JavaScript와 약간의 CSS만으로 매끄럽고 성능이 뛰어난 결과를 얻을 수 있습니다.

위 내용은 #플러그인/라이브러리 대신 사용자 정의 코드 - 단순성 쇼케이스의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!