如何组织前端javascript代码

Question

现在写一些中型或大型的web程序的时候经常遇到开发到中后期的时候前端js代码很混乱，没有形成良好的模块化，每次查找对应代码的时候都很麻烦。
采用angularJS之类的MVVM框架的时候还能很好给每个页面一个controller，模块用directive,service之类的拆分文件，最后再打包合并。

但现在如果开发一般的web应用时应该如何在小，中，大型应用开发中组织前端代码？

Answer 1

时间有限，粗略写一下：

1.基础 - 函数版：

function a(){};
function b(){};

2.入门 - 字面量版：

var obj = {
    init : function(){
        this.a();
        this.b();
    },
    a : function(){},
    b : function(){}
}
// 在页面中调用obj.init();

3.进阶 - 命名空间版：

var hogo = {
    ns : function(){};
}

hogo.ns('hogo.wx', {
    init : function(){
        this.a();
        this.b();
    },
    a : function(){},
    b : function(){}
});
hogo.wx.init();

4.提高 - 模块化版：

define();
require();

仅供参考。

Answer 2

html中的注释跟js中的注释一致就行了，这样很容易找到，也有层次感，每个模块注释都习惯的空一两行

Answer 3

现在不是有很多模块化开发库吗 seajs requirejs

就是把js代码仿照后端的代码来开发

Answer 4

直接用es6

Answer 5

给你2个关键字 gulp requirejs