Bir web sitesi için dizin yapısı (js / css / img klasörleri)

Yıllardır web sitelerim için aşağıdaki dizin yapısını kullanıyorum:

<root>
  ->js
    ->jquery.js
    ->tooltip.js
    ->someplugin.js
  ->css
    ->styles.css
    ->someplugin.css
  ->images
    -> all website images...

farklı üçüncü taraf bileşenleri kullanmaya başlayana kadar benim için mükemmel görünüyordu.
Örneğin, bugün resimlerini css dosyasının bulunduğu dizinde arayan bir datetime seçici javascript bileşeni indirdim (css dosyası "url ('calendar.png')" gibi URL'ler içeriyor).

Şimdi 3 seçeneğim var:

1) datepicker.css dosyasını css dizinime koyun ve resimlerini birlikte koyun. Bu seçeneği gerçekten sevmiyorum çünkü css dizininde hem css hem de görüntü dosyaları olacak ve garip. Ayrıca aynı ada sahip farklı bileşenlerden, css dosyalarından background.png'ye bağlanan 2 farklı bileşen gibi dosyaları karşılayabilirim. Bu ad çarpışmalarını düzeltmem gerekecek (dosyalardan birini yeniden adlandırarak ve bağlantıyı içeren ilgili dosyayı düzenleyerek).

2) datepicker.css dosyasını css dizinime koyun, resimlerini resim dizinine koyun ve resimler dizinindeki resimleri aramak için datepicker.css dosyasını düzenleyin. Bu seçenek tamam, ancak üçüncü taraf bileşenleri site yapımıza uyacak şekilde düzenlemek için biraz zaman harcamak zorundayım. Yine, ad çakışmaları burada meydana gelebilir (önceki seçenekte açıklandığı gibi) ve bunları düzeltmem gerekecek.

3) datepicker.js, datepicker.css ve resimlerini ayrı bir dizine koyun, / 3rdParty / datepicker / diyelim ve dosyaları yazarın istediği şekilde yerleştirelim (örneğin, / 3rdParty / datepicker / css / datepicker .css, /3rdParty/datepicker/css/something.png, vb.). Şimdi bu seçeneğin en doğru olduğunu düşünmeye başladım.

Deneyimli web geliştiricileri, ne öneriyorsunuz?

Her zaman üçüncü taraf bileşenleri için bir lib dizini oluştururum, kesinlikle gerekli olmadıkça üçüncü taraf kitaplıklarını değiştirmek istemezsiniz.

3. seçenekle devam edin.

Kendimi keyfi hissettiren şeyleri dosya türüne göre ayırmak yerine, geliştiricilerin bunları nasıl kullanacakları ve düşünecekleri şekilde dosyaları organize ediyorum. İşleri birkaç temel kategoriye ayırıyorum:

myapp/
  ui/ # or "www"
    lib/ # third-party
      jquery/
      sugarjs/
      backbone/
      underscore/
    app/ # application logic
      main.js
      router.js
      views.js
      models.js
    style/ # all presentation
      main.css
      buttons.css
      icons/
        add.svg
        log.png
      img/
        logo.png
        signup.png
    components/ # standalone bundles of html/css/js, if necessary
  server/ # or "api" (all server-side logic)

Seçenek # 2, üçüncü taraf kitaplıklarınızı yükselttiğinizde tüm değişikliklerinizi (ve dolayısıyla bazılarını unutabilir) yeniden uygulamanız gerekeceğinden pratik ve tehlikeli değildir. Bu kesinlikle büyük bir hayır hayır! # 1 ve # 3 seçeneklerinin her birinin avantajları ve dezavantajları vardır. Bu yüzden genellikle her ikisinin bir kombinasyonunu tercih ederim.

Çözümüm, dosyalarım için Seçenek # 1'i ve 3. taraf kütüphaneler için Seçenek # 3'ü kullanmaktır.

Misal:

<root>
  -> js
    -> jquery.js
    -> main.js
  -> css
    -> reset.css
    -> style.css
  -> img
    -> img1.jpg
    -> img2.jpg
  -> lib
    -> someplugin1
      -> original folder/file structure of this plugin
    -> someplugin2
      -> original folder/file structure of this plugin