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