"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.

4523
21 февр. 21 Şubat tarihinde Mark Rajcok tarafından set 2013-02-21 07:09 13, 07:09 2013-02-21 07:09
@ 15 cevap

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:

, sorunların ayrılmasını destekler ve daha fazla doğrulama olasılığı sunar.  Bu noktadan bahseden diğer cevaplar, bu yüzden onu bırakacağım. 

Problemlerin ayrılması

Ve yukarıdakilerin tümü bu karmaşık konuyu birbirine bağlar: sorunlarınızı ayrı tutun. Fikriniz ne olması gerektiğine dair resmi bir rapor görevi görür (çoğunlukla); Modeliniz verilerinizi temsil eder; yeniden kullanılabilir görevleri gerçekleştirmek için bir servis seviyeniz var; DOM’yi değiştirir ve görünümünüzü yönergelerle genişletirsiniz; ve hepsini kontrol cihazlarıyla birleştiriyorsun. Bu, diğer cevaplarda da belirtilmiştir ve eklemek istediğim tek şey, aşağıda başka bir bölümde tartışacağım test edilebilirlikle ilgilidir.

Bağımlılıkları etkinleştir

Sorunların ayrılmasında bize yardımcı olmak için bağımlılık enjeksiyonu (DI). Sunucu tarafı bir dil kullanıyorsanız ( Java'dan PHP'ye ), muhtemelen bu kavramı zaten biliyorsunuzdur, ancak bir jQuery müşteri adamıysanız, bu kavram aptalcadan gereksiz yere yenileşme gibi görünebilir. Ancak bu öyle değil: -)

DI, geniş bir perspektiften, bileşenleri beyan etmekte özgür olduğun anlamına gelir ve daha sonra diğer bileşenlerden, sadece bir kopyasını isteyin ve sağlanacaktır. Önyükleme sırasını, dosyaların konumunu veya bunun gibi bir şeyi bilmeniz gerekmez. Güç hemen görünmeyebilir, ancak yalnızca bir (ortak) örnek vereceğim: test etme.

Diyelim ki, uygulamamızda, REST API üzerinden sunucu depolaması yapan bir hizmete ihtiyacımız var ve uygulamanın durumuna bağlı olarak depolama da yerel. Denetleyicilerimizde testler yaparken, sunucuyla bağlantı kurmak istemiyoruz - hala denetleyiciyi test ediyoruz. Orijinal bileşenimizle aynı isimde bir servis düzeni ekleyebiliriz ve enjektör kontrolörümüzün otomatik olarak sahte bir tane alacağını garanti eder - kontrolörümüz farkı bilmiyor ve bilmemeli.

Davalardan bahsetmişken ...

4. Test tabanlı geliştirme - her zaman

Bu gerçekten mimarlığın 3. bölümünün bir parçası, ancak benim üst düzey bölümüme yerleştirmem çok önemli.

Gördüğünüz, kullandığınız veya yazdığınız birçok jQuery eklentisi arasında, kaç tanesinin test paketi vardı? Çok fazla değil, çünkü jQuery buna pek uygun değil. Ama Angular JS.

JQuery'de test etmenin tek yolu, testlerimizin DOM manipülasyonlarını gerçekleştirebileceği bir örnek / demo sayfasıyla bağımsız olarak bir bileşen oluşturmaktır. Bu yüzden, bileşeni ayrı ayrı geliştirmemiz ve sonra uygulamamıza entegre etmemiz gerekir. Ne kadar garip! Çok fazla zaman, jQuery ile geliştirirken, test tabanlı geliştirme yerine yinelemeli bir seçenek seçiyoruz. Ve bizi kim suçlayabilir?

Ancak bir sorun ayrıntısına sahip olduğumuzdan, AngularJS'de yinelemeli olarak test geliştirme yapabiliriz! Mesela, mönüsümüzde mevcut rotanızın ne olduğunu belirten üst düzey bir direktif istediğimizi varsayalım. Ne istediğimizi uygulamamız açısından söyleyebiliriz:

 

Şimdi var olmayan when-active direktif için bir test yazabiliriz:

 

Testimizi yaptığımızda, başarısız olduğunu onaylayabiliriz. Ancak şimdi direktifimizi oluşturmalıyız:

 .directive( 'myDirective', function () { return { template: '<a class="btn">Toggle me!</a>', link: function ( scope, element, attrs ) { var on = false; $(element).click( function () { on = !on; $(element).toggleClass('active', on); }); } }; }); 

Bunda birkaç hata var:

  • İ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.element kullanabiliriz 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 - link işlevine geçirilen element zaten 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
22 февр. Tarafından verilen cevap Josh David Miller 22 Şub 2013-02-22 00:26 '13, 0:26 2013-02-22 00:26

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.

border=0

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?

408
21 февр. Tarafından cevap Mark Rajcok 21 Şub. 2013-02-21 07:09 13, 07:09 2013-02-21 07:09

AngularJS vs. jQuery

AngularJS ve jQuery tamamen farklı ideolojileri kabul eder. Если вы отправляетесь из jQuery, вы можете обнаружить некоторые отличия от удивления. Angular может рассердить вас.