Вызов функции javascript в другом файле js

Question 1

Я хотел вызвать функцию, определенную в файле first.js в файле second.js. оба файла определены в файле HTML, например:

<script type="text/javascript" src="first.js"></script>
<script type="text/javascript" src="second.js"></script>

Я хочу позвонить fn1()определенному в first.jsв second.js. Из моих поисков ответы были: если first.jsсначала определено, то это возможно, но из моих тестов я не нашел способа сделать это.

Вот мой код:

second.js

document.getElementById("btn").onclick = function() {
    fn1();
}

first.js

function fn1() {
    alert("external fn clicked");
}

Question 2

Функция не может быть вызвана, если она не была определена в том же файле или загружена до попытки ее вызова.

Функция не может быть вызвана, если она не находится в той же или большей области, чем та, которая пытается ее вызвать.

Вы объявляете функцию fn1в first.js, а затем во втором вы можете просто иметьfn1();

1.js:

function fn1 () {
    alert();
}

2.js:

fn1();

index.html:

<script type="text/javascript" src="1.js"></script>
<script type="text/javascript" src="2.js"></script>

Question 3

1-й JS:

function fn(){
   alert("Hello! Uncle Namaste...Chalo Kaaam ki Baat p Aate h...");
}

2-й JS:

$.getscript("url or name of 1st Js File",function(){
fn();
});

Надеюсь, это поможет ... Удачного кодирования.

Question 4

Вы можете сделать функцию глобальной переменной внутри first.js и посмотреть на закрытие и не вставлять ее, document.readyпомещая ее снаружи

вы тоже можете использовать ajax

    $.ajax({
      url: "url to script",
      dataType: "script",
      success: success
    });

так же вы можете использовать jquery getScript

$.getScript( "ajax/test.js" )
  .done(function( script, textStatus ) {
    console.log( textStatus );
  })
  .fail(function( jqxhr, settings, exception ) {
    $( "div.log" ).text( "Triggered ajaxError handler." );
});

Question 5

Вы можете рассмотреть возможность использования синтаксиса импорта и экспорта es6. В файле 1;

export function f1() {...}

А затем в файле 2;

import { f1 } from "./file1.js";
f1();

Обратите внимание, что это работает, только если вы используете <script src="./file2.js" type="module">

Если вы сделаете это таким образом, вам не понадобятся два тега скрипта. Вам просто нужен основной скрипт, и вы можете импортировать туда все свои вещи.

Question 6

Это должно работать так:

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>

выход

Попробуйте этот фрагмент кода CodePen: ссылка .

Question 7

Обратите внимание, это работает, только если

<script>

теги находятся в теле, а НЕ в голове.

Так

<head>
...
<script type="text/javascript" src="first.js"></script>
<script type="text/javascript" src="second.js"></script>
</head>

=> неизвестная функция fn1 ()

Не удается и

<body>
...
<script type="text/javascript" src="first.js"></script>
<script type="text/javascript" src="second.js"></script>
</body>

работает.

Question 8

Используйте кеш, если ваш сервер позволяет увеличить скорость.

var extern =(url)=> {           // load extern javascript
    let scr = $.extend({}, {
        dataType: 'script',
        cache: true,
        url: url
    });
    return $.ajax(scr);
}
function ext(file, func) {
    extern(file).done(func);    // calls a function from an extern javascript file
}

А затем используйте это так:

ext('somefile.js',()=>              
    myFunc(args)
);

При желании можно сделать его прототип, чтобы сделать его более гибким. Так что вам не нужно каждый раз определять файл, если вы вызываете функцию или хотите получить код из нескольких файлов.

Question 9

first.js

function first() { alert("first"); }

Second.js

var imported = document.createElement("script");
imported.src = "other js/first.js";  //saved in "other js" folder
document.getElementsByTagName("head")[0].appendChild(imported);


function second() { alert("Second");}

index.html

 <HTML>
    <HEAD>
       <SCRIPT SRC="second.js"></SCRIPT>
    </HEAD>
    <BODY>
       <a href="javascript:second()">method in second js</a><br/>
       <a href="javascript:first()">method in firstjs ("included" by the first)</a>
    </BODY>
</HTML>

Question 10

window.onload = function(){
    document.getElementById("btn").onclick = function(){
        fn1();
    }
   // this should work, It calls when all js files loaded, No matter what position you have written
});

