Büyük JavaScript uygulamalarının nasıl yapılandırılması gerekiyor?

Kısa bir süre önce OBIEE Mobile App Developer için yazılmış bazı JavaScript eklentilerinin yanı sıra çeşitli projeler için bazı özel kütüphaneler gösterildi.

Bir OOP geçmişinden geliyorum, bu projelerin yapısı hakkında biraz kafam karıştı. Binlerce satır uzunluğunda dosyalar görüyorum . Dosyaları dosyalara ve sınıflara ayırmaya alışkınım ama bunun farklı bir çerçeve olduğunu anlıyorum - birincisi, dosya boyutu bir sorun - ama hepsini yapmanın daha iyi bir yolu olmalı mı?

Komut dosyalarının uzunluğu yalnızca okunabilirliği ve bakımı yapılabilirliği değil aynı zamanda bir kişinin programın nasıl çalıştığını genel olarak anlamasını da etkiler.

Büyük uygulamalar nasıl yapılandırılır? Bunun için herhangi bir genel OOP tasarım deseni var mı?

JavaScript kalıplarına aşina değilseniz, size birçok büyük uygulamanın ve kütüphanenin Açığa Çıkarma Modülü Kalıbı kullandığını söyleyebilirim , ancak ihtiyaçlarınıza bağlı olarak kullanabileceğiniz başka birçok kalıp vardır.

Açığa Çıkarma Modülü Deseni, size büyük dosyaları bölmek ve mantıksal olarak düzenlemek için güzel bir yol vermelidir; Eğer JavaScript herhangi bir tasarım desenleri ile çalışırken Ancak unutmayın bu çok kafa karıştırıcı olabilir. Kullanmaya çalışın Bu , yeni , prototip , .call()ve .apply()akıllıca.

Büyük projeler üzerinde çalışırken, bunlar da yararlı olabilir:

• Mümkünse, TypeScript veya ES6'ya geçin.
• Modüler kod yazma . Çeşitli yollar ve üçüncü taraf kütüphaneler var, ancak bunların hiçbiri hiç yoktan iyidir.
• Görevleri otomatikleştirmek için bir Görev Yürütücü / Derleme Sistemi kullanın.
• Tasarım Desenleri hakkında bilgi edinin . Bu iyi bir başlangıç ​​olabilir. Yukarıda söylediğim gibi, özellikle tüm popüler desenlerde ustalaşmak için zamana ihtiyacınız olduğunu düşünüyorsanız , Açığa Çıkarma Modülü Deseni çok faydalıdır.
• Birim Testlerini Yazma . Dinamik bir dille çalışmak daha zor olabilir. Uygulamanızın önemli parçalarını test etmek çok zaman kazandırabilir.
• Hem kod yazma hem de hataları yakalama konusunda size yardımcı olabilecek bir IDE veya Metin Düzenleyicisi kullanın . WebStorm iyi bir seçimdir. Yüce Metin de.
• IDE'niz bir hata ayıklayıcı sunmuyorsa, favori web tarayıcınızın hata ayıklayıcısında uzmanlaşmaya çalışın.
• Kütüphaneleri kullanın. Projenin niteliğine bağlı olarak, bulabileceğiniz en iyi üçüncü taraf kodunu kullanmaya çalışın. Bir web uygulaması yazıyorsanız, Angular , React ve eski backbone.js'ye bakın . Bir Node.js uygulaması yazıyorsanız, NPM deposunda arama yapmak için zaman ayırın . Kaç tane paketin zaten yapmak üzere olduğunuzu yaptığına şaşıracaksınız.
• Projede çalışan tek kişi siz olsanız bile, Git gibi bir sürüm kontrol sistemi kullanın ve çok katı ve fikirli olmayan ancak yine de takım arkadaşlarınızın da mutlu olacağı iyi bir rehber çizgisi sağlayan bir Kodlama Standardı izleyin takip et.
• TypeScript veya ES6 tercih etseniz bile, JavaScript'in sınıfsız OOP'sini anlamaya devam etseniz bile, Prototypal OOP , özellikle hata ayıklama sırasında faydalı olabilir.

Ben bir C ++ geliştiricisiyim ve son zamanlarda web geliştirme yapmaya başladım. Büyük bir masaüstü uygulamasını web ortamına taşıyorum. JavaScript kodumu tam olarak aynı desenleri kullanarak C ++ kodunu yapılandırdım gibi yapılandırıyorum. Toplamda yaklaşık 25-30 dosyam var, ancak sonunda uygun şekilde clubbing yaparak ve bunları minimize ederek 3-5'e indireceğim.

Benim için, sadece daha iyi ya da kötü için değişen dil, ama paradigma değil. JavaScript, tüm hataları ve hayal kırıklıkları için fonksiyonel ve OOP stilinin güzel bir karışımıdır. İşler şimdiye kadar iyi çalıştı.

Son olarak, erken fark ettiğim bir şey, JavaScript'in C ++ 'dan çok daha kısa bir kod yazmasına izin vermesiydi, bu yüzden bazen JS olmayan bir dilden gelen çok sayıda LOC'a sahip olmak, eski şeyler yapmanın yoluna bağlı kalmaktan kaynaklanabilir. Bu şey ele alındığında, gerçekten farklı olması gereken bir şey görmüyorum. Sonuçta tasarım ve algoritmalar agnostiktir.

Elbette projeden projeye büyük ölçüde değişir, ancak genel olarak kabul edilen uygulama, kütüphane veya modül olarak işlev görmesi gereken şeyler için, bunları tek bir büyük dosyaya koymak ve dahili ("özel") olmasını önlemek için kapsülleme kullanmaktır. ) arayüzünden dışarı sızıntı. Ayrıca, kopyalanacak ve yapıştırılacak tüm klasör ve dosyaların hiyerarşisi yerine uygulama yapılandırmasına veya başlık snippet'ine eklemek için bir dosya olan kütüphane / modülü kullanmak isteyen geliştiriciler için de yararlıdır. Ayrıca, bir üretim tesisinde minimizasyon ve paketleme ile, HTTP isteklerinin sayısını azaltmak için büyük olasılıkla tek bir dosyada birleştirileceği gerçeğini yansıtır.

Kendi uygulama kodunuzun bu uygulamayı izlemesi gerekmez ve muhtemelen uygulamanız gerekmez. Uygulamanız onu kullanan tek kişi olduğundan, dosyaları yalnızca bir kez eklemeniz gerekir ve sizin için minimize etme ve paketlemeyi işlemek için muhtemelen platforma güvenebilirsiniz.

Kod üzerinde çalışırken, farklı bileşenler genellikle modüllere ayrılır, her biri tipik olarak tek bir sınıf uygular ve her biri ayrı bir dosyada yaşar. Üretim sırasında, bu dosyalar daha sonra HTTP isteklerinin sayısını azaltmak için Browserify ( http://browserify.org/ ) veya RequireJS gibi bir şey kullanarak tek bir dosyada birleştirilir (dolayısıyla gördüğünüz binlerce kod satırı) , aynı zamanda bağımlılıkların doğru sırada yüklenmesini sağlamak için

Bu modüller için sınıfların nasıl uygulandığı, altta yatan mekaniğe göre OOP'den biraz farklıdır, ancak yüzeydeki farklı değildir. ES6 classanahtar kelimeyi bile tanıttı , bu yüzden oldukça tanıdık görünmelidir. MDN ile ilgili bu makale başlamak için faydalıdır: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

PDF form uygulamalarım için yazılımı düzenlemek veya “yapılandırmak” için (Petri'nin) Net Öğeleri ve Ek Açıklamalarını Acrobat / JavaScript API'sini kullanan JavaScript programları kullanıyorum. Belki sizin durumunuzda yararlı olabilir.

Ağ öğelerinin girdi-çıktı ilişkilerini ve ek açıklamaların iki biçim görünümünü oluşturmak için bir diyagram kullanılır. Diyagram ve form görünümlerine dayanarak, PDF form uygulamaları için sistematik olarak JavaScript programları oluşturmak mümkündür. Böylece kaynak kodun "okunması", özelliklerle eşleştiğini doğrulamak için azaltılır: diyagram ve iki form görünümü.

Yazılımımın uygulanmasında yapıcılar ve prototipler kullanılıyor. Performans bir sorun haline gelirse, prototiplerin örnek üyelerle değiştirilmesi, daha fazla bellek kullanımı pahasına performansı artırabilir. Diziler de kullanılır. Performans bir sorun haline gelirse doğrudan referanslar kullanılır.

Bazı özellikler eval kullanılarak oluşturulur; çok fazla özelliğe sahip nesneler için bu, kaynak dosyadaki kod miktarını ve programcının yazma miktarını azaltacaktır.

Hala olası ve JavaScript'i alışık olduğunuz OOP biçiminde yazmanız önerilir. İşte JavaScript'teki en önemli tasarım modellerinden geçen iyi bir kitap.

https://addyosmani.com/resources/essentialjsdesignpatterns/book/

Ana hedefin kodu farklı dosyalara ve modüllere ayırmak olduğu birçok JavaScript çerçevesi de var. Çalıştığınız belirli bir çerçeve tüm kodunuzu tek bir dosyada bulundurmanızı gerektiriyorsa, kesinlikle geçiş yapmalısınız.