I have a simple index.html file with some dragable images. My JS file looks like this:
function drop(ev){
ev.preventDefault();
var data = ev.dataTransfer.getData('text');
ev.target.appendChild(document.getElementById(data));
}
function drag(ev){
ev.dataTransfer.setData('text',ev.target.id);
}
That works perfectly fine. But, as I learned, it's good practice to write your code within a self-executed block.
So, I moved my two functions:
(function(){
function drop(ev){
ev.preventDefault();
var data = ev.dataTransfer.getData('text');
ev.target.appendChild(document.getElementById(data));
}
function drag(ev){
ev.dataTransfer.setData('text',ev.target.id);
}
})();
And now, when dragging the images around, the functions appear to be 'undefined'. They're probably newbie questions but:
Can I keep my functions in the block scope and still use them on the HTML like <div id="div0" ondrop="drop(event)">...</div>?
If not, why?
The whole point of enclosing stuff into IIFEs is to isolate them and not pollute the global environment with unnecessaries. For example,
var counter = (function() {
var current = 0;
function getCurrentAndIncrement() {
return current++;
};
return getCurrentAndIncrement;
})();
counter()
// 0
counter()
// 1
current
// ReferenceError: current is not defined
We hide what should be private, and expose what should be public.
You hid everything - then the fact that it is inaccessible should not be a surprise.
Finally, <div id="div0" ondrop="drop(event)">...</div> is a bad practice. Binding event listeners from JavaScript is much better, if a bit more complicated. Do just this:
<div id="div0">...</div>
then in JavaScript,
var div0 = document.getElementById('div0');
div0.addEventListener('drop', myHandler);
and this can, indeed, be stuffed into an IIFE. Whatever you refer to from HTML (as in your drop function) needs to be in global scope, or the browser will not be able to find it.
The answer is scope. The variables and functions defined within a function are only accessible within that function. In your first example, you're defining them globally; in your second example, they're inside a function.
Can I keep my functions in the block scope and still use them on the HTML like <div id="div0" ondrop="drop(event)">...</div>?
To use functions from old-fashioned onxyz attribute handlers, they have to be globals. You can make your functions globals by assigning them to properties on the global object, which you can access as window on browsers:
(function() {
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData('text');
ev.target.appendChild(document.getElementById(data));
}
function drag(ev) {
ev.dataTransfer.setData('text', ev.target.id);
}
window.drop = drop;
window.drag = drag;
})();
...but ideally, it's better not to create globals; the global namespace is incredibly crowded, adding to it just asks for conflicts. Instead, use modern event handling (addEventListener, attachEvent) instead of onxyz attributes.
The inner function wont be executed. Here comes the beauty of closure make js objects private & public . This code may serve your purpose
var demoFunction =(function(){
function _drop(ev){
alert("Helo");
_drag();
}
function _drag(ev){
alert("Hello1");
}
_drop();
return{
drop :_drop,
drag:_drag
}
})();
You can also call this drop and drag from other functions by demoFunction.drop & so on.Hope this is helpful for you
jsfiddle
Related
I try to submit a simple Firefox add-on and got a message from AMO editor about wrapping of variables and functions within a JavaScript object in order to prevent conflicts with other add-ons that may be installed by users. The working code is very simple and looks:
function analyze() {
var uri = document.getElementById('urlbar').value;
var requrl="http://www.myanalyzingsiteaddress.com/" + (uri);
gBrowser.selectedTab = gBrowser.addTab(requrl);
}
Is it enough to make other var names to avoid eventual conflicts or could you point me to other code change, which would fulfill the AMO editor's instruction?
Thank you in advance!
Evgenij
You should have been pointed to Javascript Object Management from the XUL School tutorial.
analyze is a generic name. In an overlay there is only one scope/namespace which is shared by the browser code itself and any additional extension code. It is therefore possible that either the browser or another add-on uses analyze as well and boom.
You need to avoid that by making names a specifc as possible. E.g.
function my_addon_id_analyze() ...
Use an an object with a (pseudo) unique name.
if (!("org" in this)) {
this.org = {};
}
if (!("example" in org)) {
org.example = {};
}
org.example.addonid = {
analyze: function() ...
};
// call
org.example.addonid.analyze();
Or even "hide" your code in an anonymous function. This is then hidden from the DOM as well, so no more <button id="example.org.addonid.mybutton" onclick="analyze()"> event handling. But you can always use addEventListener.
(function() {
"use strict";
function analyze() ...
// wire up an event handler instead of onlick
document.getElementById("example.org.addonid.mybutton").addEventListener("click", analyze);
})();
Mix some/all of the above, as long as you avoid short/generic names:
if (!("org" in this)) {
this.org = {};
}
if (!("example" in org)) {
org.example = {};
}
org.example.addonid = (function() {
function analyze() ...
function notvisibleoutside() ...
// return object of "exported"/"visible" functions.
return {
analyze: analyze
};
})();
// call
org.example.addonid.analyze()
Also, keep in mind that missing var (or let/const) declarations will implicitly declare the variable in the global scope.
E.g.:
function abc() {
for (i = 0; i < 10; ++i) doSomething();
}
Will implicitly declare a variable named i in the global scope (in a XUL window the global scope is window, therefore this will create window.i). Implicit declarations may therefore not only cause conflicts but also create quasi memory leaks, e.g.
function call_me_to_leak_1MB() {
hugeArray = new ArrayBuffer(1<<20);
}
will declare window.hugeArray that lives as long as the browser window is open instead of using a local variable that gets garbage collected as soon as the variables goes out of scope (and there are no more other references, of course).
Using strict mode makes implicit declaration an error, which is helpful to catch and avoid such mistakes early.
So much for the Javascript part. There is still other stuff that might clash.
DOM Ids: Use unique <button id="example.org.addonid.mybutton">, or more CSS friendly <button id="example-org-addonid-mybutton"> (or at the very least something like addonid-mybutton) instead of <button id="mybutton">
CSS: Never style random elements.
No: button { color: green; }
Yep: #example-org-addonid-mybutton { color: green; }
chrome.manifest:
No: content generic content/
Yep: content example-org-addonid content/.
I dinamically add divs with onlick event, but clicking got an error (Mozilla Firefox): "ReferenceError: myfoo is not defined". If I change onclick event to alert, it works fine, but non with mysefl written functions.
Here is jsfiddle
http://jsfiddle.net/UJ85S/5/
function myfoo(x)
{
alert(x);
}
$("#some").html('<div id="cool_div" onclick="myfoo('+"'xwe'"+');"></div>');
Can you, please, explain what is wrong?
(I understant that can assign.click event, but is it possible through onclick?).
What you really need to do is not let jsFiddle wrap it inside the onload event as this uses a function which creates new scope. Your function is then not accessible outside this new scope. Learn what's happening not learn how to get around it (i.e. not just hack your code to the window Object):
http://jsfiddle.net/UJ85S/12/
No wrap - in <body>
This is happening because you define myfoo inside of $(window).load(function () {...}) function (JSFIDDLE does this):
You need to declare a global function. You can do window.myfoo to declare your function instead.
window.myfoo = function (x)
{
alert(x);
}
JSFIDDLE
But yeah, it's not a good practice to polute the global scope, that's why it's better to use $(...).on("click", function () { alert(...) }) handlers.
I discourage using on... attributes in HTML because it's also another bad practice.
Your code becomes:
function myfoo (x)
{
alert(x);
}
var $divToAppend = $("<div id='cool_div'>")
$divToAppend.on("click", function () {
myfoo("hello");
});
$("#some").html($divToAppend);
And here a DEMO.
Here are two samples of code. The first one does not work and the second one does, though I'm completely at a loss as to why. Can someone explain this?
[I'm writing a simple game using a bit of jQuery to be played in a webkit browser (packaged with Titanium later).]
In the first example, Firebug tells me that "this.checkCloud" is not a function.
function Cloud(){
this.checkCloud = function(){
alert('test');
}
$("#"+this.cloudName).click(function(){
this.checkCloud();
});
}
...but then this works:
function Cloud(){
this.checkCloud = function(){
alert('test');
}
var _this = this;
$("#"+this.cloudName).click(function(){
_this.checkCloud();
});
}
This one works perfect.
Why does the first one not work? Is it because "this.checkCloud" is inside of the anonymous function?
in this example:
$("#"+this.cloudName).click(function(){
this.checkCloud();
});
this referrers to the element selected(jquery object).
what you can do is use private functions
var checkCloud = function(){
alert('test');
}
this way you can simply call it inside your anonymous function
$("#"+this.cloudName).click(function(){
checkCloud();
});
That is because the meaning of this can potentially change each time you create a new scope via a function. The meaning of this depends on how the function is invoked (and the rules can be insanely complicated). As you discovered, the easy solution is to create a second variable to which you save this in the scope where this has the expected/desired value, and then reuse the variable rather than this to refer to the same object in new function scopes where this could be different.
Try this:
function Cloud(){
this.checkCloud = function(){
alert('test');
}
var func = this.checkCloud;
$("#" + this.cloudName).click(function(){
func();
});
}
When you assign an even listener to an element, jQuery makes sure that this will refer to the element. But when you create the _this variable, you're creating a closure that jQuery couldn't mess with, even if it wanted to.
This example is a simplified version of my code. I'm still trying to grasp the new way of writing javascript (as opposed to the way 10 years ago) so thanks for your patience. I need globalVal's value to be accessible and I'm having trouble. The value is obtained from a function that is called as an argument from another method. The example is probably easier to see. Just need to be able to have access to globalvar from everywhere in the DOM. Is this possible? Thanks
<html>
<head>
<script type="text/javascript">
var globalvar;
function initialize() {
var someVariable = 5;
doSomething(someVariable, getTheVar);
}
function doSomething(someVariable, expectGlobalVar) {
//alert(someVariable);
alert(expectGlobalVar);
}
function getTheVar() {
globalVar = "test";
return globalVar;
}
</script>
<title></title>
</head>
<body onload="initialize()">
This is a test
</body>
</html>
You're mostly fine, you can directly access globalVar from any script running anywhere in the page if you declare it the way you have.
Specifically: Using var x; at page-level scope (that is, outside of any function) declares a property on the window object (it has a special feature in that it can't be deleted, but that's not important here).
var foo = 2;
window.foo = 2; // Basically the same other than the delete thing we're not worrying about here
And so:
var foo = 2;
alert(foo); // alerts "2"
alert(window.foo); // also alerts "2"
window.bar = 4;
alert(window.bar); // alerts "4"
alert(bar); // also alerts "4"
Naturally this is only true at the top level, outside of any functions. Inside functions, you're declaring something local to the function. (In essence; it's actually a lot more interesting than that.)
But since you've asked about scope, it's worth nothing that all of the other things you've defined (initialize, getTheVar, doSomething) are also globals. In general, you want to avoid putting anything in the global namespace that you can avoid putting there.
For that reason, I advocate always using a "scoping function":
(function() {
// your code here
})();
...and explicitly exporting exactly and only the things you really need to be global (by assigning them to properties on window).
In your case, you've said you need globalVar and you've also used initialize (although there are other ways to do what you're doing in initialize), so you could do this:
(function() {
var globalvar;
// Exports
window.globalVar = globalVar;
window.initialize = initialize;
// Implementation
function initialize() {
var someVariable = 5;
doSomething(someVariable, getTheVar);
}
function doSomething(someVariable, expectGlobalVar) {
//alert(someVariable);
alert(expectGlobalVar);
}
function getTheVar() {
globalVar = "test";
return globalVar;
}
})();
But you can take it further. Since you're not calling initialize until the load event of the body element, you could avoid publishing initialize. Just put your script tag at the end of the document, just before the closing </body> tag (as the YUI folks recommend), and do your initialization there:
<html>
<head>
<title>...</title>
</head>
<body>This is a test
<script type='text/javascript'>
(function() {
var globalvar;
// Initialization
initialize();
// Exports
window.globalVar = globalVar;
// Implementation
function initialize() {
var someVariable = 5;
doSomething(someVariable, getTheVar);
}
function doSomething(someVariable, expectGlobalVar) {
//alert(someVariable);
alert(expectGlobalVar);
}
function getTheVar() {
globalVar = "test";
return globalVar;
}
})();
</script>
</body>
</html>
The DOM is fully loaded and ready to go at that point.
But we can go even further if we want: We can have nothing in the global namespace if we like. If you hook up all of your handlers within your initialize function rather than using onload, onclick, and similar attributes, there's no need for globalVar to be global except to your code. (You hook up handlers after the fact by using attachEvent [on IE], addEventListener [on standards-based browsers], or better yet using a library like jQuery, Closure, Prototype, YUI, or any of several others.)
You should call function getTheVar instead of passing it:
function initialize() {
var someVariable = 5;
doSomething(someVariable, getTheVar());
}
You're doing it right.
Any variable which is declared in global scope, just like you have in the example, will be available from every scope in the window.
(BTW, declaring a global var is [almost] equivalent to window.myVar = someValue;)
The problem in your example is that you are not actually calling getTheVar on the fourth line, but rather just passing the function itself. You probably want this:
doSomething(someVariable, getTheVar());
I'm working on a proprietary site, and I'm having some issues. I'm using jQuery along with prototype, and I've got it namespaced properly, so in this question assume you can use $ or jQ as a namespaced reference to jQuery.
So I've got a bunch of functions, some mix jQuery and javascript, some plain javascript, some jQuery only. Now, currently some functions are defined within the document.ready jQuery function, and some are defined outside of it, kind of like this:
jQ(document.ready(function($) {
if ( ifConfig ) {
//page check, function calls here
fnc1();
fnc2();
fnc3();
fnc4();
}
function fnc1() {
//fnc code in here
}
function fnc2() {
//fnc code in here
}
}); //end document.ready
function fnc3() {
}
function fnc4() {
}
Now this is all pseudo code, you can assume the functions are valid and have valid code in them. Recently I was doing some debugging, and one of my functions that was declared and called inside the document.ready said it was undefined. I moved it outside of the document.ready, and everything worked again.
I'm basically trying to understand the order of how functions are initiated/called better, so my question is when do you declare functions inside the document.ready and when do you declare them outside? Do you only declare inside when they're called within that document.ready only? Or should I always just declare them outside of that document.ready?
Thanks.
Generally, you should declare & define your own namespace, where all of your application logic (including functions/methods) is located. That way you avoid collision with other scripts on your site + that way your code is much cleaner and easier to maintenaine.
var myapp = function(){
var foobar1 = null,
foobar2 = null,
foobar3 = null;
return {
getFoobar1: function(){
return foobar1;
},
getFoobar2: function(){
return foobar2;
},
setFoobar1: function(foo){
foobar1 = foo;
},
clickhandler: function(e){
alert('I am an event handler, and I am not anonymous');
}
// etc.
};
};
$(document).ready(function(){
var Application = myapp();
Application.getFoobar2();
$(document).bind('click', Application.clickhandler);
});
That pattern (some call it the "method pattern") creates a closured function/object which also guarantees private member variables within your namespace, only accessible through the getter functions from the outside.
This is really only a pretty basic example, you can push this idea & pattern to an extend, which is very nice & a good thing (IMO).
A great book about this stuff which was named and recommended pretty often is "Javascript: The Good Parts" by Douglas Crockford.
If a function is only used inside the document ready function, then declare it inside so you don't pollute the global scope. Otherwise, declare it outside so it the rest of your script has access to those functions.
(document).ready is more used for things that need to be executed at page load, and not function declarations. If you declare them inside of (document).ready, their scope will be local to that block - if they're only used locally, that's fine and they should be declared there. Otherwise, declare them outside.
So in your example, if the functions are only used in that block, they should be declared in there. If they're used other places additionally, they should be declared outside.