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);

我是新手。我研究了一下＆amp;看到了诸如reuire js等选项，但我不是很清楚。任何人都可以建议我正确的＆amp;在我的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

执行此操作的最佳方法是在HTML文件的头部包含第三方库，其中包含您自己的js，确保它在您之前：

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

Answer 4

另一种简单的方法是使用ScriptManJS库来实现。它确保正确加载依赖项，并且在使用ScriptManJS时不必担心它。

1）将脚本标记添加到html的head部分以包含库：

<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
} );

如果出于某种原因，第三方图书馆不希望被包含（低概率），您可以在同步旁边再添加一个选项： ... { 同步：真， nakedFiles：[＆＃39; third_party.js＆＃39; ] } ...

希望这会有所帮助：）

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

4 个答案: