プラグイン/ライブラリの代わりに #ustom コード - シンプルさのショーケース

これは、重いライブラリや複雑なフレームワークに依存せずに、一般的な Web 機能をいかに迅速かつ簡単に実装できるかを示す、小さな 3 つの記事の 3 番目です。今回は、最大限の自動化を使用して、クリップされたコンテンツの「続きを読む」ボタンに取り組みました。

コードを自由に使用してください

コードは単純で、バニラの JavaScript だけであり、ライブラリやマジックはありません。超軽量で統合も簡単です。 IntersectionObserver を使用するため、要素が表示されるまで実行されず、パフォーマンスのオーバーヘッドが節約されます (ただし、小さい Web ページの場合は、この最適化を削除した方がよい場合もあります)。

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

まったく新しいシンプルな世界を発見してください

問題が複雑そうなので、このためのライブラリが存在すると思いました。しかし、自分で書こうとすると、複雑な解決策が必要だという考えが頭から離れなくなり、私の心が嘘をついていたのです。今では、他の開発者も問題を考えすぎたり、考えられるすべてのシナリオを 1 つの巨大なソリューションで解決しようとしたりするため、これらのライブラリが存在すると確信しています。ミリ秒を数える世界では、そんなことは決してうまくいきません。

私がこの仕事を行う最初の単純なコードを書いたとき、それは 100kb のライブラリと比較してわずか 20 行であり、プロジェクトごとにカスタマイズするのはさらに簡単でした。正直、新しい世界を発見したような気分でした。

私がどのように構築したかを見たいですか?

ライブ配信を楽しんでいます。次回は私とチャットしましょう!

ライブストリームを見る

最終的な考え

わずか数分でコーディングされた 3 つの一般的な機能 (カルーセル、「続きを読む」による行クリッピング、および同様のスクリプトなど) (JS、HTML、CSS を含む) を見て、よくやっていることは明らかだと思います。重いライブラリは必要ありません。場合によっては、単純な古い JavaScript と少しの CSS だけで、洗練されたパフォーマンスの高い結果を得ることができます。

以上がプラグイン/ライブラリの代わりに #ustom コード - シンプルさのショーケースの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。