JavaScript Kodlama Standartları
Drupal sayfaları her zaman baştan yüklenmiyor — bir AJAX isteği sayfanın sadece bir kısmını değiştirip geri kalanına dokunmayabiliyor — bu yüzden Drupal'ın JavaScript standartları büyük ölçüde, bir markup parçası sayfaya nasıl gelmiş olursa olsun davranışların doğru şekilde bağlanmasını sağlamak için var.
1. Drupal.behaviors
Sayfa yüklendiğinde bir kez çalışan kod yerine, Drupal JavaScript'i behavior'lar halinde organize edilir: Drupal'ın ilk sayfa yüklemesinde ve her AJAX güncellemesinden sonra tekrar çağırdığı, o an değişen DOM'un ilgili kısmını (context) parametre olarak alan bir attach() method'u olan nesneler.
Drupal.behaviors.productImportStatus = {
attach(context, settings) {
// Sayfa yüklemesinde ve her AJAX ile eklenen parçada tekrar çalışır.
},
};2. once()
attach() çakışan markup üzerinde birden fazla kez çalışabildiği için, aynı element üzerinde iki kez çalışmaması gereken kod, element seçimini once() içine sarar; bu fonksiyon yalnızca o belirli çağrı noktası tarafından daha önce işlenmemiş elementleri döndürür.
// ❌ Yanlış: her AJAX kısmi yeniden oluşturmada tekrar çalışır.
Drupal.behaviors.example = {
attach(context) {
context.querySelectorAll('.my-element').forEach((element) => {
element.addEventListener('click', handleClick);
});
},
};
// ✅ Doğru: once() aynı elementte iki kez çalışmasını engeller.
Drupal.behaviors.example = {
attach(context) {
once('example', '.my-element', context).forEach((element) => {
element.addEventListener('click', handleClick);
});
},
};once()'a verilen ilk argüman, o çağrı noktasına özgü bir ID'dir — bu da iki farklı behavior'ın aynı elementi birbirine karışmadan, bağımsız olarak işleyebilmesini sağlar.
3. drupalSettings
PHP'nin JavaScript'e aktarması gereken veri — bir API endpoint'i, bir modülün konfigürasyonu, sunucu tarafında hesaplanmış bir durum — global bir değişkene yazmak ya da markup'a doğrudan gömmek yerine drupalSettings'e eklenir.
$build['#attached']['drupalSettings']['productImport']['apiEndpoint'] = $endpoint;Drupal.behaviors.productImport = {
attach(context, settings) {
fetch(settings.productImport.apiEndpoint);
},
};4. Güncel Sözdizimi
Drupal'ın JavaScript standartları ES6 ve üzeri üzerine kurulu: var yerine let ve const, this'in yeniden bağlanmasına gerek olmayan yerlerde arrow fonksiyonlar ve string birleştirme yerine template literal'ler. Varsayılan olarak const kullanılır; let'e yalnızca bir değişkenin gerçekten yeniden atanması gerektiğinde başvurulur.
// ❌ Yanlış: var, ve string birleştirme.
var message = 'Imported ' + count + ' products.';
// ✅ Doğru: const, ve bir template literal.
const message = `Imported ${count} products.`;5. Biçimlendirme
Girinti 2 boşluk, ifadeler noktalı virgülle biter ve string'ler, içinde tek tırnak geçmediği sürece tek tırnak kullanır. Dosyalar, PHP'de olduğu gibi tek bir sondaki yeni satırla biter.
// ❌ Yanlış.
function greet(name){
return "Hello, "+name
}
// ✅ Doğru.
function greet(name) {
return `Hello, ${name}`;
}6. ESLint
Drupal core, yukarıdakilerin hepsini kapsayan bir ESLint konfigürasyonuyla birlikte gelir; bunu lokal olarak çalıştırmak — ya da bir editöre bağlamak — PHP_CodeSniffer'ın PHP için yaptığı gibi bunların çoğunu otomatik olarak yakalar. Kuralları anlamanın yerine geçmez, ama her commit'te hiçbirinin elle kontrol edilmesine gerek bırakmaz.