关于在大javascript文件中排序的建议

Advice for order in big javascript file

本文关键字：排序 文件 javascript      更新时间：2023-09-26

我开始在Sublime Text中创建一个只有几行和几个函数的javascript文件，但是随着时间的推移，这个文件越来越大，现在它有大约600行和大约40个函数。

所以我一直上下滚动来写或读代码。我认为这不是一个好的工作流程。我怎样才能更有组织与javascript代码。有专业人士使用的技术或工具吗?

600行还不算多。你能做的就是给你的代码命名空间(根据功能分开)。例如:

假设你有一个js文件，里面有一堆函数

function formatDate(date){ ... }
function calcAge(birthdate){ ... }
function removeAccents(string){ ... }
function resizeImage(img){ ... }
... and many more ...

您可以继续按类别分离函数，在这种情况下，我们可以将处理日期的所有函数分组。所有处理字符串的和处理图像的

// we create a global namespace, on main.js
var MyCoolProject = {};
// then we include string.js, and put all the string functions here
MyCoolProject.string = {
    removeAccents: function(string){ ... }
};
// on date.js, we put all date functions
MyCoolProject.date = {
    formatDate: function(date){ ... },
    calcAge: function(birthdate){ ... }
};
// so on with image.js
MyCoolProject.img = {
    resizeImage: function(date){ ... }
};

这样你就有了几个较小的文件来处理特定类型的逻辑，你可以像这样调用你的函数:

function doSomethingAwesome(str){
    var awesomeString = MyCoolProject.string.awesomize(str);
    alert(awesomeString);
}

您还受益于拥有更易于维护的代码并避免冲突。当您包含的另一个脚本恰好具有与您的脚本同名的函数时，就会发生冲突。如果发生这种情况，则只执行最后包含的函数。通过给代码设置命名空间，可以防止这种情况的发生。

Keep in mind

你将有更多的文件，这意味着在你的html中有更多的<script>标签，有时顺序很重要!最终应该使用grunt或gulp等构建工具将所有js连接并最小化到一个单独的scripts.js文件中。通过这种方式，您可以在开发过程中完全控制代码。但是一旦在生产中，你的网站只会对js文件发出一次请求，这应该会使你的网站加载速度更快。

另外，这里使用的命名空间方法是我的个人偏好，但在js中，你可以通过其他模式，如原型，闭包，commonjs等来实现相同的行为，所以你可以研究这些，看看哪一个适合你的个人偏好。没有一个比另一个更好，只有一个将作为一个工具，使您更快，更好地构建它。

相关文章：