Question

i was exploring in the last few days how big frameworks works , how they assign their function name and it can’t(?) be override , i pretty much know how framework work with anonymous function , for example they do it this way or similar version :

(function(){
   var Sizzle = function (){
      var x;
   };
   Sizzle.f = function(){
     alert("!");
   };

   window.Sizzle = Sizzle;

})();

i still don’t get few things about those huge frameworks and i hope i can find answer :

1. how do they assign function name and the name can’t be override?
2. in the code above to call the function i need to write Sizzle.f() to get the function to work , but when i use jquery i don’t write Jquery.show() , just show() , how do they vanish the “jquery” from “jquery.show()” function call?

by saying the name can’t be override i mean , if i create function with one of the jquery functions names , the jquery function will work.

thanks in advance.

Answer 1

As has been shown for #2, it’s really easy for BIG_NAMESPACE.Functions.doStuff to be added to anything you want.

var _ = BIG_NAMESPACE.Functions.doStuff;
_(); // runs BIG_NAMESPACE.Functions.doStuff;

As for #1:

Most libraries DO let their functions be overwritten.
It’s the values that are inside of the framework’s closure which are preserved, for safety reasons.

So you could do something like:

BIG_NAMESPACE.Functions.doStuff = function StealEverything() {};
(BIG_NAMESPACE.Functions.doStuff === StealEverything) // true;

But doStuff would have NO access to any of the variables hidden inside of the framework’s closure.
It would also mean that until the page was reloaded, doStuff would also not work the way you want it to.

HOWEVER, in newer versions of JavaScript (ECMA5-compatible browsers), it WILL be possible to do something like what you’re suggesting.

BIG_NAMESPACE = (function () {
    var do_stuff = function () { console.log("doin' stuff"); },
        functions = {
            set doStuff (overwrite) { }
            get doStuff () { return do_stuff; }
        };
    return { Functions : functions };
}());

Then, this will work:

BIG_NAMESPACE.Functions.doStuff(); // "doin' stuff"
BIG_NAMESPACE.Functions.doStuff = function () { console.log("ain't doin' jack"); };
BIG_NAMESPACE.Functions.doStuff(); // "doin' stuff"

However, Frameworks aren’t going to use this for a LONG time.
This is not even remotely backwards compatible. Maybe in 2016…
There were defineGetter and defineSetter methods as well, but they aren’t a formal part of the JavaScript language. Like innerHTML, they’re things that the browser vendors put in, to make life better… …as such, there’s no real guarantee that they’re going to be in any/all browsers your users have. Plus, they’re deprecated, now that new browsers use the get and set constructs that other languages have.