【构建】fis3 - 语法教程(1)之资源嵌入
开发fis的这个团队，经过艰辛的探索之后发现，前端开发所需的编译能力只有3种：
1、内容嵌入：把一个文件的内容（文本）或者base64编码图片嵌入到另一个文件中；
2、资源定位：获取任何开发中所使用资源的线上路径；
3、依赖声明：在一个文本文件内标记对其他资源的依赖关系；
于是，为了解决这3项功能，fis团队开发出了内置的语法对其进行操作。
内置语法主要针对的是html\css\js等三种语言提供的编译语法。
嵌入资源——内容嵌入
例如，
1、将base64图片嵌入到css\js里；
2、前端模板编译到js文件中；
3、将js\css\html拆分成几个文件最后合并到一起的能力...等等。
有了这项能力，在减少http请求数方面将大大提升。
需要注意的是，在组件化开发方面，fis是不建议使用“资源嵌入”的方式作为组件化拆分的手段，后面讲到的“声明依赖”能力会更适合组件化开发。
（1）在html中嵌入资源
前提：在html中嵌入其他文件内容或者base64编码值，可以在资源定位的基础上，给资源加上“?_inline”参数来标记资源嵌入需求。
关键词: ?_inline
例如：在html中嵌入base64图片
编译前，针对logo这张图进行处理：
编译后：
例如：在html中嵌入样式文件
编译前，对外联样式style.css处理如下：
编译后，在html中之间就将外联样式style.css的内容嵌入了内联样式,从而减少请求数：
例如：在html中嵌入脚本资源
编译前，针对外联脚本文件app.js做如下处理：
编译后，将外联脚本文件app.js中的内容嵌入到html中作为内联脚本:
例如，在Html中嵌入页面(html)文件：
编译前，在html的标签中插入：
编译后，在中将插入demo.html的内容：
我是demo.html的内容
前面讲了如何在html中嵌入资源。别急，fis3还有一个强大的功能——在js中嵌入资源。
（2）在js中嵌入资源
前提：__inline()函数，注意是2条短下划线。该函数可以陷入图片的base64编码、嵌入其他js 或者前端模板文件的编译内容。
当然，该函数对html中的< script>标签里的内容同样是有用的。
例如：在js中嵌入js文件：
编译前，在app.js文件中写入如下：
__inline('demo.js');
编译后，在app.js文件中将有demo.js的内容：
console.log('我是demo.js中的内容');
//假设demo.js中内容为console.log('我是demo.js中的内容')
例如，在js中嵌入base64图片
编译前，js文件中写入如下：
var img=__inline('img/logo.png');
编译后，原先那串代码被替换成base64位的图片：
var img='data:image/gif;base64,R0lGODlhDgGBALMAAGBn6eYxLvvy9PnKyfO...Jzna6853wjKc850nPeoYgAgA7';
当然，你还可在js中嵌入其他文本文件，例如css文件：
编译前，js文件有代码如下：
var css=__inline('a.css');
编译后，js文件中那串代码变成了：
var css="body \n{color:red;\n}";
//假设a.css的内容如下：
body{
color:red;
}
除了之外，fis3还提供在css文件只能怪嵌入资源。
（3）在CSS中嵌入资源
与html中嵌入资源类似，通过编译标记?_inline可以嵌入文件内容。
但是，要注意的一点，除了src=”xxx”之外。因为在ie中，src被用在ie支持的滤镜filter内，该属性目前不支持base64字符串。
例如，在a.css文件中嵌入b.css文件的内容：
编译前，在a.css文件中写入：
@import url('b.css?_inline');
编译后，在a.css文件中将嵌入如下内容那个：
a {border:1px solid #ccc};
//这里我们假设b.css的内容为：
a{
border:1px solid #ccc;
}
再例如，在css中嵌入base64图片
编译前，在a.css文件中写入：
.div1 {
background:url(img/logo.png?__inline);
}
编译后，a.css中这串css代码将变为：
.div1 {
background: url(data:image/gif;base64,R0lGODlhDgGBALMAAGBn6eYxLvvy9PnKyfO...Jzna6853wjKc850nPeoYgAgA7);
}
小结:
关键词：?_inline编译标记——处理html\css内嵌
__inline()内置函数；——处理js内嵌