开发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这张图进行处理:
<img src="img/logo.png?_inline" />
编译后:
<img src="data:image/gif;base64,R0lGODlhDgGBALMAAGBn6eYxLvvy9PnKyfO...Jzna6853wjKc850nPeoYgAgA7"/>
例如:在html中嵌入样式文件
编译前,对外联样式style.css处理如下:
<link rel="stylesheet" type="text/css" href="style.css?_inlne">
编译后,在html中之间就将外联样式style.css的内容嵌入了内联样式,从而减少请求数:
<style>img {border:5px solid #ccc}</style>
例如:在html中嵌入脚本资源
编译前,针对外联脚本文件app.js做如下处理:
<script type="text/javascript" src="app.js?_inline" /></script>
编译后,将外联脚本文件app.js中的内容嵌入到html中作为内联脚本:
<script type="text/javascript">
console.log('我是内联app.js');
</script>
例如,在Html中嵌入页面(html)文件:
编译前,在html的<div id="div1"></div>标签中插入:
<link rel="import" href="demo.html?_inlne">
编译后,在<div id="div1"></div>中将插入demo.html的内容:
<div id="div1">
我是demo.html的内容
</div>
前面讲了如何在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内嵌