Bağlanma verileri
Web sayfanızı oluşturmaya devam edersiniz ve dinamik verilerinizin olacağını düşündüğünüz her an {{veri bağlamaları}} koymaya devam edersiniz. Açısal, daha sonra (statik olarak veya web sunucusuna yapılan çağrılar yoluyla) doldurabileceğiniz bir $ kapsam işleyicisi sağlar.
Bu veri bağlama konusunda iyi bir anlayıştır. Bence bunu indirdin.
DOM Manipülasyonu
Veri manipülasyonu içermeyen basit DOM manipülasyonu için (örn: fareyle üzerine gelindiğinde renk değişiklikleri, tıklandığında öğeleri gizleme / gösterme), jQuery veya eski okul js yeterli ve temizdir. Bu, açısalın mvc'sindeki modelin sayfadaki verileri yansıtan herhangi bir şey olduğunu varsayar ve bu nedenle renk, görüntüleme / gizleme vb. Değişiklikler gibi css özellikleri modeli etkilemez.
Burada "basit" DOM manipülasyonunun daha temiz olduğunu, ancak nadiren ve gerçekten "basit" olması gerektiğine dair fikrinizi görebiliyorum. Bence DOM manipülasyonu, tıpkı veri bağlama gibi, Angular'ın gerçekten parladığı alanlardan biri. Bunu anlamak, Angular'ın görüşlerini nasıl değerlendirdiğini görmenize de yardımcı olacaktır.
Açısal yolu DOM manipülasyonuna vanilya js yaklaşımıyla karşılaştırarak başlayacağım. Geleneksel olarak, HTML'yi hiçbir şey "yapmamak" olarak düşünüyor ve böyle yazıyoruz. Bu nedenle, "onclick" gibi satır içi j'ler kötü uygulamalardır çünkü "yapmayı" HTML bağlamında "yapmazlar". Açısal bu kavramı kafasına çevirir. Görüşünüzü yazarken, HTML'nin birçok şeyi "yapabildiğini" düşünüyorsunuz. Bu yetenek açısal direktiflerden soyutlanır, ancak zaten mevcutsa veya bunları yazdıysanız, "nasıl" yapıldığını düşünmeniz gerekmez, sadece bu "artırılmış" HTML'de size sunulan gücü kullanırsınız. açısal kullanmanıza izin verir. Bu aynı zamanda TÜM görünüm mantığınızın gerçekten görünümde bulunduğunu, javascript dosyalarınızda değil. Yine, akıl yürütme, javascript dosyalarınızda yazılan direktiflerin HTML yeteneğini artırdığı düşünülebilir, böylece DOM'un kendisini manipüle etme konusunda endişelenmenize izin verirsiniz (tabiri caizse). Basit bir örnekle göstereceğim.
Bu kullanmak istediğimiz biçimlendirmedir. Sezgisel bir isim verdim.
<div rotate-on-click="45"></div>
İlk olarak, HTML'ye bu işlevselliği özel bir Açısal Yönerge ile verdiysek , zaten bittiğimizi yorumlamak isterim . Bu temiz bir nefes. Birazdan daha fazlası.
JQuery ile uygulama
canlı demo burada (tıklayın).
function rotate(deg, elem) {
$(elem).css({
webkitTransform: 'rotate('+deg+'deg)',
mozTransform: 'rotate('+deg+'deg)',
msTransform: 'rotate('+deg+'deg)',
oTransform: 'rotate('+deg+'deg)',
transform: 'rotate('+deg+'deg)'
});
}
function addRotateOnClick($elems) {
$elems.each(function(i, elem) {
var deg = 0;
$(elem).click(function() {
deg+= parseInt($(this).attr('rotate-on-click'), 10);
rotate(deg, this);
});
});
}
addRotateOnClick($('[rotate-on-click]'));
Açısal ile Uygulama
canlı demo burada (tıklayın).
app.directive('rotateOnClick', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var deg = 0;
element.bind('click', function() {
deg+= parseInt(attrs.rotateOnClick, 10);
element.css({
webkitTransform: 'rotate('+deg+'deg)',
mozTransform: 'rotate('+deg+'deg)',
msTransform: 'rotate('+deg+'deg)',
oTransform: 'rotate('+deg+'deg)',
transform: 'rotate('+deg+'deg)'
});
});
}
};
});
Oldukça hafif, ÇOK temiz ve bu sadece basit bir manipülasyon! Bence açısal yaklaşım her açıdan kazanıyor, özellikle işlevselliğin nasıl soyutlandığı ve dom manipülasyonunun DOM'da bildirildiği. İşlev, bir html özniteliği ile öğeye bağlanır, bu nedenle DOM'yi bir seçici aracılığıyla sorgulamaya gerek yoktur ve iki güzel kapanışımız var - değişkenlerin direktifin tüm kullanımları arasında paylaşıldığı yönerge fabrikası için bir kapak ve linkfonksiyondaki (veya compilefonksiyondaki) direktifin her kullanımı için bir kapak .
İki yönlü veri bağlama ve DOM manipülasyonu için yönergeler, Angular'ı müthiş kılan şeyin sadece başlangıcıdır. Açısal, tüm kodların modüler, yeniden kullanılabilir ve kolayca test edilebilir olmasını sağlar ve ayrıca tek sayfalık bir uygulama yönlendirme sistemi içerir. JQuery'nin yaygın olarak ihtiyaç duyulan kolaylık / tarayıcılar arası yöntemlerin bir kütüphanesi olduğunu, ancak Angular'ın tek sayfa uygulamaları oluşturmak için tam özellikli bir çerçeve olduğunu belirtmek önemlidir . Açısal komut dosyası, jQuery'nin kendi "lite" sürümünü içerir, böylece en temel yöntemlerden bazıları kullanılabilir. Bu nedenle, Angular IS'yi jQuery (hafifçe) kullanarak kullanmanın, ancak Angular'ın uygulama oluşturma sürecinde size yardımcı olmak için çok daha fazla "büyü" sağladığını iddia edebilirsiniz.
Bu, daha fazla ilgili bilgi için harika bir gönderi: Bir jQuery arka planım varsa “AngularJS'de nasıl düşünürüm”?
Genel farklılıklar.
Yukarıdaki hususlar OP'nin özel kaygılarını hedeflemektedir. Ayrıca diğer önemli farklılıklara bir genel bakış sunacağım. Her konu hakkında da ek okuma yapmanızı öneririm.
Açısal ve jQuery makul şekilde karşılaştırılamaz.
Açısal bir çerçeve, jQuery bir kütüphanedir. Çerçevelerin yeri ve kütüphanelerin yeri vardır. Ancak, iyi bir çerçevenin bir uygulama yazma konusunda bir kütüphaneden daha fazla güce sahip olduğu sorusu yoktur. Tam olarak bir çerçevenin amacı budur. Kodunuzu düz JS'ye yazabilirsiniz veya ortak işlevler kitaplığına ekleyebilir veya çoğu şeyi gerçekleştirmek için ihtiyacınız olan kodu önemli ölçüde azaltmak için bir çerçeve ekleyebilirsiniz. Bu nedenle, daha uygun bir soru:
Neden bir çerçeve kullanılmalı?
İyi çerçeveler, modüler (bu nedenle yeniden kullanılabilir), KURU, okunabilir, performanslı ve güvenli olacak şekilde kodunuzu mimariye yardımcı olabilir. jQuery bir çerçeve değildir, bu nedenle bu konularda yardımcı olmaz. Hepimiz jQuery spagetti kodunun tipik duvarlarını gördük. Bu jQuery'nin hatası değil - kodun nasıl mimarileceğini bilmeyen geliştiricilerin hatası. Ancak, geliştiriciler kodu nasıl mimar yapılacağını bilselerdi, bir an önce tartıştığım temeli (mimarlık, vb.) Sağlamak için bir tür minimal "çerçeve" yazacaklardı ya da bir şey ekleyeceklerdi. Örneğin, iyi kod yazma çerçevenizin bir parçası olarak RequireJS ekleyebilir.
İşte modern çerçevelerin sağladığı bazı şeyler:
- şablonu
- Bağlanma verileri
- yönlendirme (tek sayfa uygulaması)
- temiz, modüler, yeniden kullanılabilir mimari
- güvenlik
- kolaylık sağlamak için ek işlevler / özellikler
Angular'ı daha fazla tartışmadan önce, Angular'ın türünün tek olmadığını belirtmek isterim. Örneğin Durandal, jQuery, Knockout ve RequireJS üzerine kurulmuş bir çerçevedir. Yine, jQuery, kendi başına Nakavt, RequireJS ve bunların üzerine inşa edilmiş tüm çerçeveyi sağlayamaz. Karşılaştırılamaz.
Bir gezegeni yok etmeniz gerekiyorsa ve bir Ölüm Yıldızınız varsa, Ölüm yıldızını kullanın.
Açısal (tekrar ziyaret edilir).
Çerçevelerin sağladığı şeylerle ilgili önceki noktalarıma dayanarak, Angular'ın onlara sağladığı şekli övmek ve bunun neden sadece jQuery'den daha üstün olduğunu açıklığa kavuşturmak istiyorum.
DOM referansı.
Yukarıdaki örneğimde, jQuery'nin işlevsellik sağlamak için DOM'a bağlanması kesinlikle kaçınılmazdır. Bu, görünümün (html) işlevsellikle (çünkü "görüntü kaydırıcısı" gibi bir tür tanımlayıcıyla etiketlendiği için) ve JavaScript'in bu işlevselliği sağlamakla ilgili olduğu anlamına gelir. Açısal bu kavramı soyutlama ile ortadan kaldırır. Açısal ile düzgün yazılmış kod, görünümün kendi davranışını bildirebileceği anlamına gelir. Bir saat görüntülemek istersem:
<clock></clock>
Bitti.
Evet, bir anlam ifade etmek için JavaScript'e gitmemiz gerekiyor, ancak bunu jQuery yaklaşımının tersi şekilde yapıyoruz. Açısal direktifimiz (kendi küçük dünyasındadır) html'yi "artırdı" ve html işlevselliği kendi içine bağladı.
MVW Architecure / Modüller / Bağımlılık Enjeksiyonu
Açısal kodunuzu yapılandırmanın kolay bir yolunu sunar. Görünüme (html) ait olan şeyleri görüntüleyin, artırılmış görünüm işlevselliği direktiflere, diğer mantık (ajax çağrıları gibi) ve işlevler hizmetlere aittir ve hizmet ve mantığın görünüme bağlantısı denetleyicilere aittir. Hizmetlerin yapılandırılması ve değiştirilmesi ile ilgilenmeye yardımcı olan başka açısal bileşenler de vardır. Oluşturduğunuz herhangi bir işlevsellik, uygulama boyunca Bağımlılık Enjeksiyonu ile ilgilenen Enjektör alt sistemi aracılığıyla ihtiyacınız olan her yerde otomatik olarak kullanılabilir. Bir uygulama (modül) yazarken, her biri kendi yeniden kullanılabilir bileşenlerine sahip diğer yeniden kullanılabilir modüllere bölerim ve sonra bunları daha büyük projeye dahil ederim. Angular ile ilgili bir sorunu çözdüğünüzde, Gelecekte yeniden kullanım için kullanışlı ve yapılandırılmış bir şekilde otomatik olarak çözdü ve bir sonraki projeye kolayca dahil edildi. birTüm bunlar için BÜYÜK bonus kodunuzun test edilmesi çok daha kolay olacaktır.
Angular'da işlerin "işe yaraması" kolay değildir.
TEŞEKKÜRLER. Yukarıda zikredilen jQuery spagetti kodu, bir şeyin "işe yaramasını" sağlayan ve daha sonra devam eden bir geliştiriciden kaynaklanmıştır. Kötü Açısal kod yazabilirsiniz, ancak bunu yapmak çok daha zordur, çünkü Angular sizinle bu konuda savaşacaktır. Bu, sağladığı temiz mimariden (en azından bir şekilde) yararlanmanız gerektiği anlamına gelir. Başka bir deyişle, Angular ile kötü kod yazmak daha zordur, ancak temiz kod yazmak daha uygundur.
Açısal mükemmel olmaktan uzaktır. Web geliştirme dünyası her zaman büyüyor ve değişiyor ve sorunları çözmek için yeni ve daha iyi yollar var. Örneğin Facebook'un React ve Flux'un Angular'a göre bazı büyük avantajları var, ancak kendi dezavantajları var. Hiçbir şey mükemmel değil, ama Angular şimdilik harika ve hala harika. Nasıl jQuery bir kez web dünyasının ilerlemesine yardımcı olduğu gibi, Açısal da öyle ve birçokları gelecek.