onClick()HTML gibi JavaScript etkinliklerini kullanmanın kötü bir uygulama olduğunu birçok kez duydum , çünkü anlambilim için iyi değil. Olumsuz yönlerin ne olduğunu ve aşağıdaki kodu nasıl düzelteceğimi bilmek isterim?

<a href="#" onclick="popup('/map/', 300, 300, 'map'); return false;">link</a>

Muhtemelen şuna benzeyen göze batmayan Javascript'ten bahsediyorsunuz :

<a href="#" id="someLink">link</a>

aşağıdaki gibi görünen merkezi bir javascript dosyasındaki mantıkla:

$('#someLink').click(function(){
    popup('/map/', 300, 300, 'map'); 
    return false;
});

Avantajlar

• davranış (Javascript) sunumdan (HTML) ayrılmıştır
• dillerin karıştırılması yok
• sizin için tarayıcılar arası sorunların çoğunu çözebilecek jQuery gibi bir javascript çerçevesi kullanıyorsunuz
• Aynı anda birçok HTML öğesine, kod kopyası olmadan davranış ekleyebilirsiniz

JQuery kullanıyorsanız:

HTML:

 <a id="openMap" href="/map/">link</a>

JS:

$(document).ready(function() {
    $("#openMap").click(function(){
        popup('/map/', 300, 300, 'map');
        return false;
    });
});

Bu, hala JS olmadan çalışma avantajına sahiptir veya kullanıcı bağlantıya orta tıklarsa.

Aynı zamanda, genel pop-up'ları şuna yeniden yazarak işleyebileceğim anlamına da geliyor:

HTML:

 <a class="popup" href="/map/">link</a>

JS:

$(document).ready(function() {
    $(".popup").click(function(){
        popup($(this).attr("href"), 300, 300, 'map');
        return false;
    });
});

Bu, herhangi bir bağlantıya sadece pop-up sınıfı vererek bir pop-up eklemenize izin verir.

Bu fikir şu şekilde daha da genişletilebilir:

HTML:

 <a class="popup" data-width="300" data-height="300" href="/map/">link</a>

JS:

$(document).ready(function() {
    $(".popup").click(function(){
        popup($(this).attr("href"), $(this).data('width'), $(this).data('height'), 'map');
        return false;
    });
});

Artık sitemin tamamında birçok pop-up için aynı kod parçasını onclick ile bir sürü şey yazmak zorunda kalmadan kullanabilirim! Yeniden kullanılabilirlik için Yaş!

Ayrıca, daha sonra pop-up'ların kötü bir uygulama olduğuna (ki bunlar!) Ve onları bir ışık kutusu tarzı kalıcı pencereyle değiştirmek istediğime karar verirsem, değiştirebileceğim anlamına gelir:

popup($(this).attr("href"), $(this).data('width'), $(this).data('height'), 'map');

için

myAmazingModalWindow($(this).attr("href"), $(this).data('width'), $(this).data('height'), 'map');

ve tüm sitemdeki tüm açılır pencerelerim artık tamamen farklı çalışıyor. Bir pop-up'ta ne yapılacağına karar vermek için özellik algılaması yapabilir veya onlara izin verip vermeme tercihlerini saklayabilirim. Satır içi onclick ile bu, büyük bir kopyalama ve yapıştırma çabası gerektirir.

Çok büyük JavaScript uygulamalarında, programcılar küresel kapsamı kirletmekten kaçınmak için daha fazla kod kapsülleme kullanıyor. Ve bir HTML öğesindeki onClick eylemine bir işlev sunmak için, genel kapsamda olması gerekir.

Buna benzeyen JS dosyaları görmüş olabilirsiniz ...

(function(){
    ...[some code]
}());

