Forbedret Ajax-teknikker for WordPress Objektorientert programmering

I det forrige innlegget i denne serien, besøkte vi temaet for å jobbe med Ajax i WordPress. Til slutt er målet å forbedre seg på en tidligere serie som ble kjørt på nettstedet for noen år siden.

For å gjenta, er det ikke at teknikkene som ble undervist i den opprinnelige serien, var feil, men det er at programvaren endrer seg over tid, så det er alltid godt å se på konsepter som var dekket for mange år siden, og prøv å oppdatere dem til noe som er litt mer aktuelt og mer motstandsdyktig for vår utviklingsarbeid.

Recall fra forrige innlegg, vi så på følgende kommentar fra den opprinnelige serien:

Vi skal gi en veldig kort oversikt over hva Ajax er, hvordan det fungerer, hvordan du setter det opp på forsiden, og forstår kroker som WordPress gir. Vi vil også faktisk bygge et lite prosjekt som setter teorien i bruk. Vi går gjennom kildekoden, og vi sørger også for at den er tilgjengelig på GitHub også.

Og i det innlegget har vi gjennomgått noen avanserte måter å inkorporere WordPress Ajax API til våre prosjekter ved hjelp av prosedyreprogrammering. I dette innlegget skal vi ta koden som vi skrev i første del av denne serien og refactor den slik at den bruker en objektorientert tilnærming.

Til slutt er målet ikke å gjøre et tilfelle hvorfor et paradigme skal brukes over det andre; i stedet er det å vise hvordan vi kan oppnå samme funksjonalitet, uansett hvilken tilnærming du velger når du bygger pluginene dine.

Planlegger plugin

Før vi begynner å refactoring koden, er det noe vi må vurdere hvordan Vi skal legge ut de forskjellige filene. Tross alt, en del av prosessen med å starte et nytt prosjekt - eller til og med hoppe inn i en gammel - planlegger hvordan arbeidet skal gjøres.

For denne spesielle plugin, skal vi trenge følgende:

en bootstrap-fil som er ansvarlig for å initialisere hovedklassen og starter plugin-modulen
en klasse som er ansvarlig for å laste avhengighetene som JavaScript
en klasse som fungerer som den viktigste plugin-klassen

Som du kan se, er det ikke også mye som vi trenger å gjøre med plugin. Vi vil også organisere noen av filene på nytt for å få en konsistent katalogstruktur, og vi sørger for at dokumentet blir korrekt dokumentert slik at det følger WordPress Coding Standards.

Med det sagt, la oss komme i gang.

Organisering av filene

Før vi kommer til å skrive noen kode, la oss gå videre og gjør følgende:

Lag en eiendeler katalog.
Lage en js katalog som vil bli plassert i eiendeler katalog.
Bevege seg frontend.js til js katalog.

Grunnen til dette er at vi beveger oss inn i en objektorientert programmeringsstil. En del av dette inkluderer å organisere våre filer slik at de følger konvensjoner som ofte anses å være pakker.

I vårt tilfelle, eiendeler katalog inneholder alle de tingene som er nødvendige for å få programmet til å kjøre. For noen plugins kan dette være JavaScript, CSS, bilder, skrifter, og så videre. I dette tilfellet har vi en enkelt JavaScript-fil.

Dependency Loader

Deretter må vi introdusere en klasse som vil være ansvarlig for å laste avhengighetene til prosjektet vårt. For denne spesielle plugin er den eneste avhengigheten vi har, JavaScript-filen som vi nettopp har plassert i eiendeler katalog.

En del av objektorientert programmering sørger for at hver klasse har et bestemt formål. I så fall vil klassen vi skal innføre, være ansvarlig for å laste inn JavaScript ved hjelp av WordPress API.

La oss begynne med å lage klassens grunnleggende struktur:

