Praktik Terbaik untuk Mengatur Pustaka Javascript & Struktur Folder CSS [ditutup]

Bagaimana Anda mengatur folder js & css di aplikasi web Anda?

Struktur proyek saya saat ini seperti ini:

root/
├── assets/
│   ├── js/
│   │   └──lib/
│   ├── css/
│   └── img/
└── index.html

Tapi lebih rumit lagi jika saya menggunakan banyak javascript library & css plugin. Plugin Javascript hadir dengan file .js-nya sendiri dan terkadang dengan file .css-nya sendiri.

Misalnya, ketika saya menggunakan JQuery dengan plugin JQueryUI, saya meletakkan jquery.js dan jquery-ui.js di dalam direktori js / lib. Tetapi JQueryUI hadir dengan file cssnya sendiri. Di mana saya harus meletakkan css dari plugin javascript untuk praktik terbaik? Haruskah saya meletakkannya di dalam folder lib, untuk membedakan plugin css dan javascript css saya? Atau di tempat lain?

Saya tahu ini adalah preferensi pribadi, tapi saya hanya ingin tahu bagaimana kalian mengatur folder proyek Anda.

Terima kasih sebelumnya :)

Saya akan menjelaskan struktur yang direkomendasikan untuk mengatur file dalam aplikasi HTML5 Anda. Ini bukan upaya untuk menciptakan standar apa pun. Sebaliknya, saya akan memberikan saran tentang cara mengelompokkan dan memberi nama file dengan cara yang nyaman dan logis.

Proyek Anda

Anggaplah Anda sedang membangun aplikasi HTML5. Dalam beberapa kasus, Anda dapat menggunakan root server Anda sebagai wadah utama tetapi untuk tujuan artikel ini saya akan menganggap aplikasi HTML5 Anda terdapat dalam folder. Di dalam folder ini Anda harus membuat file indeks aplikasi atau titik masuk utama Anda.

• appcropolis-project
• my-index.html

Umumnya, aplikasi Anda terdiri dari file HTML, CSS, Gambar, dan Javascript. Beberapa dari file tersebut akan khusus untuk aplikasi Anda dan beberapa lainnya dapat digunakan di beberapa aplikasi. Ini adalah perbedaan yang sangat penting. Untuk melakukan pengelompokan file yang efektif, Anda harus mulai dengan memisahkan file tujuan umum dari sumber daya khusus aplikasi.

• appcropolis-project
• sumber daya
• vendor
• my-index.html

Pemisahan sederhana ini membuat navigasi file Anda jauh lebih mudah. Setelah Anda menempatkan perpustakaan dan file tujuan umum di dalam folder vendor , jelas bahwa file yang akan Anda edit akan ditempatkan di folder sumber daya .

Selain dari kode HTML, file lainnya dalam aplikasi Anda sebagian besar adalah CSS, Javascript, dan gambar. Kemungkinannya adalah Anda sudah mengelompokkan file aplikasi Anda di dalam folder yang sesuai dengan jenis aset ini.

• appcropolis-project
• sumber daya
• css
• js
• gambar-gambar
• data
• vendor
• my-index.html

The js folder akan mengadakan kode Javascript Anda. Demikian pula, folder gambar adalah tempat Anda harus menambahkan gambar yang digunakan langsung dari index.html atau halaman lain dalam aplikasi Anda. Folder gambar ini tidak boleh digunakan untuk menghosting file yang terkait dengan stylesheet. Kode CSS Anda dan gambar terkait harus ditempatkan di dalam folder css . Dengan melakukan ini, Anda dapat membangun halaman yang dapat dengan mudah menggunakan tema yang berbeda dan memungkinkan aplikasi Anda menjadi lebih portabel.

• appcropolis-project
• sumber daya
• css
• tema biru
• background.png
• gambar-gambar
• background.png
• blue-theme.css
• my-index.css
• js
• my-index.js
• info-kontak-saya
• gambar-gambar
• produk
• computer.jpg
• cellphone.png
• printer.jpg
• logo-perusahaan-saya-kecil.png
• logo-perusahaan-saya-besar.png
• data
• some-data.json
• more-data.xml
• table-data.csv
• ekstra-data.txt
• vendor
• jquery
• gambar-gambar
• ajax-loader.gif
• icons-18-white.png
• jquery.min.js
• jquery.mobile-1.1.0.min.css
• jquery.mobile-1.1.0.min.js
• beberapa-css-library
• some-plugin.jquery
• my-index.html
• info-kontak-saya
• my-products.html

Contoh sebelumnya menunjukkan konten folder css . Perhatikan bahwa ada file bernama default.css yang harus digunakan sebagai file CSS utama Anda. Gambar yang digunakan oleh stylesheet default harus ditempatkan di dalam folder gambar . Jika Anda ingin membuat lembar gaya alternatif atau jika Anda ingin mengganti aturan yang ditentukan dalam lembar gaya default, Anda dapat membuat file CSS tambahan dan folder koresponden. Misalnya, Anda dapat membuat lembar gaya blue-theme.css dan menempatkan semua gambar terkait di dalam tema birumap. Jika Anda memiliki kode CSS atau Javascript yang hanya digunakan oleh satu halaman (dalam hal ini my-index.html), Anda dapat mengelompokkan kode khusus halaman di dalam file .css dan .js dengan nama halaman yang sama (ei my-index .css dan my-index.js). Kode CSS dan Javascript Anda harus se generik mungkin, tetapi Anda dapat melacak pengecualian dengan menempatkannya di file terpisah.

Rekomendasi Akhir

Beberapa rekomendasi akhir harus dibuat seputar nama folder dan file. Sebagai aturan umum, pastikan Anda menggunakan huruf kecil di semua nama folder dan file. Saat menggunakan beberapa kata untuk memberi nama file atau folder, pisahkan dengan tanda hubung (mis. My-company-logo-small.png). Jika Anda mengikuti saran dalam artikel ini, Anda seharusnya dapat menggabungkan beberapa halaman sambil menjaga sumber daya bersama dan kode khusus dipisahkan dengan baik.

Terakhir, meskipun Anda tidak memilih untuk menggunakan struktur yang direkomendasikan dalam artikel ini, penting untuk tetap berpegang pada konvensi. Ini akan meningkatkan produktivitas Anda dan yang lebih penting akan membuat pekerjaan yang Anda lakukan mudah dipahami oleh orang lain.

Sumber Kredit: Bagaimana mengatur file HTML, CSS, dan Javascript Anda

 root/
   assets/
      lib/-------------------------libraries--------------------
          bootstrap/--------------Libraries can have js/css/images------------
              css/
              js/
              images/  
          jquery/
              js/
          font-awesome/
              css/
              images/
     common/--------------------common section will have application level resources             
          css/
          js/
          img/

 index.html

Ini adalah cara saya mengatur sumber daya statis aplikasi saya.