Share
En los últimos años, JavaScript ha ganado cada vez más popularidad, en parte debido a las bibliotecas que se han desarrollado para hacer que las aplicaciones y los efectos de JavaScript sean más fáciles de crear para aquellos que aún no han comprendido el idioma principal..
Mientras que en el pasado, era un argumento común de que JavaScript era un lenguaje básico y era muy simple y no tenía una base real; este ya no es el caso, especialmente con la introducción de aplicaciones web de gran escala y 'adaptaciones' como JSON (Notación de objetos de JavaScript).
JavaScript puede tener todo lo que un lenguaje orientado a objetos tiene para ofrecer, aunque con un esfuerzo adicional fuera del alcance de este artículo..
funcion myObject () ;
Enhorabuena, acabas de crear un objeto. Hay dos formas de crear un objeto de JavaScript: son 'Funciones del constructor' y 'Notación literal'. El de arriba es una función de Constructor, explicaré brevemente cuál es la diferencia, pero antes de hacerlo, esto es lo que parece una definición de Objeto usando notación literal..
var myObject = ;
Literal es una opción preferida para el espaciado de nombres para que su código JavaScript no interfiera (o viceversa) con otros scripts que se ejecutan en la página y también si está utilizando este objeto como un solo objeto y no requiere más de una instancia de objeto, mientras que la notación de tipo de función Constructor es preferible si necesita realizar un trabajo inicial antes de crear el objeto o si requiere varias instancias del objeto en las que se pueda cambiar cada instancia durante la vida útil del script. Continuemos construyendo ambos objetos simultáneamente para poder observar cuáles son las diferencias..
Accentsconagua
function myObject () this.iAm = 'an object'; this.whatAmI = function () alert ('I am' + this.iAm); ; ; var myObject = iAm: 'an object', whatAmI: function () alert ('I am' + this.iAm); Para cada uno de los objetos, hemos creado una propiedad 'iAm' que contiene un valor de cadena que se utiliza en nuestro método de objetos 'whatAmI' que alerta un mensaje.
Las propiedades son variables creadas dentro de un objeto y los métodos son funciones creadas dentro de un objeto..
Es probable que ahora sea el mejor momento para explicar cómo usar las propiedades y los métodos (aunque ya lo habría hecho si estuviera familiarizado con una biblioteca).
Para usar una propiedad, primero escribe a qué objeto pertenece (por lo tanto, en este caso es myObject) y luego, para hacer referencia a sus propiedades internas, se pone una parada completa y luego el nombre de la propiedad para que finalmente se vea como myObject.iAm ( esto devolverá 'un objeto').
Para los métodos, es lo mismo, excepto para ejecutar el método, como con cualquier función, debe poner paréntesis después de él; de lo contrario, solo devolverá una referencia a la función y no a lo que realmente devuelve la función. Entonces se verá como myObject.whatAmI () (esto alertará 'Soy un objeto').
También existe una diferencia entre la forma en que se utilizan estos dos tipos de declaraciones de objetos..
Para usar un objeto anotado literalmente, simplemente utilícelo haciendo referencia al nombre de su variable, de modo que cuando sea necesario, puede llamarlo escribiendo;
myObject.whatAmI ();
Con las funciones de constructor, debe crear una instancia (crear una nueva instancia de) el objeto primero; usted hace esto escribiendo
var myNewObject = new myObject (); myNewObject.whatAmI ();
Usemos nuestra función constructora anterior y construyamos sobre ella para que realice algunas operaciones básicas (pero dinámicas) cuando la instanciamos.
function myObject () this.iAm = 'an object'; this.whatAmI = function () alert ('I am' + this.iAm); ; ; Al igual que cualquier función de JavaScript, podemos usar argumentos con nuestra función de constructor;
function myObject (what) this.iAm = what; this.whatAmI = function (language) alert ('I am' + this.iAm + 'del' + language + 'language'); ; ; Ahora vamos a crear una instancia de nuestro objeto y llamar a su método whatAmI, completando los campos requeridos a medida que lo hacemos..
var myNewObject = new myObject ('un objeto'); myNewObject.whatAmI ('JavaScript'); Esto alertará 'Soy un objeto del lenguaje JavaScript'.
Anteriormente mencioné las diferencias entre los constructores de objetos y los literales de objetos y que cuando se realiza un cambio en un objeto literal, afecta a ese objeto en toda la secuencia de comandos, mientras que cuando se crea una instancia de la función Constructor y se realiza un cambio en esa instancia No afectará a ninguna otra instancia de ese objeto. Probemos un ejemplo;
Primero crearemos un objeto literal;
var myObjectLiteral = myProperty: 'esta es una propiedad' // alerta de alerta actual de myProperty (myObjectLiteral.myProperty); // esto alertará 'esto es una propiedad' // cambiar myProperty myObjectLiteral.myProperty = 'esta es una propiedad nueva'; // alerta de alerta myProperty actual (myObjectLiteral.myProperty); // esto alertará 'esto es una nueva propiedad', como se esperaba
Incluso si creas una nueva variable y la apuntas hacia el objeto, tendrá el mismo efecto.
var myObjectLiteral = myProperty: 'esta es una propiedad' // alerta de alerta actual de myProperty (myObjectLiteral.myProperty); // esto alertará 'esto es una propiedad' // define una nueva variable con el objeto como valor var sameObject = myObjectLiteral; // cambiar myProperty myObjectLiteral.myProperty = 'esta es una propiedad nueva'; // alerta de alerta myProperty actual (sameObject.myProperty); // esto seguirá alertando 'esta es una propiedad nueva'
Ahora probemos un ejercicio similar con una función de Constructor.
// esta es otra forma de crear una función de Constructor var myObjectConstructor = function () this.myProperty = 'this is a property' // instanciar nuestro Constructor var constructorOne = new myObjectConstructor (); // instanciar una segunda instancia de nuestro Constructor var constructorTwo = new myObjectConstructor (); // alertar a myProperty actual de la instancia de constructorOne (constructorOne.myProperty); // esto alertará 'esto es una propiedad' // alertará a myProperty actual de constructorTwo instancia de alerta (constructorTwo.myProperty); // esto alertará 'esto es una propiedad'
Entonces, como se esperaba, ambos devuelven el valor correcto, pero cambiemos myProperty para una de las instancias.
// esta es otra forma de crear una función de Constructor var myObjectConstructor = function () this.myProperty = 'this is a property' // instanciar nuestro Constructor var constructorOne = new myObjectConstructor (); // cambiar myProperty del primer constructorOne.myProperty de instancia = 'esta es una propiedad nueva'; // instanciar una segunda instancia de nuestro Constructor var constructorTwo = new myObjectConstructor (); // alertar a myProperty actual de la instancia de constructorOne (constructorOne.myProperty); // esto alertará 'esta es una nueva propiedad' // alertará a myProperty actual de la alerta de instancia constructorTwo (constructorTwo.myProperty); // esto seguirá alertando 'esto es una propiedad'
Como puede ver en este ejemplo, aunque cambiamos la propiedad de constructorOne, no afectó a myObjectConstructor y, por lo tanto, no afectó a constructorTwo. Incluso si se creara una instancia de constructorTwo antes de que cambiáramos la propiedad myProperty de constructorOne, no afectaría a la propiedad myProperty de constructorTwo, ya que es una instancia completamente diferente del objeto dentro de la memoria de JavaScript..
Entonces, ¿cuál debería usar? Bueno, depende de la situación, si solo necesita un objeto de su tipo para su script (como verá en nuestro ejemplo al final de este artículo), use un objeto literal, pero si necesita varias instancias de un objeto , donde cada instancia es independiente de la otra y puede tener diferentes propiedades o métodos dependiendo de la forma en que está construida, luego use una función constructora.
Mientras explicaba las funciones de los constructores, había muchas palabras clave de 'esto' y me imagino qué mejor momento para hablar sobre el alcance.!
Ahora es posible que se pregunte "¿de qué ámbito habla?" El alcance en JavaScript se basa en la función / objeto, por lo que significa que si está fuera de una función, no puede usar una variable que esté definida dentro de una función (a menos que use un cierre).
Sin embargo, hay una cadena de alcance, lo que significa que una función dentro de otra función puede acceder a una variable definida en su función principal. Echemos un vistazo a un código de ejemplo.
Como puedes ver en este ejemplo., var1 Se define en el objeto global y está disponible para todas las funciones y objetos., var2 está definido dentro de function1 y está disponible para function1 y function2, pero si intenta hacer referencia a él desde el objeto global, le dará el error 'var2 no está definido', var3 Solo es accesible para function2..
Entonces, ¿qué hace referencia a 'esto'? Bueno, en un navegador, 'esto' hace referencia al objeto de la ventana, por lo que técnicamente la ventana es nuestro objeto global. Si estamos dentro de un objeto, 'esto' se referirá al objeto en sí mismo; sin embargo, si estás dentro de una función, esto también se referirá al objeto de la ventana y, de la misma manera, si estás dentro de un método que está dentro de un objeto ' este 'se referirá al objeto.
Debido a nuestra cadena de alcance, si estamos dentro de un subobjeto (un objeto dentro de un objeto), 'esto' se referirá al subobjeto y no al objeto principal.
Como nota al margen, también vale la pena agregar que cuando se utilizan funciones como setInterval, setTimeout y eval, cuando se ejecuta una función o método a través de uno de estos, 'this' se refiere al objeto de la ventana, ya que estos son métodos de window, por lo que setInterval ( ) y window.setInterval () son los mismos.
Ok, ahora que lo hemos dejado de lado, vamos a hacer un ejemplo del mundo real y crear un objeto de validación de formulario!
Primero debo presentarle la función addEvent que crearemos y es una combinación de la función addEventListener () de ECMAScript (Firefox, Safari, etc.) y la función attachEvent () de Microsoft ActiveX Script..
función addEvent (to, type, fn) if (document.addEventListener) to.addEventListener (type, fn, false); else if (document.attachEvent) to.attachEvent ('on' + type, fn); else a ['on' + type] = fn; ; Esto crea una nueva función con tres argumentos., a siendo el objeto DOM al que estamos adjuntando el evento, tipo siendo el tipo de evento y fn siendo la función ejecutada cuando se desencadena el evento. Primero verifica si se admite addEventListener, si es así usará eso, si no lo hará, buscará attachEvent y si todo lo demás falla, probablemente esté usando IE5 o algo igualmente obsoleto, así que agregaremos el evento directamente a su propiedad de evento (nota: la tercera opción sobrescribirá cualquier función existente que se haya adjuntado a la propiedad del evento, mientras que las dos primeras la agregarán como una función adicional a su propiedad del evento).
Ahora configuremos nuestro documento para que sea similar a lo que podrías ver cuando desarrolles jQuery stuff.
En jQuery tendrías;
$ (document) .ready (function () // todo nuestro código que se ejecuta después de que la página esté lista va aquí);
Usando nuestra función addEvent tenemos;
addEvent (ventana, 'cargar', función () // todo nuestro código que se ejecuta después de que la página está lista va aquí);
Ahora para nuestro objeto Form.
var Form = validClass: 'valid', fname: minLength: 1, maxLength: 15, fieldName: 'First Name', lname: minLength: 1, maxLength: 25, fieldName: 'Last Name', validateLength: función (formEl, tipo) 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; ; Así que esto es bastante básico pero se puede ampliar fácilmente.
Para desglosar esto primero, creamos una nueva propiedad que es solo el nombre de la cadena de nuestra clase 'válida' css que, cuando se aplica al campo de formulario, agrega efectos válidos, como un borde verde. También definimos nuestros dos sub-objetos., nombre y lname, por lo que podemos definir sus propias propiedades que pueden ser utilizadas por métodos en otros lugares, estas propiedades son longitud mínima que es la cantidad mínima de caracteres que estos campos pueden tener, longitud máxima que es el máximo de caracteres que el campo puede tener y nombre del campo que en realidad no se usa, pero podría ser capturado para cosas como identificar el campo con una cadena fácil de usar en un mensaje de error (por ejemplo, 'Se requiere el nombre del campo').
A continuación creamos un método validateLength que acepta dos argumentos: formEl el elemento DOM a validar y el tipo que se refiere a uno de los subobjetos a utilizar (es decir, fname o lname). Esta función verifica si la longitud del campo se encuentra entre el rango minLength y maxLength, si no es así, eliminamos nuestra clase válida (si existe) del elemento y devolvemos false, de lo contrario, si es así, agregamos la clase válida y devolvemos cierto.
Luego tenemos un método validateEmail que acepta un elemento DOM como argumento, luego probamos este valor de elementos DOM contra una expresión regular de tipo de correo electrónico; de nuevo si pasa agregamos nuestra clase y devolvemos true y viceversa.
Finalmente tenemos un método getSubmit. Este método recibe el ID del formulario y luego recorre todos los elementos de entrada dentro del formulario especificado para encontrar cuál tiene un tipo de envío (type = "submit"). El motivo de este método es devolver el botón de envío para que podamos deshabilitarlo hasta que el formulario esté listo para enviar.
Pongamos este objeto validador para trabajar en una forma real. Primero necesitamos nuestro HTML.
Ahora accedamos a estos objetos de entrada utilizando JavaScript y validémoslos cuando se envíe el formulario.
addEvent (window, 'load', function () var ourForm = document.getElementById ('ourForm'); var submit_button = Form.getSubmit ('ourForm'); submit_button.disabled = 'disabled'; function checkForm () var entradas = ourForm.getElementsByTagName ('input'); if (Form.validateLength (entradas [0], Form.fname)) if (Form.validateLength (entradas [1], Form.lname)) if (Form.validateEmail (entradas [2])) submit_button.disabled = false; return true; submit_button.disabled = 'disabled'; devolver false;; checkForm (); addEvent (ourForm, 'keyup', checkForm); addEvent ( nuestro formulario, 'enviar', checkForm);); Vamos a desglosar este código.
Envolvemos nuestro código en la función addEvent para que, cuando se cargue la ventana, se ejecute este script. En primer lugar, tomamos nuestro formulario utilizando su ID y lo colocamos en una variable llamada nuestro formulario, luego agarramos nuestro botón de envío (usando nuestro método getSubmit de objetos de formulario) y lo colocamos en una variable llamada botón de enviar, y luego configure el atributo de los botones de envío deshabilitados en 'deshabilitado'.
A continuación definimos una función checkForm. Esto almacena todas las entradas dentro del campo de formulario como una matriz y lo adjuntamos a una variable llamada ... lo has adivinado ... entradas! Luego define algunas declaraciones anidadas if que prueban cada uno de los campos dentro de la matriz de entradas en comparación con nuestros métodos de formulario. Esta es la razón por la que devolvimos verdadero o falso en nuestros métodos, por lo que si devuelve verdadero, pasamos esa sentencia if y continuamos con el siguiente, pero si devuelve falso, salimos de las sentencias if.
Siguiendo la definición de nuestra función, ejecutamos la función checkForm cuando la página se carga inicialmente y también adjuntamos la función a un evento keyup y un evento submit.
Podría estar preguntando, ¿por qué adjuntar para enviar si deshabilitamos el botón de enviar? Bueno, si se enfoca en un campo de entrada y presiona la tecla Intro, intentará enviar el formulario y debemos probar esto, por lo tanto, la razón por la que nuestra función checkForm devuelve true (envía el formulario) o false (no envía formar).
Así que aprendimos cómo definir los diferentes tipos de objetos dentro de JavaScript y crear propiedades y métodos dentro de ellos. También aprendimos una ingeniosa función addEvent y pudimos usar nuestro objeto en un ejemplo básico del mundo real..
Esto concluye los conceptos básicos de la orientación a objetos de JavaScript. ¡Esperamos que esto te ayude a construir tu propia biblioteca de JavaScript! Si le ha gustado este artículo y está interesado en otros temas relacionados con JavaScript, publíquelos en los comentarios, ya que me encantaría continuar escribiéndolos. Gracias por leer.
Por qué no también echa un vistazo a la gama de elementos de JavaScript en CodeCanyon. Puede encontrar scripts para crear controles deslizantes, cuentas atrás, cargadores y cargadores, y mucho más.
Artículos populares de JavaScript en Envato Market
