Best practices for declaring functions inside jquery ready function - javascript

I haven't found a good reference for declaring my own functions inside the
jquery.ready(function(){});
I want to declare them so they are inside the same scope of the ready closure. I don't want to clutter the global js namespace so I don't want them declared outside of the ready closure because they will be specific to just the code inside.
So how does one declare such a function...and I'm not referring to a custom jquery extension method/function...just a regular 'ol function that does something trivial say like:
function multiple( a, b ){
return a * b;
}
I want to follow the jquery recommendation and function declaration syntax. I can get it to work by just declaring a function like the multiply one above...but it doesn't look correct to me for some reason so I guess I just need some guidance.

I believe that you would be okay just declaring the function inside the ready() closure, but here you can be a bit more explicit about the local scoping:
jQuery.ready(function() {
var myFunc = function() {
// do some stuff here
};
myFunc();
});

It might sound simple but you just ... declare the function. Javascript allows functions to have inner functions.
$(document).ready( function() {
alert("hello! document is ready!");
function multiply(a, b) {
return a * b;
}
alert("3 times 5 is " + multiply(3, 5));
});

I have a StartUp function, and I use it as printed bellow:
function StartUp(runnable)
{
$(document).ready(runnable.run);
}
var ExternalLinks =
{
run: function()
{
$('a[rel="external"]').bind('click', ExternalLinks.click);
},
click: function(event)
{
open(this.href);
return false;
}
}
StartUp(ExternalLinks);
var ConfirmLinks =
{
run: function()
{
$('a.confirm').bind('click', ConfirmLinks.click);
},
click: function(event)
{
if (!confirm(this.title)) {
return false;
}
}
}
StartUp(ConfirmLinks);
My web sites are modular, so every module has N actions and every action can have a .js file, so I just write function and call it with StartUp(...functionName...)

Related

Making functions specific to Meteor templates and accessible by its event handlers

Is there a way in which I can make functions that are specific to the template and accessible by the template's event handlers? I don't want to pollute the global namespace.
I came upon this problem when I first noticed that I was repeating a lot of code between my event handlers in a manner similar to this:
Template.options.events({
"click .btn-1": function(e) {
// do something
var div;
div = $(e.target);
if (div.hasClass("active")) {
return div.removeClass("active");
} else {
return div.addClass("active");
}
},
"click .btn-2": function(e) {
// do something else
var div;
div = $(e.target);
if (div.hasClass("active")) {
return div.removeClass("active");
} else {
return div.addClass("active");
}
}
});
Note that I'm not trying to find a way to combine selectors, I already know how to do that. Notice that each button does something different, but have a few lines of repeated code. I want to keep this as DRY as possible without polluting the global namespace.
Each file in a Meteor project has its own local scope. If you define a function in one file using function blah() { ... } or var blah = function () { ... }, it will be inaccessible outside of that file. Only blah = function () { ... } (without var) defines a true global.
If this isn't enough, you could define the local function in an immediately-invoked function expression (IIFE):
(function () {
function toggleActive(div) {
if (div.hasClass("active")) {
div.removeClass("active");
} else {
div.addClass("active");
}
}
Template.options.events({
"click .btn-1": function (e) {
// do something
toggleActive($(e.target));
},
"click .btn-2": function (e) {
// do something else
toggleActive($(e.target));
}
});
})();
// toggleActive is inaccessible here

Using onclick() inside another function

function layoutMod() {
standardId = document.getElementById("standard");
fancyId = document.getElementById("fancy");
standardId.onclick = function() {
standard();
};
fancyId.onclick = function() {
fancy();
};
};
How can I use the onclick events defined above in a function??? Is it a good practice to load the function at page load?? I need to define in a function the onclick event beacuse I don't want to use global variables.
What you've written should work. However, you should note that by not using the var keyword, you're still creating global variables inside of your function. I would suggest...
function onloadHandler() {
document.getElementById("standard").onclick = function() {
// Do something
};
document.getElementById("fancy").onclick = function() {
// Do something else
};
};
It can get messing when you nest functions inside of each other. In this case, I would suggest removing the outer function so that your code looks like this:
document.getElementById("standard").onclick = function() {
standard();
};
document.getElementById("fancy").onclick = function() {
fancy();
};
The code does not need to be in a function, it will automatically be run on page load. Since you don't want global variables, just don't use variables at all.

Making Functions Public from Inside jQuery Function