Question 11

объявить функцию в глобальной области с окном

first.js

window.fn1 = function fn1() {
    alert("external fn clicked");
}

second.js

document.getElementById("btn").onclick = function() {
   fn1();
}

включить как это

<script type="text/javascript" src="first.js"></script>
<script type="text/javascript" src="second.js"></script>

Question 12

На самом деле это происходит очень поздно, но я подумал, что должен поделиться,

в index.html

<script type="text/javascript" src="1.js"></script>
<script type="text/javascript" src="2.js"></script>

в 1.js

fn1 = function() {
    alert("external fn clicked");
}

в 2.js

fn1()

Question 13

используйте «var» при создании функции, тогда вы сможете получить доступ к ней из другого файла. убедитесь, что оба файла хорошо связаны с вашим проектом и имеют доступ друг к другу.

file_1.js

var firstLetterUppercase = function(str) {
   str = str.toLowerCase().replace(/\b[a-z]/g, function(letter) {
      return letter.toUpperCase();
   });
   return str;
}

доступ к этой функции / переменной из файла file_2.js

firstLetterUppercase("gobinda");

output => Gobinda

надеюсь, это кому-нибудь поможет, удачного кодирования !!!

Question 14

Моя идея состоит в том, чтобы позволить двум функциям вызова JavaScript через DOM.

Способ сделать это просто ... Нам просто нужно определить скрытый html-тег js_ipc. После того, как регистр вызываемого абонента щелкнет по скрытому тегу js_ipc, вызывающий абонент может отправить событие щелчка, чтобы вызвать вызываемого. И аргумент сохраняется в том случае, если вы хотите пройти.

Когда нам нужно использовать вышеуказанный способ?

Иногда два кода javascript очень сложно интегрировать, и там так много асинхронного кода. И в другом коде используется разная структура, но вам все равно нужен простой способ их интеграции.

Так что в таком случае сделать это непросто.

При реализации своего проекта я встречаюсь с таким случаем, который очень сложно интегрировать. И, наконец, я обнаружил, что мы можем позволить двум javascript вызывать друг друга через DOM.

Я демонстрирую этот способ в этом коде git. вы можете пройти через это. (Или прочтите его с https://github.com/milochen0418/javascript-ipc-demo )

git clone https://github.com/milochen0418/javascript-ipc-demo
cd javascript-ipc-demo
git checkout 5f75d44530b4145ca2b06105c6aac28b764f066e

Anywhere, Here, я пытаюсь объяснить следующим простым случаем. Я надеюсь, что этот способ поможет вам интегрировать два разных кода javascript проще, чем раньше, нет какой-либо библиотеки JavaScript для поддержки связи между двумя файлами javascript, созданными разными командами.

<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
    <div id="js_ipc" style="display:none;"></div>
    <div id="test_btn" class="btn">
        <a><p>click to test</p></a>
    </div>    
</body>
<script src="js/callee.js"></script>
<script src="js/caller.js"></script>
</html>

И код css / style.css

.btn {
    background-color:grey;
    cursor:pointer;
    display:inline-block;
}

js / caller.js

function caller_add_of_ipc(num1, num2) {
    var e = new Event("click");
    e.arguments = arguments;
    document.getElementById("js_ipc").dispatchEvent(e);
}
document.getElementById("test_btn").addEventListener('click', function(e) {
    console.log("click to invoke caller of IPC");
    caller_add_of_ipc(33, 22);      
});

js / callee.js

document.getElementById("js_ipc").addEventListener('click', (e)=>{
    callee_add_of_ipc(e.arguments);
});    
function callee_add_of_ipc(arguments) {
    let num1 = arguments[0];
    let num2 = arguments[1];
    console.log("This is callee of IPC -- inner-communication process");
    console.log( "num1 + num2 = " + (num1 + num2));
}

Question 15

// module.js
export function hello() {
  return "Hello";
}

// main.js
import {hello} from 'module'; // or './module'
let val = hello(); // val is "Hello";

ссылка из https://hype.codes/how-include-js-file-another-js-file

Question 16

У меня была такая же проблема. У меня были определенные функции внутри функции готовности документа jquery .

$(document).ready(function() {
   function xyz()
   {
       //some code
   }
});

И эту функцию xyz () я вызвал в другом файле. Это не работает :) Вы должны определить функцию над готовым документом .