All geek questions in one place

Passing a javascript object to work in jQuery?

Yes, that's why I messed around with javascript for a while, but only recently got into things like object orientation, prototyping and using objects for all functions and vars.

But many frameworks, such as jQuery or extJS, have something that I still have to understand, you can define an object using the built-in function to search for dom, for example:

var a = $('#mydiv');

and then you can do a.click (function);

So my question is: how can I create a "framework" where I can write code in this style, for example:

 var mydiv = document.querySelector('mydiv'); mydiv.neph(args,args);

So, I defined my object, in this case it is a dom element or something else, now I pass it to the "neph" function with arguments, I want to create code that allows me to do this. But since mydiv does not have any function, it only has a dom element in this case, so mydiv.neph does not exist, but in jquery you can define any var and .click or .mouseover variables or something else existing in the object as function? There is confusion !: D

Ok, sorry if this is a late question btw = P

+4
source share
5 answers

jQuery and other libraries define a function called $ that takes a few optional parameters. The object returned by the call to $ is not a DOM element, but the jQuery object wraps the DOM element with a set of handy functions.

You can do something similar to yourself:

 <html> <body> <input id="derp" type="text"/> <script type="text/javascript"> function $(id) { return new myLibrary(id); }; function myLibrary(id) { this.el = document.getElementById(id); }; myLibrary.prototype.help = function() { alert(this.el.id); return this; }; // Woah! My own fake jquery! $("derp").help(); </script> </body> </html>

jQuery is much more complicated of course. For example, it will use apply and call to correctly set this in calls like jQuery.each .

+1
source

You need to create a prototype in javascript. This allows you to add a function to an already defined object (i.e. .click () Function, which you gave as an example).

You can see the jQuery code , it is open source. This is not the easiest code, but you can still see how it works and how it does it.

+1
source

Mike's comment is a good answer: look at the sources of jquery or Ext-Core.

It is possible that what you are missing is that in jquery, for example, $ () returns a jquery object that wraps a simple vanilla DOM node, providing enhanced functionality.

+1
source

In jQuery, $ is simply an alias of the jQuery object. Therefore, when you call $('#mydiv'); , you really are calling a function like jQuery('#mydiv'); . So, part of what makes jQuery so cool is that every $() function returns this , which means that when you call $() again, getting the handle to the jQuery object and all its methods. This is what allows you to do something like this:

 var a = $('#mydiv'); a.click(function() { // etc etc etc });

So, to take off your example:

 var mydiv = document.querySelector('mydiv'); mydiv.neph(args,args);

You will need to create an object with the neph function and return this object in the context of mydiv when calling querySelector.

 var myFramework = function() { this.context = undefined; this.neph = function(arg, args) { console.log(arg, args); } }; var myCuteFunction = function(element) { var f = new myFramework(); f.context = element; return f; } // ... var x = myCuteFunction('#mydiv'); x.neph(arg, args);
0
source

Since no one answered Ext, you can easily extend the prototype of the element shell:

 Ext.override(Ext.Element, { myMethod: function(a, b){ console.log(a, b, this); } });

"this" will reference the Ext.Element object.

0
source

Source: https://habr.com/ru/post/1313694/

More articles:


All Articles