Podemos chamar a função escrita em um JavaScript em outro arquivo JS?

193

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?

javascript include Hemant Kumar
fonte

213

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 alertOneseja definido ao chamá-lo, internamente ele usa uma função que ainda não está definida ( alertNumber).

Edgar Hernandez
fonte

Qual é a diferença entre o seu exemplo, incluindo o arquivo JS no arquivo Index.html na outra abordagem em que usamos o método de importação JS para importar o método de outro arquivo JS que possui o método de script JS exportar para exportar.

Phil

68

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.

Stuart Wakefield
fonte

1

Da mesma forma com pouco

Stuart Wakefield

1

Isso pode parecer difícil, mas a inclusão não é exatamente o mesmo que concatenar scripts. Considere script1: 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/…

Boyang

Essa função compartilhará o thiscontexto, se uma das funções estiver em uma classe?

achou

thisé vinculado no ponto em que a função é chamada (a menos que bindseja chamada anteriormente). As duas funções em dois arquivos separados não compartilharão o thiscontexto automaticamente; no exemplo acima, nem um thiscontexto, ou seja, windowno modo não estrito ou undefinedestrito. Você pode fazer com que a função no outro script compartilhe o mesmo thisvalor, 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

Stuart Wakefield

13

Contanto que ambos sejam referenciados pela página da web, sim.

Você simplesmente chama as funções como se elas estivessem no mesmo arquivo JS.

jball
fonte

6

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">

Pramendra Gupta
fonte

4

ES6: Em vez de incluir muitos arquivos js usando <script>.html, você pode incluir apenas um arquivo principal, por exemplo, script.jsusando o atributo type="module"( suporte ) e, dentro, script.jsvocê pode incluir outros arquivos:

<script type="module" src="script.js"></script>

E no script.jsarquivo 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 .

Kamil Kiełczewski
fonte

3

sim você pode . você precisa consultar JS filea .aspxpá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");
}

anishMarokey
fonte

0

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');

sheetal
fonte

1

Por favor, não assuma jQuery em todos os lugares. Além disso, envolvendo a $.fnatribuição de uma cláusula pronto documento é inútil

Bergi

ok, eu vou lembrar da próxima vez :), mas você pode explicar por que a atribuição $ .fn é inútil?

sheetal 29/03

Não é a tarefa, a embalagem.

Bergi 29/03

ok então isso significa que quando o documento não está pronto, só então $ .fn deve ser usado para a criação de função

sheetal

Mas por que? A declaração da função não precisa esperar pelo DOM. Mesmo que a ligação o faça (mas com frequência suficiente).

Bergi 29/03

0

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 .

Consta Gorgan
fonte

0

Bem, me deparei com outra solução doce.

window['functioName'](params);

Digvijay
fonte

0

Para aqueles que querem fazer isso no Node.js (executando scripts no lado do servidor), outra opção é usar requiree 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");
};

ronatório
fonte

Podemos chamar a função escrita em um JavaScript em outro arquivo JS?

Respostas: