User talk:The Transhumanist/LoadLinksIntoTabs.js

Script's workshop

This is the work area for developing the script and its documentation. The talk page portion of this page starts at #Discussions, below.

Explanatory notes

This section explains the source code, in detail.

aliases

An alias is one string defined to mean another. Another term for "alias" is "shortcut". In the script, the following aliases are used:

$ is the alias for jQuery

mw is the alias for mediawiki

These two aliases are set up like this:

( function ( mw, $ ) {}( mediaWiki, jQuery ) );

That is a "bodyguard function", and is explained in the section below...

Bodyguard function

The bodyguard function assigns an alias for a name within the function, and reserves that alias for that purpose only. For example, if you want "t" to be interpreted only as "transhumanist".

Since the script uses jQuery, we want to defend jQuery's alias, the "$". The bodyguard function makes it so that "$" means only "jQuery" inside the function, even if it means something else outside the function. That is, it prevents other javascript libraries from overwriting the $() shortcut for jQuery. It does this via scoping.

The bodyguard function is used like a wrapper, with the alias-containing source code inside it. Here's what a jQuery bodyguard function looks like:

1 ( function($) {
2     // you put the body of the script here
3 } ) ( jQuery );

See also: bodyguard function solution.

To extend that to lock in "mw" to mean "mediawiki", use the following (this is what the script uses):

1 ( function(mw, $) {
2     // you put the body of the script here
3 } ) (mediawiki, jQuery);

For the best explanation I've found so far, see: Solving "$(document).ready is not a function" and other problems

The ready() event listener/handler

The ready() event listener/handler makes the rest of the script wait until the page (and its DOM) is loaded and ready to be worked on. If the script tries to do its thing before the page is loaded, there won't be anywhere for it to place the menu item (mw.util.addPortletLink), and the script will fail.

It looks like this: $( document ).ready() {});

The part of the script that is being made to wait goes inside the curly brackets (starting on the next line, with the ending curly bracket, closing parenthesis, and semicolon following that on a line of their own).

See also: http://docs.jquery.com/Tutorials:Introducing_$(document).ready()

The jQuery shorthand version of the same thing looks like this:

1 $(function() {<br>
2     // Handler for .ready() called.<br>
3 });

This is explained further on the jQuery page for .ready()

Development notes

Rough rough talk-through

Further information: Pseudocode