Bunlar Anında Çağrılan İşlev İfadeleridir (IIFE'ler) ve bunların içinde bildirilen herhangi bir işlev yalnızca kendi iç kapsamları içinde var olacaktır.

Bir function doSomething(){}IIFE içinde beyan ederseniz, ardından doSomething()HTML sayfanızda bir öğenin onClick eylemini yaparsanız, bir hata alırsınız.

Öte yandan, o IIFE içinde bu öğe için bir olay listesi oluşturur doSomething()ve dinleyici bir tıklama olayı algıladığında çağırırsanız , dinleyici ve doSomething()IIFE'nin kapsamını paylaştığı için iyi olursunuz.

Minimum miktarda kod içeren küçük web uygulamaları için önemli değil. Ancak büyük, sürdürülebilir kod tabanları yazmak onclick=""istiyorsanız, kaçınmak için çalışmanız gereken bir alışkanlıktır.

Birkaç nedenden dolayı iyi değil:

• kodu ve işaretlemeyi karıştırır
• bu şekilde yazılan kod geçer eval
• ve küresel kapsamda çalışır

En basit şey, öğenize bir nameöznitelik eklemektir <a>, sonra şunları yapabilirsiniz:

document.myelement.onclick = function() {
    window.popup('/map/', 300, 300, 'map');
    return false;
};

modern en iyi uygulama id, bir ad yerine bir kullanmak ve kullanmak addEventListener()yerine kullanmak olabilir, onclickçünkü bu, birden çok işlevi tek bir olaya bağlamanıza olanak tanır.

Bir kaç neden var:

1. Bunun, işaretlemeyi, yani HTML ve istemci tarafı komut dosyalarını ayırmaya yardımcı olduğunu düşünüyorum. Örneğin, jQuery , programlı bir şekilde olay işleyicileri eklemeyi kolaylaştırır.

2. Verdiğiniz örnek, javascript'i desteklemeyen veya javascript kapalı olan herhangi bir kullanıcı aracısında çalışmayacaktır. Aşamalı geliştirme kavramı, /map/javascript içermeyen kullanıcı aracıları için basit bir köprüyü teşvik eder , ardından javascript'i destekleyen kullanıcı aracıları için prgramatik olarak bir tıklama işleyici ekler.

Örneğin:

İşaretleme:

<a id="example" href="/map/">link</a>

JavaScript:

$(document).ready(function(){

    $("#example").click(function(){
        popup('/map/', 300, 300, 'map');
        return false;
    });

})

Revizyon

Göze çarpmayan JavaScript yaklaşımı GEÇMİŞ'te iyiydi - özellikle HTML'deki olay işleyici bağlama kötü uygulama olarak görülüyordu (esas onclick events run in the global scope and may cause unexpected errorolarak YiddishNinja tarafından bahsedildiği için )

Ancak...

Şu anda görünen o ki bu yaklaşım biraz modası geçmiş ve biraz güncelleme gerektiriyor. Birisi profesyonel önyüzü developper olmak istiyorum ve o çerçeveler genellikle kullanılması (veya kullanılmaması izin verin) Ancak bu ... vb açısal, Vue.js gibi çerçeveler kullanmak gerekir sonra büyük ve komplike uygulamalar yazarsan HTML şablonları olay işleyicileri bağlamak nerede doğrudan html şablon kodunda ve bu çok kullanışlı, açık ve etkilidir - örneğin açısal şablonda genellikle insanlar şunları yazar:

<button (click)="someAction()">Click Me</button> 

Ham js / html'de bunun eşdeğeri olacaktır

<button onclick="someAction()">Click Me</button>

Aradaki fark, ham js'de onclick olayının genel kapsamda çalıştırılmasıdır - ancak çerçeveler kapsülleme sağlar.

Peki sorun nedir?

Sorun şu ki, html-onclick'in kötü olduğunu her zaman duyan ve her zaman kullanan acemi programcı btn.addEventListener("onclick", ... ), şablonlarla bazı frameworkler kullanmak istediğinde ( addEventListeneraynı zamanda dezavantajları da vardır - DOM'u dinamik bir şekilde güncellersek innerHTML=(ki bu oldukça hızlıdır ) - o zaman olayları kaybediyoruz işleyiciler bu şekilde bağlanır). Sonra kötü alışkanlıklar veya çerçeve kullanımına yanlış yaklaşım gibi bir şeyle karşı karşıya kalacak - ve çerçeveyi çok kötü bir şekilde kullanacak - çünkü esas olarak js kısmına odaklanacak ve şablon kısmına odaklanmayacak (ve net olmayan ve sürdürmesi zor olan kodu). Bu alışkanlıkları değiştirmek için çok zaman kaybedecek (ve muhtemelen biraz şansa ve öğretmene ihtiyacı olacak).

Bu yüzden, bence öğrencilerimle edindiğim deneyime dayanarak, başlangıçta html-handlers-bind kullansalar onlar için daha iyi olurdu. Dediğim gibi, işleyicilerin küresel kapsamda çağrıldığı doğrudur, ancak bu aşamada öğrenciler genellikle kontrolü kolay küçük uygulamalar oluştururlar. Daha büyük uygulamalar yazmak için bazı çerçeveler seçerler.

Peki ne yapmalı?

Unobtrusive JavaScript yaklaşımını GÜNCELLEME ve html'de (ancak yalnızca bağlama işleyicisi - mantığı OP quesiton'daki gibi onclick'e koymayın) bağlama olay işleyicilerine (sonunda basit parametrelerle) izin verebiliriz. Yani bence ham js / html'de buna izin verilmeli

<button onclick="someAction(3)">Click Me</button>

veya

function popup(num,str,event) {
   let re=new RegExp(str);  
   // ... 
   event.preventDefault();
   console.log("link was clicked");
}

<a href="https://example.com" onclick="popup(300,'map',event)">link</a>

Ancak aşağıdaki örneklere izin VERİLMEMELİDİR

<button onclick="console.log('xx'); someAction(); return true">Click Me</button>

<a href="#" onclick="popup('/map/', 300, 300, 'map'); return false;">link</a>

Gerçek değişir, bakış açımız da değişmeli

Bu , " Unobtrusive JavaScript " adlı yeni bir paradigma . Mevcut "web standardı", işlevselliği ve sunumu ayırmayı söylüyor.

Bu gerçekten "kötü bir uygulama" değil, sadece çoğu yeni standart, sıralı JavaScript yerine olay dinleyicileri kullanmanızı istiyor.

Ayrıca, bu sadece kişisel bir şey olabilir, ancak özellikle çalıştırmak istediğiniz birden fazla JavaScript ifadeniz varsa, olay dinleyicilerini kullandığınızda okumanın çok daha kolay olduğunu düşünüyorum.

Sorunuz tartışmayı tetikleyecektir sanırım. Genel fikir, davranış ve yapıyı ayırmanın iyi olduğudur. Ayrıca, afaik, bir satır içi tıklama işleyicisinin evalgerçek bir javascript işlevi "haline" gelmesi gerekir. Ve oldukça eski moda, her ne kadar bu oldukça titrek bir argüman olsa da. Ah, bunun hakkında biraz okuyun @ quirksmode.org

• onclick olayları genel kapsamda çalışır ve beklenmeyen hatalara neden olabilir.
• Birçok DOM öğesine onclick olayları eklemek,
  performansı ve verimliliği yavaşlatacaktır .

Satır içi işleyicileri kullanmamak için iki neden daha:

Sıkıcı alıntılardan kaçan sorunlara ihtiyaç duyabilirler

Bir göz önüne alındığında keyfi genel çözüm için, bu dize ile bir işlevini çağıran bir satır içi işleyicisi inşa edebilmek istiyorsanız, dize, kaçmak gerekecek niteliği (ilişkili HTML varlığı ile) ayraçları, ve sen olacak aşağıdaki gibi, öznitelik içindeki dize için kullanılan sınırlayıcıdan kaçış gerekir:

const str = prompt('What string to display on click?', 'foo\'"bar');
const escapedStr = str
  // since the attribute value is going to be using " delimiters,
  // replace "s with their corresponding HTML entity:
  .replace(/"/g, '"')
  // since the string literal inside the attribute is going to delimited with 's,
  // escape 's:
  .replace(/'/g, "\\'");
  
document.body.insertAdjacentHTML(
  'beforeend',
  '<button onclick="alert(\'' + escapedStr + '\')">click</button>'
);

Bu inanılmaz derecede çirkin. Yukarıdaki örnekten, 's'yi değiştirmediyseniz, alert('foo'"bar')sözdizimi geçerli olmadığı için bir SyntaxError oluşacaktır . URL'leri değiştirmediyseniz, "tarayıcı bunu onclicközniteliğin sonu olarak yorumlar (ile sınırlandırılmış" yukarıdaki s ) ve bu da yanlış olur.

Bir alışkanlıkla satır içi işleyicileri kullanıyorsa, bir yukarıda benzer bir şey yapmak hatırlamak emin olun (ve bunu yapmak zorunda kalacak sağ ) her zaman bir bakışta anlamak sıkıcı ve zor. Satır içi işleyicilerden tamamen kaçınmak daha iyidir, böylece rasgele dizge basit bir kapanışta kullanılabilir:

const str = prompt('What string to display on click?', 'foo\'"bar');
const button = document.body.appendChild(document.createElement('button'));
button.textContent = 'click';
button.onclick = () => alert(str);

Bu çok daha hoş değil mi?

Bir satır içi işleyicinin kapsam zinciri son derece tuhaftır

Aşağıdaki kodun günlüğe kaydedeceğini düşünüyorsunuz?

let disabled = true;

<form>
  <button onclick="console.log(disabled);">click</button>
</form>

Deneyin, parçacığı çalıştırın. Muhtemelen beklediğiniz gibi değil. Yaptığı şeyi neden üretir? Çünkü satır içi işleyiciler withbloklar içinde çalışır . Yukarıdaki kod üç with blok içindedir : biri için document, biri için <form>ve biri için <button>:

let disabled = true;

<form>
  <button onclick="console.log(disabled);">click</button>
</form>

Yana disableddüğmeye özelliktir, başvuru disabledsatır içi işleyicisi içinde düğmenin mülkiyet değil, dış atıfta disableddeğişken. Bu oldukça mantıksız. withbirçok sorunu vardır: kafa karıştırıcı hataların kaynağı olabilir ve kodu önemli ölçüde yavaşlatır. Katı modda bile buna izin verilmez. Ancak satır içi işleyicilerle, kodu yalnızca bir tane değil, birden çok iç içe geçmiş URL aracılığıyla çalıştırmak zorunda kalırsınız . Bu delilik.withwithwith

withasla kodda kullanılmamalıdır. Satır içi işleyiciler withtüm kafa karıştırıcı davranışlarının yanı sıra örtük olarak gerektirdiğinden , satır içi işleyicilerden de kaçınılmalıdır.