从内部JS代码块调用外部JS函数
[英]Calling external JS function from internal JS code block
问题描述
I have 2 JS blocks that I am working with. 
我有2个正在使用的JS块。 One is internal to my HTML. 一个在我的HTML内部。 It handles touch functionality. 它处理触摸功能。 The other is an external file which is a content slider. 另一个是外部文件，它是内容滑块。 Basically I want to use the touchevents to control the slider and move to the previous/next slide depending on which direction the user swipes on mobile devices but have more traditional controls on desktops. 基本上，我想使用touchevents来控制滑块并根据用户在移动设备上滑动的方向移动到上一个/下一个幻灯片，但是在台式机上具有更多传统控件。 Is it possible to call a function in the external file from my internal code block. 是否可以从我的内部代码块中调用外部文件中的函数。
HTML File HTML文件
<html>
<head>
<script type="text/javascript" src="js/externalfile.js"></script>
<script>
... lots of code for touchevents ....
function processingRoutine() {
if ( swipeDirection == 'left' ) {
// Function below is in external file
previous();
} else if ( swipeDirection == 'right' ) {
// Function below is in external file
next();
}
</script>
</head>
<body>
Some HTML code
</body>
External JS File 外部JS文件
(function($) {
... Functionality to work slider ...
// load the next slide
// These are the functions I am trying to call from above.
function next() {
goToAndPause(counter+1);
};
// load the previous slide
function previous() {
goToAndPause(counter-1);
};
})(jQuery);
Is there an easy way to do this or is there a rotator that has this functionality built in already? 有没有简单的方法可以做到这一点，或者有已经内置了此功能的旋转器？
3 个解决方案
解决方案1
0 2014-05-29 12:59:30
The slider must have been instantiated somehow and you may have a reference to it, ie to make the slider work in the first place you might have called something like $('.mySlider').slider(); 滑块必须以某种方式实例化，并且您可能对其有一个引用，即，要使滑块首先工作，您可能会调用类似$('.mySlider').slider(); if you changed that to window.mySlider = $('.mySlider').slider(); 如果将其更改为window.mySlider = $('.mySlider').slider(); you could then potentially then call mySlider.next() or similar in your "internal" code. 然后，您可能可以在“内部”代码中调用mySlider.next()或类似代码。
解决方案2
0 2014-05-29 13:00:06
why not just extract your code into an external js file? 为什么不将您的代码提取到外部js文件中？ I don't see any reason you would actually need to have it embedded in the script tag , and in general i think that may be a poor architectural decision. 我看不出您实际上需要将其嵌入在script标签中的任何原因，总的来说，我认为这可能是一个糟糕的体系结构决策。
2nd idea, you could also get to it by declaring a global variable and accessing it, though thats not great practice. 第二个想法，您也可以通过声明一个全局变量并访问它来实现它，尽管那不是很好的做法。
解决方案3
0 2014-05-29 13:02:23
If you don't mind editing the plugin, you could use jQuery's event API. 如果您不介意编辑插件，则可以使用jQuery的事件API。
// external file
(function($) {
....
$(window).on('slider:next', next);
$(window).on('slider:previous', previous);
})(jQuery);
// inline js (this should really live in its own file, too)
function processingRoutine () {
if ( swipeDirection === 'left' ) {
$(window).trigger('slider:next');
} else if ( swipeDirection === 'right' ) {
$(window).trigger('slider:previous');
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.