Wie überzeuge ich meinen Chef (und andere Entwickler), unauffälliges JavaScript zu verwenden / in Betracht zu ziehen?

Ich bin ziemlich neu in unserem Entwicklerteam.

Ich brauche einige starke Argumente und / oder "Fallstricke" -Beispiele, damit mein Chef endlich die Vorteile von unauffälligem JavaScript versteht, sodass er und der Rest des Teams aufhören, Dinge wie diese zu tun:

<input type="button" class="bow-chicka-wow-wow" 
       onclick="send_some_ajax(); return false;" value="click me..." />

und

<script type="text/javascript">

function send_some_ajax()
{
  // bunch of code ... BUT using jQuery !!!
}
</script>

Ich schlug vor, ein ziemlich allgemeines Muster zu verwenden:

<button id="ajaxer" type="button">click me...</button>

und

<script type="text/javascript">

// since #ajaxer is also delivered via ajax, I bind events to document 
//  -> not the best practice but it's not the point....

$(document).on('click', '#ajaxer', function(ev) {
var $elem = $(this);
ev.preventDefault();

});

Der Grund, warum mein Chef (und andere) diesen Ansatz nicht verwenden möchten, ist, dass die Ereignisinspektion in FireBug (oder Chrome Dev Tools) nicht mehr einfach ist, z. B. mit

<input type="text" name="somename" id="someid" onchange="performChange()">

Er kann sofort sehen, welche Funktion bei einem Änderungsereignis ausgeführt wird, und in einer riesigen JS-Datei mit Spaghetti-Code direkt dorthin springen .

Im Falle von unauffälligem JavaScript würde er nur Folgendes sehen:

<input type="text" name="somename" id="someid" />

und er hat keine Ahnung, ob irgendwelche Ereignisse an dieses Element gebunden waren und welche Funktion ausgelöst wird.

Ich suchte nach einer Lösung und fand sie:

$(document).data('events') // or .. $(document).data('events').click

Aber dieser "Ansatz" verursachte, dass es "zu lange ..." dauerte, um herauszufinden, welche Funktion bei welchem ​​Ereignis ausgelöst wurde, und so wurde mir gesagt, dass ich das Binden von Ereignissen wie diesem stoppen solle.

Ich bitte Sie um einige Beispiele, starke Vorteile oder sonstige Vorschläge für "Warum sollten wir UJS verwenden?"

UPDATE: Vorschlag, "den Job zu wechseln", ist keine ideale Lösung.

UPDATE 2: Ok, ich habe nicht nur vorgeschlagen, die jQuery-Ereignisbindung zu verwenden, ich habe es auch getan . Nachdem ich alle Event-Delegationen geschrieben hatte, kam der Boss zu mir und fragte mich, warum ich Event-Delegationen mit anderen Ansätzen und Ansätzen mache, die er nicht kennt

Ich erwähnte einige offensichtliche Vorteile, wie: - Es gibt 15 Eingabefelder und alle haben dann ein onchangeEreignis (nicht nur einige von ihnen haben auch ein Ereignis onkeyup). Anstatt es 15 Mal zu tun, insbesondere wenn der gesamte HTML-Code mit PHPs Echo gerendert wird ->echo '... <input type="text" id="someid" ... />...'

1. Verwenden Sie keine Schlagworte mehr und versuchen Sie stattdessen, starke Argumente zu verwenden. Selbst die Wikipedia-Seite für unauffälliges JavaScript besagt, dass der Begriff nicht formal definiert ist. Es mag ein Sammelbegriff für eine Reihe guter Ideen sein, aber wenn es nur nach Mode oder Mode klingt, werden Ihr Chef und Ihre Kollegen nicht viel Aufmerksamkeit schenken. Schlimmer noch, wenn Sie mit etwas weitermachen, das sie für nutzlos halten, werden sie möglicherweise völlig unabhängige Ideen, für die Sie eintreten, ignorieren.

2. Finden Sie heraus, warum Sie die unauffälligen JavaScript-Ideen für wichtig halten. Liegt es daran, dass Sie gelesen haben, dass sie als Best Practices gelten? Sind Sie auf Probleme gestoßen, die darauf zurückzuführen sind, dass Sie diese Ideen nicht befolgt haben? Inwieweit wird sich die Übernahme dieser Ideen auf das Endergebnis des Unternehmens auswirken?

3. Geh in den Kopf deines Chefs. Warum macht er die Dinge so wie er und warum hat er Ihre Änderungen abgelehnt? Er ist wahrscheinlich nicht dumm und er ist wahrscheinlich erfahrener als Sie, also hat er wahrscheinlich einige gute Gründe, die Dinge auf seine Weise zu tun. Sie haben bereits auf einige von ihnen angespielt - folgen Sie diesem Thread bis zum Ende. Finden Sie dann heraus, ob und wie Ihre Vorschläge die Dinge verbessern, um die er sich am meisten kümmert.

