Fis3的前端工程化之路[三大特性篇之内容嵌入]

Fis3版本:v3.4.22

Fis3的三大特性

---

资源定位：获取任何开发中所使用资源的线上路径

内容嵌入：把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中

依赖声明：在一个文本文件内标记对其他资源的依赖关系

内容嵌入

---

嵌入资源即内容嵌入，可以为工程师提供诸如图片base64嵌入到css、js里，前端模板编译到js文件中，将js、css、html拆分成几个文件最后合并到一起的能力。有了这项能力，可以有效的减少http请求数，提升工程的可维护性。 fis不建议用户使用内容嵌入能力作为组件化拆分的手段，因为声明依赖能力会更适合组件化开发。

JS中的内容嵌入

---

js嵌入

 __inline('demo.js');

编译后

console.log('demo-test');

将原来的__inline里面的js进行了替换

css嵌入

<link rel="stylesheet" type="text/css" href="demo.css?__inline">

编译后:

<style>img { border: 5px solid #ccc; }</style>

图片base64嵌入

<img title="百度logo" src="images/logo.gif?__inline"/>

编译后:

 <img title="百度logo" src="data:image/gif;base64,R0lGODlhDgGBALMAAGBn6eYxLvvy9PnKyfO...Jzna6853wjKc850nPeoYgAgA7"/>

html中嵌入html

 <!--inline[demo.html]-->

编译后:

 <h1>demo.html content</h1>

JS中的资源嵌入

---

js中嵌入js

__inline('demo.js');

编译后:

console.log('demo.js content');

js中嵌入base64

var img = __inline('images/logo.gif');

编译后:

var img = 'data:image/gif;base64,R0lGODlhDgGBALMAAGBn6eYxLvvy9PnKyfO...Jzna6853wjKc850nPeoYgAgA7';

js中嵌入css

  var css = __inline('a.css');

编译后:

var css = "body \n{    color: red;\n}";

CSS中资源嵌入

---

css中嵌入css

  @import url('demo.css?__inline');

编译后：

img { border: 5px solid #ccc; };

css中嵌入base64

 .style {
      background: url(images/logo.gif?__inline);
  }

编译后:

 .style {
      background: url(data:image/gif;base64,R0lGODlhDgGBALMAAGBn6eYxLvvy9PnKyfO...Jzna6853wjKc850nPeoYgAgA7);
  }