吐槽一个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基本不影响使用，但喔对于代码的大量冗余就是不爽。
作为一个前端的小菜，我一直认为程序猿，或说是工程师，使用各种的工具，应该是不断为了为了追求更快，更轻，更简洁的目标而努力的，不断的向其靠近，这样才能更快的成长起来。