4. Tipp 1: Manager mögen Geld. Je direkter Sie Ihre Vorschläge mit einem höheren Einkommen oder geringeren Ausgaben in Verbindung bringen können, desto wirkungsvoller wird Ihre Argumentation. Tipp 2: Zeit ist Geld. Tipp 3: Der ästhetische Reiz des Codes allein verdient kein Geld. Im Gegenteil - es braucht Zeit, um Code schön aussehen zu lassen. Hässlicher Code, der gut funktioniert, ist für die meisten Manager in Ordnung.

5. Sprich nicht nur darüber, tu es . Wenn Sie das Glück haben, ein kleines, in sich geschlossenes Projekt auf Ihrem Weg zu haben, fragen Sie Ihren Manager, ob Sie es mit dem "UJS" -Stil als eine Art Demonstration tun können. Wenn Sie fertig sind, lesen Sie den Code, in dem Sie erklären können, wie alles funktioniert und warum es Ihrer Meinung nach besser ist als der aktuelle Stil.

6. Idealismus ist großartig, aber lass ihn nicht in die Quere kommen. Es ist wichtiger, als jemand gesehen zu werden, der Dinge erledigt, als als Dilettant, der sich über einen unanständigen Codierungsstil beschwert. Dies gilt insbesondere, wenn Sie der neue Typ sind. Wenn Sie mit UJS jetzt keine Traktion erzielen können, erledigen Sie stattdessen einige gute Arbeiten und erstellen Sie langsam ein Argument für die Änderungen, die Sie vornehmen möchten, um an Glaubwürdigkeit zu gewinnen.

7. Lesen Switch: Wie ändern sich die Dinge Wenn ändern ist hart . Es gibt Ihnen viel mehr gute Ideen, wie Sie Ihren Fall effektiv aufbauen können.

Sie können ihnen eine Demo zum Debuggen eines USJ-HTML- Codes mit den Tools FireQuery und Chrome Query geben .

FireQuery ist eine Firebug-Erweiterung und leistet sehr gute Arbeit. Was Chrome Query angeht, kann ich nicht garantieren, wie gut es ist, aber es wird definitiv von einigen Entwicklern verwendet ( ein Beitrag bei stackoverflow ).

Wissen Sie auch, dass die .dataFunktion entfernt wurde, um die internen Ereignisdaten seit jQuery 1.8.0 zurückzugeben , und durch $._data(element, "events")solche ersetzt wurde, die laut offiziellem Changelog instabil sein können

Dies wurde in Version 1.8 entfernt, Sie können jedoch weiterhin über $ ._ data (Element, "events") zu den Ereignisdaten für Debugging-Zwecke gelangen. Beachten Sie, dass dies keine unterstützte öffentliche Schnittstelle ist. Die tatsächlichen Datenstrukturen können sich von Version zu Version inkompatibel ändern.

UPDATE:
Als ich anfing zu arbeiten, hatte ich das gleiche Dilemma. Bei der Erstellung einer Demo mit einer voll funktionsfähigen GUI (Anwendung mit nur einer Seite), die das dynamische Öffnen von Registerkarten (auch schließbar) und das Akkordeon-Menü (dynamisch aus db erstellt) enthielt, wurde ihnen schließlich klar, dass es besser ist, USJ vollständig zu verwenden.

Das Plus der Verwendung von USJ ist auch, dass Sie Ihre gesamte Anwendung in ein kleines (unlesbares) Skript minimieren können. Zeigen Sie ihnen auch die Skripte für google.com / github.com (als Beispiel) und weisen Sie darauf hin, dass selbst sie den Code komprimiert haben, was immer besser ist, da der Betrachter der Website die Sicherheitslücken nur schwer entschlüsseln kann und nutzen Sie sie, um einen vollwertigen Angriff auf Ihre Site zu starten (erschrecken Sie sie), auch wenn dies unwahrscheinlich ist.

UPDATE 2 :
Übrigens wusste ich nicht, dass ich USJ mache, bis ich diese Frage sah, also danke auf eine Art und Weise.

Inline-Event-Handler stinken, weil:

• Keine Ereignisdelegation - das ist großartig, wenn Sie Elemente dynamisch in eine Seite und aus einer Seite heraus rippen möchten, ohne sie erneut binden zu müssen.

• Sie haben das Verhalten eher an HTML-Tags als an Klassen- / ID-Attribute von HTML-Tags gebunden. Angenommen, Sie haben eine Klasse von "combo_box" in Ihrer gesamten App. Plötzlich möchten Sie auf der Hälfte Ihrer alten Seiten eine leichte Variation Ihrer Kombinationsfelder, wenn diese sich in einem anderen Container befinden. An eine Klasse gebunden können Sie dieses Verhalten basierend auf dem Containerkontext ändern, z "#special_container .combo_box". Eingebunden in den verdammten HTML-Code können Sie jedes kleine Auswahlfeld mit einer .combo_box-Klasse auf einer beliebigen Anzahl von Seiten aufspüren, um diese Handlerreferenzen nacheinander zu ändern, anstatt ein paar neue Codezeilen zu optimieren oder von einem einzelnen Dateispeicherort aus zu filtern .

