AngularJS Eğitimi: Özel Direktiflerin Gizemini Giderme

JavaScript'in tam bir yığın dili olarak hızlı büyümesiyle birlikte, web tarayıcısının veri bağlama, veri görünümlerini yönetme, verileri dönüştürme ve diğer birçok hizmet gibi daha fazla UI işlemesini işlemesini sağlayan çerçeveler giderek daha fazla kullanılıyor. En yetenekli, genişletilebilir ve popüler çerçevelerden biri AngularJS'dir ve AngularJS çerçevesinin en kullanışlı bileşenlerinden biri de yönerge adı verilen bir şeydir. AngularJS birçok faydalı direktif sağlar ve daha da önemlisi özel direktifler oluşturmak için zengin bir çerçeve sağlar.

direktif nedir? Basitçe söylemek gerekirse, yönergeler, HTML DOM öğelerini değiştiren ve bunlara davranış ekleyen JavaScript işlevleridir. Yönergeler çok basit veya aşırı karmaşık olabilir. Bu nedenle, onları manipüle eden birçok seçenek ve işlev hakkında sağlam bir kavrayış elde etmek çok önemlidir.

Bu öğreticide, bir yönerge olarak yürütülen ve DOM'a uygulanan dört işlev incelenecek ve örnekler verilecektir. Bu gönderi, AngularJS ve özel yönergelere biraz aşinalık olduğunu varsayar. Angular'da daha yeniyseniz, ilk AngularJS uygulamanızı oluşturmaya yönelik bir eğitimin keyfini çıkarabilirsiniz.

AngularJS Yönergesi Yaşam Döngüsünün Dört İşlevi

Konfigüre edilebilecek birçok seçenek vardır ve bu seçeneklerin birbirleriyle nasıl ilişkili olduğu önemlidir. AngularJS, DOM'u derleyip birbirine bağladıkça, her yönerge bir yaşam döngüsüne benzer bir süreçten geçer. Yönerge yaşam döngüsü, sayfa oluşturulmadan önce AngularJS önyükleme işlemi içinde başlar ve biter. Bir yönergenin yaşam döngüsünde, tanımlanmış olmaları durumunda yürütülebilecek dört farklı işlev vardır. Her biri, geliştiricinin yönergeyi yaşam döngüsünün farklı noktalarında kontrol etmesini ve özelleştirmesini sağlar.

Dört işlev şunlardır: derleme , denetleyici , ön bağlantı ve Bağlantı sonrası .

Derleme işlevi, yönergenin DOM'u derlenmeden ve bağlanmadan önce işlemesine ve böylece yönergeleri eklemesine/kaldırmasına/değiştirmesine ve ayrıca diğer DOM öğelerini eklemesine/kaldırmasına/değiştirmesine izin verir.

Denetleyici işlevi, yönlendirici iletişimi kolaylaştırır. Kardeş ve çocuk direktifleri, kardeşlerinin ve ebeveynlerinin denetleyicisinden bilgi iletmesini talep edebilir.

Ön bağlantı işlevi, bağlantı sonrası süreç başlamadan önce özel $ kapsam manipülasyonuna izin verir.

Bağlantı sonrası yöntemi, direktifin birincil işgücü yöntemidir.

