User talk:Mdmahir/langlink.js
Feedback[edit]
Hi Mahir78,
Following the section you opened at mediawiki.org and WP:VPT I've reviewed User:Mahir78/langlink.js and would like to make a few comments about it.
A) Loading jQuery plugins
I see you use a script-tag to load jquery and/or plugins from googleapis.com, please know that MediaWiki ships with many plugins all of which are either loaded by default or can be loaded on the fly, this also gives you the ability to make sure your script will not initiate/fail untill the plugin is ready loading.
For one, a <script>-tag in JavaScript does nothing since it's HTML, not JavaScript, all it will do is cause a warning to the browser and it moves on ignoring it.
Although the plugin from jQuery you need may be loaded by default you should not assume that it is, as at anytime the extension that loads this could perhaps change its mind. If you need a plugin, let mediawiki know like this:
mw.loader.using( 'jquery.ui.dialog', function(){
var myLocalFunction = function(){
};
window.FunctionCallableFromAnywhere = function(){
};
/* etc. your code here */
} );
if jQuery ui's dialog is already loaded it will continue right away, otherwise it'll load it and when it's ready continue with the function wrapper that is your application.
B) Prototyping
It is recommended not to use any prototyping on native constructors. Instead extend the jQuery object (read how – ie. $.replaceAll = function(){}; ). Also look at the Default modules' prototypes. "escape for regex", for example, is already present in the default software as $.escapeRE, no need to re-create that locally.
C) Good practice
A few side notes that may help you learn more about JavaScript and the many functions in jQuery:
- Mapping
To create a map/array of something that you retrieve for a set of elements you can use the $.fn.map() function. For example, instead of
var $redlinks=[];
$( '.new' ).each( function(){
$redlinks.push( $(this).text() );
});
you can use .map(). .map() loops through the jQuery collection, just like .each(). However the return value of the function in map() is added to the array. Which in turn is what is returned by map() itself, thus set to $redlinks
var $redlinks = $( '.new' ).map( function(){
return $(this).text();
}).get();
// .get() finishes the jQuery chain and converts the array to a plain old array without any chainable functions
// $redlinks is now ['Discussion', 'My red link'];
- JSON
If you need to do a post request, $.post() works fine:
var apiUrl = wgServer + wgScriptPath + '/api.php';
var postData = {
action: 'query',
format: 'json',
prop: 'langlinks',
lllimit: '500',
titles: Temptrans_in
};
$.post(
apiUrl,
postData,
function( data ) {
var parseddata = data.query.pages.page.langlinks['*'];
$( '#trans_out' ).val( parseddata );
},
"json");
}
Otherwise getJSON may be easier:
var apiUrl = wgServer + wgScriptPath + '/api.php';
var data = {
action: 'query',
format: 'json',
prop: 'langlinks',
lllimit: '500',
titles: Temptrans_in
};
$.getJSON( apiUrl, data, function( data ) {
var parseddata = data.query.pages.page.langlinks['*'];
$( '#trans_out' ).val( parseddata );
}
);