將一個大的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文件分割成幾個較小的文件

回答

相關問題