文档章节

  fis能够做什么

欢乐小金鱼
 欢乐小金鱼
发布于 2015/04/06 14:01
字数 1662
阅读 44
收藏 0

最近一直在学习fis,开始并不知道fis在做什么,理解的很模糊,所以一直在学习中。。。下面来写下我自己的理解。

首先介绍下:前端模块化开发体系是什么样的:

前端模块化开发体系

在开发目录中的什么文件,将来要部署到什么集群上,框架中要做哪些处理” 这样的事情,也就是连接开发规范、部署规范和模块化框架的工作。三者是需要工具进行转换的

要实现一个完整的模块化开发体系,我觉得需要有一个工具做这些事情:

  1. 对模块化资源进行扫描,获取资源依赖关系,生成依赖表,注入到模块化框架中供依赖管理、按需加载、合并请求等优化使用(资源依赖,用于连接框架)

  2. 接收一种配置,标记每种类型的文件会发布到什么目录或集群中,然后扫描所有文件中的资源定位标记,将其替换成部署路径(资源定位,用于连接开发和部署规范)

  3. 允许一些资源并不是通过模块化方式加载,而是直接内嵌到其他资源中使用,比如把图片以base64形式嵌入到css、js中(资源内嵌,非必须,但很有用)


以上三件事并不是一件简单的工作,下面就图解一下这几件事情

1.所谓工具连接框架

工具连接框架

连接框架 就是工具把静态分析的依赖关系以某种形式传递给框架,用于框架在运行时的资源管理、加载及优化

2.所谓工具连接规范(连接的是开发规范和部署规范)

工具连接规范

给一个配置文件,告诉工具,源码中的什么文件(用reg匹配)部署后会发布到哪里(release定义),这样,工具会把源码中所有关于这个资源的定位标记替换成部署路径。实现开发时使用工程路径,构建后使用部署路径的功能。这个功能可以保证资源的独立性,并且能对性能做优化(加md5戳)。独立性可以让资源无论是被合并、移位还是在其他地方加载都能正常运行。


下面解释下fis能够做什么

前端架构大部分工作要解决的是 如何用工具连接框架和规范的问题。这是一个工程问题。fis想解决的正是规范与框架的链接问题,而不是简单的前端源码构建。

所谓框架,主要指模块化框架,其职责包括对模块化资源的管理和加载,管理包括js/css的依赖管理,加载包括按需加载和请求合并,以及资源缓存与更新。

所谓规范,主要是指开发和部署规范,比如哪些是模块化资源,哪些是非模块化资源,模块化资源如何包装、优化和部署,非模块化资源如何部署等,什么文件发布到什么目录,是否有CDN等等。

框架、规范、工具三者需要紧密配合才能比较完美的解决模块化开发、性能优化等前端工程问题。

fis本身是一种特殊的 “工具”,通过一些比较 “奇怪” 的配置设计,实现了框架与规范的绑定过程。这些问题我觉得是grunt/gulp不曾思考过的。

fis的解决方案,包括你看到的rsd,还有 scrat,其实都是对fis的配置,每一套配置用于连接一种特定的规范和框架:

  • fis-plus:以smarty为模板引擎,以 mod 为模块化框架,适用于php后端渲染及部署运维方式的解决方案。

  • yogurt:以swig为模板引擎,以 mod 为模块化框架,适用于nodejs后端渲染架构及部署运维方式的解决方案

  • jello:以velocity为模板引擎,以 mod 为模块化框架,适用于java后端渲染架构及部署运维方式的解决方案

  • pure:无后端渲染,使用前端模板,以 mod 为模块化框架,适用于纯前端,前后端严格分类的项目

  • gois:go语言解决方案。

  • spmx:纯前端方案,以seajs为模块化框架,一个示例项目,不完整,不要用于生产

  • rsd:纯粹是为了展示静态资源md5问题的项目,把fis所有的语言插件都装上,可以在一个项目里混合多种语言进行开发,用资源内嵌实现打包,可以认为是最简易的fis,不适合大规模生产。

  • scrat:以 scrat.js 为模块化框架,内含webapp、seo、olpm三种模式,其中:

    • webapp是纯前端解决方案,依赖combo服务实现资源合并,适用于中型移动端单页面应用.

    • seo是多页面模式,以swig为模板引擎,进行后端渲染,支持quickling(或者pjax),以combo服务合并资源,面向需要seo的单页面应用.

    • olpm是运营后台模板开发模式,我们内部有一个CMS,可以用这种模式进行开发,本地预览,然后把代码打包上传到cms系统,作为专题模板使用。

    总之,由于前端的开发环境、开发模式、部署方式实在是太五花八门了,有传统多页面模式,有移动端SPA模式,有CMS组件化拼装模式,不同的模式还可能会结合不同的后端语言(不要以为前端可以完全从后端剥离出来,不理解其中的原理,我可以单独写一篇文章说明),所以不可能有一种固定模式能解决所有问题,fis的设计就是把所有这些模式中的公共部分抽取出来形成一个基础工具,面对不同开发部署规范、不同模块化框架再做配置即可。

    所有不同的前端开发模式,有一些相同的内在联系,那就是:资源定位资源内嵌资源依赖这三种语言能力。这三种语言能力为什么会成为所有开发模式的共性,这和前端这种特殊的GUI软件的安装和运行方式有关,后面再另开文章讲解吧,这里就不再解释了。




© 著作权归作者所有

共有 人打赏支持
欢乐小金鱼
粉丝 9
博文 14
码字总数 6977
作品 0
海淀
程序员
jQuery对象入门级介绍

本文由伯乐在线 -kmokidd 翻译。未经许可,禁止转载! 英文出处:smashingmagazine。欢迎加入翻译组。 你是否曾经见过像 这样的JavaScrip代码?或许你还会思考下 是什么,如果看到这些你都觉...

伯乐在线
2014/06/24
0
0
如何利用 C++ 的 Lambda 表达式提升 Qt 代码

原文出处:oschina Lambda 表达式是在 C++11 中加入的 C++ 特性。在这篇文章中我们将看到如何用 Lambda 表达式来简化 Qt 代码。Lambda 很强大,但也要小心它带来的陷阱。 首先,什么是 Labm...

oschina
2017/02/09
0
0
如何处理前任程序员留下的代码

原文出处:Justin Albano 译文出处:开源中国 身为一个软件工程师,我们不可避免的会遇到这样一些问题:不得不修改别人的代码,或者在别人的代码中添加新的功能。我们并不熟悉这些代码,它也...

Justin Albano
2017/11/28
0
0
提升网站访问速度的 SQL 查询优化技巧

原文出处:Delicious Brains 译文出处:开源中国 你一定知道,一个快速访问的网站能让用户喜欢,可以帮助网站从Google 上提高排名,可以帮助网站增加转化率。如果你看过网站性能优化方面的文...

Delicious Brains
2017/12/09
0
0
AngularJS 中的一些坑

本文由伯乐在线 -蔡蔡 翻译。未经许可,禁止转载! 英文出处:branchandbound。欢迎加入翻译组。 最近几个月频繁的跟AngularJS打交道,对于web应用开发来说Angular真的是一个神奇的框架,但是...

伯乐在线
2013/12/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

180.mariadb 主从复制

参考:https://blog.csdn.net/chengxuzaza/article/details/62042920 睡觉睡觉,明天写 1.效果 当主库中数据有变化的时候,从库就自动同步 2. 环境要求 至少两台 linux服务器 (教程:https...

Lucky_Me
10分钟前
0
0
erlng file id3v1 id3v1.1

%% ---%% Excerpted from "Programming Erlang",%% published by The Pragmatic Bookshelf.%% Copyrights apply to this code. It may not be used to create training material, %% ......

xueyuse0012
11分钟前
0
0
RabbitMq的安装

环境Centos6.5 32位 JDK 1.7.8 Jdk的卸载 rpm -qa|grep jdk yum –y remove 上边的安装包 JDK的安装 Rpm –ivh jdk安装包 配置环境变量 export JAVA_BIN=/usr/java/jdk1.7.0_80/bin export J......

DemonsI
15分钟前
0
0
http和https协议

HTTPS全称为Hypertext Transfer Protocol over Secure Socket Layer,中文含义为“超文本传输协议在安全加密字层”,简单来说就是加密数据传输,通俗的说就是安全连接。 HTTPS安全超文本传输...

寰宇01
21分钟前
0
0
vue内引入语音播报功能

在vue项目中引入语音播报,使用的科大讯飞语音接入, 具体思路为每次接收到语音信息后存入一个数组,然后监听这个数组,开始冲第一个索引播放,并且同时根据vuex getter 来动态删减数量 给a...

originDu
30分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部