Yönergede, derleme sonrası DOM manipülasyonu gerçekleşir, olay işleyicileri yapılandırılır ve saatler ve diğer şeyler de öyle. Direktifin bildirgesinde dört fonksiyon bu şekilde tanımlanmıştır.

 .directive("directiveName",function () { return { controller: function() { // controller code here... }, compile: { // compile code here... return { pre: function() { // pre-link code here... }, post: function() { // post-link code here... } }; } } })

Genellikle, tüm işlevlere ihtiyaç duyulmaz. Çoğu durumda, geliştiriciler aşağıdaki modeli izleyerek basitçe bir denetleyici ve bağlantı sonrası işlevi oluşturacaktır.

 .directive("directiveName",function () { return { controller: function() { // controller code here... }, link: function() { // post-link code here... } } })

Bu yapılandırmada bağlantı, bağlantı sonrası işlevi ifade eder.

İşlevlerin tümü veya bir kısmı tanımlanmış olsun, yürütme sıraları, özellikle de AngularJS uygulamasının geri kalanına göre yürütülmesi önemlidir.

AngularJS Yönergesi Diğer Yönergelere Göre İşlev Yürütme

HTML parçasına parentDir , childDir ve grandChildDir yönergelerinin uygulandığı aşağıdaki HTML parçacığını göz önünde bulundurun.

 <div parentDir> <div childDir> <div grandChildDir> </div> </div> </div>

Bir direktif içindeki ve diğer direktiflere göre fonksiyonların yürütme sırası aşağıdaki gibidir:

• Derleme Aşaması
  • Derleme İşlevi : parentDir
  • Derleme İşlevi : childDir
  • Derleme İşlevi : grandChildDir
• Kontrolör ve Bağlantı Öncesi Aşama
  • Denetleyici İşlevi : parentDir
  • Ön Bağlantı İşlevi : parentDir
  • Denetleyici İşlevi : childDir
  • Ön Bağlantı İşlevi : childDir
  • Denetleyici İşlevi : grandChildDir
  • Ön Bağlantı İşlevi : grandChildDir
• Bağlantı Sonrası Aşama
  • Bağlantı Sonrası İşlev : grandChildDir
  • Bağlantı Sonrası İşlev : childDir
  • Bağlantı Sonrası İşlev : parentDir

AngularJS Yönergesi İşlev Açıklaması: Derin Dalış

Derleme aşaması önce gerçekleşir. Esasen derleme aşaması, olay dinleyicilerini DOM öğelerine ekler. Örneğin, belirli bir DOM öğesi bir $scope özelliğine bağlıysa, DOM öğesine $ scope özelliğinin değeriyle güncellenmesine izin veren olay dinleyicisi uygulanır. Derleme süreci, AngularJS uygulamasının önyüklendiği kök DOM öğesiyle başlar ve DOM'nin dallarında derinlik öncelikli bir geçiş kullanarak aşağı doğru ilerler, önce bir üst öğeyi, ardından alt öğelerini yaprak düğümlerine kadar derler.

Derleme tamamlandıktan sonra, direktifler artık DOM'a eklenemez veya DOM'den kaldırılamaz (bunun doğrudan derleme servisi kullanılarak yapılmasının bir yolu olmasına rağmen. Bir sonraki aşama, tüm direktifler için kontrolörlerin ve ön bağlantı fonksiyonlarının çağrılmasıdır. çağrılırsa, $scope kullanılabilir ve kullanılabilir.Denetleyiciye enjekte edilen $element , derlenmiş şablonu içerir, ancak dönüştürülen alt içeriği içermez (dönüştürülmüş içerik, yönergenin bulunduğu başlangıç ​​ve bitiş HTML etiketleri arasındaki içeriktir. Tanım olarak, bir MVC modelindeki kontrolörler, modeli basitçe görünüme geçirir ve olayları işlemek için fonksiyonları tanımlar.Bu nedenle, bir direktifin kontrolörü, direktifin DOM'sini iki nedenden dolayı değiştirmemelidir: amacını ihlal eder. denetleyici ve aktarılan alt içerik DOM'a eklenmedi. Peki bir denetleyici $ kapsamını değiştirmenin ötesinde ne yapar? Denetleyici alt yönergelerin iletişim kurmasına izin verir ebeveyn yönergeleri. Denetleyici işlevinin kendisi, çocuk yönergesi isterse, alt yönergenin bağlantı sonrası işlevine iletilecek olan bir denetleyici nesnesi olarak düşünülmelidir. Bu nedenle, denetleyici tipik olarak, kardeşi ve alt yönergeleri tarafından kullanılabilecek özelliklere ve yöntemlere sahip bir nesne oluşturarak yönerge iletişimini kolaylaştırmak için kullanılır. Ana yönerge, bir alt yönergenin denetleyicisini gerektirip gerektirmediğini belirleyemez, bu nedenle bu yöntemde kodu, alt yönergeler tarafından güvenle kullanılabilecek işlevler ve özelliklerle sınırlamak en iyisidir.

Denetleyici işlevinden sonra ön bağlantı işlevi yürütülür. Ön bağlantı işlevi birçok insan için gizemlidir. İnternetteki ve kitaplardaki belgelerin çoğunu okursanız, insanlar bu işlevin yalnızca nadir durumlarda kullanıldığını ve insanların buna neredeyse hiç ihtiyaç duymayacağını yazarlar. Aynı açıklamalar daha sonra kullanılabilecek bir duruma örnek vermekte başarısız olur.

Ön bağlantı işlevi gerçekten hiç de karmaşık değil. İlk olarak, AngularJS kaynak kodunu incelerseniz ön bağlantı işlevinin mükemmel bir örneğini bulacaksınız: ng-init yönergesi bunu kullanır. Niye ya? $scope içeren özel kodu yürütmek için harika bir yöntemdir; kardeş ve çocuk yönergeleri tarafından çağrılamayan kod. Denetleyici işlevinden farklı olarak, ön bağlantı işlevi yönergelere aktarılmaz. Bu nedenle, yönergesinin $ kapsamını değiştiren kodu yürütmek için kullanılabilir. ng-init yönergesi tam olarak bunu yapar. ng-init için ön bağlantı işlevi yürütüldüğünde, yönergenin $ kapsamına karşı yönergeye iletilen JavaScript'i yürütür. Yürütmenin sonucu, denetleyici, bağlantı öncesi ve bağlantı sonrası işlev yürütmeleri sırasında alt yönergelere $scope'un prototip kalıtımı yoluyla, ancak ebeveynin ön- bağlantı işlevi. Ayrıca, yönergenin gizli tutmak istediği $scope ile ilgili olmayan başka kodları da yürütmesi gerekebilir.

Bazı deneyimli AngularJS geliştiricileri, bu özel kodun hala denetleyiciye yerleştirilebileceğini ve daha sonra alt yönergeler tarafından çağrılmadığını söyleyecektir. Yönerge yalnızca onu kodlayan orijinal geliştirici tarafından kullanılacaksa, ancak yönerge diğer geliştiriciler tarafından dağıtılacak ve yeniden kullanılacaksa, bu argüman doğru olacaktır, o zaman ön bağlantı işlevinde özel kodu kapsüllemek çok faydalı olabilir. Geliştiriciler, yönergelerinin zaman içinde nasıl yeniden kullanılacağını asla bilemeyeceklerinden, özel kodun bir alt yönerge tarafından yürütülmesini önlemek, yönerge kodunun kapsüllenmesi için iyi bir yaklaşımdır. Direktif iletişim genel kodunu denetleyici işlevine ve özel kodu ön bağlantı işlevine yerleştirmenin iyi bir uygulama olduğunu düşünüyorum. Denetleyici gibi, ön bağlantı hiçbir zaman DOM manipülasyonu yapmamalı veya alt yönergelerin içeriği henüz bağlanmadığından, bir aktarma işlevi yürütmemelidir.

Her yönerge için, denetleyicisi ve ön bağlantı işlevi, alt yönergelerinin denetleyici ve ön bağlantı işlevinden önce yürütülür. Tüm yönergeler için denetleyici ve bağlantı öncesi aşaması tamamlandıktan sonra AngularJS, bağlantı aşamasına başlar ve her yönerge için bağlantı sonrası işlevleri yürütür. Bağlama aşaması, yaprak DOM düğümlerinden başlayarak ve kök DOM düğümüne kadar ilerleyerek derleme, denetleyici ve ön bağlantı yürütme akışlarının karşısında çalışır. Bağlantı sonrası DOM geçişi, çoğunlukla derinlik öncelikli bir yol izler. Her alt yönerge bağlantılı olduğu için, bağlantı sonrası işlevi yürütülür.

Bağlantı sonrası işlevi, özel AngularJS yönergelerinde en yaygın olarak uygulanan işlevdir. Bu fonksiyonda, neredeyse makul olan her şey yapılabilir. DOM manipüle edilebilir (yalnızca kendisi ve alt öğeler için), $scope kullanılabilir, üst yönergeler için denetleyici nesnesi kullanılabilir, aktarma işlevleri çalıştırılabilir, vb. Ancak, birkaç sınırlama vardır. Derlenmeyecekleri için yeni yönergeler DOM'a eklenemez. Ayrıca, tüm DOM manipülasyonları, DOM işlevleri kullanılarak yapılmalıdır. DOM öğesindeki html işlevini çağırmak ve yeni HTML'yi aktarmak, derleme işlemi sırasında eklenen tüm olay işleyicilerini kaldıracaktır. Örneğin, bunlar beklendiği gibi çalışmayacaktır:

 element.html(element.html());

veya

 element.html(element.html() + "<div>new content</div>");

Kod, HTML'nin değişmesine neden olmaz, ancak DOM öğelerinin dize sürümünün yeniden atanması, derleme işlemi sırasında oluşturulan tüm olay işleyicilerini kaldırır. Tipik olarak, post-link işlevi olay işleyicileri, $watch es ve $observe s'yi bağlamak için kullanılır.

Bağlantı sonrası işlevlerin tümü yürütüldüğünde, derlenmiş ve bağlantılı DOM yapısına $ kapsamı uygulanır ve AngularJS sayfası canlanır.

Yönerge İşlev Tablosu

Burada her bir işlevin amacını, yürütüldüğünde nelerin mevcut olduğunu ve her bir işlevin uygun şekilde nasıl kullanılacağına ilişkin en iyi uygulamaları listeleyen tablo yer almaktadır.

Özet

AngularJS yönergeleriyle ilgili bu öğreticide, dört yönerge işlevinin her biri için amaç, yürütme sırası ve genel yetenekler ve kullanımlar hakkında bilgi edindik: compile , controller , pre-link ve post-link . Dört işlevden, denetleyici ve bağlantı sonrası en yaygın kullanılanlardır, ancak DOM üzerinde daha fazla denetime sahip olması gereken veya özel bir kapsam yürütme ortamına ihtiyaç duyan daha karmaşık yönergeler için derleme ve ön bağlantı işlevleri kullanılabilir.