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

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

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

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

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

回答

編輯回答

枕頭人

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

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

2018年5月12日 22:12

編輯回答

焚音

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

初級

1.我說一下我平時(shí)怎么組織一個(gè)項(xiàng)目 js 的結(jié)構(gòu)的。首先我會(huì)把整個(gè)項(xiàng)目都會(huì)用到的一些方法，變量提取出來，放到一個(gè)通用的文件里。比如 common.js。
2.common.js 中需要定義一些公用的方法，以及變量（如果用后端說的話，其實(shí)是常量，但是js中 es6 才有常量的說法）?？紤]到直接使用 var 定義的話會(huì)掛載到 window 下面成為全局變量，造成變量污染。所以我們只暴露出來一個(gè)全局變量。這個(gè)變量起名一定不要太普遍，避免沖突，要有自己的標(biāo)識。

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

}

可能這時(shí)候很多人不明白為什么會(huì)用原型來添加方法和屬性，直接 var ls={},ls.api=‘xxx.com/api’ 這樣不是也行嘛？這樣也行，但是后面有可能在某個(gè)模塊會(huì)對 api 屬性進(jìn)行修改，或者對方法進(jìn)行擴(kuò)展。這樣用繼承的寫法比較方便。
3.然后就是按照項(xiàng)目模塊進(jìn)行劃分，比如會(huì)員模塊就新建一個(gè) member.js。文章模塊就新建一個(gè) article.js 。然后一個(gè)頁面對應(yīng)一個(gè)方法，比如會(huì)員登錄就在 member.js 中加一個(gè) login方法。
如果項(xiàng)目比較復(fù)雜，頁面邏輯比較復(fù)雜，直接一個(gè)頁面寫一個(gè)js文件單獨(dú)引入也行。但是這個(gè)時(shí)候要在文件結(jié)構(gòu)上區(qū)分一下，比如 member/login.js,article/insert.js。
這里就靈活變通啦，總之我是不建議在html頁面混寫的。即影響加載速度，維護(hù)也麻煩。

進(jìn)階

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

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

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

2018年4月18日 14:19