Использование функций из других файлов в JavaScript

Я делаю игру в JS, используя P5, и я столкнулся с проблемой.Использование функций из других файлов в JavaScript

В моем HTML-файла У меня есть ссылки на файлы .js:

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.3/p5.min.js"></script> 
    <script src="main.js"></script> 
    <script src="isKeyPressed.js"></script> 
    <script src="blocks.js"></script> 
    <script src="player.js"></script> 
</head> 
<body> 
</body> 
</html>

У меня есть один .js файл, определяющий функцию isKeyPressed():

function isKeyPressed(keyQuery) { 
    var did = false; 
    for(var i = 0; i < keysPressed; i++) { 
    if(keysPressed[i] === keyQuery) { 
     did = true; 
    } 
    } 
    return did; 
}

я ссылаться на это в другом объекте внутри player.js:

player.motion = function() { 
    if(isKeyPressed('w')) { 
    this.velocity.add(0,-5); 
    } 
    if(isKeyPressed('s')) { 
    this.velocity.add(0,5); 
    } 
    if(isKeyPressed('a')) { 
    this.velocity.add(-5,0); 
    } 
    if(isKeyPressed('d')) { 
    this.velocity.add(5,0); 
    } 
}

Но когда я пытаюсь вызвать player.motion, я получаю ошибку:

Uncaught TypeError: isKeyPressed is not a function

Кто-нибудь знает, почему это происходит?

источник

2016-09-13 T. Shaw

Либо файл не загружен, либо функция не находится в глобальной области. – epascarello

Если он задан в глобальной области действия в файле, который был загружен до 'player.js', он будет работать. – zerkms

Не то, о чем вы просите, но зачем вы поместили эту функцию в файл сам по себе, когда он не работает без переменной «keysPressed», которая, по-видимому, определена в другом месте? Кроме того, в '' '' '' '' '' '' '' '' от 'keysPressed', но я предлагаю вам использовать объект, а не массив, чтобы отслеживать, какие клавиши нажимаются, потому что тогда вам не нужно возиться с циклами, вы может просто проверить ключ напрямую. – nnnnnn

Вы могли бы попробовать что-то вроде этого

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.3/p5.min.js"></script> 
    <script src="main.js"></script> 
    <script src="isKeyPressed.js"></script> 
    <script src="blocks.js"></script> 
    <script src="player.js"></script> 
    <script> 
    player.motion = function() { 
     if(isKeyPressed('w')) { 
     this.velocity.add(0,-5); 
     } 
     if(isKeyPressed('s')) { 
     this.velocity.add(0,5); 
     } 
     if(isKeyPressed('a')) { 
     this.velocity.add(-5,0); 
     } 
     if(isKeyPressed('d')) { 
     this.velocity.add(5,0); 
     } 
    } 
    </script> 
</head> 
<body> 
</body> 
</html>

Это импортирует все функции из файла isKeyPressed.js и, следовательно, вы можете ссылаться на него в <script> тега. Вы не смогли использовать функции isKeyPressed.js в player.js, потому что вы не можете ссылаться на него.

источник

2016-09-13 01:20:09 baranskistad

Почему OP не смог получить доступ к 'isKeyPressed()' в файле 'player.js'? –

@KevinWorkman Поскольку файл 'isKeyPressed.js' был не загружен в' player.js'. – baranskistad

Я не уверен, что понимаю это. Файл 'isKeyPressed.js' был загружен до' player.js'. Что мне не хватает? –

Для справки, я не думаю, что принятый ответ правильный. В частности, я не думаю, что принятый ответ действительно меняет что-либо из того, что вы изначально делали. Я предполагаю, что у вас была другая проблема в коде (например, синтаксическая ошибка), которая вызывала эту ошибку, и вы исправили это в процессе реализации предлагаемого решения. Поэтому, хотя это может показаться, что решение решило вашу проблему, действительно было что-то еще.

Я предоставляю этот альтернативный ответ, поэтому вы не думаете, что вам нужно определить свой JavaScript в своем html напрямую, так как это определенно не так.

Я попытался тестируя вашу установку, создавая меньший пример, состоящий из трех файлов:

index.html

<!DOCTYPE html> 
<html> 
<head> 
    <script src="one.js"></script> 
    <script src="two.js"></script> 
</head> 
<body onload="printObj()"> 
</body> 
</html>

one.js

function printOne(){ 
    console.log("one"); 
}

два .js

var obj = {}; 

obj.printTwo = function(){ 
    console.log("two"); 
    printOne(); 
} 

function printObj(){ 
    obj.printTwo(); 
}

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

Есть две основные вещи, которые могут привести к вашей проблемы:

ли ваши файлы правильно загружены?

Есть ли ошибки синтаксиса, которые вы не заметили? (Это мое предположение о том, что вызвало вашу первоначальную проблему.) Проверьте консоль JavaScript и попробуйте запустить некоторый тестовый код, чтобы фактически запустить функции, которые вы пытаетесь вызвать.
Вы получили правильные имена файлов?
Вы находитесь за брандмауэром или есть другие проблемы с сетью, которые могут вызвать проблему с загрузкой?

Ваши файлы загружены в правильном порядке?

Для файла two.js для доступа запрограммированный в one.js, вы должны убедиться, что one.js загружается раньше two.js. Похоже, вы сделали это правильно, но уверены ли вы, что JavaScript - это то, где вы думаете?
Другими словами, Вы уверены, что были в player.js, а не в main.js?
Возможно, вы захотите избавиться от этой двусмысленности, поставив соответствующий JavaScript в том же файле. Не имеет смысла, чтобы один файл определял массив keysPressed, а затем другой файл использовал этот массив для определения функции isKeyPressed(). Просто поместите их в один файл и убедитесь, что файл загружен перед другими файлами, которые его используют.

Принятый ответ ничего не меняет в отношении того, когда материал загружен. Если у вас не была синтаксическая ошибка или функция player.motion() фактически находилась в файле main.js, или у вас была проблема сетевой загрузки, ваш код должен был работать. Поэтому одна из этих вещей должна быть вашей реальной проблемой. Вам не нужно определять свой JavaScript в своем html, чтобы он работал.

источник

2016-09-15 13:09:15

Использование функций из других файлов в JavaScript

ответ

Смежные вопросы