为了账号安全,请及时绑定邮箱和手机立即绑定

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

2016.02.12 06:18 6557浏览

先状:
刚毕业,到一家中小型互联网企业做前端开发,所在部门的前端之前做.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会帮你处理各种依赖关系, 并帮你一并合并压缩;

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

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

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

点击查看更多内容
39人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消