Konflik Antar Pustaka & CSS

Follow @X_increms
_{Ditulis ulang Oleh: Alfians Increms Januari, 2023
Aplikasi: Perkebunan - Pertambangan - HTI - HPH Sistem Integrasi}

Menghindari Konflik Antar Pustaka

Cara menghindari konflik Antar Pustaka Javascript dan CSS tentu sangat penting dalam hal pembuatan aplikasi berbasis apapun mengingat aplikasi tidaklah berjalan bahkan fatal error bila terjadi konflik antar CSS maupun Pustaka Javascript, sehingga banyak cara dalam hal ini untuk mengatasinya, banyak para programmer ingin mempertahankan pustaka bahkan Css yang ada dalam satu aplikasi wlaupun saling bertabrakan sehingga dari pada merombak ulang skrip maka ada cara lain dalam hal ini salah satunya dengan menulis $.noConflict(true) dan untuk kelas dengan cara membuat judul tambahan kelas seperti contoh dibawah ini :

#Kursus Pemrograman Pembuatan Aplikasi

                            /* Pustaka 1 */
                            .pustaka1-class {
                            /* Styles for Library 1 */
                            }

                            /* Pustaka 2 */
                            .pustaka2-class {
                            /* Styles for Library 2 */
                            }
                            
                            

Untuk menghindari konflik antara pustaka JavaScript dan CSS, ada beberapa teknik yang bisa di coba:

Jika halaman aplikasi menggunakan jQuery, pastikan versi yang digunakan tidak bertabrakan dengan versi yang digunakan oleh pustaka lain.

Gunakan jQuery.noConflict() untuk menghindari konflik antara versi jQuery yang berbeda. Ini memungkinkan kita untuk menggunakan beberapa versi jQuery pada halaman yang sama tanpa konflik.

Pastikan nama kelas dan ID yang digunakan pada CSS unik untuk setiap pustaka atau kode yang di buat sendiri. Ini akan mencegah tumpang tindih dan konflik gaya.

Menggunakan atribut defer atau async pada tag <script> dapat membantu mencegah konflik dengan pustaka lain. Dapat dilihat pada contoh dibawah ini ;

                            <script>

                            <script src="mobile/js/jquery.js" defer></script>
                            <script src="mobile/_assets/js/index.js" defer></script>
                            <script src="mobile/js/jquery.mobile-1.4.5.min.js" defer></script>

                            ATAU

                            <script src="mobile/js/jquery.js" async></script>
                            <script src="mobile/_assets/js/index.js" async></script>
                            <script src="mobile/js/jquery.mobile-1.4.5.min.js" async></script>
                            <script>
                        

defer dan async adalah atribut yang dapat ditambahkan ke tag <script> pada HTML untuk mengontrol cara pemuatan dan eksekusi skrip JavaScript.

defer digunakan untuk menunda eksekusi skrip hingga proses penguraian HTML selesai, Skrip-skrip dengan atribut defer akan diunduh secara bersamaan dengan HTML, tetapi akan dieksekusi setelah HTML selesai diproses. Urutan eksekusi skrip akan sesuai dengan urutan penempatan tag <script> di dalam dokumen,Berguna untuk skrip yang tidak mempengaruhi struktur atau tata letak halaman, namun perlu dieksekusi setelah dokumen selesai dimuat.

async digunakan untuk memuat skrip secara asinkron. Ini berarti skrip akan diunduh secara paralel dengan penguraian HTML, dan eksekusinya akan dilakukan segera setelah selesai diunduh tanpa memperhatikan urutan, maka dalam hal ini berguna untuk skrip yang tidak tergantung pada elemen-elemen HTML tertentu atau skrip yang dapat dijalankan independen dari konten halaman.

Perbedaan Utama:

defer memastikan skrip dieksekusi setelah penguraian HTML selesai dan dalam urutan yang sama dengan penempatan tag <script>.

async memungkinkan skrip untuk diunduh dan dieksekusi secara independen tanpa menunggu skrip lain atau proses penguraian HTML selesai, sehingga urutan eksekusi tidak terjamin.

Pemilihan antara defer dan async tergantung pada kebutuhan skrip dan ketergantungannya pada elemen-elemen atau konten di halaman tersebut.

Catatan Tambahan : Penambahan atribut defer tag <link> tidak akan memiliki efek karena atribut defer hanya berlaku untuk tag <script>. Jadi, pada tag <link>, atribut defer tidak akan menunda proses pengambilan CSS.

Silahkan baca juga : Tentang atau Mengenal Pupuk organik atau baca juga : Cara Pembuatan Pupuk Organik

• Cara memperbanyak Bakteri EM
• Membuat Pupuk Kandang dengan Stardec dan Orgadec
• Cara membuat pupuk hijau padat dan cair
• Bagaimana cara membuat pupuk kompos lubang dan kompos skala dapur
• Cara Membuat Expert Advisors (EA) atau Robot MT5
• Cara membuat Robot Trading (EA) dengan Mudah & Profitable
• "Cara membuat Pupuk Organik Cair" dan juga artikel : "Cara membuat Pupuk Cair Suplemen hewan ternak dan ikan, udang tambak"