JS/JQ 寫代碼的結(jié)構(gòu)思路。

初學JS JQ 有一段時間了，功能基本能做出來，也看了一些AG，react，vue這些框架。但是我在寫代碼的結(jié)構(gòu)上，感覺還是停留在初級（垃圾）水平。舉個列，我用JQ庫寫代碼的結(jié)構(gòu)是這樣的。如下：

$(function () {    
    //一個點擊事件
    $("selector1").click(function(){
        //執(zhí)行代碼塊A 
        A();
    });
    
    如果執(zhí)行代碼塊A 在外面寫個公用函數(shù)，就寫成：
    
    function A(){
        //執(zhí)行代碼塊 
    }
    
    //另一個點擊事件
      $("selector2").click(function(){
        //執(zhí)行代碼塊B 
        B();
      });
      
    如果執(zhí)行代碼塊B 在外面寫個公用函數(shù)，就寫成：
    
    function B(){
        //執(zhí)行代碼塊 
    }
  });

當達到千行的時候，我就發(fā)現(xiàn)這個不好維護，雖然，我把每個功能代碼塊寫了注釋，感覺后面維護，修改跟困難。我也看過別人寫的，用原型鏈的等等。

論壇經(jīng)驗豐富的朋友能否分享下自己的代碼結(jié)構(gòu)思路。暫時不要提供什么框架，模板引擎。謝謝

回答

編輯回答

枕頭人

你可以先用 AMD 方式，把代碼拆開。這種情況下，再碰到瓶頸時，再說。 -- 水平拆。

然后，考慮下你的代碼的層次，哪些是處理數(shù)據(jù)的，哪些是操作節(jié)點的，哪些又是事件回調(diào)的等，考慮怎么分代碼。 -- 垂直拆。

2018年5月12日 22:12

編輯回答

焚音

這其實不是寫代碼的結(jié)構(gòu)思路問題，而是對項目分析的問題。你不用參考 AG，react，vue 這些框架。因為這些框架和jquery有本質(zhì)的區(qū)別。AG，react，vue 這些本質(zhì)上是按照開發(fā)者的思路給你安排好了整個結(jié)構(gòu)。

初級

1.我說一下我平時怎么組織一個項目 js 的結(jié)構(gòu)的。首先我會把整個項目都會用到的一些方法，變量提取出來，放到一個通用的文件里。比如 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文件單獨引入也行。但是這個時候要在文件結(jié)構(gòu)上區(qū)分一下，比如 member/login.js,article/insert.js。
這里就靈活變通啦，總之我是不建議在html頁面混寫的。即影響加載速度，維護也麻煩。

進階

等你寫的多了你就會發(fā)現(xiàn)你們的業(yè)務中很多邏輯和組件是通用的，比如表單異步提交啊，表單驗證啊，異步上傳啊之類的。每個頁面都復制一次會很傻，所以就要把這些邏輯剝離出來，按照你的使用習慣單獨重新封裝一下。你會發(fā)現(xiàn)用起來特別爽，效率非常高。這個階段可能需要你看一下 jquery，jquery插件之類的源碼。

進化
再用一段時間，你會發(fā)現(xiàn)沒意思，就想用 AG，react，vue 來體驗一下。那就入坑啦。nodejs，npm,webpack什么的走起。。。ps，幸虧現(xiàn)在webpack一家獨大了。之前前端自動化工具更多呢。gulp、fis 什么鬼的。

最后
前端切記不要浮躁，比如“暫時不要提供什么框架，模板引擎”，這就是很正確的，只要把 js 的原型鏈、閉包、作用域、異步、事件、dom 全部搞清楚，用什么框架都不慫。那就是，大道直至本心，飛升有望矣。

2018年4月18日 14:19