JS/JQ 写代码的结构思路。

Question

初学JS JQ 有一段时间了，功能基本能做出来，也看了一些AG，react，vue这些框架。但是我在写代码的结构上，感觉还是停留在初级（垃圾）水平。举个列，我用JQ库写代码的结构是这样的。如下：

$(function () {    
    //一个点击事件
    $("selector1").click(function(){
        //执行代码块A 
        A();
    });
    
    如果执行代码块A 在外面写个公用函数，就写成：
    
    function A(){
        //执行代码块 
    }
    
    //另一个点击事件
      $("selector2").click(function(){
        //执行代码块B 
        B();
      });
      
    如果执行代码块B 在外面写个公用函数，就写成：
    
    function B(){
        //执行代码块 
    }
  });
  

当达到千行的时候，我就发现这个不好维护，虽然，我把每个功能 代码块写了注释，感觉后面维护，修改跟困难。我也看过别人写的，用原型链的等等。

论坛经验丰富的朋友能否分享下自己的代码结构思路。暂时不要提供什么框架，模板引擎。谢谢

Answer 1

这其实不是写代码的结构思路问题，而是对项目分析的问题。你不用参考 AG，react，vue 这些框架。因为这些框架和jquery有本质的区别。AG，react，vue 这些本质上是按照开发者的思路给你安排好了整个结构。

初级

1.我说一下我平时怎么组织一个项目 js 的结构的。首先我会把整个项目都会用到的一些方法，变量提取出来，放到一个通用的文件里。比如 common.js。
2.common.js 中需要定义一些公用的方法，以及变量（如果用后端说的话，其实是常量，但是js中 es6 才有常量的说法）。考虑到直接使用 var 定义的话会挂载到 window 下面成为全局变量，造成变量污染。所以我们只暴露出来一个全局变量。这个变量起名一定不要太普遍，避免冲突，要有自己的标识。

var ls=function(){
    
}
// 添加属性
ls.prototype.api=‘xxx.com/api’；
// 添加方法
ls.prototype.strtotime=function(){

}

可能这时候很多人不明白为什么会用原型来添加方法和属性，直接 var ls={},ls.api=‘xxx.com/api’ 这样不是也行嘛？这样也行，但是后面有可能在某个模块会对 api 属性进行修改，或者对方法进行扩展。这样用继承的写法比较方便。
3.然后就是按照项目模块进行划分，比如会员模块就新建一个 member.js。文章模块就新建一个 article.js 。然后一个页面对应一个方法，比如会员登录就在 member.js 中加一个 login方法。
如果项目比较复杂，页面逻辑比较复杂，直接一个页面写一个js文件单独引入也行。但是这个时候要在文件结构上区分一下，比如 member/login.js,article/insert.js。
这里就灵活变通啦，总之我是不建议在html页面混写的。即影响加载速度，维护也麻烦。

进阶

等你写的多了你就会发现你们的业务中很多逻辑和组件是通用的，比如表单异步提交啊，表单验证啊，异步上传啊之类的。每个页面都复制一次会很傻，所以就要把这些逻辑剥离出来，按照你的使用习惯单独重新封装一下。你会发现用起来特别爽，效率非常高。这个阶段可能需要你看一下 jquery，jquery插件之类的源码。

进化
再用一段时间，你会发现没意思，就想用 AG，react，vue 来体验一下。那就入坑啦。nodejs，npm,webpack什么的走起。。。ps，幸亏现在webpack一家独大了。之前前端自动化工具更多呢。gulp、fis 什么鬼的。

最后
前端切记不要浮躁，比如“暂时不要提供什么框架，模板引擎”，这就是很正确的，只要把 js 的原型链、闭包、作用域、异步、事件、dom 全部搞清楚，用什么框架都不怂。那就是，大道直至本心，飞升有望矣。

Answer 2

你可以先用 AMD 方式，把代码拆开。这种情况下，再碰到瓶颈时，再说。 -- 水平拆。

然后，考虑下你的代码的层次，哪些是处理数据的，哪些是操作节点的，哪些又是事件回调的等，考虑怎么分代码。 -- 垂直拆。