"AngularJS'de Düşünmek", eğer bir jQuery geçmişim varsa?
JQuery'de istemci uygulamaları geliştirmeye aşina olduğumu varsayalım, ancak şimdi AngularJS'yi kullanmaya başlamak istiyorum. Gereken paradigma değişimini tarif edebilir misiniz? İşte cevabı belirlemenize yardımcı olabilecek birkaç soru:
- İstemci web uygulamalarını farklı şekilde nasıl oluşturur ve oluştururum? Fark nedir?
- Yapmayı / kullanmayı bırakmalı mıyım; Bunun yerine ne yapmaya / kullanmaya başlamalıyım?
- Herhangi bir sunucu tarafı değerlendirmesi / sınırlaması var mı?
jQuery ve
AngularJS arasında detaylı bir karşılaştırma aramıyorum.
1. Sayfanızı oluşturmayın ve ardından DOM manipülasyonunu kullanarak değiştirin
JQuery'de, bir sayfa yaratır ve ardından onu dinamik olarak yaratırsınız. Bu, jQuery'nin bu basit öncülden inanılmaz bir şekilde büyümek için tasarlandığı ve büyüdüğü gerçeğinden kaynaklanmaktadır.
Fakat AngularJS'de, mimarinizi göz önünde bulundurarak sıfırdan başlamak zorundasınız. “Bu DOM parçam var ve bunu yapmak istiyorum, X yap” diyerek, istediğinizi başlatmalı ve ardından uygulamanızı geliştirmeye başlamalı ve ardından en sonunda geliştirmeye başlamalısınız. Sunumun
2. AngularJS ile jQuery'yi artırmayın
Benzer şekilde, jQuery'nin X, Y ve Z yaptığı fikriyle başlama, bu yüzden sadece modeller ve denetleyiciler için bunun üzerine AngularJS ekleyeceğim. Yeni başlamanız gerçekten caziptir, bu yüzden her zaman yeni AngularJS geliştiricilerinin, jQuery'yi asla kullanmamasını, en azından “Açısal şekilde” yaptıklarına alışmalarını öneririm.
Burada bir çok geliştirici gördüm ve posta listesinde bu karmaşık çözümleri 150 veya 200 satırlık kod satırı jQuery eklentileriyle oluşturduktan sonra AngularJS'de bir dizi geri çağrı ile yapıştırıldı; ama sonunda çalışıyorlar! Sorun, çoğu durumda, jQuery eklentisinin AngularJS'de bir kod pasajında yeniden yazılabildiği durumlarda, aniden her şeyin net ve anlaşılır hale gelmesidir.
Sonuç olarak, bir problemi çözerken, ilk önce “AngularJS'de düşünün”; bir çözüm bulamazsanız, topluluğa sorun; Tüm bunlardan sonra basit bir çözüm yoksa, o zaman jQuery ile iletişime geçmekten çekinmeyin. Fakat jQuery'nin bir koltuk değneği olmasına izin vermeyin, yoksa asla AngularJS'de ustalaşamazsınız.
3. Her zaman mimarlık açısından düşünün.
İlk önce bir sayfalık uygulamaların uygulama olduğu bilinmektedir. Bu bir web sayfası değil. Bu nedenle, bir sunucu tarafı geliştiricisi gibi düşünmemiz ve bir istemci geliştiricisi gibi düşünmememiz gerekir. Uygulamamızı ayrı, genişletilebilir, test edilebilir bileşenlere nasıl böleceğimizi düşünmemiz gerekir.
Peki nasıl yapıyorsun? AngularJS'te ne düşünüyorsunuz? İşte jQuery'den farklı olarak bazı genel prensipler.
Gönderme "resmi kayıt" dır.
JQuery'de görünümü programlı olarak değiştiririz.
ul olarak etiketlenmiş bir açılır menümüz olabilir:
Home </li> <li> <a href="#/menu1">Menu 1</a> <ul> <li><a href="#/sm1">Submenu 1</a></li> <li><a href="#/sm2">Submenu 2</a></li> <li><a href="#/sm3">Submenu 3</a></li> </ul> </li> <li> <a href="#/home">Menu 2</a> </li> </ul>
JQuery'de, uygulama mantığımızda, onu şöyle bir şeyle etkinleştiririz:
<ul class="main-menu" dropdown-menu> ... </ul>
Bu ikisi de aynı şeyi yapıyor ancak AngularJS versiyonunda, şablona bakan herkes ne olması gerektiğini biliyor. Geliştirme ekibinin yeni bir üyesi ne zaman bir araya gelse, ona bakabilir ve sonra
dropdownMenu yönergesinin yerinde olduğunu bilir; doğru cevabı girmesi veya herhangi bir kod yazması gerekmez. Bir bakış bize ne olacağını söyledi. Çok daha temiz.
AngularJS'de yeni olan geliştiriciler genellikle belirli bir türdeki tüm bağlantıları nasıl bulacağınızı ve bunlara yönergeleri nasıl ekleyebileceğini sorar. Geliştirici biz cevaplarken her zaman sersemletir: siz yapmazsınız. Ama bunu yapmamanın nedeni, yarı jQuery, yarı-AngularJS gibi ve iyi bir şey olmaması. Buradaki sorun, geliştiricinin AngularJS bağlamında "jQuery" yi çalıştırmaya çalışmasıdır. Asla iyi çalışmayacak. Gönderme resmi bir giriştir. Yönergenin dışında (aşağıda daha fazlası), DOM'yi asla değiştirmezsiniz. Ve direktifler başvuruda uygulanır, yani niyet açıktır.
Unutma: oluşturmayın ve ardından işaretleyin. Mimar olmalı ve sonra dizayn etmelisin.
Veri bağlama
Bu kesinlikle AngularJS'in en şaşırtıcı özelliklerinden biri ve önceki bölümde bahsettiğim DOM manipülasyon türlerini yapma ihtiyacını büyük ölçüde azaltıyor. AngularJS sunumunuzu otomatik olarak güncelleyeceğinden, zorunda kalmanıza gerek kalmaz! JQuery'de olaylara cevap veririz ve ardından içeriği güncelleriz. Gibi bir şey:
<ul class="messages" id="log"> </ul>
Karıştırma sorunlarına ek olarak, daha önce bahsettiğim niyetleri belirten aynı sorunlara da sahibiz. Fakat daha önemlisi, DOM düğümünü elle çağırmak ve güncellemek zorunda kaldık. Bir günlük girişini silmek istiyorsak, DOM kodunu da kopyalamalıyız. Mantığı DOM'dan ayrı olarak nasıl test ederiz? Peki ya sunumu değiştirmek istiyorsak?
Bu biraz dağınık ve önemsemeyen bir kırılgan. Fakat AngularJS'de bunu yapabiliriz:
<ul class="messages"> <li ng-repeat="entry in log">{{ entry.msg }}</li> </ul>
Ancak bu bakımdan görüşümüz şu şekilde görünebilir:
- İlk olarak, jQuery asla gerekli değildi. Burada jQuery'nin ihtiyaç duyduğu hiçbir şeyi yapmadık!
- İkincisi, zaten sayfamızdaki jQuery olsa bile, burada kullanmak için hiçbir sebep yoktur; sadece
angular.elementkullanabiliriz ve jQuery olmayan bir projeye girdiğinizde bile bileşenimiz çalışmaya devam eder.
- Üçüncüsü, bu direktifin jQuery gerektirdiği varsayılsa bile, jqLite (angular.element) yüklü ise her zaman jQuery'yi kullanır! Yani
$kullanmamıza gerek yok - sadece
angular.element.
- Dördüncüsü, üçüncüyle yakından ilgili, jqLite öğelerinin
$olarak sarılmaması gerektiği -
linkişlevine geçirilen
elementzaten bir jQuery öğesi olacağı!
- Ve beşinci olarak, önceki bölümlerde bahsettiğimiz, neden şablon malzemesini mantığımıza karıştırıyoruz?
Bu yönerge yeniden yazılabilir (çok karmaşık durumlarda bile!) Çok daha kolay:
7185
Zorunlu → bildirimsel
JQuery'de, DOM'yi aramak için bir seçici kullanılır ve ardından olay işleyicileri bağlamak / kaydetmek. Bir olay tetiklendiğinde, bu (zorunlu) kod DOM'yi günceller / değiştirir.
AngularJS'de DOM öğeleri hakkında değil, görünümler hakkında düşünmek istersiniz. AngularJS direktiflerini içeren HTML gösterimleri (bildirimsel) . Direktifler bizim için olayların arkasında olay işleyicileri kurar ve bize dinamik veri bağlama sağlar. Seçiciler nadiren kullanılır, bu nedenle tanımlayıcılara (ve bazı sınıf türlerine) duyulan ihtiyaç önemli ölçüde azalır. Görünümler modellere bağlanır (alanlar arasında). Görünümler bir modelin izdüşümüdür. Olayları değiştirmek için modeller (yani Veri, bölge özellikleri) ve bu modelleri "otomatik olarak" tasarlayan görünümler.
AngularJS'de, verilerinizi içeren jQuery seçili DOM öğelerini değil, modelleri düşünün. Fikirleri, kullanıcının gördüğü şeyi manipüle etmek için geri aramaları kaydetmek yerine, bu modellerin projeksiyonları olarak düşünün.
Problemlerin ayrılması
jQuery göze çarpmayan JavaScript kullanıyor - davranış (JavaScript) yapıdan (HTML) ayrılıyor.
AngularJS, davranışı görünüm / yapıdan (HTML) kaldırmak için denetleyicileri ve yönergeleri (her biri kendi denetleyicisine ve / veya derleme ve bağlantı işlevlerine sahip olabilir) kullanır. Angular ayrıca, uygulamanızı bölmenize / düzenlemenize yardımcı olacak hizmetlere ve filtrelere sahiptir.
Ayrıca bakınız medican.pw.site/questions/511 / ...
Uygulama tasarımı
AngularJS uygulaması geliştirmek için bir yaklaşım:
- Modellerini düşün. Bu modeller için hizmetler veya kendi JavaScript nesnelerinizi oluşturun.
- Modellerinizi nasıl sunmak istediğinizi düşünün - görüşlerinizi. Dinamik veri bağlama için gerekli yönergeleri kullanarak her sunum için HTML şablonları oluşturun.
- Her görünüme bir denetleyici takın (ng görünümü ve yönlendirme veya ng denetleyicisini kullanarak). Göndericiden yalnızca görünümlerin gerçekleştirmesi gereken tüm model verilerini bulmasını / almasını isteyin. Kontrol cihazlarını mümkün olduğunca ince yapın.
Prototip Kalıtım
Prototip JavaScript kalıtımının nasıl çalıştığını bilmeden jQuery ile çok şey yapabilirsiniz. AngularJS uygulamalarını geliştirirken, JavaScript'i devralma konusunda iyi bir anlayışınız varsa, bazı genel hatalardan kaçınırsınız. Önerilen okuma: AngularJS'deki prototip / prototip kalıtım hacminin nüansları nelerdir?
AngularJS vs. jQuery
AngularJS ve jQuery tamamen farklı ideolojileri kabul eder. Если вы отправляетесь из jQuery, вы можете обнаружить некоторые отличия от удивления. Angular может рассердить вас.