Estoy escribiendo una microbiblioteca en lugar de usar jQuery. Solo necesito 3-4 métodos (para DOM traversal, Agregar Eventlisteners, etc.). Así que decidí escribirlos yo mismo en lugar de inflar el sitio con jQuery.
Aquí está el fragmento del código:
lib.js
window.twentyFourJS = (function() { let elements; const Constructor = function(selector) { elements = document.querySelectorAll(selector); this.elements = elements; }; Constructor.prototype.addClass = function(className) { elements.forEach( item => item.classList.add(className)); return this; }; Constructor.prototype.on = function(event, callback, useCapture = false){ elements.forEach((element) => { element.addEventListener(event, callback, useCapture); }); return this; } const initFunction = function(selector){ return new Constructor(selector); } return initFunction; })(twentyFourJS); script.js
(function($){ $('.tab-menu li a').on('click', function(event) { console.log('I am clicked'); // This works this.addClass('MyClass'); // This does NOT work (as expected) // I want to be able to do this $(this).addClass('MyClass'); event.preventDefault(); }); })(twentyFourJS); Básicamente, quiero poder usar $(this) como lo usamos en jQuery.
this.addClass('MyClass') y $(this).addClass('MyClass') no funcionarán y este es el comportamiento esperado.
Según tengo entendido, this se refiere al elemento HTML simple. Por lo tanto, no tiene acceso a ningún método de Constructor. no funcionará
Y no he escrito ningún código que envuelva el elemento en el objeto Constructor en $(this) . Tendré que hacer algunos cambios en mi Constructor para poder acceder a las funciones de Constructor usando $(this) . ¿Cuáles son esos cambios / adición a la misma?
Por favor, recomiende solo las formas de Vanilla JS en lugar de las bibliotecas.
en su constructor necesita ver lo que tiene y manejarlo de diferentes maneras.
const Constructor = function(selector) { if (typeof selector === 'string') { elements = document.querySelectorAll(selector); } else { // need some sort of check to see if collection or single element // This could be improved since it could fail when someone would add a length property/attribute elements = selector.length ? selector : [selector]; } this.elements = elements; };caso 1. var elm = documento .getElementById("ID") $(elm) caso 2. $(este) -- ventana
function $(selector){ var element; if (typeof selector === 'string') { element = document.querySelectorAll(selector) } if (element.nodeType || element=== window) element= [selector]; return element ; }Todo lo que realmente necesita hacer es asegurarse de que su argumento Constructor pueda distinguir entre un selector de cadena que se pasa y un objeto.
const Constructor = function(selector) { if(typeof selector == "string"){ elements = document.querySelectorAll(selector); this.elements = elements; } else{ this.elements = selector; } };Puede ir más allá de esto, pero como mínimo para el ejemplo dado que funciona.
Ejemplo en vivo a continuación:
window.twentyFourJS = (function() { let elements; const Constructor = function(selector) { if(typeof selector == "string"){ elements = document.querySelectorAll(selector); this.elements = elements; } else{ this.elements = selector; } }; Constructor.prototype.addClass = function(className) { elements.forEach( item => item.classList.add(className)); return this; }; Constructor.prototype.on = function(event, callback, useCapture = false){ elements.forEach((element) => { element.addEventListener(event, callback, useCapture); }); return this; } const initFunction = function(selector){ return new Constructor(selector); } return initFunction; })(); (function($){ $('.btn').on('click', function(event) { console.log('I am clicked'); // This works // I want to be able to do this $(this).addClass('MyClass'); event.preventDefault(); }); })(twentyFourJS); .MyClass{ background-color:red } <button class="btn">Click me</btn>