I had a javascript file like below..
First, I have some functions defined, and call the function on some event (document.ready here)
function foo(arg) {
return arg;
}
function bar(arg) {
return arg;
}
$(document).ready(function(){
doSomething();
});
Now I am trying to use requirejs and having trouble figuring out how to modify this file for it.
You can try this approach:
define(['dep'], function (dep) { //If you have any dependency
function foo(arg) {
return arg;
}
function bar(arg) {
return arg;
}
return {
myMethods: {
bar: bar(arg),
foo: foo(arg)
}
};
});
You shouldn't include document.ready here. Instead use that where you are going to use this module as a dependency.
This module will return myMethods object containing your methods.
Let's say you would have two files, main.js, which contains the initial call to require, and code.js, which contains the code. What you can do is this:
in main.js
$(function () {
require([
"/Url_To_Code.JS_Here"
], function (
code) {
code.doSomething();
});
});
in code.js:
define(
[],
function () {
var foo = function () {
};
var doSomething = function () {
};
return {
doSomething : doSomething
};
}
);
so whatever you export from code.js (what is returned), you can access in main.js
Related
I don't really know how to describe this, but I'll try explain it.
I want to be able to call func1() and func2(), but going through handler() in a module.
I want it in a way where calling module.exported1("foo") will call handler(func1, "foo"), in turn calling func1("foo"). The issue I'm having is that if I export 'exported1' as handler(func1), I can't pass any arguments exported1 was called with (As far as I know). Is there a workaround for this?
NOTE: It is a module, and I need it to be exported without the user needing to provide func1 and func2 to handler().
function func1(args) {
...
}
function func2(args) {
...
}
function handler(func, args) {
return func()
}
module.exports = {
exported1 = handler(func1, ...),
exported2 = handler(func2, ...)
}
Not sure I get why to use this pattern, but I am sure there is more to the code and guess you could do the following:
function func1(args) {
console.info(`func1 ${args}`);
}
function func2(args) {
console.info(`func2 ${args}`);
}
function handler(func, args) {
return func(args);
}
module.exports = {
exported1: (args) => {
return handler(func1, (args));
},
exported2: (args) => {
return handler(func2, (args));
},
};
You just need to export the function:
module.exports = {
exported = handler
}
Or, just:
exports.exported = handler
Now, after import, you can call with parameters:
exported(func1,...)
exported(func2,...)
After reading your edited question, I think you want to do something like this but I'm not pretty sure:
function handler(func) {
// you can replace it with function(args) { instead of arrow function
return (args) => {
return func(args)
}
}
module.exports = {
exported1 = handler(func1),
exported2 = handler(func2)
}
exported1(args)
So I am calling a function from inside another function like this:
methods: {
selectStep: function (id) {
...
}
controlStep: function () {
selectStep(1);
...
}
}
but all I get is an error saying:
Uncaught ReferenceError: selectStep is not defined
Do you have any idea about what could be happening here?
Your approach is trying to execute a function from the window object or from whatever context was declared that object methods.
You need to call that function as follow:
this.selecteStep(1);
Further, you need to separate those methods/functions using comma ,
const methods = {
selectStep: function (id) {
console.log('called!', id);
},
controlStep: function () {
this.selectStep(1);
}
}
methods.controlStep();
You have to use this.anotherMethodName
<template>
...
<button #click="callMethod"></button>
...
</template>
<script>
export default {
methods: {
firstMethod() {
console.log('called')
},
callMethod() {
this.firstMethod()
}
}
}
</script>
I'm trying to return an object with a function inside. When I call it, I get an error:
Uncaught TypeError: config.something is not a function
What am I doing wrong, and how can I fix it?
JSFiddle
function config() {
function something() {
console.log('something');
}
return {
something: something
};
}
config.something();
Description
Since config is a function not an object you need to call/execute it, this then returns the object that you can call .something on.
Code for Function
function config() {
function something() {
console.log('something');
}
return {
something: something
};
}
config().something();
Code for Object
var config = {
something: function() {
console.log('something');
}
};
config.something();
More resources:
https://medium.com/javascript-scene/javascript-factory-functions-vs-constructor-functions-vs-classes-2f22ceddf33e#.eqdstb1l6
Object vs Class vs Function
https://medium.com/javascript-scene/javascript-factory-functions-vs-constructor-functions-vs-classes-2f22ceddf33e#.eqdstb1l6
https://www.google.com/search?q=javascript+functions+vs+objects&oq=javascript+functions+vs+&aqs=chrome.0.0j69i57j0l4.4688j1j7&sourceid=chrome&ie=UTF-8
function myController($scope,helperService)
{
function getFormattedDT() {
var localDate = "2016-04-04 12:55:55";
var inputDate = helperService.parsedDate(helperService.formatDate(localDate));
}
getFormattedDT();
}
I am getting the error as "TypeError : helperService.formatDate is not a function".
(function (myApp)
{
myApp.service('helperService',['$http','$q','$sce','miscService', function($http,$q,$sce,'miscService') {
function formatDate(dateTime) {
return ....
}
function parsedDate(date) {
return ....
}
}(angular.module('myApp')
But if i keep the function in the myController, then it works well.
How do i call nested methods in injected dependencies of angular.
Your helperService should return an object with the methods on it, something like this:
(function (myApp)
{
myApp.service('helperService'
['$http','$q','$sce','miscService',
function($http,$q,$sce,'miscService') {
function formatDate(dateTime) {
return ....
}
function parsedDate(date) {
return ....
}
return{
parsedDate: parsedDate,
formatDate: formatDate
}
}(angular.module('myApp')
The angular service registration expects a method that returns an object to be used.
How do I call a parent namespace function from within a function?
var myNamespace = {
funcOne : function () {
//do something
},
funcTwo : function () {
setTimeout ( function () {
myNamespace.funcOne(); //how do I call funcOne?
}, 2000);
}
}
The usual way would be to use the this keyword inside the literal
var myNamespace = {
funcOne : function () {
//do something
},
funcTwo : function () {
var self = this;
setTimeout ( function () {
self.funcOne();
}, 2000);
}
}
But what you're doing should work just fine as well -> FIDDLE