Quiero convertir jquery a js ligero. Pero me sale error.
Como si quisiera usar $('#app').html('test') de jquery;
var $ = function (method_name) { return document.querySelector(method_name); } $.prototype.html = function (value) { this.innerHTML = value; }; $('#app').html('test'); // <--- .html() is not function¿Cómo agregar .html() en $()?
solo funciona $('#app').innerHTML = 'test'
Puedes intentar hacerlo con class :
class MyJQueryObject { constructor(query) { this.target = document.querySelector(query); } html(newHTML) { if (typeof newHTML !== 'undefined') this.target.innerHTML = newHTML; return this.target.innerHTML; } } const $ = function (query) { return new MyJQueryObject(query); } const target = $('#target'); console.log(target.html()); target.html('It was easy'); <div id="target">Change me if you can</div> Además, con class , puede agregar/eliminar métodos fácilmente. Y la mejor parte es que puede definir html no como una función sino como una propiedad con la ayuda de getters y setters. Para mí es más claro que comprobar si pasa algún argumento o no. Ejemplo de uso:
class MyJQueryObject { constructor(query) { this.target = document.querySelector(query); } get html() { return this.target.innerHTML; } set html(newHTML) { this.target.innerHTML = newHTML; } } const $ = function (query) { return new MyJQueryObject(query); } const target = $('#target'); console.log(target.html); target.html = 'It was easy'; <div id="target">Change me if you can</div>Acabo de encontrar jquery js alternativo -> CashJS.
La razón por la que quiero convertir jquery a vanilla js es porque me preocupa el rendimiento rápido y js muy ligero también. CashJS es un poco más rápido que jQuery.