Share
Negli ultimi anni, JavaScript ha guadagnato sempre più popolarità, in parte grazie alle librerie sviluppate per rendere più semplici le applicazioni / effetti JavaScript da creare a coloro che non hanno ancora pienamente compreso la lingua principale.
Mentre in passato era un argomento comune che JavaScript era un linguaggio di base ed era molto "schiaffo" senza fondamenta reali; questo non è più il caso, specialmente con l'introduzione di applicazioni web e adattamenti 'su larga scala' come JSON (JavaScript Object Notation).
JavaScript può avere tutto ciò che una lingua orientata agli oggetti ha da offrire, anche se con qualche sforzo in più al di fuori dello scopo di questo articolo.
function myObject () ;
Congratulazioni, hai appena creato un oggetto. Esistono due modi per creare un oggetto JavaScript: sono "Funzioni di costruzione" e "Notazione letterale". Quella sopra è una funzione di Costruttore, spiegherò quale sarà la differenza tra poco, ma prima di farlo, ecco come appare una definizione di Oggetto usando la notazione letterale.
var myObject = ;
Letterale è un'opzione preferita per la spaziatura dei nomi in modo che il tuo codice JavaScript non interferisca (o viceversa) con altri script in esecuzione sulla pagina e anche se stai usando questo oggetto come un singolo oggetto e non richieda più di un'istanza del oggetto, mentre la notazione del tipo di funzione Costruttore è preferibile se è necessario eseguire un lavoro iniziale prima che l'oggetto venga creato o richiedere più istanze dell'oggetto in cui ogni istanza può essere modificata durante la vita dello script. Continuiamo a costruire su entrambi i nostri oggetti simultaneamente in modo da poter osservare quali sono le differenze.
Accentsconagua
function myObject () this.iAm = 'an object'; this.whatAmI = function () alert ('I am' + this.iAm); ; ; var myObject = iAm: 'un oggetto', whatAmI: function () alert ('I am' + this.iAm); Per ognuno degli oggetti abbiamo creato una proprietà 'iAm' che contiene un valore stringa che viene utilizzato nel nostro metodo oggetti 'whatAmI' che avvisa un messaggio.
Le proprietà sono variabili create all'interno di un oggetto e i metodi sono funzioni create all'interno di un oggetto.
Ora è probabilmente il momento migliore per spiegare come usare proprietà e metodi (anche se lo avresti già fatto se hai familiarità con una libreria).
Per usare prima una proprietà si digita l'oggetto a cui appartiene - quindi in questo caso è myObject - e quindi per fare riferimento alle sue proprietà interne, si mette un punto e poi il nome della proprietà in modo tale che alla fine assomigli a myObject.iAm ( questo restituirà 'un oggetto').
Per i metodi, è lo stesso tranne che per eseguire il metodo, come con qualsiasi funzione, è necessario inserire parentesi dopo di esso; altrimenti si restituirà semplicemente un riferimento alla funzione e non ciò che la funzione restituisce effettivamente. Quindi assomiglia a myObject.whatAmI () (questo avviserà 'I am an object').
C'è anche una differenza tra il modo in cui questi due tipi di dichiarazioni di oggetti sono usati.
Per usare un oggetto letteralmente annotato, lo si usa semplicemente facendo riferimento al suo nome di variabile, quindi ovunque sia richiesto lo si chiami digitando;
myObject.whatAmI ();
Con le funzioni di costruzione è necessario prima istanziare (creare una nuova istanza di) l'oggetto; lo fai digitando;
var myNewObject = new myObject (); myNewObject.whatAmI ();
Usiamo la nostra precedente funzione di costruzione e costruiamo su di essa in modo che esegua alcune operazioni di base (ma dinamiche) quando la istanziamo.
function myObject () this.iAm = 'an object'; this.whatAmI = function () alert ('I am' + this.iAm); ; ; Proprio come qualsiasi funzione JavaScript, possiamo usare gli argomenti con la nostra funzione di costruzione;
function myObject (what) this.iAm = what; this.whatAmI = function (language) alert ('I am' + this.iAm + 'della' + lingua + 'lingua'); ; ; Ora istanziamo il nostro oggetto e chiamiamo il suo metodo whatAmI, compilando i campi richiesti mentre lo facciamo.
var myNewObject = new myObject ('un oggetto'); myNewObject.whatAmI ( 'JavaScript'); Questo avviserà 'Io sono un oggetto del linguaggio JavaScript'.
Ho accennato in precedenza alle differenze tra Object Constructors e Object Literals e che quando viene apportata una modifica a un oggetto Literal influisce sull'oggetto nell'intero script, mentre quando viene creata un'istanza di una funzione Constructor e quindi viene apportata una modifica a quell'istanza, non influenzerà altre istanze di quell'oggetto. Proviamo un esempio;
Per prima cosa creeremo un oggetto letterale;
var myObjectLiteral = myProperty: 'this is a property' // avvisa l'avviso myProperty corrente (myObjectLiteral.myProperty); // questo avviserà 'questa è una proprietà' // cambia myProperty myObjectLiteral.myProperty = 'questa è una nuova proprietà'; // avvisa l'avviso myProperty corrente (myObjectLiteral.myProperty); // questo avviserà 'questa è una nuova proprietà', come previsto
Anche se crei una nuova variabile e la punti verso l'oggetto, avrà lo stesso effetto.
var myObjectLiteral = myProperty: 'this is a property' // avvisa l'avviso myProperty corrente (myObjectLiteral.myProperty); // questo avviserà 'questa è una proprietà' // definisce una nuova variabile con oggetto come valore var sameObject = myObjectLiteral; // change myProperty myObjectLiteral.myProperty = 'questa è una nuova proprietà'; // avvisa l'avviso corrente myProperty (sameObject.myProperty); // questo avviserà 'questa è una nuova proprietà'
Ora proviamo un esercizio simile con una funzione di costruzione.
// questo è un altro modo per creare una funzione di costruzione var myObjectConstructor = function () this.myProperty = 'this is a property' // istanzia il nostro Constructor var constructorOne = new myObjectConstructor (); // istanzia una seconda istanza del nostro Constructor var constructorTwo = new myObjectConstructor (); // avvisa current myProperty di constructorOne instance alert (constructorOne.myProperty); // questo avviserà 'questa è una proprietà' // alert current myProperty di constructorTwo alert di avviso (constructorTwo.myProperty); // questo avviserà 'questa è una proprietà'
Quindi, come previsto, entrambi restituiscono il valore corretto, ma cambiamo myProperty per una delle istanze.
// questo è un altro modo per creare una funzione di costruzione var myObjectConstructor = function () this.myProperty = 'this is a property' // istanzia il nostro Constructor var constructorOne = new myObjectConstructor (); // cambia myProperty della prima istanza constructorOne.myProperty = 'this is a new property'; // istanzia una seconda istanza del nostro Constructor var constructorTwo = new myObjectConstructor (); // avvisa current myProperty di constructorOne instance alert (constructorOne.myProperty); // questo avviserà 'questa è una nuova proprietà' // avvisa current myProperty di constructorTwo alert di avviso (constructorTwo.myProperty); // questo avviserà 'questa è una proprietà'
Come puoi vedere da questo esempio, anche se abbiamo modificato la proprietà di constructorOne, questo non ha influenzato myObjectConstructor e quindi non ha influenzato constructorTwo. Anche se constructorTwo è stato istanziato prima di modificare la proprietà myProperty di constructorOne, non avrebbe comunque influenzato la proprietà myProperty di constructorTwo in quanto si tratta di un'istanza completamente diversa dell'oggetto all'interno della memoria di JavaScript.
Quindi quale dovresti usare? Beh, dipende dalla situazione, se hai solo bisogno di un oggetto del suo genere per il tuo script (come vedrai nel nostro esempio alla fine di questo articolo), quindi usa un oggetto letterale, ma se hai bisogno di più istanze di un oggetto , dove ogni istanza è indipendente dall'altra e può avere proprietà o metodi diversi a seconda del modo in cui è costruita, quindi utilizzare una funzione di costruzione.
Mentre spiegavo le funzioni del costruttore, c'erano un sacco di "queste" parole chiave gettate in giro e immagino quale momento migliore per parlare di scope!
Ora potresti chiederti "di che portata parli"? L'ambito in JavaScript è basato su funzione / oggetto, quindi ciò significa che se si è al di fuori di una funzione, non è possibile utilizzare una variabile definita all'interno di una funzione (a meno che non si usi una chiusura).
Esiste tuttavia una catena di portata, il che significa che una funzione all'interno di un'altra funzione può accedere a una variabile definita nella sua funzione genitore. Diamo un'occhiata ad alcuni codici di esempio.
Come puoi vedere in questo esempio, var1 è definito nell'oggetto globale ed è disponibile per tutte le funzioni e gli oggetti, var2 è definito all'interno di function1 ed è disponibile per function1 e function2, ma se provi a fare riferimento ad esso dall'oggetto globale ti verrà dato l'errore 'var2 is undefined', VAR3 è accessibile solo a function2.
Allora, cosa significa "questo" riferimento? Bene, in un browser, "questo" fa riferimento all'oggetto della finestra, quindi tecnicamente la finestra è il nostro oggetto globale. Se ci troviamo all'interno di un oggetto, "questo" si riferirà all'oggetto stesso, tuttavia se ci si trova all'interno di una funzione, ciò si riferirà ancora all'oggetto della finestra e allo stesso modo se si è all'interno di un metodo che si trova all'interno di un oggetto " questo 'si riferirà all'oggetto.
A causa della nostra catena di visibilità, se ci troviamo all'interno di un sottooggetto (un oggetto all'interno di un oggetto), "questo" si riferirà all'oggetto secondario e non all'oggetto padre.
Come nota a margine, è anche utile aggiungere che quando si usano funzioni come setInterval, setTimeout ed eval, quando si esegue una funzione o un metodo tramite uno di questi, 'this' si riferisce all'oggetto window in quanto questi sono metodi di window, quindi setInterval ( ) e window.setInterval () sono gli stessi.
Ok ora che ce l'abbiamo fatta, facciamo un esempio del mondo reale e creiamo un oggetto di validazione del modulo!
Per prima cosa devo presentarti alla funzione addEvent che creeremo ed è una combinazione della funzione addEventListener () di ECMAScript (Firefox, Safari, ecc.) E della funzione attachEvent () di Microsoft ActiveX Script.
function addEvent (to, type, fn) if (document.addEventListener) to.addEventListener (type, fn, false); else if (document.attachEvent) to.attachEvent ('on' + type, fn); else to ['on' + type] = fn; ; Questo crea una nuova funzione con tre argomenti, a essendo l'oggetto DOM a cui stiamo collegando l'evento, genere essendo il tipo di evento e fn essendo la funzione eseguita quando viene attivato l'evento. Prima controlla se addEventListener è supportato, in tal caso lo userà, altrimenti controllerà attachEvent e se tutto il resto fallisce probabilmente stai utilizzando IE5 o qualcosa di altrettanto obsoleto, quindi aggiungeremo l'evento direttamente alla sua proprietà evento (nota: la terza opzione sovrascriverà qualsiasi funzione esistente che potrebbe essere stata allegata alla proprietà dell'evento mentre i primi due la aggiungeranno come funzione aggiuntiva alla sua proprietà evento).
Ora impostiamo il nostro documento in modo che sia simile a ciò che potresti vedere quando sviluppi elementi jQuery.
In jQuery avresti;
$ (document) .ready (function () // tutto il nostro codice che viene eseguito dopo che la pagina è pronta va qui);
Usando la nostra funzione addEvent che abbiamo;
addEvent (window, 'load', function () // tutto il nostro codice che viene eseguito dopo che la pagina è pronta va qui);
Ora per il nostro oggetto Form.
var Form = validClass: 'valid', fname: minLength: 1, maxLength: 15, fieldName: 'First Name', lname: minLength: 1, maxLength: 25, fieldName: 'Last Name', validateLength: function (formEl, type) if (formEl.value.length> type.maxLength || formEl.value.length < type.minLength ) formEl.className = formEl.className.replace("+Form.validClass,"); return false; else if(formEl.className.indexOf("+Form.validClass) == -1) formEl.className +="+Form.validClass; return true; , validateEmail : function(formEl) var regEx = /^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]2,9)$/; var emailTest = regEx.test(formEl.value); if (emailTest) if(formEl.className.indexOf("+Form.validClass) == -1) formEl.className +="+Form.validClass; return true; else formEl.className = formEl.className.replace("+Form.validClass,"); return false; , getSubmit : function(formID) var inputs = document.getElementById(formID).getElementsByTagName('input'); for(var i = 0; i < inputs.length; i++) if(inputs[i].type == 'submit') return inputs[i]; return false; ; Quindi questo è abbastanza semplice, ma può essere facilmente ampliato.
Per suddividere questo in primo luogo, creiamo una nuova proprietà che è solo il nome della stringa della nostra classe css 'valida' che, quando applicata al campo modulo, aggiunge effetti validi come un bordo verde. Definiamo anche i nostri due sub-oggetti, fname e lname, quindi possiamo definire le loro proprietà che possono essere usate da metodi altrove, queste proprietà lo sono minLength che è la quantità minima di caratteri che possono avere questi campi, lunghezza massima quali sono i caratteri massimi che il campo può avere e nomeCampo che in realtà non viene utilizzato, ma potrebbe essere afferrato per cose come l'identificazione del campo con una stringa user-friendly in un messaggio di errore (ad esempio 'Il campo Nome è richiesto.').
Quindi creiamo un metodo validateLength che accetta due argomenti: Formel l'elemento DOM per convalidare e il genere che si riferisce a uno degli oggetti secondari da utilizzare (ad esempio fname o lname). Questa funzione controlla se la lunghezza del campo è compresa tra l'intervallo minLength e maxLength, se non lo è allora rimuoviamo la nostra classe valida (se esiste) dall'elemento e restituisce false, altrimenti se è allora aggiungiamo la classe valida e restituiamo vero.
Quindi abbiamo un metodo validateEmail che accetta un elemento DOM come argomento, quindi testiamo questo valore degli elementi DOM con un'espressione regolare di tipo email; ancora una volta se passa aggiungiamo la nostra classe e restituiamo true e viceversa.
Finalmente abbiamo un metodo getSubmit. Questo metodo viene fornito l'id del modulo e quindi scorre tutti gli elementi di input all'interno del modulo specificato per trovare quale ha un tipo di invio (type = "submit"). Il motivo di questo metodo è di restituire il pulsante di invio in modo da poterlo disabilitare fino a quando il modulo è pronto per l'invio.
Mettiamo questo oggetto validatore a lavorare su una forma reale. Per prima cosa abbiamo bisogno del nostro HTML.
Ora accediamo a questi oggetti di input utilizzando JavaScript e convalidali quando il modulo viene inviato.
addEvent (window, 'load', function () var ourForm = document.getElementById ('ourForm'); var submit_button = Form.getSubmit ('ourForm'); submit_button.disabled = 'disabled'; function checkForm () var inputs = ourForm.getElementsByTagName ('input'); if (Form.validateLength (input [0], Form.fname)) if (Form.validateLength (input [1], Form.lname)) if (Form.validateEmail (input [2])) submit_button.disabled = false; return true; submit_button.disabled = 'disabled'; return false;; checkForm (); addEvent (ourForm, 'keyup', checkForm); addEvent ( ourForm, 'submit', checkForm);); Analizziamo questo codice.
Copiamo il nostro codice nella funzione addEvent in modo che quando la finestra viene caricata, questo script venga eseguito. Per prima cosa prendiamo il nostro modulo usando il suo ID e mettendolo in una variabile chiamata ourForm, quindi prendiamo il nostro pulsante di invio (utilizzando il nostro metodo getSubmit dell'oggetto Form) e lo inseriamo in una variabile denominata submit_button, e quindi imposta l'attributo disabilitato dei pulsanti di invio su "disabilitato".
Quindi definiamo una funzione checkForm. Questo memorizza tutti gli input all'interno del campo modulo come una matrice e la alleghiamo a una variabile denominata ... hai indovinato ... ingressi! Quindi definisce alcune istruzioni nidificate if che testano ciascuno dei campi all'interno della matrice di input rispetto ai nostri metodi Form. Questo è il motivo per cui abbiamo restituito true o false nei nostri metodi, quindi se restituisce true, passiamo tale istruzione e continuiamo a quella successiva, ma se restituisce false, usciamo le istruzioni if.
Seguendo la nostra definizione di funzione, eseguiamo la funzione checkForm quando la pagina inizialmente carica e alleghiamo anche la funzione a un evento keyup e a un evento submit.
Potresti chiederti, perché allegare per inviare se abbiamo disabilitato il pulsante di invio. Beh, se ti concentri su un campo di input e premi il tasto invio, tenterà di inviare il modulo e dobbiamo testarlo, quindi il motivo per cui la funzione checkForm restituisce true (invia il modulo) o false (non viene inviato modulo).
Così abbiamo imparato come definire i diversi tipi di oggetti all'interno di JavaScript e creare proprietà e metodi al loro interno. Abbiamo anche imparato una funzione addEvent elegante e abbiamo usato il nostro oggetto in un esempio di base del mondo reale.
Questo conclude le basi di JavaScript Object Orientation. Spero che questo possa farti iniziare a costruire la tua libreria JavaScript! Se ti è piaciuto questo articolo e sei interessato ad altri argomenti relativi a JavaScript, pubblicali nei commenti perché sarei lieto di continuare a scriverli. Grazie per aver letto.
Perché non controllare anche l'intervallo di elementi JavaScript su CodeCanyon. Puoi trovare script per creare cursori, conti alla rovescia, caricatori e uploader e molto altro ancora.
Elementi JavaScript più famosi su Envato Market
