Kodu ve Yorumları Biçimlendirme Kodu – Doğru Yapmak İçin Yeni Başlayan Kılavuz
Kodları ve yorumları biçimlendirme, yalnızca var olmadıktan sonra dikkat ettiğiniz şeylerden biridir. Kodu doğru bir şekilde görüntülemek ve belgelemek için kullanılırsa, yalnızca kayıp bir kod bloğuyla karşılaştığınızda yalnızca varlığının farkında olursunuz. Er ya da geç bir web sitesi işleten veya web sitesi olan çoğu kişi, kod tabanında değişikliklerle karşılaşacaktır. Bu, yeni bir HTML öğesi oluştururken, bazı özel CSS girerken veya WordPress PHP şablonunda değişiklik yaparken olabilir. Ayrılmamasını sağlamak için, bu yazıda kod oluşturucular ve yorumlar için en iyi uygulamayı göreceğiz. Neden önemli olduklarını ve aynı zamanda nasıl düzgün bir şekilde kullanılacağını öğreneceksiniz.
Birçok programlama dili olduğundan ve farklı sözleşmelerle işaretleme olduğundan, kendimizi Web tasarımında en yaygın olanlarla sınırlayacağız, yani HTML, CSS, PHP ve JavaScript. Neden kodunuzu biçimlendirmek ve belgelemek zorundasınız? Yoldan önce, önce bunun neden önemli olduğunu konuşalım. Önce işlevsellik için kod biçimlendirmesi gerekmez, bir işlevin çalışması için gerçek kod hakkında biçimlendirme ve yorum yapılması gerekmez. Tarayıcı gibi makineler, onu onsuz okuyabilir ve yürütebilir. Bu nedenle WordPress sitenizi hızlandırmak için minifikatörler gibi teknikleri kullanabilirsiniz.
Eğri
Beyaz oda
Sözleşme büyük harf kullanımı ve adlandırma
Stil ve heceleme işlevleri, değişkenler ve diğerleri
Kullanım ve Yorum Stili
Daha geniş kongrede, geliştiriciler genellikle tercihlerine göre kendi tarzlarını kullanırlar. Bununla birlikte, oldukça evrensel ve aşağıdakiler biçimlendirme ve kod yorumlarının bazı unsurları vardır, bunu göreceğiz. Kodların nasıl biçimlendirileceği bundan sonra size, kullanımı kolaylaştırmak için kodların nasıl biçimlendirileceği konusunda bazı yönergeler vereceğiz. Düzen-Bağlantı, Çizgi Kırmaları, Doğru Düzeni Kullanarak Biçimlendirme birbirine bağlı olarak birbiriyle ilişkili kodun bölümlerini ve daha fazlasını tanımlamaya yardımcı olur. Bunun için temel araç girinti, satır duraklaması ve diğer biçimlendirme seçenekleridir. HTML İşaretlemesinde çeşitli programlama dillerinde nasıl kullanılacağı açıklanmıştır. Genellikle öğelerin birbirleri tarafından iç içe geçtiğini gösteren öğeler yaparsınız.
Bunu bir sekme veya bazı boşluklarla yapabilirsiniz. Bunu yapmanın doğru yolunun ne olduğu hakkında bir tartışma var (sürpriz!), Ancak sizin için neyin uygun olduğunu seçebilirsiniz. Doğru girinti ayrıca div öğesi gibi kapların kapağını aynı dikey seviyeye yerleştirir, böylece kapatıp kapatmadığınızı görmek kolaydır. Yorum eklemek (aşağıdaki hakkında daha fazla bilgi) daha açık hale getirir.
Bu bazen elemanlar etrafında daha fazla alan getiren bir taşıma dönüşü ile güçlendirilir.CSS Burada bazı iyi biçimlendirilmiş CSS kodları: .search-submit {border-radius: 0 2px 2px 0;Alt: 0;Taşma: gizli;Dolgu: 0;Pozisyon: Mutlak;Sağ: 0;Üst: 0;Genişlik: 42px;} Neden iyi görünüyor?Birçok neden: Operatörler, kıvırcık parantezler ve mülk arasında bir mesafe vardır, alfabe sırasına göre kurallar belirtilmiştir ve her birinin kendi hatları vardır ve hepsi ek hatlarda kapatılır.CSS’nin anlaşılmasını kolaylaştırmanın ek bir yolu Steno’yu kullanmaktır.Bu iki parçacığı karşılaştırın:
.Footer {Marj-Alt: 10px; Marj-sol: 5px; Marj-sağ: 5px; Marj-Top: 10 piksel; }. Footer {marj: 10px 5px; } Aynı şeyi yapıyorlar ama biri çok daha kısa. Son olarak, bir medya sorgusu kullandığınızda, birbirinizi biriktirdiğinizden ve girinti düzgün yaptığınızdan emin olun. @Media Screen ve (min-genişlik: 56,875em) {.Site-Header {Pilding-Right:%4.5455; Dolgu-sol:%4.5455; }} PHP Benzer kurallar PHP kodu için geçerlidir. Aşağıda yirmi on dokuz işlevin bir örneği.php dosyası: işlev twentynineeteen_widgets_init () {register_sidebar (‘name’ => __ (‘footer’, ‘yirminin metin’), ‘id’ => __ (” buraya görünmek için widget’lar ekle Altbilginizde. ‘,’ TwentyNineen ‘),’ Önce_widget ‘=>’ ‘,’ After_widget ‘=>’ ‘,’ Önceden_title ‘=>’ ‘
‘,’ After_title ‘=>’
‘,); } Add_action (‘widgets_init’, ‘TwentynineNeen_widgets_init’); Ayrıca buradaki çizgilerin girintisine ve duraklamalarına da dikkat ediyor musunuz? Ayrıca, tüm => her şeyin aynı yüksekliğe yerleştirildiğini unutmayın. Bu, okunabilirliği daha da artırır.
Son JavaScript, işte JavaScript örnekleri: const headingcolorui = not (işlev ({textColorValue, settxtColor,}) {return = {__ (‘renk ayarları’): textcolorvalue, onchange: settextcolor, label: __ (‘) metin rengi ‘),},]} />);}); İş yerinde aynı prensibi görebilirsiniz. Kodu yapmanın diğer bölümlerinin adlandırma ve aktifleştirilmesi, içeriği optimize etmektir. Burada, yazdığınız şeyin mantıklı olduğu ve insanların her öğenin, işlevin veya değişkenin ne yapıldığını anlayabilmeleri önemlidir. Böylece, ne yaptıklarına ve nerede değişiklik yapacağına bakacaklardır. İşte nasıl yapılacağı. Açıklayıcı olun İlk şey, kullandığınız adın rastgele olmaması, ancak aslında bir kod parçasıyla ne yapıldığını açıklamasıdır. unregister_idarbar (‘başlık-sağ’); Çalışmanızı kontrol eden herkes, her bir öğenin işlevini hemen anlayabilmelidir. İnanın bana, buna uymazsanız gelecekte kendinizi tekmeleyeceksiniz. Tembel yüzünden geçmişte kendinize kızgın olmaktan daha kötü bir şey yoktur.
Daha önce de belirtildiği gibi kongre hakkında bilgi edinin, farklı programlama dilleri ve işaretlemeleri farklı sözleşmelere sahiptir ve onlara itaat etmek için mantıklıdır.
Adlandırma açısından, HTML ve CSS’de genellikle küçük harfler. Bu, öğelerin, özelliklerin, değerlerin, seçmenlerin, mülklerin ve sınıfların ve HTML kimliğinin adlarını içerir. Ancak, yukarıda öğrendiğimiz gibi, her programlama dili için geçerli değildir. PHP ve JavaScript’te Camelcase, Under_scores veya Hyphens ile de bir şeyler göreceksiniz. Hangisi doğru? Her şey işe yarıyor, bu yüzden yanlış bir çözüm yok (JavaScript’teki bağlantı işareti hariç, bir indirgeme olarak kabul edilebilecek, bu yüzden kullanmayın). Sonuç olarak, buradaki en önemli şey, birine karar vermeniz ve ona itaat etmenizdir. Ayrıca, çalıştığınız yerde platform kongresini görmek mantıklıdır. Örneğin, WordPress, Javascript’te PHP ve Camelcase’de alt çizginin kullanılmasını teşvik eder. Yani, bir WordPress platformuyla çalışıyorsanız, bu kongreyi kullanmaya devam etmek iyidir, çünkü özellikle var olan birçok değişken olduğu vb. Zaten bu formatta. Yukarıdakilerle en iyi uygulama kodu hakkındaki yorumlar, büyük olasılıkla başka bir geliştirici çalışmanızı her gördüğünde, neler olduğunu oldukça hızlı bir şekilde anlayabilecekler. Bu durumda, kodunuz insanların “kendinizi belgeleme” dediği şeydir. Ancak, bu sadece ilk adımdı. Birçok durumda, yorum şeklinde bazı gerçek belgelere ihtiyacınız vardır. Yorumları nasıl ekleyeceğinizi öğrenin Hemen hemen her programlama dili veya işaretleme yorum girmenizi sağlar. Bu, metni tarayıcının çalıştırmayacağı şekilde işaretleyebileceğiniz anlamına gelir. Bunu çeşitli dillerde nasıl yapacağınız aşağıda açıklanmıştır:
Html-in html .Birkaç sırayı geçerseniz, genellikle braketleri kendi satırlarına açık ve kapatırsınız ve.css – / * ve * / arasındaki herhangi bir şey dahil olmak üzere girinti yorumlarını yerleştirirsiniz.Birkaç yoldan geçebilirler.
PHP-PHP iki tür yorumu tanır: bir satır (// veya #ile işaretlenmiş) ve çok aralıklı (tıpkı CSS gibi / * … * / ile yapılmış).
JavaScript – // ile bir tane yorum yapın.Çok satırlı CSS/PHP ile aynı şekilde çalışır.
Kod yorumları için iyi bir örnek WordPress Children tema başlığıdır. /* Tema Adı: Yirmi Seventeen Tema Uri: https://wordpress.org/themes/twentyseventeen/ Yazar: WordPress Ekibi Yazar Uri: https://wordpress.org/ Açıklama: Yirmi Seventy Browing Sitenizi video ile hayata geçiriyor Başlık ve sürükleyici özellikli görüntüler ile. İş sitelerine odaklanarak, ön sayfada birden fazla bölümün yanı sıra widget, navigasyon ve sosyal menüler, bir logo ve daha fazlasına sahiptir. Asimetrik ızgarasını özel bir renk şemasıyla kişiselleştirin ve multimedya içeriğinizi post formatlarla sergileyin. 2017 için varsayılan temamız birçok dilde, herhangi bir yetenek için ve herhangi bir cihazda harika çalışır. Sürüm: 2.2 Lisans: GNU Genel Kamu Lisansı V2 veya Sonrası Lisans Uri: http://www.gnu.org/licensenses/gpl-2.0.html Metin Alan: Yirmi Etiket: Bir sütun, iki sütun, hak esnek- Başlık, erişilebilirliğe hazır, özel renkler, özel başlıklar, özel-menü, özel-logo, editör tarzı, özellikli görüntü, altbilgi-widgets, post-formatlar, RTL-dil-singport, tema tercihleri, dişli- Yorumlar, çeviriye hazır WordPress gibi bu tema GPL altında lisanslanmıştır. Bir şeyi havalı yapmak, eğlenmek ve ne paylaşmak için kullanın ‘
Başkalarıyla öğrenmek.*/ İşaretlemenizi açıklığa kavuşturmak için yorumları kullanın, ancak bunu neden kullanmalısınız?Yorumlar, herkesin yaptıkları kodu anlamasına yardımcı olmayı amaçlamaktadır.Bu, gelecekte kendinizi (çünkü daha önce ne yaptığınızı hatırlamayabilirsiniz) veya sizden devralan birini içerir.Bu nedenle, neler olduğu hakkında bilgi bırakmak mantıklıdır.Belirli kodun işlevinin veya bloğunun ne olduğunu, hangi öğelerin CSS’ye ait olduğunu açıklayın.//* yeni resim boyutları ekle add_image_size (‘blog’, 700, 300, true);Birçok geliştirici de stil sayfaları için bir içerik tablosu oluşturmak için kullanır./——————————————— — ———— >>>
İçerik Tablosu: —————————————— —————- 1.0 Normalleştir 2.0 Erişilebilirlik 3.0 Hizalamalar 4.0 Tipoglar 5.0 Tipografi 6.0 Formlar 7.0 Biçimlendirme 8.0 Tablolar 10.0 Tablo 10.0 Bağlantılar 11.0 Öne Çıkan Görüntü Gelişme 12.0 Normal İçerik 13.5 Gönderme 13.5 Sayfalar 13.6 Altbilgi 14.0 Yorumlar 15.0 Widget’lar 16.0 Medya 16.1 Galeriler 17.0 Özelleştirici 18.0 SVGS Yıkarlar 19.0 Medya Sorguları 20.0 Baskı —————– ————————-*/ Mümkün olduğunca yardımcı olmak için, burada da içeriğin tanımlayıcı ve net olduğundan emin olun. Ayrıca, yorumlar dahil ve çarpık değil, bir şekilde yerleşmek. Kod biçimlendirme araçları, doğru biçimlendirme ile ilgili tüm kuralların yorucu olabileceğini düşünerek. Sadece temelleri tartışıyoruz ve makalenin tamamını aldık. Bu nedenle, çabalarınızı azaltmak için, formatörleri daha otomatik ve kolay hale getirmek için bir dizi araç kullanabilirsiniz. Aşağıdaki çevrimiçi araçlar, kodunuzu koyabileceğiniz bir dizi araçtır ve daha güzel bir sürüm yayınlayacaktır: HTML Biçimi
PHP formatı
CSS biçimini oluşturun ve güzelleştirin
JavaScript’i güzelleştir
Eklenti Düzenleyici Kodu Ek olarak, kod düzenleyicisi için bu tür şeyleri otomatik olarak yapabilen bir eklenti de vardır.
Atom Güzelleştirici
HTML-CSS-JS Noble Metin için Prettify
Daha güzel.io (atomlar, espresso, yüce metin, webstorm, vb. İle işlev görüyor)
Google Search hızlı bir şekilde size seçiminizi düzenleyicisi için bir seçenek sunacaktır. Kod Düzenleyicisi ayrıca öğeleri farklı şekilde renklendirir, böylece okunabilirliği daha da artırır. Bu yazıdaki kod örneğinde çalışmayı zaten görebilirsiniz. Son Stil Rehberi, çoğunlukla manuel bir rota kullanıyorsanız, size ilham vermek için orada bir dizi stil rehber bulabilirsiniz. Google Stil Rehberi
Mozilla Kodlama Stili Kılavuzu
Kısa kod oluşumu ve yorum kodunun biçimlendirilmesi, herhangi bir işaretlemenin daha kolay anlaşılmasını, korunmasını ve çözülmesini sağlamak için yararlı bir araçtır. Yukarıda, bunları iş akışınızı geliştirmek için kullanmanın temel yollarını öğrendiniz. Yukarıdakilerin hiçbirinin gerçekleşmemesi tekrarlanmalıdır. Kodun iyi görünmesini sağlamak için genel sözleşmeler olmasına rağmen, diller, geliştiriciler vb. Arasında farklılıklar vardır. En önemli şey tutarlı kalmanızdır. Biçimlendirme stilini belirledikten sonra, özellikle aynı dosyada veya projede ondan sapmamaya emin olun. Değilse, kod formatörlerinin neden ilk etapta olduğu parçasını ortadan kaldıracaktır. Bir ekiple çalışıyorsanız, bir stil rehberi yapmak işleri tutarlı tutmaya yardımcı olabilir. Kod formatörleri ve kod yorumları için en sevdiğiniz araç nedir? Yukarıda eklemek isteyen var mı? Aşağıdaki yorum bölümünde bize bildirin.