I have a block of JavaScript/jQuery that works fine.
<script type="text/javascript">
$(function () {
function doSomething() {
// Do something amazing here!
}
// Many various jQuery handlers and support functions
});
</script>
But now I'd like my doSomething() function to be callable from another block of script on the same page.
I understand I can do that by moving doSomething() outside of the jQuery function ($(function () {})). But then doSomething() wouldn't be able to call the helper functions inside of the jQuery function.
I could move the other functions outside of the jQuery function, but some of them are handlers that need to be initialized, and they share they same helper functions.
Is there a way to keep all my functions inside my jQuery function, but just make one of them visible outside of it?
And any suggestions on where I could go to read up on this?
JavaScript has functional scope. So, the reason you can't call your function if it is nested within
$(function () { ... });
is because it is only accessible within that function's scope.
You can easily move that function definition:
function doSomething() { ... }
outside of the $(function(){...}) function and still have access to variables within the $(function(){...}) function's scope by passing the variables as parameters to the function and then having it return any modifications:
$(function () {
var blah = 'blah';
var result;
result = doSomething(blah);
// Many various jQuery handlers and support functions
});
function doSomething(blah) {
// Do something amazing here!
return newBlah;
}
// Now you can call your doSomething function in the global scope too
var example = "test";
var result = doSomething(example);
Well, in fact you should move your logic from this wrapper.
It's intended for initialization of logic that should run after DOM is ready. You shouldn't make any functions here.
Consider following pattern for your code:
(function($) {
// Your logic here
// You could safely export your functions to
// global scope from here, if you really need
var app;
app = {
forms: doSomething
};
function doSomething() {
// Do something amazing here!
}
window.app = app;
$(function() {/* start interact with DOM */});
}(jQuery));
You can do it extending jQuery:
$.extend({
foo: new function () {
var _self = this;
_self.doSomething = function () {
};
_self.initialize = function () {
$('#button-x').click(function(){
_self.doSomething(); //use the function inside
});
};
});
$(function () {
$.foo.initialize();
$.foo.doSomething(); //use the function outside
});

Check for function called

Just wondering if there is anyway to fire some code when a function is called, without adding the code to the function, for example:
function doSomething(){
//Do something
}
//Code to call when doSomething is called
You can wrap the function :
(function(){
var oldFunction = doSomething;
doSomething = function(){
// do something else
oldFunction.apply(this, arguments);
}
})();
I use an IIFE here just to avoid polluting the global namespace, it's accessory.
Well, yes, it's not actually hard to do. The crucial thing is that a function's name is just an identifier like any other. You can redefine it if you want to.
var oldFn = doSomething;
doSomething = function() {
// code to run before the old function
return oldFn.apply(this, arguments);
// code to run after the old function
};
NB that it's better to do oldFn.apply(this, arguments) rather than just oldFn. In many cases it won't matter, but it's possible that the context (i.e. the value of this inside the function) and the arguments are important. Using apply means they are passed on as if oldFn had been called directly.
What about something like:
function doSomething(){
doSomething.called = true;
}
//call?
doSomething();
if(doSomething.called) {
//Code to call when doSomething is called
}
I know you said you don't want to modify the original function, but consider adding a callback. Then you can execute code based on different results in your function (such as onSucess and onError):
function doSomething(onSuccess, onError){
try {
throw "this is an error";
if(onSuccess) {
onSuccess();
}
} catch(err) {
if(onError) {
onError(err);
}
}
}
Then, when you call doSomething, you can specify what you want done with inline functions:
doSomething(function() {
console.log("doSomething() success");
}, function(err) {
console.log("doSomething() error: " + err);
});

Is this how you define a function in jQuery?

Is this how you define a function in jQuery?
$(document).ready( function () {
var MyBlah = function($blah) { alert($blah); };
});
Now to call the function I do:
MyBlah('hello');
First of all, your code works and that's a valid way of creating a function in JavaScript (jQuery aside), but because you are declaring a function inside another function (an anonymous one in this case) "MyBlah" will not be accessible from the global scope.
Here's an example:
$(document).ready( function () {
var MyBlah = function($blah) { alert($blah); };
MyBlah("Hello this works") // Inside the anonymous function we are cool.
});
MyBlah("Oops") //This throws a JavaScript error (MyBlah is not a function)
This is (sometimes) a desirable behavior since we do not pollute the global namespace, so if your function does not need to be called from other part of your code, this is the way to go.
Declaring it outside the anonymous function places it in the global namespace, and it's accessible from everywhere.
Lastly, the $ at the beginning of the variable name is not needed, and sometimes used as a jQuery convention when the variable is an instance of the jQuery object itself (not necessarily in this case).
Maybe what you need is creating a jQuery plugin, this is very very easy and useful as well since it will allow you to do something like this:
$('div#message').myBlah("hello")
See also: http://www.re-cycledair.com/creating-jquery-plugins
No, you can just write the function as:
$(document).ready(function() {
MyBlah("hello");
});
function MyBlah(blah) {
alert(blah);
}
This calls the function MyBlah on content ready.
No.
You define the functions exactly the same way you would in regular javascript.
//document ready
$(function(){
myBlah();
})
var myBlah = function(blah){
alert(blah);
}
Also: There is no need for the $
You can extend jQuery prototype and use your function as a jQuery method.
(function($)
{
$.fn.MyBlah = function(blah)
{
$(this).addClass(blah);
console.log('blah class added');
};
})(jQuery);
jQuery(document).ready(function($)
{
$('#blahElementId').MyBlah('newClass');
});
More info on extending jQuery prototype here: http://api.jquery.com/jquery.fn.extend/
jQuery.fn.extend({
zigzag: function () {
var text = $(this).text();
var zigzagText = '';
var toggle = true; //lower/uppper toggle
$.each(text, function(i, nome) {
zigzagText += (toggle) ? nome.toUpperCase() : nome.toLowerCase();
toggle = (toggle) ? false : true;
});
return zigzagText;
}
});
The following example show you how to define a function in jQuery. You will see a button “Click here”, when you click on it, we call our function “myFunction()”.
$(document).ready(function(){
$.myFunction = function(){
alert('You have successfully defined the function!');
}
$(".btn").click(function(){
$.myFunction();
});
});
You can see an example here: How to define a function in jQuery?
That is how you define an anonymous function that gets called when the document is ready.

Categories