关于前端结构调整的一次实践

Posted 2020-06-13

先状：

刚毕业，到一家中小型互联网企业做前端开发，所在部门的前端之前做.net的，我来了之后前端交给我了，前辈就没管前端了；前端结构很简单：html/css/js/imgs，四个文件夹，页面上直接引用对应文件夹的文件，因为涉及到几个项目，我暂且只能在此基础上继续开发。

问题：

1、没啥大问题；
2、单个文件会出现臃肿、杂乱的情况，随着项目往后走，本地开发很不便于维护；
3、文件多了后，相互之间的依赖、命名空间、作用域的问题，总会意想不到的出现；
4、需求或BUG交叉出现时，会非常头疼;
5、js文件被后端写入项目，除了确实是公共资源以外的js，前端没有添加或去掉的控制权；

说是没什么大问题，但这些问题确实不止一次的出现过，而且每次出现都会很令人头大（怪我懒咯）；在此 就不吐槽了； 简单分享下我的优化思路，当然有很多不足，继续学习，欢迎指导！

首先，当然必须是模块化了，有两种方案：第一种是，以组件为基础，以页面为单位，各自作为 一个模块，由seajs来将模块组织起来；参见：（好好的用好seajs吧！）；第二种是，由Nodejs组织前端开发环境，同样划分模块， 但是是按照Nodejs的模块化规范，这样就将javascript引入到Nodejs端了，最后由Gulp一键打包、 压缩到预上线文件夹；参见：（Browserify让你的Javascript游走于前后端）

由于目前项目已相对稳定，要全面模块化，还得降前后端的改动压到最小，特别是不能让后端做一系列的改动； 如果要实现一个页面只加一个JQuery、一个对应js，还有有个问题就是你不可能叫后台每个页面给你再单独加个 文件；但是每个页面只对应一个js文件是必须的，所以最终我不得不单独弄一个main.js，他将作为整个项目的 入口文件，并且由他分发各个页面需要的js；这样的话，后端只需要将main.js写入项目作为公共文件就可以了， 至于哪个页面加哪个js，就都跟后端没关系了；以后页面要加或减JS，控制权就全在前端了，Yeah!

前面说了，项目已相对稳定，所以我最终选了第一种方案；其实第二种方案，由Nodejs组织，是本人更加喜欢的， 后期会在自己的博客中，将前端的结构改为第二种方案；

接着，还是先拆分模块吧；为了将BUG率降到最低，只将应用型的模块的抽离出来，比如：省市区、拖拽、 日历之类的；后续会继续写单个组件，将模块化进行到底；其他内容原封不动的提出来放到define里， 因为有main.js来做代理，页面文件模块现在就不需要exports了；页面上也不需要seajs.use什么的了；

终于到重点了main.js：

• 首先是要注意静态资源的域了；
• 重点是怎么实现分发；
• 还有就是seajs里$(document).ready()是起不到ready作用的，main.js最好保证ready的实现；
• 还有就是有没必要在这去除缓存；

呵呵，不装逼了，其实这些都很容易；分发就是取页面独立ID或name，然后seajs.use对应js就是， 当然前提是，可能要配好一个大JSON，至于DOMReady，大神们提供了不少，摘一个过来就是；最后就是怎么组织好这些关键点了，当然最好是上代码了， 无赖目前还未上线（领导说牵扯的有点多，有空余时间再上），我本机又没有，过完年就回公司，扒过来分享给大家， 希望多多指导，前端的地位需要我们自己争取啊！

上面说的第二种方案，是近期想到的，能够抛弃seajs，同样的实现模块化，只不过是以Nodejs的方式，重点是 Gulp和browserify的配置；为什么我更喜欢这个方案呢，因为还能顺带实现自己的版本控制，不用老从线上扒了， 不过这种方案更适合项目一开始就实现；公共文件如：jquery、插件直接src进来，其他页面可以取缓存， 通过browserify以nodejs的方式写JS，只require单个组件（非公共文件），用Gulp合并压缩到预上线文件夹， 为了保留线上版本，不能直接替换以前版本，可以新建文件夹，以时间命名，所以这时Gulp的配置就很重要了，除了 合并、压缩文件外，还要新建文件夹，取当时的时间作为文件夹的名字；这里browserify会帮你处理各种依赖关系， 并帮你一并合并压缩；

1 //简单实验、更多精彩、由你发现
2 gulp.task(‘browserify‘,function() {
3     return browserify(‘./dev/testBroswerify.js‘)
4             .bundle()
5             .pipe(source(‘test.js‘))
6             .pipe(buffer())//.pipe(streamify(uglify()))  //压缩耗时间   上线处理
7             .pipe(gulp.dest(‘./dist/js‘))
8 });

其实这两种方案可以结合使用的，差别也就在于http请求次数上吧，大家都知道，seajs里每次require都会 多一次http请求的，只不过模块之间重复的seajs帮你处理了，但是如果模块数比较多的话，恐怕不怎么好吧， 虽然seajs提供了一套自己的基于Nodejs的压缩合并方案，但是貌似不愠不火的；所以模块化结合browserify 应该是比较好的方案吧；我的博客会逐步改用这种方式作为前端的构建方式，哈哈，不管怎么样，自己的博客 又没有人说你不能搞，当然不足之处，当局者迷，还劳烦大家多指导，旁观者清嘛；

我是个小前端，这些只是我目前项目中的问题以及我个人的思考和解决办法，诸多不足，欢迎讨论；我想前端 在团队中的地位一般都比较低吧，特别是中小企业，恨不得前后端都你来啊，什么html、css、js随便弄两下就是， 既然叫前端开发肯定不是网页设计啊，而且现在后端职业分化的也明显，前端的工作量不见得比后端低很多吧; 无视这些牢骚吧，既然是一个团队，肯定都是不可或缺的，我还是得不断积累，提升自己，谢谢大家能看到这儿！