Tüm js, css, php ve html kodu nasıl organize?

5 Cevap php

Şimdi organize etmek OOP ve MVC kullanabilirsiniz biliyorum, ama bu sadece PHP içindir.

Diyelim ki bir kullanıcı bir linke tıkladığında açılan yeni bir pencere ekleyebilir ve JS doğrulamaları ile bir form görüntüler ve tarz CSS, diyelim.

JS, CSS, PHP ve (bazı PHP parçacıkları ile) HTML: Burada 4 kodları var.

Nasıl bütün bu kodları düzenlemek istiyorsunuz? Ben geldiğimde 50 pencereler kodları her yerde yayıldı ve bana bir pencere silme davranışını değiştirmek için, ben dedektif oynamak zorunda çünkü. Ben her şey crunch yüzden JS, CSS ile yeni bir pencere eklemek zorunda.

Ben yapısı hakkında düşündüm. Eğer pencerenin her biri için ayrı bir "modül" var eğer iyi olmaz. Örneğin Pencerenin her biri için bir klasör. Bu harita size bir CSS-yerleştirmek tek JS-, bir PHP-, ve bir HTML dosyası? O zaman dağınık değil çok güzel bir yapısı var ve büyük bir JS ve CSS dosyasındaki birbirleri ile tüm pencereleri karıştırın Yüklü.

Sen ne düşünüyorsun? Ve ben kodları bu 4 çeşit nasıl organize önerilerinizi bekleriz.

5 Cevap

Ben klasörleri düzenlemek için Django 'ın yolu seviyorum. Hayal edin ve php projeye uyum deneyelim:

Kök klasör Proje klasörü, en sitesinin adını diyelim. İçerdiği

  • ortak shared settings and values (yani veritabanı erişimi değerleri, yolları vb), belki yardımcı fonksiyonları (Oriented Nesne değil), settings.php onu aramak ve / veya utils.php veya ne olursa olsun
  • a media folder that also has its own structure:
    • css klasörü, genel css için (genel düzenini tanımlayan için yani reset.css ve common.css)
    • Ortak paylaşılan görüntüler için resim klasörü,
    • ortak paylaşılan javascript kodu js klasörü,
  • statik ortak sayfalar içeren bir template klasör web sitesinin belirli kategorilere ait değil

Her Kök alt klasör, bir application projenin bir ifadesidir (yani kayıt, haberler, duyurular, sss, rehber, forum, ...) ve içerir:

  • PHP içinde Models koymak hangi bir model klasör (MVC deseni)
  • Eğer MVC desen Kontrolörleri uygulamak bir controller klasörü
  • (sadece İzlenme geçti sonuçlarını sunmak için yani quite statik php sayfaları sorumlu) MVC desen Görüntüleme koymak hangi bir view klasörü
  • Eğer kök klasörü için bir yapılandırılmış aynı şekilde tam olarak yapılandırılmış bir media klasör. Bu klasöre sadece gelişmekte ettiğiniz web sitesinin belirli bölümüne ait unsurları koymak.

connecting the components, doğrudan diyebileceğimiz için / kendi yollarına dayalı bunları içerir veya kök dizini ve haritalama URL'ler için sorumlu her bir alt klasör içinde bir php dosyası uygulamak ve isteklerini yönlendirmek olabilir. Index.php veya urls.php veya connector.php, ne olursa olsun diyoruz.

Bu gereksiz görünebilir ama değil, ve yüksek kalite separation of concerns sağlar.

Ben genellikle, (bir orta boy site belki 10 dosya ise) o zaman ben bir css klasörü, bir js img klasörü klasör koymak hangi medya denilen orada bir alt, bir swf klasör vb bir klasör içinde benim PHP sayfaları var

Ben bir diğer parçalar yazılı bütün site için bir tarzı vardır, bir sıfırlama var, 2 css dosyaları var. Ben farklı sayfa düzenleri hedef gövde etiketi üzerinde bir sınıf kullanabilirsiniz.

Js klasörü daha sonra jquery, her sayfada çalıştırılan bir dosya, tek tek sayfaları için belirli dosyaları vardır.

Bu oldukça yalındır gerçekten şeyleri tutar.

Eğer bir uygulama tasarımı nasıl örnekler arıyorsanız, birçok çerçeveler bakmak zorunda iyi bir başlangıçtır. Hatta sadece kendi dosya yapısı size bir fikir verecektir. Tipik olarak, onlar PHP kodu ve HTML şablonları hem de ikamet modülleri içine kendi kodunu düzenlemek. Özellikle Yok bakmak daha iyi, ancak deneyin: CakePHP'ye, Symfony, CodeIgniter, ya Agavi.

Onlar ancak, JavaScript ve CSS dosyalarını düzenlemek için nasıl düşündüren üzerinde büyük bir iş yapmayacağım. Ben bir uygulama yaptığınızda, ben genellikle sadece CSS dosyaları bir avuç var. Bunu yaparsanız ben sayfa başına bir ihtiyaç gibi görünüyor şaşırdım ama: onları gömmek. Kendi stil hakkında yeniden bir şey varsa harici stil sayfaları avantajı tamamen kaybolur. Onlar yeniden kullanılabilir değilse JavaScript dosyaları, yine, sadece onları gömmek gerekir. Sayfa başına yükü daha az HTTP istekleri herkes mutlu yapar.

Kendinizi inatla kendini yüzey değil, belirli bir dosya için temizleme bulduğunuzda, grep paha biçilmez bir araçtır. Here is a random article onun kullanımını göstermektedir.

Ihtiyacınız / Eğer ben vb farklı pencereler arasında kullanılan olabilir kodunu içeren olacağını JS, CSS, PHP, için üst düzey klasör oluşturmak istiyorum. Hepsi aynı hatta çoğunlukla aynı kod ise aynı CSS dosyası 50 tane olması gerek yok.

Sonra ayrı css, js, vb klasörler var her "pencere" için bir klasör oluşturun. Burada söz konusu pencere özgü dosyaları koyabilirsiniz. Eğer sadece 1 css kuralı veya js fonksiyonunu değiştirerek eğer bu şekilde, size 1 yerde bunu değiştirebilir her pencerenin tarafından kullanılır.

Hiç sadece 1 pencere için kuralını değiştirmek gerekiyorsa, o pencere için "yerel css" klasörüne kural koymak ve bu varsayılan geçersiz kılar. (HTML "küresel css" sonra Bağlantılar ise budur)

Eğer aynı kullanıcı tek bir ziyaret sırasında bu farklı pop-up pencerelerin birkaç açmak istiyorsak, onların iyiliği için onlar önbelleğe böylece dosyalarınızı birleştirmek gerekiyor ve son kullanıcılar yine tüm CSS / JS yüklemek gerekmez her açılan.

Klasörü yaklaşım görüntüleri ve JS için gayet iyi. Her açılan büyük ölçüde farklı olduğu sürece, ben kendi aklı için tek bir CSS dosyası öneririm. Yani klasör yapısı aşağıdaki gibi görünebilir:

css/
* layout.css
popups/
* add_new
   - add_new.js
   - logo.png
   - add_new.php
* delete
   - delete.js
   - other_logo.png
   - delete.php

Dağıtmadan önce tek bir dosya içine JS derlemek için mantıklı Şimdi, eğer siz karar verebilirsiniz, ya da ayrı dosyalar iyi olurdu. (Kullanıcı her ziyaret 50 windows 30 açarsa Örneğin, bir tek dosyası kullanmak)

etiketler