将一个大的javascript文件分割成几个较小的文件

我使用jQuery和jQuery UI来操作DOM元素，并发现自己处于这种情况。将一个大的javascript文件分割成几个较小的文件

的index.html：

<html> 
<head> 
<link href="dashboard.css" rel="stylesheet"> 
</head> 
<body> 
<script src="dashboard.js"></script> 
<body> 
</html>

dashboard.js：

function addAccordian() { 
    // some logic here 
} 

function addConnectedSortable() { 
    // more logic here 
} 

function addPiecharts() { 
    // a huge chunk of logic here 

    // for example, 

    // several ... 
    // hundred ... 
    // line ... 
    // of code 

} 

function readyFn(jQuery) { 
    addAccordian(); 
    addConnectedSortable(); 
    addPiecharts(); 
} 

$(document).ready(readyFn);

我只能想象的dashboard.js文件做大，做大随着时间的推移。

问题：有没有办法将其分割成几个较小的JavaScript文件，并以某种方式include/import呢？

我来自Java背景，所以请原谅我，如果这个问题没有多大意义。

我很乐意提供任何建议，因为这个项目还很早，我们使用的技术很灵活。

来源

2017-04-13 Jeff Xiao

烨。这通常被称为构建过程。例如，可以使用诸如webpack/gulp/grunt之类的东西来完成。 –

我发现[本文]（http://ryanmorr.com/understanding-scope-and-context-in-javascript/）解决了一些名称冲突问题。搜索“模块模式” –

只需创建您需要的文件，然后将它们包含在页面中。我建议你将它们包含在head元素中，以便浏览器可以同时加载它们。

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

来源

2017-04-13 18:02:31 gforce301

我会接受这个答案。请在问题中查看我对注释名称冲突解决方案的评论 –

将一个大的javascript文件分割成几个较小的文件

回答

相关问题