So, I have a lot of places with code, when I push some elements to array:
arr.push(...)
But the problem is, that I would like to run custom code after each push. Basically the question is not only about this example. What I want to do is something like this:
func1.func2(...);
After this I want to run another function which will get all things, which func2 did and for example log it. But these functions in code are a lot and it is not desirable to write something like this every time:
if (func1.func2(...)) {
log_results();
}
Instead, for every func1.func2() I want automatically run another separate function, which will get results and log it.
The only way to really accomplish this is to wrap it in a function that does the extra work you want.
function pushAndLog(item) {
arr.push(item);
// Additional Code here
logResults();
}
This is an interesting question. There are plenty of libraries like Lodash that do similar things to functions. Like methods that return copies of functions with arguments partially applied: _.curry. I tested it and it works on Array.prototype.push.
Doing some research I found this post with this answer: JavaScript: clone a function and decided to try to do what you wanted without making the clone method.
Here is what I came up with. Replace the console.log with a call to any function you like or any other code you wish.
Array.prototype.push = (function() {
var old = Array.prototype.push;
var push = function () {
console.log('my new push where I can do what I want, like log some stuff');
return old.apply(this, arguments)
};
return push;
})();
var foo = [];
foo.push(1,2,3);
console.log(foo);
You could add another prototype to Array that uses push inside and then whatever else you want to execute.
let testArr = [];
Array.prototype.pushPlusStuff = function(val) {
this.push(val);
console.log("executing other stuff here");
};
testArr.pushPlusStuff("test");
console.log(testArr);
This will make the .pushPlusStuff method available to all Arrays
Actually gforce301 code helped me. I was dealing with Google dataLayer and the task was to log all push data (except some). This code snippet helped me:
var dataLayer_copy = dataLayer.push;
dataLayer.push = function() {
dataLayer_copy.apply(this, arguments);
console.log(JSON.stringify(arguments));
$.post('/log', {data: arguments}, function() {
}, 'json');
};
Related
I have an object function like this:
var batman = function () {
this.constructor.prototype.go = function(params){
......
}
}
When calling batman.go() I'm passing an object in with a few keys such as:
{
a:1,
b:2,
action:function(){..code to scan and inject into...}
}
My question is, how do I in batman.go() function, scan through the input param function code of 'action' and if a match is found, inject code into a certain place.
The code I am looking for is:
history.pushState({name:'homepage'},null,uri);
I want to inject so it looks like this:
history.pushState({id:an_id_variable,name:'homepage'},null,uri);
What is being inserted is:
id:an_id_variable
Use function.toString() to get the source of params.action, String.replace() to find and replace occurences of the snippet in question, and then the Function() constructor to dynamically create a new function with the amended source code:
var batman = function () {
this.constructor.prototype.go = function(params){
...
let newAction = new Function(params.action.toString().replace(
/history\.pushState\({name:'homepage'},null,uri\);/g,
`history.pushState({id:${an_id_variable},name:'homepage'},null,uri);`
));
//use newAction() however you like
}
}
It should be noted that if any end user has any amount of control over the content that can go in params.action, this would allow for completely arbitrary code injection by that user - but as pointed out in comments, arbitrary code can already be run on browsers via developer console. Just be aware of the security implications of a solution like this.
Also note that using the Function constructor binds the function to the global scope and it will lose any this context. You can bind it to an appropriate this context with function.bind() like this:
newAction = newAction.bind(params.bindTarget);
Then, when newAction executes, whatever params.bindTarget references will be this.
I want to use an initialization function that will be called after a user visits a part of the application, but after that first visit I don't want to initialize anymore. A simple way to do this is using a flag and an if-statement, but there is a nicer solution to this problem:
in other languages I changed the body of the init function so that after the call of this method.
Can this be done in Javascript too? I wrote something like this, but eclipse says that it is an illegal assignment:
function initEdit(){
...
this = function() {};
}
Yes, you can, but this doesn't refer to the function, so you have to specify it by name:
function initEdit(){
...
initEdit = function() {};
}
Another alternative, that might be easier to follow, is to just use a variable:
var initialised = false;
function initEdit(){
if (!initialised) {
initialised = true;
...
}
}
I failed to create a mini-library with some useful functions that I have found over the Internet, and I want to use them easily by just including a file to the HTML (like jQuery).
The problem is that some vars and functions share the same name and they are causing problems.
Is there a better solution to this instead of giving crazy names to the vars/funcs like "bbbb123" so the odds that someone is working with a "bbbb123" var is really low?
I would put all of your functions and variables into a single object for your library.
var MyLibrary = {
myFunc: function() {
//do stuff
},
myVar: "Foo"
}
There are a few different ways of defining 'classes' in JavaScript. Here is a nice page with 3 of them.
You should take one variable name in the global namespace that there are low odds of being used, and put everything else underneath it (in its own namespace).
For example, if I wanted to call my library AzureLib:
AzureLib = {
SortSomething: function(arr) {
// do some sorting
},
DoSomethingCool: function(item) {
// do something cool
}
};
// usage (in another JavaScript file or in an HTML <script> tag):
AzureLib.SortSomething(myArray);
Yes, you can create an object as a namespace. There are several ways to do this, syntax-wise, but the end result is approximately the same. Your object name should be the thing that no one else will have used.
var MyLibrary = {
myFunc: function() { /* stuff */ }
};
Just remember, it's object literal syntax, so you use label : value to put things inside it, and not var label = value;.
If you need to declare things first, use a wrapping function to enclose the environment and protect you from the global scope:
var MyLibrary = (function() {
var foo = 'bar';
return {
myFunc: function() { /* stuff */ }
};
})(); // execute this function right away to return your library object
You could put all of your library's functions inside of a single object. That way, as long as that object's name doesn't conflict, you will be good. Something like:
var yourLib = {};
yourLib.usefulFunction1 = function(){
..
};
yourLib.usefulFunction2 = function(){
..
};
There are several functions in jquery which you can do the following:
$('#element').each().get('title').othercmd()
How can I create a class ( or a series of classes ) to replicate this behavior?
Basically, I want to something like this:
test = new Something()
test.generateSection('title').addData('somedata')
What is correct for this?
Thanks
One approach is to return "this" (the object) in each function. So you could do something like this:
<script>
var Something = function() {
this.hi = function() {
alert('hi');
return this;
};
this.bye = function() {
alert('bye');
return this;
};
}
var myObj = new Something();
myObj.hi().bye();
</script>
Just return the thing that you are operating on at the end of each method. (this usually).
You can implement a chain pattern just by returning the current instance in all the methods that you want to be able to chain.
Something.prototype.generateSection = function(title){
... code ...
this.sectionAdded = ...;
return this;
}
Something.prototype.addData = function(data)
{
... continue manipulating this.sectionAdded however you need it ..
return this;
}
And do the same with the other methods of your "class". Something to keep in mind is that you must store the objects that you will need in future calls, in your case you are generating a section, so you would have to put that inside your instance (in some private variable like sectionAdded) so you will be able to continue manipulating it from other methods.
I don't know if there is a way to easily chain together commands with plain javascript, but if you wanna try this with jQuery, you'll have to write your code as a jQuery plugin.
It's actually pretty easy and there are tons of tutorials for writing your own plugins.
One of the easiest I came across is this tutorial:
building-your-first-jquery-plugin-that.html
I am trying to write a javascript class that loads script files as they are needed. I have most of this working. It is possible to use the library with the following Syntax:
var scriptResource = new ScriptResource('location/of/my/script.js');
scriptResource.call('methodName', arg1, arg2);
I would like to add some additional syntactic sugar so you could write
var scriptResource = new ScriptResource('location/of/my/script.js');
scriptResource.methodName(arg1, arg2);
I'm almost certain that this isnt possible but there may be an inventive solution. I guess what there need to be is some sort of methodCall event. SO the following could work
ScriptResource = function(scriptLocation)
{
this.onMethodCall = function(methodName)
{
this.call(arguments);
}
}
This code is obviously very incomplete but I hope it gives an idea of what I am trying to do
Is something like this even remotely possible?
There is a non standard method, __noSuchMethod__ in Firefox that does what you're looking for
have a look at
https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Object/noSuchMethod
so you could define
obj.__noSuchMethod__ = function( id, args ) {
this[id].apply( this, args );
}
If the set of method names is limited, then you could generate those methods:
var methods = ["foo", "bar", "baz"];
for (var i=0; i<methods.length; i++) {
var method_name = methods[i];
WildCardMethodHandler[method_name] = function () {
this.handleAllMethods(method_name);
};
}
edit: Posted this answer before the question changed dramatically.
An intermediary solution might be to have syntax such as:
var extObj = ScriptResource('location/of/my/script.js');
extObj('methodname')(arg1,arg2);
the code might look like this:
function ScriptResource(file) {
return function(method) {
loadExternalScript(file);
return window[method];
}
}
All kinds of assumptions in the code above, which I'd let you figure out yourself. The most interesting, IMHO, is - in your original implementation - how do you get the proxyied method to run synchronously and return a value? AFAIK you can only load external scripts asynchronously and handle them with an "onload" callback.