Как запустить выполнение js файла при нажатии на кнопку?

Question

[Роман Татаринов]

Доброго времени суток. Есть два файла JS. В одном при нажатии на кнопку всплывает окно. В окне находится калькулятор, который написан через прототип и размещено отдельно во втором файле. Вопрос, как мне по нажатию на кнопку осуществить выполнение функции из второго файла, или же просто заново инициализировать скрипт, чтобы он все пересчитал? И чтобы при нажатии на кнопку всегда было выполнение второго файла?

Comments

[Роман Ямчук]

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

[Kovalsky]

Вся это файловая карусель значения не имеет: если есть конструктор, то можно создать экземпляр. Если у экземпляра есть доступ к методам, то можно их использовать. Или я что-то не понял?

Answer 1

[Kovalsky]

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

Окна/фреймы взаимодействуют между собой через объекты Window: для доступа к дочернему окну родительское может использовать ссылку которую возвращает метод open ("var child_window = window.open()"), а дочернее может обращаться к родительскому используя свойство opener. Доступ к свойствам есть только у окон принадлежащих одному источнику (origin): если окно с адресом "first.com/page.html" вызовет окно с адресом "second.com/page.html", то оно не будет иметь доступа к его свойствам, а если с адресом "first.com/folder/another-page.html" - то будет.

Окна/фреймы одного источника могут почти без ограничений обращаться к свойствам друг друга - могут использовать данные, выполнять функции, производить операции с элементами. Достаточно объявить в одном окне функцию, и она сразу станет доступна для дочернего/родительского окна.

Также взаимодействие можно осуществлять с помощью метода Window.postMessage (MDN, JSR), который к тому же позволяет реализовать кроссдоменный обмен данными. В IE8+ этот метод 1) работает только для фреймов, 2) позволяет передавать только строки.

Каждый способ имеет преимущества и недостатки: обращение к свойствам другого окна разрешено только в рамках одного источника, а использование postMessage в случаях с более-менее сложными интерфейсами сводится к передаче кастомных ивентов.

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

Код обоих примеров можно увидеть на гитхабе

Answer 2

[Никита Кит]

Скрипт в отдельном файле заворачиваем в функцию, после функции пишем module.exports = functionName.
После сией несложной процедуры во второй файл (в котором нужно инициализировать первый) пишем в нужном месте functionName = require('./path/to/functionName') и вызываем functionName(). Как и в любую другую функцию можно передавать параметры в виде аргументов.

Comments

[Kovalsky]

А при чем тут require и модули?

[Никита Кит]

Никита Полевой: а как ты ещё представляешь себе инициализацию отдельного модуля (файла) при событии?)))

preloader = require '../preloader/preloader'
        $(document).ajaxStart ->
          preloader('start')
        $(document).ajaxStop ->
          preloader('stop')

Вот так, к примеру, никогда не делал?)

[Kovalsky]

Никита Кит: это конечно очень крутой и продвинутый способ, но в данном случае все гораздо проще, require лишний.

[Никита Кит]

Никита Полевой: ну так раскажи, как же раскидать js на файлы и без require вызвать один в другом?) тупо их подряд в script src вложить?) Это явно не то, что нужно))))

[Роман Татаринов]

Что-то пошло не так. А именно, в файле с калькулятором пишу

function plugin() {
  $('#service-list').calculate();
};
module.exports = plugin;

Во втором файле, где инициализирую пишу в нужном мне месте:

plugin = require('plugin');
plugin();

Получаю ошибку "Uncaught ReferenceError: module is not defined"

[Kovalsky]

Никита Кит: в смысле как? Способов сколько угодно, require один из множества.

В данном случае для начала стоит выяснить какая стоит задача.

[Arris]

Никита Кит: в тегах вопроса нет nodejs. Ваш ответ, к сожалению, бесполезен.

[Никита Кит]

Arris: Никита Полевой: так отчего же вы свои варианты не предложите? Если способов разбить js на файлы и вызвать один в другом множество (помимо require) - выскажитесь! Мне интересно!)

[Kovalsky]

Никита Кит: скриптов класса module loader множество; в гугле найдёте, если интересно.

К тому же ТС пока не торопится продолжать диалог, вероятно он от вас помощи ждёт.

И кстати я даже не смотрю в сторону загрузки модулей ибо полагаю что ТС просто задачу неправильно описал, думаю на самом деле всё гораздо проще, код бы только увидеть.

[Никита Кит]

Никита Полевой: их множество, и все они всё равно ставятся через npm. require просто нативный метод и его вполне достаточно в рамках данной задачи. Меня больше выбесил этот ч(м)удак Arris своим комментом. У меня прям бомбануло))))

[Arris]

Никита Кит: если у вас есть nodejs - это хорошо. Если вы им гордитесь - это отлично. Но если вы размахиваете им на улицах или суете детям - вас нужно посадить в тюрьму.

Намёк ясен?

[Arris]

Никита Кит: а мне неинтересно.

Более того, Роман Ямчук выше ответил.

[Arris]

Роман Татаринов: вам ответ дали не под вашу платформу разработки. Скорее всего у вас совсем другая задача и JS вы на фронтенде используете :) Короче, опишите задачу полнее (или покажите код).

А то тут некоторые лезут со своим Единственно Верным взглядом на вещи некоторые, а потом бомбит у них :-D

[Arris]

Никита Кит: автор сам разберется, что для него оскорбительно. И если сочтет мои слова оскорблением - есть кнопочка "пожаловаться".

[Kovalsky]

Никита Кит: а почему у вас там бомбануло, если вопрос и правда не имеет отношения к ноде и npm? Давайте лучше дождёмся пока ТС ответит.

[Никита Кит]

Никита Полевой: наверно потому что это единственный инструмент для реализации подобной задачи. Хотя по итогу для сервинга всё равно таск-раннером (gulp или grunt) всё компилируется в один js-файл... Ну без ноды подобное вряд ли получится сделать.

[Kovalsky]

Никита Кит: вы замечательный программист. Серьёзно. Нода - наше всё. Без ноды в 2017 году вообще не обойтись. Если приложение не на ноде, то оно не тру. Вы всё правильно поняли - нода единственное решение возникшей задачи.

[Никита Кит]

[Kovalsky]

Никита Кит: конечно это не так, нода тут вообще ни при чем.