吐槽一個Web工程結構

簡介

通常常見的Web頁面的結構會由3部分組成:

1. 模板html（因工程而異，通常須要跟後端配合，最終是渲染成html
2. 樣式css（通常由less或sass編譯而來
3. 腳本javascript（大部分原生Javascript，其它會用coffeescript，typescript，或者是ES6+轉換器等之類轉換而來

Web工程演變

起先，最簡單的一個web頁面開始，就是一個html，而後css和javascript都是直接寫在html，
這時的頁面組成：

1. html

而後，css和javascript開始增多，就把css和javascript分紅單獨的文件，經過link標籤和script引入

1. 一個html
2. 幾個css
3. 幾個javascript

最後，html，css，javascript愈來愈多，愈來愈複雜，尤爲是在多人開發的狀況下，這簡直是噩夢。

這個時候常作的事情就是按功能，按模塊劃分，剝離出公共的模板、樣式、javascript庫，

這個時候一個Web頁面的組成成分就會是這樣：

1. 公共的模板（頭部，底部，懸浮操做欄等
2. 組件的模板（如翻頁，彈框等
3. 業務功能的模板
4. 公共的樣式或變量（須要less或sass
5. 組件的樣式
6. 業務功能的樣式
7. 工具庫javascript（如jquery及其插件，各類polyfill，以及其它組件等）
8. 工程架構型的javascript（如angular，react及其插件等，
9. 具體業務邏輯的javascript

圍繞的最後的情形，各個開發者則根據本身的方法來構建本身的工程
或者直接依賴現有的工具，如yeaoman

迴歸正題

吐槽對象爲一個用yeoman構建的工程，基於compass和requriejs，jquery

在css方面，

竟然是全部的頁面都是使用同一個css文件，構建工具竟然是把工程下全部的scss文件都編譯至一個文件，

@import 'style1';
@import 'style2';
@import 'style3';
...（如下省略一串）

而後全部的模板都引用這個文件,這致使

1. 命名的衝突
2. 更改scss都須要從新編譯並彙總（這個過程預估是秒級別），這致使是grunt lreload的自動刷新簡直形同虛設。

在js方面

使用requirejs加載模塊，那麼詭異的地方在於，竟然是全部的第一級的頁面都引入了main.js，在main.js內部判斷頁面的類型，再加載相應的模塊。
其次是各類jquery插件，jquery的插件一般都是掛在$對象下，因此當你想要使用某個插件，只要引入jquery和該插件的js。
那麼在這裏jquery插件是如何使用的呢？竟然是一次性所有加載進來

//libs.js
define(['jquery','addOne1','addOne2',...（省略一長串）],function($){
  return $
})

在程序初始化時，工程下的全部jquery插件都會被初始化。
而後到時候須要使用插件時，雖然只要引入一個libs.js便可，可是很明顯很是多很是多的冗餘。

end

剩餘其它就懶得吐槽了，主要是針對其中各類冗餘的代碼，雖然問題不大，尤爲是在如今的電腦性能下，多個幾百KB基本不影響使用，但喔對於代碼的大量冗餘就是不爽。 做爲一個前端的小菜，我一直認爲程序猿，或說是工程師，使用各類的工具，應該是不斷爲了爲了追求更快，更輕，更簡潔的目標而努力的，不斷的向其靠近，這樣才能更快的成長起來。