Deretter legger vi til en metode som vil være ansvarlig for enqueuing JavaScript som per WordPress API.
enqueue_scripts ();  / ** * Enqueues front-end skript for å få den nåværende brukerens informasjon * via Ajax. * * @access privat * * @since 1.0.0 * / privat funksjon enqueue_scripts () wp_enqueue_script ('ajax-script', plugin_dir_url (dirname (__FILE__)) 'assets / js / frontend.js', array ('jquery ')); wp_localize_script ('ajax-script', 'sa_demo', array ('ajax_url' => admin_url ('admin-ajax.php')));  
Deretter må vi ta de funksjonene som er ansvarlige for å håndtere Ajax-forespørslene og gi svar og legge dem til i klassen. Siden de kommer til å være innenfor en klasses sammenheng, må vi legge til en ny funksjon som vil registrere dem med WordPress.
Vi lager en setup_ajax_handlers funksjon. Det ser slik ut:
Deretter må vi faktisk flytte funksjonene til denne klassen. Legg merke til at funksjonene som ble opprinnelig prefiksert _sa er ikke lenger merket som sådan. Siden de er i klassens sammenheng, kan vi slippe prefikset og også slippe understreket til fordel for privat søkeord.
user_is_logged_in ($ user_id) && $ this-> user_exists ($ user_id)) wp_send_json_success (wp_json_encode (get_user_by ('id', $ user_id)));  privat funksjon user_is_logged_in ($ user_id) $ is_logged_in = true; hvis (0 === $ user_id) wp_send_json_error (ny WP_Error ('-2', 'Den besøkende er ikke logget inn på nettstedet.')); $ is_logged_in = false;  returnere $ is_logged_in;  privat funksjon user_exists ($ user_id) $ user_exists = true; hvis (false === get_user_by ('id', $ user_id)) wp_send_json_error (ny WP_Error ('-1', 'Ingen bruker ble funnet med den angitte ID''en $ user_id.'] ')); $ user_exists = false;  returnere $ user_exists; 
Da lagrer vi denne filen i en inkluderer katalog i roten til plugin katalogen. De inkluderer katalog er ofte hvor kode som brukes gjennom et prosjekt er lokalisert. Mer kan bli sagt om denne katalogen, men det er innhold for et lengre innlegg.
Den endelige versjonen av denne klassen skal se slik ut:
enqueue_scripts ();  / ** * Enqueues front-end skript for å få den nåværende brukerens informasjon * via Ajax. * * @access privat * * @since 1.0.0 * / privat funksjon enqueue_scripts () wp_enqueue_script ('ajax-script', plugin_dir_url (dirname (__FILE__)) 'assets / js / frontend.js', array ('jquery ')); wp_localize_script ('ajax-script', 'sa_demo', array ('ajax_url' => admin_url ('admin-ajax.php')));  / ** * Registrerer tilbakeringingsfunksjonene som er ansvarlige for å gi svar * på Ajax-forespørsler om oppsett gjennom resten av plugin. * * @since 1.0.0 * / offentlig funksjon setup_ajax_handlers () add_action ('wp_ajax_get_current_user_info', array ($ dette, 'get_current_user_info')); add_action ('wp_ajax_nopriv_get_current_user_info', array ($ dette, 'get_current_user_info'));  / ** * Henter informasjon om brukeren som er logget inn på nettstedet. * * Denne funksjonen er ment å bli kalt via klientsiden av den offentlig-vendte * siden av nettstedet. * * @since 1.0.0 * / offentlig funksjon get_current_user_info () $ user_id = get_current_user_id (); hvis ($ this-> user_is_logged_in ($ user_id) && $ this-> user_exists ($ user_id)) wp_send_json_success (wp_json_encode (get_user_by ('id', $ user_id)));  / ** * Bestemmer om en bruker er logget inn på nettstedet ved hjelp av den angitte bruker-IDen. Hvis ikke, * da vil følgende feilkode og melding bli returnert til klienten: * * -2: Besøkeren er for øyeblikket ikke logget inn på nettstedet. * * @access privat * @since 1.0.0 * * @param int $ user_id Den nåværende brukerens ID. * * @return bool $ is_logged_in Hvorvidt den nåværende brukeren er logget inn. * / privat funksjon user_is_logged_in ($ user_id) $ is_logged_in = true; hvis (0 === $ user_id) wp_send_json_error (ny WP_Error ('-2', 'Den besøkende er ikke logget inn på nettstedet.')); $ is_logged_in = false;  returnere $ is_logged_in;  / ** * Bestemmer om en bruker med den angitte IDen finnes i WordPress-databasen. Hvis ikke, vil den følgende feilkoden og meldingen bli returnert til klienten: * * -1: Ingen bruker ble funnet med den angitte IDen [$ user_id]. * * @access privat * @since 1.0.0 * * @param int $ user_id Den nåværende brukerens ID. * * @return bool $ user_exists Hvorvidt den angitte brukeren eksisterer eller ikke. * / privat funksjon user_exists ($ user_id) $ user_exists = true; hvis (false === get_user_by ('id', $ user_id)) wp_send_json_error (ny WP_Error ('-1', 'Ingen bruker ble funnet med den angitte ID''en $ user_id.'] ')); $ user_exists = false;  returnere $ user_exists;  
Hovedklassen
Nå er vi klare til å skrive hovedklassen for plugin. Denne spesielle klassen vil ligge i roten til plugin-katalogen, og den grunnleggende strukturen til klassen vil se slik ut:
Deretter legger vi til et par egenskaper som vi skal angi når klassen er instantiated:
Deretter lager vi en konstruktør og en initialiseringsfunksjon som vil bli brukt til å sette plugin i bevegelse:
versjon = '1.0.0'; $ this-> loader = ny Dependency_Loader ();  / ** * Initialiserer dette pluginet og avhengighetslasteren til å inkludere * JavaScript som kreves for at pluginet skal fungere. * * @access privat * @since 1.0.0 * / public function initialize () $ this-> loader-> initialize (); $ Dette-> loader-> setup_ajax_handlers ();  
I koden ovenfor setter konstruktøren egenskapene og instanserer de avhengighetene som er nødvendige for å sette plugin i bevegelse.
Når initial kalles, plugin vil starte og det vil ringe initialiseringsmetoden på avhengighetsklassen vi opprettet tidligere i denne opplæringen.
Bootstrap
Det siste vi må gjøre er å ta hovedfilen vi har, bruk PHP inkludere funksjonalitet, og sørg for at den er klar over de nødvendige PHP-filene som vi har.
Deretter må vi definere en metode som vil initialisere hoved plugin-filen og sette alt i gang.
initialisere (); 
Den endelige versjonen av bootstrap-filen skal se slik ut:
initialisere ();  acme_start_plugin (); 
Først sjekker filen for å se om den nås direkte ved å sjekke for å se om en WordPress-konstant er definert. Hvis ikke, stopper kjøringen. 
Deretter inneholder den de ulike klassene vi opprettet gjennom denne opplæringen. Endelig definerer den en funksjon som kalles når WordPress laster pluginet som starter pluginet og setter alt i bevegelse.
Konklusjon
Og det bringer oss til slutten av denne todelte serien. Forhåpentligvis har du lært ikke bare noen av de beste metodene for å inkorporere Ajax i WordPress-prosjektene, men også litt om å dokumentere både prosessorisk og objektorientert kode, samt se forskjellen i hvor mye koden er lagt ut.
I et fremtidig innlegg kan jeg se på noen av de objektorienterte konseptene som ble introdusert her og dekke dem i mye mer detalj. For øyeblikket, ta en titt på pluginet ved hjelp av GitHub-lenken på sidepanelet på denne siden.
Husk at du kan fange alle kursene og veiledningene på profilen min, og du kan følge meg på bloggen min og / eller Twitter på @ tommcfarlin hvor jeg snakker om programvareutvikling i forbindelse med WordPress.
Som vanlig, ikke nøl med å legge igjen noen spørsmål eller kommentarer i feedet under, og jeg vil sikte på å svare på hver av dem. 



		
			
	   
	




Kode