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)
Related
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>
The title doesn't really make sense. But I can't think of a better one, so pardon me...
Consider this.
I am trying to move the definition of handleFBResp out of the callback into its own module. But tricky thing is, I need to use dispatch, which is only accessible from the closure.
I can't use the bind trick either because it creates a new function, and the removeListener wouldn't work.
What's the appropriate way here?
(action) => (dispatch, getState) => {
chrome.tabs.create({
url: FB_OAUTH_URI
}, (tab) => {
// I would like this function definition to be extracted
// into its own module, and import it.
function handleFBResp(tabId, tabObj, _) {
if (typeof tabObj.url !== 'undefined') {
let matchedCode = tabObj.url.match(/code=(.+)/);
if (matchedCode) {
chrome.tabs.onUpdated.removeListener(handleFBResp);
chrome.tabs.remove(tabId);
fbLogin(matchedCode[1]);
dispatch ...
}
}
}
chrome.tabs.onUpdated.addListener(handleFBResp);
// this below wouldn't work because bind creates a new function,
// and removeListener won't work
// chrome.tabs.onUpdated.addListener(handleFBResp.bind(null, dispatch));
}
Actually, figured this out. Here's what I do
I first make the handleFbResp as a thunk, and extract that into a module
export function handleFbResp(dispatch) {
return function _handleFbResp(tabId, tabObj) {
chrome.tabs.onUpdated.removeListener(_handleFbResp);
chrome.tabs.remove(tabId);
}
}
Then I add the listener and invoke the thunk.
(action) => (dispatch, getState) => {
chrome.tabs.create({
url: FB_OAUTH_URI
}, (tab) => {
chrome.tabs.onUpdated.addListener(handleFbResp(dispatch));
}
}
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
Given the code below, how can I pass id to the applySaveAsync function?
var then = _.curry(function (f, thenable) {
return thenable.then(f);
});
var validateAsync = _.flow(
function () { return _(someCondition).showError(ERROR_01).value(); },
then(function () { return _(anotherCondition).showError(ERROR_02).value(); })
);
var save = _.flow(
validateAsync,
then(applySaveAsync),
then(saveCompleted)
);
function applySaveAsync(id) {
// Saving...
}
save(22); // Calling save function with some id.
I can get the id on the validateAsync function, but I cannot return it back since validateAsync should return a promise.
Any way to achieve that?
The simplest choice would be not to use _.flow for the definition of validateAsync.
Since validateAsync does not take parameters nor has a result, you should just change the definition of save to not use _.flow:
function save(id) {
return validateAsync()
.then(function(){ return applySaveAsync(id) })
.then(saveCompleted)
}
We could also change validateAsync to pass through the id:
function validateAsync(id) {
return _(someCondition).showError(ERROR_01).value()
.then(function () { return _(anotherCondition).showError(ERROR_02).value(); })
.then(_.constant(id));
}
and even do that while still using _.flow
var validateAsync = _.flow(
function(id) { return _(someCondition).showError(ERROR_01).value().then(_.constant(id)); },
then(function(id) { return _(anotherCondition).showError(ERROR_02).value().then(_.constant(id)); })
);
but I would advise against that since validateAsync is not supposed to be a function that does takes parameters.
Let's write a wrapper function for such instead to let us do the pass-around in a functional way:
function pass(fn) {
return function(id) {
return fn().then(function() {
return id;
});
}
}
(if you prefer, you can try to compose that from then, _.constant and more)
so that one can write
var save = _.flow(
wrap(validateAsync),
then(applySaveAsync),
then(saveCompleted)
);
I found this package useful for you. In Async cases, you can use this package.
Although flow is one of the best implementations for declarative programming, it doesn't support modern JS programming style.
import { Conductor } from '#puzzleio/conductor';
const conductor = Conductor.createDefault();
const myAsyncWorkflow = conductor
.add(validateAsync)
.if({
check: item => item.isValid === true,
handler: item => console.log('Item is valid')
},
{
// else block
handler: item => console.log('Validation failed')
});
myAsyncWorkflow.run(obj)
.then(() => console.log('Successfully validated'))
.catch(console.error);
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