Anpassung und Anpassung von Widgets
HireHop API NoHTML Framework

HireHop ist vollständig anpassbar, Sie können sogar benutzerdefinierte Felder hinzufügen, alles mithilfe der HireHop-JavaScript-Injektionsmethode, bei der von Ihnen geschriebene JavaScript-Dateien in HireHop-Seiten eingefügt werden. Wenn Sie sich die Seitenquelle einer HireHop -Seite ansehen, sehen Sie <!– PLUGINS –>, hier wird das JavaScript für Ihre Plugins eingefügt.

HireHop wurde von Grund auf aufgebaut und hat unser eigenes Framework entwickelt, das wir NoHTML nennen. Dabei wurden vorhandene Technologien und Methoden zusammengeführt, um ein Framework zu erstellen, das einfach zu verwenden und erweiterbar ist und ein schnelles Laden von Seiten auch bei langsamen Internetverbindungen ermöglicht.

Abgesehen vom Hauptteil der Seite werden die Hauptteile von HireHop dynamisch auf dem Client-Rechner mit JavaScript und jQuery-Widgets erstellt, ähnlich wie REACT und JSX, aber einfacher und natürlich mit dem bekannten jQuery-Framework. Wenn Sie beispielsweise eine Jobseite laden und die Seite überprüfen (drücken Sie F12 für den Objektinspektor des Browsers), sehen Sie unten auf der Seite ein <div>-Element, das wie folgt strukturiert ist:

<div id=“notes_tab„></div>

Wie Sie sehen können, ist <div> nur ein leeres div-Element. Wenn Sie auf die Registerkarte „Notizen“ klicken, wird das obige Element plötzlich mit Elementen gefüllt. Wenn Sie sich den Inspektor Ihres Browsers ansehen, werden Sie auch feststellen, dass die einzigen Daten, die vom Server geladen wurden, JSON waren und nicht der Code im Notizen-Tab. Der Notizen-Tab wurde dynamisch auf dem Client-Rechner mit einem benutzerdefinierten jQuery UI Widget namens $.notes() (intern $.custom.notes genannt) erstellt, das in der Datei /js/notes.js definiert ist, und dieses Widget verwendet ein Ajax Aufruf an den Server, um die Daten zum Auffüllen abzurufen.

Alle Widget-Dateien auf HireHop sind aus Geschwindigkeitsgründen komprimiert. Um jedoch die erweiterte Quelle anzuzeigen, fügen Sie einfach eine .MAX am Ende des Dateinamens hinzu, z. B. /js/notes.MAX.js.

Um JavaScript in Ihre Webseiten einzufügen, gehen Sie zu Einstellungen->Unternehmenseinstellungen und fügen Sie in Plugins die URL Ihrer JavaScript-Datei hinzu, die sich auf einem https-Server befinden sollte. Sie können mehrere URLs hinzufügen, die Sie mit einem „;“ trennen können. (Semikolon). Alle URLs müssen zu einer sicheren https-Domain führen.

Erweitern eines Widgets

Da es sich um jQuery-UI-Widgets handelt, können Sie eine Art objektorientierte Programmiertechnik verwenden, um Teile der HireHop-Widgets zu überschreiben. Zum Beispiel werden wir ein kleines Plugin erstellen, das ein Span-Element mit dem Wort Hello nach der Schaltfläche Aktualisieren im Notizen-Widget hinzufügt.

Erstellen Sie zunächst eine JavaScript-Datei auf Ihrem Webserver und fügen Sie den folgenden Code hinzu:

$(document).ready(function(){
// Überprüfen Sie, ob das Notizen-Widget vorhanden ist
if(typeof($.custom.notes)!=“undefined“ && hh_api_version<=1) {
// Notizen-Widget neu definieren
$.widget(„custom.notes“, $.custom.notes, {
_init_main: function() {
// Rufen Sie das alte _init_main . auf
this._super(arguments);
// Fügen Sie nach dem Aktualisieren-Button ein Hallo hinzu
$(„<span>„,{ html:“Hallo“ }).insertAfter(this.btnRefresh);
},
// Fügen Sie dem Widget sogar Ihre eigenen neuen Funktionen hinzu, wenn Sie möchten
new_function_name: function() { }
});
}
});

Der obige Code ist in einer Datei unter https://s.myhirehop.com/plugins/demo.js.

