Question

<预> <代码>＆LT; HTML＆GT;＆＃XA; ＆LT;脚本＆GT;＆＃XA; //一些largeFunction（）＆＃xA;＆＃xA; //根据前面的代码动态加载脚本＆＃xA; document.write（“＆lt; script src ='// ...'＆gt;＆lt; \ / script＆gt;”）;＆＃xA; ＆lt; / script＆gt;＆＃xA;＆lt; / html＆gt;＆＃xA; ＆＃xA;＆＃xA;

问题：是否可以移动 largeFunction（）在静态 html 页面中并将其放入 js 文件中？如果是，我怎么能在编写＆lt; script＆gt; 标签之前静态调用该函数？

＆＃xA;

Answer 1

简短回答：是的。

只要首先加载包含该函数的第一个脚本，就可以在任何地方调用该函数，只要它首先被加载。

<script src="file1.js" type="text/javascript"></script> 
<script src="file2.js" type="text/javascript"></script>

在此示例中，请确保file1.js包含您的largeFunction()功能。然后，您可以在largeFunction();内拨打file2.js。

你也可以这样做：

<script src="file1.js" type="text/javascript"></script> 
<script>
    largeFunction();
</script>

确保您的FIRST脚本包含该功能。

Answer 2

您可以尝试以下选项：

LargeFunction.js

function largeFunction(){
  // This is a global function and is a part of window object.
  // This can be called from anywhere once the file is loaded.
}

的index.html

<script src="largeFunction.js" type="text/javascript"></script> 
<script>
    largeFunction();
</script>

IIFE

这些是在加载文件时仅执行一次的函数。他们被称为编译的那一刻。

function largeFunction(){

}

(function(){
  largeFunction();
})()

你甚至可以在没有IIFE的情况下尝试

function largeFunction(){

}
largeFunction();

window.onload / $（document）.ready（）

一旦渲染了所有元素，就会触发此事件。如果您的JS正在操纵任何元素，例如管理UI状态或创建datepickers或searchable dropdowns或adding options to select等控件，则首选这些事件。

注意： 两个事件都不相同。您可以参考以下帖子 window.onload vs $(document).ready()

// Pure JS
function largeFunction(){

}

window.onload = function(){
  largeFunction();
}


// jQuery
function largeFunction(){

}

$(document).ready(function(){
  largeFunction();
})

注意：拥有大型功能并不是一个好习惯。您还应该尝试将功能拆分为多个功能

function getData(callback){
  var data = ...
  // Gets data from server
  data = cleanData(data);
  data = processData(data);

  if(callback) callback(data); // callback refers to renderUI function
}

function cleanData(data){
  // Clean if any field needs formatting
  return data;
}

function processData(data){
  // You can permute logic to parse data
  return data;
}

function renderUI(data){
  // Update DOM element with data
}


function largeFunction(){
  getData(renderUI);
}

Answer 3

如果不详细了解javascript模块等，我将简单介绍最简单的方法，让您继续前进，让您根据需要进行优化。假设您将largeFunction()放入名为myScript.js的单独文件中，那么您的HTML页面设置将如下所示：

<html>
 <script type="text/javascript" src="myScript.js"></script>
 <script>
    largeFunction();

    //load a script dynamically based on the previous code
    document.write("<script src='//...'><\/script>");
 </script>
</html>

如您所见，您真正需要做的就是确保在当前脚本标记之前引用外部脚本文件。从那里，您可以像嵌入HTML中一样调用largeFunction()。

Answer 4

如果您在JavaScript中抓取DOM元素并添加事件处理程序，则不必将功能放在HTML页面上。您可以使用脚本标记创建JS文件并链接到它。最好将脚本标记放在页面底部，以确保所有DOM都已加载。

示例：

var getDomJquery = $("#got-Some-dom").on( "click", function(){
    // do some cool JS DOM stuff here
});


var getDomPureJs = document.getElementById("got-Some-dom").on( "click", function(){
    // do some cool JS DOM stuff here
});

在页面底部的HTML中。

<script src="myJsFile.js"></script>

如何从<script>标签调用javascript函数？

4 个答案:

LargeFunction.js

的index.html

IIFE

window.onload / $（document）.ready（）