• Wenn Sie mehrere Handler benötigen, müssen Sie diese in eine Funktion einbinden und diese dann unnötigerweise an bestimmte HTML-Dateien binden. Wie wartbar ist das?

• Ein subtilerer Punkt ist, dass es viel einfacher / leichter zu warten / flexibler und robuster ist, mit einem Verhalten umzugehen, das eher der Mentalität eines Control Panels entspricht. Durch das Binden von einer zentralen Stelle aus haben Sie einen Ort, an dem Sie einen Überblick über das gesamte Verhalten auf der Seite erhalten. Dies ist hilfreich, wenn Sie beispielsweise herausfinden müssen, warum bestimmte Seiten gelegentlich ausgeführt werden in einen bestimmten Fehler, der schwer zu verstehen ist, aber andere nicht.

• Dies ist die Client-Seite. Wir haben mehrere Browser, die alle große Komplexität auf ihre Weise interpretieren, um dies zu berücksichtigen. Alles zusammen und lassen Sie die IDE es für Sie sortieren Mentalitäten funktionieren hier nicht gut. Es ist nicht in Mode, Ihren Code eng, minimal, locker und sauber zu halten. Es ist unbedingt erforderlich, um ein wartbares Front-End einzurichten, das leicht zu ändern und zu aktualisieren ist .

• Es ist nicht mehr! @ # $ Ing 2002. Dieses Argument ist so alt wie Tabellen wie Layout. Überwinde das Problem und vertraue auf erfahrene, auf Kundenseite spezialisierte Entwickler, die du ausdrücklich angeheuert hast, weil dir ihr Fachwissen fehlte (nicht, dass ich Ärger aus persönlicher Erfahrung oder etwas anderem kanalisiere).

Und um das Argument Ihres Chefs zu widerlegen, es ist wirklich nicht so schwer herauszufinden, welche Klasse oder ID in der Ereignisdelegierung oder Handlerbindung mit STRG + F und einem Tool verwendet wird, mit dem Sie alle JS auf der Seite wie meine persönliche peinliche Frage anzeigen können / bookmarklet-version nur für prototypen Ich habe mich hastig zusammengeschustert, als die Symbolleiste für Webentwickler anfing, auf mich zu scheißen (verdammte Farbcodierung). Setzen Sie ein Lesezeichen über den Link auf der JS-Geigenseite oder kopieren Sie den JS und erstellen Sie Ihren eigenen.

Ein JS-Fiddle-Link, der voraussichtlich irgendwann abläuft

Ein Hauptvorteil Ihrer vorgeschlagenen Technik besteht darin, dass Sie den Ereignishandler nur einmal an ein übergeordnetes Element wie "document" binden müssen und dieser Handler in der Lage ist, die Ereignisse aller untergeordneten Elemente zu erfassen, die den angegebenen Selektor wie "button.anyclass" erfüllen ". Spart Speicher und ist so wartbar, dass nur eine Bearbeitungsinstanz erforderlich ist und alle Elemente betroffen sind.

In Bezug darauf, dass Sie die gebundene Funktion nicht sofort erkennen können, könnte Ihr Team einfach einen Weg zur Deklaration solcher Funktionen standardisieren, der wahrscheinlich am unteren Rand der Seite zu finden ist. Damit Sie alle wissen, wohin Sie schauen müssen, ist die Namenskonvention ebenfalls sehr wichtig. Kommentare wären von großem Vorteil, stellen Sie jedoch sicher, dass sie vom Server entfernt werden, bevor Sie sie als Antwort an den Browser senden.

Wenn Sie aus Sicherheitsgründen die Verschleierung und Minimierung von Javascript bereitstellen möchten, würde dies Ihre Technik ermöglichen, im Gegensatz zu dem alten Stil, den Ihr Team immer noch verwendet.

Die offensichtliche Antwort ist, dass Sie mit dem Attribut onclick nur eine Funktion an Ihre Schaltfläche binden können, während Sie mit dem Ereignis JQuery mehrere Funktionen binden können. Ein häufiges Problem beim Onload-Ereignis: Wenn Ihr Dokument aus mehreren Dateien besteht, kommt es häufig zu Kollisionen.

Eine andere Lösung, die sowohl Sie als auch Ihren Chef zufrieden stellen könnte, ist die Verwendung der Datenbindung mit einer Bibliothek wie Knockout oder Angular, mit der Sie Änderungen in Ihrer Ansicht verfolgen und die Notwendigkeit eines großen Teils der Event-Handler unterdrücken können.