Podemos chamar a função escrita em um arquivo JS em outro arquivo JS? Alguém pode me ajudar como chamar a função de outro arquivo JS?
Podemos chamar a função escrita em um arquivo JS em outro arquivo JS? Alguém pode me ajudar como chamar a função de outro arquivo JS?
Respostas:
A função pode ser chamada como se estivesse no mesmo arquivo JS, desde que o arquivo que contém a definição da função tenha sido carregado antes do primeiro uso da função.
Ou seja,
Arquivo1.js
function alertNumber(number) {
alert(number);
}
Arquivo2.js
function alertOne() {
alertNumber("one");
}
HTML
<head>
....
<script src="File1.js" type="text/javascript"></script>
<script src="File2.js" type="text/javascript"></script>
....
</head>
<body>
....
<script type="text/javascript">
alertOne();
</script>
....
</body>
A outra maneira não funcionará.
Como corretamente apontado por Stuart Wakefield . A outra maneira também funcionará.
HTML
<head>
....
<script src="File2.js" type="text/javascript"></script>
<script src="File1.js" type="text/javascript"></script>
....
</head>
<body>
....
<script type="text/javascript">
alertOne();
</script>
....
</body>
O que não vai funcionar seria:
HTML
<head>
....
<script src="File2.js" type="text/javascript"></script>
<script type="text/javascript">
alertOne();
</script>
<script src="File1.js" type="text/javascript"></script>
....
</head>
<body>
....
</body>
Embora alertOne
seja definido ao chamá-lo, internamente ele usa uma função que ainda não está definida ( alertNumber
).
A resposta acima pressupõe incorretamente que a ordem de inclusão dos arquivos é importante. Como a função alertNumber não é chamada até que a função alertOne seja chamada. Desde que os dois arquivos sejam incluídos por tempo, alertOne é chamado de ordem dos arquivos, não importa:
[HTML]
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript">
alertOne( );
</script>
[JS]
// File1.js
function alertNumber( n ) {
alert( n );
};
// File2.js
function alertOne( ) {
alertNumber( "one" );
};
// Inline
alertOne( ); // No errors
Ou pode ser encomendado da seguinte maneira:
[HTML]
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript">
alertOne( );
</script>
[JS]
// File2.js
function alertOne( ) {
alertNumber( "one" );
};
// File1.js
function alertNumber( n ) {
alert( n );
};
// Inline
alertOne( ); // No errors
Mas se você fizer isso:
[HTML]
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript">
alertOne( );
</script>
<script type="text/javascript" src="file1.js"></script>
[JS]
// File2.js
function alertOne( ) {
alertNumber( "one" );
};
// Inline
alertOne( ); // Error: alertNumber is not defined
// File1.js
function alertNumber( n ) {
alert( n );
};
É importante apenas que as variáveis e funções estejam disponíveis no momento da execução. Quando uma função é definida, ela não executa nem resolve nenhuma das variáveis declaradas dentro até que essa função seja chamada posteriormente.
A inclusão de diferentes arquivos de script não é diferente do script nessa ordem no mesmo arquivo, com exceção dos scripts adiados:
<script type="text/javascript" src="myscript.js" defer="defer"></script>
então você precisa ter cuidado.
function myfunction() {
e script2: alert();}
não vai funcionar. Isso me incomoda porque eu estava tentando modularizar um arquivo js que é muito longo. Veja stackoverflow.com/questions/20311604/…
this
contexto, se uma das funções estiver em uma classe?
this
é vinculado no ponto em que a função é chamada (a menos que bind
seja chamada anteriormente). As duas funções em dois arquivos separados não compartilharão o this
contexto automaticamente; no exemplo acima, nem um this
contexto, ou seja, window
no modo não estrito ou undefined
estrito. Você pode fazer com que a função no outro script compartilhe o mesmo this
valor, atribuindo a função como um membro do objeto (ou seja, dentro do construtor this.method = myOtherFunc
) ou usando bind. Poste uma pergunta SO com mais detalhes se precisar de uma resposta mais aprofundada. Cheers, Stuart
Se todos os arquivos estiverem incluídos, você poderá chamar propriedades de um arquivo para outro (como função, variável, objeto etc.)
As funções e variáveis js que você escreve em um arquivo .js - digamos, a.js estarão disponíveis para outros arquivos js - digamos b.js , desde que a.js e b.js estejam incluídos no arquivo usando o seguinte mecanismo (e na mesma ordem se a função em b.js chamar a função em a.js).
<script language="javascript" src="a.js"> and
<script language="javascript" src="b.js">
ES6: Em vez de incluir muitos arquivos js usando <script>
.html, você pode incluir apenas um arquivo principal, por exemplo, script.js
usando o atributo type="module"
( suporte ) e, dentro, script.js
você pode incluir outros arquivos:
<script type="module" src="script.js"></script>
E no script.js
arquivo inclua outro arquivo como esse:
import { hello } from './module.js';
...
// alert(hello());
Em 'module.js', você deve exportar a função / classe que importará
export function hello() {
return "Hello World";
}
Exemplo de trabalho aqui .
sim você pode . você precisa consultar JS file
a .aspx
página
<script language="javascript" type="text/javascript" src="JScript1.js">
</script>
<script language="javascript" type="text/javascript" src="JScript2.js">
</script>
JScript1.js
function ani1() {
alert("1");
ani2();
}
JScript2.js
function ani2() {
alert("2");
}
Você pode chamar a função criada em outro arquivo js a partir do arquivo em que está trabalhando. Portanto, para isso, primeiro você precisa adicionar o arquivo js externo ao documento html, como
<html>
<head>
<script type="text/javascript" src='path/to/external/js'></script>
</head>
<body>
........
A função definida no arquivo javascript externo -
$.fn.yourFunctionName = function(){
alert('function called succesfully for - ' + $(this).html() );
}
Para chamar essa função no seu arquivo atual, basta chamar a função como -
......
<script type="text/javascript">
$(function(){
$('#element').yourFunctionName();
});
</script>
Se você deseja passar os parâmetros para a função, defina a função como
$.fn.functionWithParameters = function(parameter1, parameter2){
alert('Parameters passed are - ' + parameter1 + ' , ' + parameter2);
}
E chame esta função no seu arquivo atual como -
$('#element').functionWithParameters('some parameter', 'another parameter');
$.fn
atribuição de uma cláusula pronto documento é inútil
Aqui está um exemplo mais descritivo com um trecho de código CodePen anexado:
1.js
function fn1() {
document.getElementById("result").innerHTML += "fn1 gets called";
}
2.js
function clickedTheButton() {
fn1();
}
index.html
<html>
<head>
</head>
<body>
<button onclick="clickedTheButton()">Click me</button>
<script type="text/javascript" src="1.js"></script>
<script type="text/javascript" src="2.js"></script>
</body>
</html>
resultado
Experimente este snippet CodePen: link .
Para aqueles que querem fazer isso no Node.js (executando scripts no lado do servidor), outra opção é usar require
e module.exports
. Aqui está um pequeno exemplo de como criar um módulo e exportá-lo para uso em outros lugares:
file1.js
const print = (string) => {
console.log(string);
};
exports.print = print;
file2.js
const file1 = require('./file1');
function printOne() {
file1.print("one");
};