普遍接受的 JavaScript 代码组织最佳实践 [英] Commonly accepted best practices around code organization in JavaScript

问题描述

随着像 jQuery 这样的 JavaScript 框架使客户端 Web 应用程序更丰富、更实用，我开始注意到一个问题......

As JavaScript frameworks like jQuery make client side web applications richer and more functional, I've started to notice one problem...

您到底是如何保持井井有条的?

• 将所有处理程序放在一个位置并为所有事件编写函数?
• 创建函数/类来包装您的所有功能?
• 疯狂地写作，只是希望它能达到最好的效果?
• 放弃并开始新的职业?

我提到了 jQuery，但它实际上是一般的 JavaScript 代码.我发现随着一行行开始堆积，管理脚本文件或找到您要查找的内容变得更加困难.我发现的最大问题很可能是有很多方法可以做同样的事情，很难知道哪一种是当前普遍接受的最佳实践.

I mention jQuery, but it's really any JavaScript code in general. I'm finding that as lines upon lines begin to pile up, it gets harder to manage the script files or find what you are looking for. Quite possibly the biggest propblems I've found is there are so many ways to do the same thing, it's hard to know which one is the current commonly accepted best practice.

对于保持 .js 文件与应用程序的其余部分一样美观和整洁的最佳方式，是否有任何一般性建议?或者这只是IDE的问题?有没有更好的选择?

Are there any general recommendations on the best way to keep your .js files as nice and neat as the rest of your application? Or is this just a matter of IDE? Is there a better option out there?

编辑

这个问题更多地是关于代码组织而不是文件组织.有一些非常好的合并文件或拆分内容的例子.

This question was intended to be more about code organization and not file organization. There has been some really good examples of merging files or splitting content around.

我的问题是:目前普遍接受的组织实际代码的最佳实践方式是什么?您的方式是什么，或者甚至是推荐的方式来与页面元素交互并创建互不冲突的可重用代码?

My question is: what is the current commonly accepted best practice way to organize your actual code? What is your way, or even a recommended way to interact with page elements and create reuseable code that doesn't conflict with each other?

有些人列出了命名空间，这是一个好主意.还有哪些其他方法，更具体地说是处理页面上的元素并保持代码井井有条?

Some people have listed namespaces which is a good idea. What are some other ways, more specifically dealing with elements on the page and keeping the code organized and neat?

推荐答案

如果 javascript 内置命名空间会更好，但我发现像 Dustin Diaz 这样的组织方式描述了 这里 对我帮助很大.

It would be a lot nicer if javascript had namespaces built in, but I find that organizing things like Dustin Diaz describes here helps me a lot.

var DED = (function() {

    var private_var;

    function private_method()
    {
        // do stuff here
    }

    return {
        method_1 : function()
            {
                // do stuff here
            },
        method_2 : function()
            {
                // do stuff here
            }
    };
})();

我将不同的命名空间"和有时单独的类放在不同的文件中.通常我从一个文件开始，当一个类或命名空间变得足够大以保证它时，我将它分离到它自己的文件中.使用工具将您所有的文件组合起来进行生产也是一个好主意.

I put different "namespaces" and sometimes individual classes in separate files. Usually I start with one file and as a class or namespace gets big enough to warrant it, I separate it out into its own file. Using a tool to combine all you files for production is an excellent idea as well.

这篇关于普遍接受的 JavaScript 代码组织最佳实践的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！