Last modified: 2014-11-05 14:49:11 UTC
Created attachment 17028 [details] javascript reference error for custom function I am developing an extension, let us say, "example" extension. I have added the javascript file for this extension let us say example.js using ResourceLoader module. I have defined a custom function in this js file here is a test structure example.js ************************* function testFunction(){} alert("hi"); ************************ When Page loads the alert("hi") is executed that means the js file is there but when I try to call the testFunction on onclick or any other event I get error, But when I do the same by placing file like addHTMl('<script src="URL-/extensions/example/resources/example.js"></script>'); the function call works well, Don't know what to do.
If you assume that there is a software bug in MediaWiki, could you provide a minimal self-contained testcase?
Executing files in the global scope is considered an anti-pattern in modern web development and causes all kinds of interoperability and maintenance problems. ResourceLoader modules are wrapped in a closure (one step away from global in lexical scoping) to discourage use of global variables. Variables and functions are local to the module by default, not global for the entire browser execution context. To expose a method or property to the public (e.g. so that other modules can reference them), attach them to a host object (e.g. jQuery, mediaWiki or your own application singleton). e.g. -- extensions/MyApp/foo.js mw.foo = function () { return 4; }; // or: window.MyApp = {}; MyApp.foo = function () { return 4; }; These will all be exposed and accessible from the global scope. -- extensions/OtherApp/bar.js -- dependencies: ext.myApp.foo alert(mw.foo());
So you mean to say I shall write it like mw.testFunction() = function(){ }; or say mw.testFunction = function(a,b){ return a+b; }; It won't cost me referenceError in ResourceLoader ? See this might have been a silly problem as per your prespective but I tried so much to find solution, even I went to IRC but nobody replied so finally I was left to assume that its a bug. I owe you apology in case it was not appropirate but I'll try it tomorrow and will let you know if it worked.
(In reply to Mayank Tiwari from comment #3) > So you mean to say I shall write it like > > mw.testFunction() = function(){ }; > > or say > > mw.testFunction = function(a,b){ return a+b; }; > > It won't cost me referenceError in ResourceLoader ? Indeed. Though I'd recommend grouping them in a container, e.g. mw.myApp = {}; mw.myApp.testFunction = function(){ }; mw.myApp.testFunction2 = function(){ }; // Or: mw.myApp = { testFunction: function(){ }, testFunction2: function(){ } };
(In reply to Mayank Tiwari from comment #3) > I owe you apology in case it was not appropriate but I'll try it tomorrow > and will let you know if it worked. No worries. We all learn every day. Do note that this isn't specific to MediaWiki or Resourceloader. The concept of closures is part of how javascript works and quite common to developing front-end web applications in general.
