正确和最简单的在另一个js中调用一个js文件的方法

Question

定义特定对象后，我想在代码的body标签中调用第三方js。 在我的js文件中添加第三方js的最佳方法是什么？ 我读到下面是做到这一点的一种方法，但这是有害的。

        var myObject = { /*this is my object */};
        var js = document.createElement("script");

        js.type = "text/javascript";
        js.src = "thirdparty.js";

        document.body.appendChild(js);

我是js新手。 我研究了一下，并看到了诸如reuire js之类的选项，但我不太清楚。 有人可以建议我在我的js文件中包含第三方js的正确，最简单的方法吗？ 办法吗？ 我希望仅在我在主体中定义myObject之后才能调用此js。 \\

像这样：@veritas

myObject = { //my object };
add_html += ' < div id="xyz" >';
add_html += '< /div >';
$some_div.find('li').eq(2).after( add_html );
$('#xyz').append(myObject);
var js = document.createElement("script");
js.type = "text/javascript";
js.src = "thirdparty.js";
document.body.appendChild(js);

Answer 1

如果要使用JS插入第三方库，则可以添加事件侦听器以确保已加载事件侦听器，然后运行代码。

var myObject = { /*this is my object */},
    js = document.createElement("script");

js.type = "text/javascript"; 
js.onload = function () {
    myObject.callMethod(); 
}

document.body.appendChild(js);
js.src = "thirdparty.js";

最重要的部分是在附加侦听器之后放置js.src =设置，因为资源可能会在您向其添加事件侦听器之前触发load 。

编辑

我不清楚这部分做什么js.onload = function（）{myObject.callMethod（）; } ..什么是callMethod（）？ 。

.onload部分

成功加载文档内的内容后，每个资源元素（如script都会触发事件load 。 .onload部分将事件侦听器添加到该特定事件（注意：此代码也可以用不同的方式编写，例如js.addEventListener("load", callback) ）。 为什么要在load后触发代码？ 很简单，因为浏览器正在执行异步获取操作，并且您期望从thirdparty.js获取的对象或方法可能在脚本中的下一个操作之前尚未准备就绪（因此您将获得undefined值）。

.callMethod()部分

这只是我的伪代码，我假设您想从myObject运行一个使用一些thirdlibrary对象和方法的方法。

Answer 2

为什么大惊小怪？ 变得简单

<script>
  var myObject = { /*this is my object */};
  if (myObject.otherLibIsNeeded) {
    var newScript = document.createElement('script');
    newScript.src = '/path/to/thirdparty.js';
    document.head.append(newScript);
  }
</script>

Answer 3

最好的方法是在包含自己的js的HTML文件的开头仅包含第三方库，并确保它在您的js之前：

<script src="thirdparty.js"></script>
<script src="myScript.js"></script>

Answer 4

一种更简单的方法是使用ScriptManJS库。 它可以确保依赖项已正确加载，并且在使用ScriptManJS时不必担心。

1）将脚本标签添加到html的开头部分以包含该库：

<script type="text/javascript" src="scriptman.min.js"></script>

2）在代码开头的某处添加：

new ScriptMan();

3）用一种可能的语法执行包含。 我将提供几种选择方法，以便更全面地介绍这一点。 我相信您会选择最适合您的需求的一种：

选项1：

仅包含两个文件-加载它们时无需其他代码。

S.require( [
    'file_with_your_object.js',
    'third_party.js'
], {
    sync: true
} );

// Files may not be loaded yet when executing code here

选项2：

如果在主文件中定义了对象，它就变得如此简单。

var yourObject = { /* Object contents */ };
S.require( 'third_party.js' );

// Files may not be loaded yet when executing code here

如果您不喜欢该片段下面可能尚未加载文件的事实，请修改最后一行：

S.require( 'third_party.js' ).then( function() {
    // Here third_party.js will definitely be loaded
} );

// Here third.party.js may not be ready yet

选项3

与选项1相同-语法不同。

S.require( 'file_with_your_object.js' ).then( function() {
    S.require( 'third_party.js' );
} );

选项4：

我将如何使用ScriptManJS做到这一点。

file_with_your_object.js

return { /* Object contents */ };

主文件（即index.html）

S.require( 'file_with_your_object.js' ).then( function( yourObject ) {
    S.require( 'third_party.js' ).then( function() {
        // Everything is loaded and yourObject contains your object here
    } );
} );

甚至像这样（在主文件中）：

S.require( [
    'file_with_your_object.js',
    'third_party.js'
], {
    sync: true
} ).then( function( yourObject ) {
    // Everything is loaded and yourObject contains your object here
} );

如果出于某种原因（不太可能）不希望包含第三方库，则可以在sync旁边添加一个选项：... {sync：true，nudeFiles：['third_party.js']} .. 。

希望这可以帮助 ：）