闲聊前端工程_html/css_WEB-ITnose

作为一只专注于后台和服务器的程序猴子，偶然间看了一下前端开发，发现自己写的前端代码简直是远古时代的产物。

前端也得用上mvc框架

一直以来，后台就是这样子用mvc框架来开发。然而前端开发直接一个页面，一个html文件，一个css文件，一个js文件。似乎这样子维护也没什么问题，开发过程也算是比较清晰了。

然而遇上了vue这个前端框架之后才发现，前端页面书写是如此方便，不再用手动写一堆代码去操作dom元素，也不需要使用后台语言的模板引擎输出html了，因为vue就可以充当一下模板引擎，并且渲染交给前端可以减轻服务器压力。

前端文件你有压缩合并吗？

用上框架之后的确是爽，但是一个问题出现了，由于页面变得越来越复杂了。为了节省服务器带宽呢，我们一般会选择把几个文件合成一个文件来使用，但是如果对于我们开发来说分成几个文件来写比较便于维护，so我们这个时候就会使用一些辅助工具来自动合并这些文件成一个文件啦。对于js文件，有时候我们不希望别人看到我们的源码，我们就会去混淆一下。

前端开发以后的趋势可能是组件化

现在的App和桌面软件开发，每一个界面都是有无数个组件所构成。但是网页开发呢？我们以前一直都是每个页面都在编写重复的代码，慢慢的，我们把重复的内容抽离出来，然后用引入的方式拼成一个完整的html页面（这种模板渲染可以用后台引擎也可以用前端的模板引擎）。

但是如果我们把常用的东西视作一个组件来对待的话，我们就需要把这部分区域的html，css，和js独立出来。具体可以参考一下vue教程组件那个部分。

你是如何处理引入的js和css缓存问题的？

在pc端调试页面，似乎改了js和css之后浏览器访问到的都是最新版。但是如果我们用手机调试的话，几乎读取的都是旧数据，所以我们每次修改之后都要为引入加一个随机数如：

假如你有很多页面都引入，又都是写死的话，我相信你会改到吐，so这些事情还是需要一个工具来做。

有没有考虑过发布的时候是先更新html还是静态资源的问题？

也许你会纳闷，这有影响吗？假如你的网站一直有人访问，在你发布的时候都有人访问。

情况一：先发布html页面，当html发布之后，静态资源文件没有发布的时候，用户访问拿到了旧的静态资源，并且缓存了，然后他下一次访问（在静态资源文件发布之后），他用的还是旧的css，这个时候，发布等于没发不呀。

情况二：先发布静态资源，html文件没有发布，一个新用户来访问，他得到的是新静态资源和旧html页面的混合体，这个时候页面很有可能是错乱的。

解决方案：静态资源文件更新不覆盖旧文件，文件名采用md5方式命名，先发布静态资源，再发布html页面。

前端框架

现在不是以前那种单单一个jquery就行了的时代，现在很多都用上vue.js，Angular，React这些新的前端mvc框架。

前端打包工具

webpack和grunt等。

太久没有接触前端开发了，感觉整个人都脱节了。顺便分享一个自己造的前端打包，压缩合并，并且为静态资源自动打上版本号的小轮子：

https://github.com/yubang/modular_front

欢迎大家给点意见哈