I have a site with multiple Javascript files included. Two of the JS files have the following variable:
var $gridName
Will this cause any conflicts for me in my site? For example, will the value of $gridName be set by the last JS file that got included or some other type of unwanted behavior?
Here is the top of one of my files, where the variable is declared:
$(function () {
var intlastRowId;
var strAppName = 'allocation-details';
var $gridName = $("#grid-allocation-details");
Yes same variable named may give conflicts i.e one value can overwrite other it depends on few things like are those variables global or local.
Related
I would like to use a query string parameter so that way I can specify the name of a DOM element.
I have some code that requires the height of the header and I would like that code to work for any theme. Only at times the header uses the <header> tag, at times it has a specific identifier, at times it is a specific class... to be able to reuse that code over and over again, I'd like to include it in a way such as:
<script src="https://www.example.com/js/my-script.js?c=header"></script>
What I want to be able to do is get the "?c=header" part from that JavaScript URL to send search a DOM object with jQuery(".header"). Do we have a way to know the URL of the JavaScript itself from the JavaScript being executed?
Obviously, I know of window.location.href and that's not the URL I'm looking for.
As mentioned by #Kaiido in a comment, there is the document.currentScript parameter that gives you access to the <script> tag which is currently running. Only there is a small trick to it, that parameter is defined on the first pass, not when executing functions within your script.
So what one can do is save that information, or at least what you need from that object, in the global scope or a static in your object.
In my case, I just did the following:
// Script to tweak things on many websites
var this_script_url = document.currentScript.src;
jQuery(document).ready(function()
{
// at this point: "document.currentScript === null"
var qs = this_script_url.split("?", 2);
if(qs && 2 == qs.length)
{
... // handle qs[1] which is the query string (a=1&b=3&...)
}
});
Please make sure you don't use a global name that's too generic. It should include the name of your script or abbreviation thereof. Otherwise you are likely to clash with another script's global.
Now if you have a prototype object, I would suggest you use a static member instead of a global.
var my_class = {};
my_class.script_url = document.currentScript.src;
// and later you can reference it directly as in:
url = my_class.script_url;
This way you are more likely to avoid clashing problems (the only thing that needs to be changing in case of a clash is the name my_class).
At this point, the ES5 or ES6 class keyword does not offer you to create variables.
I have a requirement to minify the constant values in the javascript project I am working on.
Currently I define the constants as something like this:
export const Constants = {
I_AM_CONSTANT: 'hello',
ANOTHER_CONSTANTS: 10,
YET_ANOTHER_CONSTANTS: false,
NO_MORE_CONSTANT: 'end'
};
and I put this object into a separate file.
Then I use UglifyPlugin of WebPack to minify the codes.
But what I get is something like
e.Constants = {
I_AM_CONSTANT: 'hello',
ANOTHER_CONSTANTS: 10,
YET_ANOTHER_CONSTANTS: false,
NO_MORE_CONSTANT: 'end'
};
It's like no minification effect at all. Can anyone tell me what is the correct way to do the minifications for these constants? How can I change my code? I also would like to know some best practice of writing constant values in javascript if possible.
You can't minify what you have because the minified won't know where there to be used. If you used injection correctly though the consuming code can be minified, e.g.
var closure = function(constants){
//constants used lots in here.
}(e.Constants);
could safely be minfied to
var closure = function(c){
//c used lots in here.
}(e.Constants);
e.constants gets closed over into a local variable constants, this can be happily minified to c as the minifer knows it's scope, it's inside the closure and is injected.
Where as this:
function closure(){
//e.constants used lots in here
}
can't be minified because any change to e.constants would be breaking.
Yo!
I have an arbitrary javascript file, let's call it localScript, and just say it looks something like this:
<script id="myScript" type="text/javascript">
function () {
var blue = 'blue';
var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"brown"
};
var bluePerson = function () {
person[color] = blue;
};
}
</script>
I want to be able to use another externalScript to dynamically change the contents of this localScript. For this simple example, let's just say I want to update some of the values in localScript, like—maybe change age of the person object to 75. (Obviously, there's very simple ways to do this, but for my use case it's imperative that I use another externalScript to generate the contents of this localScript).
It would be easy if there was something like .innerHtml which I could use in the externalScript which would allow me to select an element and then replace the 'innerHtml' contents. The localScript, though, obviously isn't composed of elements.
As far as I know, when using a script to modify another script, there aren't any 'easy' ways to reference variables/objects/items in the script.
Things I've considered are indexOf(), search(), and match(), which I could use in externalScript to find strings inside localScript and then replace the values. I feel though as these could be performance no-no's, especially if the script grows.
Are there any easy ways to do this—with an emphasis on performance? I feel like there must be some easy way to reference one of the items in the script, though, I suppose a script is all one large string.. and maybe there is no simple way.
BTW—I'm using AngularJS, if there are any built in methods—though I think this is mostly just a javascript thing.
Thanks a bunch!
It looks like a bad idea, but... well, if it is imperative...
It makes no sense to change a script in a <script> tag - if it is in DOM, it has already executed (and no longer matters). Thus, to change the script before it has a chance to execute, you need to load it using AJAX, change the text, then eval it.
You can easily change the variables. Refer following steps
Include external script just below the script you have written.
Access the variables in the external script as if they are locally declared.
The variables you have created in above script are available in global scope and hence should be accessible from everywhere.
Note: This answer was added before the function clause was added.
İ tried to do it simply by assign the files of the input into a variable:
var files = document.getElementById("upload").files;
but there seems to be a connection created with this assign so every time the input changes the variable changes too.
so how can I do that without this connection?
You just want the filenames? Then just get the filenames :
var files = [],
upload = document.getElementById("upload");
upload.onchange = function() {
for (var i=0;i<upload.files.length;i++) {
files.push(upload.files[i].fileName);
}
}
??? No "inherited" behaviour from FileList, but I assume I misunderstand.
That's because it's being used as a reference to the files property. If you don't know what that means, do some reading on Google for "pass by value vs pass by reference."
What you need to do to copy the value unfortunately is something like this:
var files = (function() { return document.getElementById("upload").files; })();
In order to copy the value with no reference to the .files property.
The simplistic answer of what is happening here is that var files references the memory address of the files property of that DOM element. It looks to you like it's copying the value when in fact it is pointing to that memory slot and access it is just following a trail to whatever is stored there and accessing it.
I have modified #Mike's answer and came to a result where it actually works. I am writing the answer for a single file which can be converted to support multiple files.
var file = document.getElementById("upload").files[0]
this will store the file and not the refrence to the file hence if the value of upload file type changes the value in file remains unchanged.
Hope this might help someone else
I've been struggling to convert a JavaScript function to a global variable.
I've got 2 files in total that are basically part of the entire function, here is the JavaScript function.
<script type="text/javascript">
$.get("banner1.php", function(getbannerlink1) {
$("#banner1").load(getbannerlink1+ " #productImage");
// var window.bannerlink1=getbannerlink1; (this doesn't want to work)
});
<script>
Basically banner1.php selects ONE random URL out of an array, and echoes the URL. This JavaScript then gets the URL, and then does a .load() function of that URL and gets the #productImage class from that URL, basically it gets the product image from the random URL. That works all good. Now I need to convert the getbannerlink1 variable to a global variable, because I would like to use the link outside of this function as well.
I've tried using the following just before closing the function:
var window.bannerlink1=getbannerlink1;
but this is just destroying the function altogether :/
What am I doing wrong?
var window.bannerlink1 is a syntax error. var should only be used with variable identifiers, which may not contain a period.
You want to set a property of window, not declare a new variable name, so just drop the var.
Drop the var
window.bannerlink1 = getbannerlink1;
Ideally you would avoid using a lot of globals and use a global namespace to hold the values.