现在流行的前端

2017/09/28 前端 天生的黑_燕睿涛

引言

前端相关的技术,是在发展的是太快了,稍微有段时间不关注就发现有新的东西出现了,作为一个 还在停留在使用jquery阶段的伪前端,想跟上前端发展的脚步实在有些吃力。

还好之前在某著名广告搜索引擎公司工作过,当时公司缺少前端,我做了3个多月的全职前端,这 期间学到了好多东西,他们所用的那套前端也是我接触过的几家公司里面最好用的,前后端分离的 很彻底,开发前,前后端定好接口,就可以多进程开发了,互不影响,前端对测试数据也支持的很好。

而前端的这一套使用流畅的系统是基于fis开发的, 目前最新的版本是fis3,目前已经开源,协议是BSD 2-clause,对使用者基本没有什么限制, 可以放心使用,下面是官方对发的解释:

FIS3 面向前端的工程构建系统。解决前端工程中性能优化、资源加载(异步、同步、按需、预加载、依赖管理、合并、内嵌)、模块化开发、自动化工具、开发规范、代码部署等问题。

FIS3可以做什么

编译前端资源

现在的前端已经不是以前的那种直接写css、html、javascript了,都可以选用类似less\sass、 jade/hbs、TypeScript/CoffeeScript等语言,然后编译成为最终的css、html、JavaScript, 这些中间语言(编译之前的语言)有看起来更简洁、更符合人类编写的过程等优点(当然他们其中也是 有些缺点,比如学习成本问题、不兼容之前的代码问题等),因此好多现代化的公司都会部分或者完全 的采用这些语言来提升开发效率、项目可维护性。

这样的话就有了问题了,这个编译过程谁做呢,怎么做呢,每次开发完之后都要手动编译吗,这样会很 麻烦,很容易遗漏掉东西,或者还需要开发者自己编写类似Makefile的功能,每次完成开发运行一次 编译。使用FIS的话可以很容易的帮我们做这个工作,它使用node的开源库,只需要一个配置就可以完成 这项工作,配置的话使用js,不会js也可以按照文档配置。

静态资源升级问题

一般我们队使用cdn的资源升级的时候会引入版本号的概念,当有资源改动的时候手动去修改引用资源的 地方,这样就很麻烦了,如果修改了图片,可能会修改html、css对应的文件,多了的话,很容易改错、 改漏,导致线上出问题。另外一种方式就是所以资源相关的版本号都从配置读取,用同一个版本号,这样是 容易点儿,好管理,升级资源后,只需要升级版本号就行了,但这样浪费很大,比如我们只修改了一个图片 文件,升级了版本号,其他所有使用这个统一版本号的资源都升级了,浏览器端的缓存会过期掉,浪费带宽 流量、服务器资源。

这个时候如果有FIS的话,就容易多了,他会自动解析引用关系,比如我们修改了资源图片A,编译之后引用 A的地方会自动升级为新的版本号(一般设置为文件指纹md5),而其他资源还是原来的版本号,完全不用我 们去手动修改,开发者只需要关注开发就行,其他这些版本升级什么的完全可以不用理会。

测试

可以很容易启动本地服务器,然后本地调试,测试数据也很容易设置。还可将文件发送到远程服务器,只需要 在远程设置接受文件就可以,联调的时候很方便,另外还有监听文件的功能,每次修改文件之后就可将修改 的文件增量的同步到指定位置。

资源表

资源表map.json设FIS中很优秀的一个设计(参考了Facebook的相关技术),他扫描了所有静态文件,记录 他们的发布位置和依赖关系。到这里FIS的工作基本就完成了,它生成了资源表,我们可以使用资源表做很多定制 化的事情。这就像是给我们了面、油盐酱醋,而不是直接给我们来了一份biangbiang面,我们自己可以做任何我 们想吃的面食了。

glob

glob匹配这个真的很好用,在设置各种规则的时候都能用到,简单好用。完全可以满足各种要求, 下面就是匹配fis-conf.js所在文件夹下面的widgetpage下面的所有php文件,包括子文件夹中的。 如果只是当前文件夹下面的php文件,这里只需要将**改为*即可。

fis.match("/{widget,page}/**.php",{
    isMod : true
})
压缩、合并

另外,像js、css压缩合并、图片雪碧图这些,都可以轻而易举的通过node插件+配置实现。

参考文章

我的大部分内容都是从官网和下面的博客中看来的,加上自己之前的简单实用总结的,下面这篇文章写的更详细 透彻点儿。

  1. https://github.com/fouber/blog/issues/3
  2. http://fis.baidu.com/fis3/docs/beginning/intro.html