I have been studying framework development for a few weeks, and I ran across what is highly suggested and pressured in the world of lib development, Immediately-invoking Anonymous Functions.
I never can get it to work, and I have failed to find a resource that explains in-detail the use and logic behind it.
Here's what I know so far:
It's immediately invoking - It runs everything anonymously, immediately.
It's anonymous - It does not carry a name therefore the code inside of it is not "reachable" by exterior code.
You can pass global window, object and undefined parameters - That's about all I know on that, but do not understand them completely.
I am looking not only for a detailed resource, but one that explains the logic behind it. Because I find it very illogical.
Here's what I have:
(function( window, document, undefined ) {
window.myThingy = myThingy;
var myThingy = function() {
};
myThingy.prototype = {
constructor: myThingy,
create: function( elementToBeCreated ) {
return document.createElement( elementToBeCreated );
}
};
})( window, document );
Then,
myThingy().create("div");
But it is still saying myThingy() [object] is not a function.
What am I doing wrong? Why should I use immediately-invoking functions and not just create a global myThingy = function() object? Why do I have to use window?
I know there are several resources on the net about this, but I can't understand any of it. Some of them go half-way into detail, some of them try to go into detail, but fail to explain the critical stuff. Why is this so stressed when developing a framework?
Don't worry, I'm not trying to "re-invent the wheel", but I am trying, however, to actually learn JavaScript, not just the pre-packaged stuff.
A good answer should contain:
A good resource where it explains the logic behind immediately invoking anonymous functions
An insight to that link
What I am doing wrong with the code I provided
First off, you have not yet defined your function when you try to assign it to the global object so it is undefined:
window.myThingy = myThingy;
console.log(myThingy);//undefined
You need to do the assignment after myThingy is defined:
(function( window, document, undefined ) {
var myThingy = function() {
};
myThingy.prototype = {
constructor: myThingy,
create: function( elementToBeCreated ) {
return document.createElement( elementToBeCreated );
}
};
window.myThingy = myThingy;
})( window, document );
Okay, next, you cannot use
myThingy.create("div");
because myThingy is a function and not an object. Function objects are created when the new keyword is issued to a function. You can make this change to convert your function into a function object:
window.myThingy = new myThingy();//create a function object
This pattern is not how all frameworks are implemented, but similar. Sometimes there is more abstraction. However, making these changes will allow your approach to work.
Here is a demo of your code: http://jsfiddle.net/ZjRJW/
Links
Here are some of my favorites:
http://ejohn.org/blog/simple-class-instantiation/
http://ejohn.org/apps/learn/
http://ejohn.org/blog/simple-javascript-inheritance/
http://jibbering.com/faq/notes/closures/
https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Details_of_the_Object_Model
http://javascript.crockford.com/prototypal.html
If you want to learn about JS design patterns, I highly recommend Addy Osmani's books/articles. He keeps things very simple and usually supplies quite a bit of example code to help you understand. As far as your code and implementing a design pattern is concerned, it depends on what you want your code to do, and how you want your code/objects to behave. Understanding your requirements/goals are very important before you start coding so you don't get lost in a spaghetti of patterns that really aren't solving a specific problem.
In some cases, implementing a pattern intended for a complex, large application is simply overkill.
Since someone else already correctly pointed out the issues with your code, I'll just leave it there.
Related
Can someone help me understand why the code below works and if this is an acceptable pattern to use?
Without getting into it too much I have a basic state machine functionality inside an object called states in a simple browser game I am making and I able to trigger event transitions by calling states.event('someEvent') from within the states object itself. For instance if the update method of a given state, say states.someState.actions.onUpdate() is running it can call states.event('someNewEvent'). Doing it this way is not something I need to do, I did it accidentally but I was very confused by the fact that it worked. So the code below is that logic/functionality which I don't understand reduced down to a simple example.
I can't seen to find any information that would explain this type of pattern.
Everywhere online would seem to suggest that I write "this.printText()" instead of "myObj.printText()" but it only prints when I do it the way I have below.
This seems like it might be bad practice, at the very least it would be because I don't understand quite why it works... Any help would be appreciated. I struggle a lot with javascript coming from C# in unity game engine.
let myObj = {
printText: function() {
console.log('I thought this would not print');
},
myProperty: {
toPrint: function () {
myObj.printText();
}
}
}
myObj.myProperty.toPrint();
I’m tinkering around, trying to better understand how I’d go about building a custom jQuery plugin. I’ve never built my own library or plugin, so I’m kind of the bull in the china shop right now.
I have successfully managed to attach my library to the jquery object, however I’m not understanding a few things.
Within my library, I create a method on the prototype chain called checker. This works fine when I call it in my code. However, when I try instantiating the new object FunkyLib with some parameters, it says that FunkyLib is not a constructor, and I’m not sure why.
Here’s the code:
console.log('FuNkY Test');
(function ($, window, document, undefined) {
function FunkyLib (options) {
this.settings = options;
}
FunkyLib.prototype = {
checker: function() { alert('Purake'); }
};
$.fn.funky = new (FunkyLib);
}(jQuery, window, document));
If I were to try instantiating with some parameters with the constructor, I get an error in the console saying that FunkyLib is not a constructor.
For instance:
$.fn.funky = new (FunkyLib('Parameter'));
or
$.fn.funky = new (FunkyLib());
of even in the jquery call:
$('my-class').funky('param')
This works though:
$('my-class').funky.checker();
I’m pretty sure that my structure is just plain wrong. I have some material I’m reading, one of them being a tutorial on creating jQuery plugins. But I was hoping someone could give me a bit of 'to the point' advice on my errors here.
Thanks!
I'm trying to understand the video "Understanding Function Currying" on Vimeo ( http://vimeo.com/41238143 but not necessary to view it in order to understand this question).
The example I understand
Early in the video, We’re told that there’s a problem with this code:
The problem with this code: the use of callback on line 11 and 14 won’t work because it’s out of scope — onSuccess exists in the buildCRUD scope, not the create scope. (I'll call this the "callback example".)
OK, that makes sense to me. Solutions are considered including using a single class variable (I know this terminology is off because javascript doesn't have classes, but you know what I mean).
The example I don't understand
Here's where I'm confused. At the end of the video, we're told that this code for a different part of the function will work. (Notice the "className" variable parameter; I'll call this the "className example".)
(Sorry, I cut off the line that says "var ...", just trust me that it's up there and createFn, getFn, etc. are all being declared as part of a long "var" line.)
As you can see, the implementation of these functions such as createFn do use the className variable, though it wasn't passed into the function as a parameter.
Here's my question: why is className in scope inside createFn? It seems to me that it’s no more in the forClass scope than onSuccess was in the create scope.
Does this have something to do with...
the fact that the function in the callback example is never being assigned as a variable inside the create function context, only called?
the callback example using promises?
My apologies everyone. The Vimeo recording may have had some errors.
To demonstrate a working solution, I created a working version of the Book CRUD service to demonstrate Partial Applications in JavaScript... used within an AngularJS application.
getFn = function (objectId, callback) {
// Simulate $http to get book information for
// specified ID.
var deferred = $q.defer(),
book = {
url : buildRequestURL(objectId),
title : "Learn to use Javascript Partial Applications"
author: "Thomas Burleson"
},
notifyFn = onSuccess(callback);
$timeout(function() {
notifyFn( book );
deferred.resolve( book );
});
return deferred.promise;
}
#see Full Source & Live CodePen Demo
For performance optimization I'm using a single JavaScript file to handle all the pages of the website I'm working on.
The basic structure I'm using is as followed:
(function($) {
// Shared functions ...
// A function for every page
function Page1() {
}
Page1.prototype = {
init: function() {
//...
},
//more functions
};
// more pages
$(document).ready(function() {
if ($('#page1uniqueidentifier').length) {
var page1 = new Page1();
page1.init();
}
// more pages
}
}) (jQuery);
I'm not an experienced JavaScript programmer so I've been searching a lot about best practices and different ways of structuring my code and I've ended up choosing this one but I'm not really sure about it and I have a few questions:
Is it worth it to use prototype if I'm never gonna have more than a single instance of a page? I think I understand how prototype works and that I'm not gaining any performance there. But I'm using it just as a best practice because in the case different instances would exist, these functions would be the same in every instance.
Is there a better way to structure the code?
Should I put the call of the init function inside the constructor and then only call new Page1()?
function Page1() {
this.init();
}
if ($('#page1uniqueidentifier').length) {
new Page1();
}
For performance optimization I'm using a single JavaScript file to
handle all the pages of the website I'm working on
That makes no sense. You should separate code into files, and then run all your js files thru a minimizer/concatenator to package it up.
Anyway, to answer your questions,
if you are only going to have 1, then prototype won't buy you anything. However, if you are going to use more than 1, would you go back and change it? Plus, using prototype wont hurt you either, so you might as well do it for learning.
You should create the files that make sense according to the functionality implemented. I would separate your object definition into its own file, for example, so when you look at that file, all you see is the code for that object.
If you have a constructor function, you don't really need init, do you?
My goal is to write an interactive variable viewer for IPython, i.e. which allows one to see, say nested dicts/lists as a tree, and drill down (a bit like the console.log in Javascript).
I spent a lot of time trying to extract minimalistic code out of the directview example in IPython but still can't get my head around how it all works. My Python's ok but my jQuery experience is quite limited.
So I got to stripping down directview.js to the following
container.show();
var widget = $('<div/>')
element.append(widget);
var output = $('<div></div>');
$(widget).append(output)
var output_area = new IPython.OutputArea(output, false);
var callbacks = { 'output': $.proxy(output_area.handle_output, output_area) };
var code = 'print 1+1'
var msg_id = IPython.notebook.kernel.execute(code, callbacks, {silent: false});
This works when I load the directview.ipynb. However I am still not clear how to make it completely standalone (i.e. not require the directview.py, and pass another callback than the standard handle_output of IPython.OutputArea). One of the issues is the container.show() which fails when called in a standalone way.
I am lost on several aspects:
Why is there an element.append(widget) and then $(widget).append(output)? Also why is there also a need to create an Ipython.OutputArea. Isn't there a way to just create a <div id=my_output_area>blah</div> and then have the output callback fill it with the relevant data?
What's the whole .proxy thing about? I would like to create my own callback for output but when I do that and console.log() the arguments passed to the callback, they're undefined or just useless.
I appreciate that the authors of the IPython notebook have done an incredible job creating such a beautiful front-end using jQuery/websockets, and that creating developer documentation that allows beginners like me to tweak with it is asking much, but if anyone can lend a hand that would be great!
I can answer to your second question. The fact is when JavaScript calls your callback, it makes it so without specifying the context, i.e. without setting this (Pythonistas call it self). But it's possible to bound a function to this via $.proxy, which you saw in:
var callbacks = { 'output': $.proxy(output_area.handle_output, output_area) };