From what I have seen using a debugger, calling:
require(["menu/main-menu"], function(util) {
Will load the main-menu.js file, but the function is called before the global code in the required .js file is executed? Is this correct?
If so, what is the best way to have all that code executed before my function is called?
The problem I am trying to solve is I want the code in mani-menu.js to all be in a module. But I can't call any method in that module until the global code in there is executed which creates the module.
I can call a global method in there which then creates everything, but that then requires a global init() method in every .js file (each with a unique name).
What's the best way to handle all this?
Update: There's a more basic question here (maybe). In writing javascript (and I use Sencha Ext JS & TypeScript), I need to create my objects. So when I go to create say my main menu, I want to call a method in my main-menu.js file to get that Ext JS derived menu object I created.
I think all the code in main-menu.js should be in a namespace, including the method I call to get the menu object. Is that correct? In addition, the way most Ext JS code is set up is you have several Ext.define() calls as well as other variable instantiations, and then the function that takes all that, builds the full menu, and returns it. But that requires all that code has executed in main-menu.js before I call it.
Am I approaching this correctly? My experience to date is Java & C# and I may be trying to fit that model incorrectly to javascript.
Let's suppose menu/main-menu.js contains this:
define(function () {
// Module factory function
return [... whatever you want to expose...];
});
And your application does this:
require(["menu/main-menu"], function (util) {
// Require callback.
});
What happens is:
The require call loads menu/main-menu.js.
The define in menu/main-menu.js is executed.
The module factory function (the function passed to define) is executed.
The require callback is executed with the symbol util set to
what the factory function in menu/main-menu.js returned.
As for simulating namespaces, there are multiple ways to do it. For
instance, you can do it like this:
define(function () {
return {
foo: function () {},
bar: function () {},
[...]
};
});
This exports an object with two functions in it. You can then use it
like this:
require(["menu/main-menu"], function (util) {
util.foo();
util.bar();
});
RequireJS also supports a CommonJS-style of defining modules:
define(function (require, exports, module) {
exports.foo = function () {};
exports.bar = function () {};
[...]
});
This is functionally equivalent to the first way I defined the module
earlier: you get the same two functions and you use them in the same
way as I've shown above.
Unfortunately, I can't speak about Ext JS specifically because I don't
use it.
Related
is there any quick way in vs code to search for
method1 referenced inside method2?
I am trying to see if using remote-redux-devtools is useful for my project, and we are using next js which does server side calls via getInitialProps so I am trying to find all references to dispatch inside getInitialProps
rather than search for either term (dispatch or getInitialProps) via command + shift + F individually, i need a more specific search.
in this case I need to search for references to dispatch inside getInitialProps
If we can assume that your getInitialProps functions are of a form similar to this:
static async getInitialProps(ctx) {
const res = await fetch('https://api.github.com/repos/zeit/next.js')
const json = await res.json()
dispatchEvent(event)
return { stars: json.stargazers_count }
}
particularly with respect to the return statement on the final line, then this regex works to distinguish those getInitialProps functions with the sequence dispatch somewhere in that function.
^.*getInitialProps[\s\S]*?\bdispatch[\s\S]*?(return).*\n.*
If you want only dispatch as opposed to dispatchEvent you could use word boundaries around it like \bdispatch\b unless it is used as dispatch( then use \bdispatch( or similar.
See regex101 demo
I have a long function that I'm using in multiple places in my code but I've realized my function is not even being called. Copying-pasting would lead to a disaster. Are there any way to call a custom function inside of a Firebase function?
My test:
I call this function at the first line after the trigger but nothing appears on the console logs.
function test()
{
console.log('function executed');
}
I have a Method defined in lib/methods.js:
Meteor.methods({
getTask: function( extraparam ) {
return {dummy: 'dummy'};
}
});
But when I call it from server/lib/environment.js:
Meteor.call( "getTask", extraparam );
I'm getting Method not found, I was under the impression lib/ is loaded before server/lib, or should I call the method in server/main.js ?
With respect to this issue, the load order rules work as follows:
Paths containing lib gain priority.
Paths gain priority based on their depth.
Combining the two shows us that /server/lib/x.js will be loaded before /lib/x.js. With methods this shouldn't be an issue unless the method is invoked as soon as the containing file is executed.
Your options are:
Fix the load order by moving the call as you suggested. main.js will be loaded last so this will work.
Call the method from within a Meteor.startup callback.
I'm reading the documentation at https://github.com/EventedMind/iron-router/blob/devel/Guide.md and I can't get a clear picture on when I would pass a function to the route() method and when I would pass an object.
Example for rendering a template with data -- passes a function as the second parameter:
Router.route('/post/:_id', function () {
this.render('Post', {
data: function () {
return Posts.findOne({_id: this.params._id});
}
});
});
Example for waiting for a subscription to complete -- passes an object as the second parameter:
Router.route('/post/:_id', {
// this template will be rendered until the subscriptions are ready
loadingTemplate: 'loading',
waitOn: function () {
// return one handle, a function, or an array
return Meteor.subscribe('post', this.params._id);
},
action: function () {
this.render('myTemplate');
}
});
As you can see, some examples in the documentation use one form and some use the other. Generally speaking, when I find some documentation that addresses what I have in mind, it uses a different form than the one I have adopted from following an example elsewhere in the documentation.
What is the relationship between the two forms? How do I mix and match?
I am currently learning of this myself. I have found that you can alternately do both methods as you mentioned, depending upon your needs.
The format is as you mentioned, that you can pass a function as the second argument for the route definition.
The biggest difference I have found is that using a function can override some settings in Router.config. It seems like for instance, you must be careful of how you define renderings, as to not override layout templates.
I feel like it's a matter of preference as I have seen many different examples of how to set up routes (for eg. Iron router and hooks).
Basically I am using Router.map() to try and handle most standard settings, and then looking to define hooks to control flow through the routers. Then I am looking to set up custom controllers as needed, and as the project scales out.
All in all, I feel myself drawn away from using a function in defining a route, since it requires more explicitness, although I can see it having a purpose, when wanting to more finely process routes, conditions, and parameters.
I have implemented AJAX for calling server side function using client side function call i.e Calling server side function using javascript tag by using PageMethod in javascript.
I have few question regarding the same implementation.
function OnBlurCall()
{
chk(ControlId, SpanMsgId, FunctionName)// where all these parameters are obtained from programmer.
}
function chk(ControlId,SpanMsgId, FunctionName)
{
PageMethods.FunctionName(ControlId.value,onSuccess,onFail,SpanMsgId); // I want to replace actual value of FunctionName i.e Something given below
PageMethods.CheckUserNameAvailability(ControlId.value,onSuccess,onFail,SpanMsgId);
}
function onSuccess(result,MsgId,methodname)
{
MsgId.innerHTML=result;
}
function onFail(error,MsgId,methodname)
{
MsgId.innerHTML=error;
}
Ques 1. How many parameters can i add to this function. Is it there some limit that i can send only 3 parameters. Please give some details how it is working.
Ques 2. I want to make above code reusabe in javascript such that I add all the 3 functions in master page. But the problem is that i can add two functions into javascript at this time. But for adding 3rd function i have to send function name also as a parameter.
PageMethods.FunctionName(ControlId.value,onSuccess,onFail,SpanMsgId);
This FunctionName will be the name of server side function that a developer want to call.
Can i do this. ?
You can generically check for arguments; while in the function method, the arguments array has a list of all the arguments for that method. Check this out: https://developer.mozilla.org/En/Core_JavaScript_1.5_Reference/Functions_and_function_scope/Arguments
To invoke dynamically, you could consider using the WebServiceProxy: http://www.asp.net/ajax/documentation/live/clientreference/Sys.Net/WebServiceProxyClass/WebServiceProxyInvokeMethod.aspx