Den obigen Code Zeile für Zeile erklären:

$(document).ready(function(){
Zuerst warten wir, bis das Dokument fertig ist und alle Seitenelemente und JavaScript-Dateien geladen sind. In diesem Fall ist dies nicht erforderlich, da die Datei /js/notes.js vor dem Plugin-Skript geladen wird. Für dieses Beispiel haben wir sie jedoch als Referenz belassen.

if(typeof($.custom.notes)!=“undefined“ && hh_api_version<=1) {
Als nächstes testen wir, ob das Notizen-Widget definiert wurde, wenn ja, werden wir einen Teil davon überschreiben. Hier testen wir auch die HireHop-API-Version, die der Benutzer verwendet. Wenn neue Versionen von HireHop veröffentlicht werden, hat der Benutzer die Möglichkeit, sie zu verwenden, und dies stellt sicher, dass Ihr Plugin mit dieser Version kompatibel ist.

$.widget(„custom.notes“, $.custom.notes, {
Hier initiieren wir das Zusammenführen eines neuen JavaScript-Objekts, das Funktionen enthält, in das Notizen-Widget.

_init_main: function() {
Wird eine Funktion gleich wie eine vorhandene benannt, wird diese überschrieben.

this._super(arguments);
Dies ruft die geerbte Funktion auf, die die Funktion ist, die wir überschreiben.

$(„<span>“,{ html:“ Hello“ }).insertAfter(this.btnRefresh);
Anschließend fügen wir ein einfaches Span-Element hinzu, das das Wort „Hallo“ hinter der Schaltfläche „Aktualisieren“ enthält. Sie können auch  $(„<span> Hello</span>“).insertAfter(this.btnRefresh); verwenden. Um Elemente zu adressieren, sollten Sie immer die den Elementen zugewiesenen Variablen verwenden und niemals die Element-IDs, da die meisten IDs auf HireHop dynamisch erstellt werden und bei jeder Instanz unterschiedlich sind. Wenn die Element-ID Zahlen enthält oder nicht gut benannt ist, verwenden Sie sie auf keinen Fall.

new_function_name: function() { }
Schließlich macht dies nichts und ist für das, was wir tun müssen, nicht erforderlich, es zeigt nur, dass Sie sogar Ihre eigenen Funktionen in das Widget einfügen können.

Wenn Sie die HireHop-Seite neu laden, sehen Sie nach der Schaltfläche „Aktualisieren“ das Wort „Hallo“, wenn Sie alles richtig gemacht haben.

Versionierung

Ein großer Vorteil der Verwendung des HireHop–NoHTML-Frameworks besteht darin, dass das gesamte JavaScript zwischengespeichert wird, was zu einem schnellen Laden der Seite führt, da der Browser die JavaScript-Dateien in seinem Cache verwendet. Dies kann problematisch sein, wenn Sie Ihr Plugin aktualisieren, da alle Benutzer, die es verwenden, ihre Browser nicht die aktualisierte Version herunterladen, sondern stattdessen ihre zwischengespeicherte Version verwenden, es sei denn, sie löschen ihren Browser-Cache.

Um dies zu umgehen, können Sie beim Hinzufügen Ihrer JavaScript-URLs zu den Plug-in-Optionen einen Versionierungsparameter verwenden, z. B. für https://www.mywebsite.com/plugin.js geben Sie ihn als https://www.mywebsite.com/plugin.js?v=1. Nach einem Update können Sie es in https://www.mywebsite.com/plugin.js?v=2 ändern, wodurch alle Browser gezwungen werden, die JavaScript-Datei von Ihrem Server neu zu laden. Wenn Sie keinen Server zum Speichern des Codes haben, können Sie jederzeit GIST oder Google Open Source verwenden.

Arbeitsdemo

Wenn Sie in Ihren Plugins unter „Einstellungen->Unternehmenseinstellungen“ den Pfad „https://myhirehop.com/plugins/navigation_menu.js“ hinzufügen, sehen Sie oben rechts auf Ihrem Bildschirm ein Navigations-Kontextmenü. Wenn Sie sich den Quellcode ansehen, können Sie sehen, wie dieses grundlegende Plugin funktioniert.

Bitte beachte, dass Plugins aus Sicherheitsgründen nicht auf der Einstellungsseite geladen werden und nur geladen werden, wenn du ein kostenpflichtiges Abonnement hast.