如何在其他JavaScript文件中嵌入脚本代码? [英] How to embed script code in other javascript file?
本文介绍了如何在其他JavaScript文件中嵌入脚本代码?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
大家好，我有一个嵌入脚本代码，其中包含我网络上的配乐.但我想将此脚本移至.js文件.这是我的嵌入脚本:
Hi guys, I have an embed script code contain a soundtrack for my web. But I want to move this script to a .js file. Here''s my embed script :
<script type="text/javascript" src="http://scmplayer.net/script.js"
data-config="{'skin':'skins/black/skin.css','volume':50,'autoplay':true,'shuffle':false,'repeat':1,'placement':'top',
'showplaylist':false,'playlist':[{'title':'Soundtrack',
'url':'https://soundcloud.com/nlpazali/command-and-conquer-red-alert-3-soundtrack-ra3-theme-soviet-march-www-open-az'}]}" ></script>
然后我尝试将脚本移到我的.js文件中:
Then I tried move that script to my .js file :
script.type = 'text/javascript';
script.src = 'http://scmplayer.net/script.js';
script.data-config = '{'skin':'skins/black/skin.css','volume':50,'autoplay':true,'shuffle':false,'repeat':1,'placement':'top',
'showplaylist':false,'playlist':[{'title':'Soundtrack',
'url':'https://soundcloud.com/nlpazali/command-and-conquer-red-alert-3-soundtrack-ra3-theme-soviet-march-www-open-az'}]}';
但是问题是，我的配乐可以用这种方法播放.任何人，您可以帮助将脚本文件移动到其他.js文件吗?谢谢.
But the problem, my soundtrack can played with this method. Anyone, can you help to move script file to other .js file? Thanks.
推荐答案
JavaScript没有导入，包含或要求.不过，JavaScript还有其他方法可以包含外部JavaScript内容.
Ajax加载
通过Ajax调用加载其他脚本，然后使用eval.这是最直接的方法，但是由于JavaScript沙箱安全模型，它仅限于您的域.使用eval还可以打开漏洞和黑客的门.
jQuery加载
jQuery库在一行中提供了加载功能:
JavaScript has no import, include, or require. There are other ways for JavaScript to include external JavaScript contents, though.
Ajax Loading
Load an additional script with an Ajax call and then use eval. This is the most straightforward way, but it is limited to your domain because of the JavaScript sandbox security model. Using eval also opens the door to bugs and hacks.
jQuery Loading
The jQuery library provides loading functionality in one line:
.getScript("my_lovely_script.js"，function(){
alert(脚本已加载并执行.");
//使用已加载脚本中定义的任何内容...
});
动态脚本加载
在HTML中添加带有脚本URL的脚本标签.为了避免jQuery的开销，这是一个理想的解决方案.
该脚本甚至可以驻留在其他服务器上.此外，浏览器会评估代码. < script/>标签可以注入到网页< head>中，也可以插入在</body"结束之前.标签.
《 JavaScript Madness:动态脚本加载》中讨论和说明了这两种解决方案.
现在，您必须知道一个大问题.这样做意味着您需要远程加载代码.现代Web浏览器将加载文件并继续执行您当前的脚本，因为它们异步加载所有内容以提高性能.
这意味着，如果您直接使用这些技巧，则在您要求加载新代码后，将无法在下一行使用新加载的代码，因为它仍在加载中.
例如:my_lovely_script.js包含MySuperObject:
var js = document.createElement("script");
js.type ="text/javascript";
js.src = jsFilePath;
document.body.appendChild(js);
var s = new MySuperObject();
错误:MySuperObject未定义
然后，您按F5重新加载页面.而且有效！令人困惑的...
那怎么办呢?
好吧，您可以使用作者在我给您的链接中建议的技巧.总而言之，对于有急事的人，他在加载脚本时使用en事件运行回调函数.因此，您可以将所有使用远程库的代码放入回调函数中.例如:
函数loadScript(url，callback)
{
//按照之前的建议将脚本标签添加到头部
var head = document.getElementsByTagName(''head'')[0];
var script = document.createElement(''script'');
script.type =``text/javascript'';
script.src = url;
//然后将事件绑定到回调函数.
//有多个事件可实现跨浏览器兼容性.
script.onreadystatechange =回调;
script.onload =回调;
//触发加载
head.appendChild(script);
}
然后，在脚本加载到lambda函数中之后，编写要使用的代码:
var myPrettyCode = function(){
//在这里，随心所欲
};
然后运行所有内容:
loadScript("my_lovely_script.js"，myPrettyCode);
源代码合并
另一个解决方案是将两个文件合并为一个文件.可以将其最小化，以生成单个包含最小尺寸的JavaScript文件，以照常包含该文件.
.getScript("my_lovely_script.js", function(){
alert("Script loaded and executed.");
// Use anything defined in the loaded script...
});
Dynamic Script Loading
Add a script tag with the script URL in the HTML. To avoid the overhead of jQuery, this is an ideal solution.
The script can even reside on a different server. Furthermore, the browser evaluates the code. The <script /> tag can be injected into either the web page <head>, or inserted just before the closing </body> tag.
Both of these solutions are discussed and illustrated in JavaScript Madness: Dynamic Script Loading.
Now, there is a big issue you must know about. Doing that implies that you remotely load the code. Modern web browsers will load the file and keep executing your current script because they load everything asynchronously to improve performance.
It means that if you use these tricks directly, you won''t be able to use your newly loaded code the next line after you asked it to be loaded, because it will be still loading.
For example: my_lovely_script.js contains MySuperObject:
var js = document.createElement("script");
js.type = "text/javascript";
js.src = jsFilePath;
document.body.appendChild(js);
var s = new MySuperObject();
Error : MySuperObject is undefined
Then you reload the page hitting F5. And it works! Confusing...
So what to do about it ?
Well, you can use the hack the author suggests in the link I gave you. In summary, for people in a hurry, he uses en event to run a callback function when the script is loaded. So you can put all the code using the remote library in the callback function. For example:
function loadScript(url, callback)
{
// Adding the script tag to the head as suggested before
var head = document.getElementsByTagName(''head'')[0];
var script = document.createElement(''script'');
script.type = ''text/javascript'';
script.src = url;
// Then bind the event to the callback function.
// There are several events for cross browser compatibility.
script.onreadystatechange = callback;
script.onload = callback;
// Fire the loading
head.appendChild(script);
}
Then you write the code you want to use AFTER the script is loaded in a lambda function:
var myPrettyCode = function() {
// Here, do what ever you want
};
Then you run all that:
loadScript("my_lovely_script.js", myPrettyCode);
Source Code Merge
Another solution is to combine the two files into a single file. This can be used with minification to produce a single, minimally sized JavaScript file to include as normal.
Javascript语言没有"include"之类的东西.所有包含内容都按要求的执行顺序在HTML<script>标记中完成.
同时，您可以编写Javascript代码，该Javascript代码从文件中加载另一个Javascript并使用它.这些方法在这里进行了评论: http://stackoverflow.com/questions/950087/include-a-javascript-file-in-another-javascript-file [
Javascript language don''t have anything like "include". All includes are done in the HTML<script>tags, in the required order of execution.
At the same time, you can write Javascript code which loads another Javascript from the file and use it. These approaches are reviewed here: http://stackoverflow.com/questions/950087/include-a-javascript-file-in-another-javascript-file[^].
But I don''t see a reason for doing it. It would be simpler and safer to have two<script>HTML elements in a row; the first script will be executed first, and then the second one.
—SA
这篇关于如何在其他JavaScript文件中嵌入脚本代码?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
