何为三种语言能力
发布网友
发布时间：2022-04-22 04:48
共1个回答
热心网友
时间：2023-06-21 20:19
三种语言能力分别为：资源定位、内容嵌入、依赖声明。
什么是资源定位？
项目发布后，一个用户访问页面各种资源的地址；如何将开发中资源路径定位到线上环境中资源路径？
一个页面有HTML文件，CSS文件，JS文件，分别了解下各个文件是做到资源如何定位的：
HTML文件代码：
<!–源码：
<img title=“百度logo” src="/imgr?src=http%3A%2F%2Fwww.rainweb.cn%2Farticle%2F%26%238220%3Bimages%2Flogo.gif%26%238221%3B%2F%26gt%3B%C2%A0%C2%A0%0A%E7%BC%96%E8%AF%91%E5%90%8E%26%238211%3B%26gt%3B%C2%A0%C2%A0%0A%26lt%3Bimg%C2%A0title%3D%26%238220%3B%E7%99%BE%E5%BA%A6logo%26%238221%3B%C2%A0src%3D%26%238220%3B%2Fstatic%2Fpic%2Flogo_74e5229.gif%26%238221%3B%2F%26gt%3B%C2%A0%C2%A0%0A%C2%A0%C2%A0%0A%26lt%3B%21%26%238211%3B%E6%BA%90%E7%A0%81%EF%BC%9A%C2%A0%C2%A0%0A%26lt%3Blink%C2%A0rel%3D%26%238220%3Bstylesheet%26%238221%3B%C2%A0type%3D%26%238220%3Btext%2Fcss%26%238221%3B%C2%A0href%3D%26%238220%3Bdemo.css%26%238221%3B%26gt%3B%C2%A0%C2%A0%0A%E7%BC%96%E8%AF%91%E5%90%8E%26%238211%3B%26gt%3B%C2%A0%C2%A0%0A%26lt%3Blink%C2%A0rel%3D%26%238220%3Bstylesheet%26%238221%3B%C2%A0type%3D%26%238220%3Btext%2Fcss%26%238221%3B%C2%A0href%3D%26%238220%3B%2Fstatic%2Fcss%2Fdemo_7defa41.css%26%238221%3B%26gt%3B%C2%A0%C2%A0%0A%C2%A0%C2%A0%0A%26lt%3B%21%26%238211%3B%E6%BA%90%E7%A0%81%EF%BC%9A%C2%A0%C2%A0%0A%26lt%3Bscript%C2%A0type%3D%26%238220%3Btext%2Fjavascript%26%238221%3B%C2%A0src%3D%26%238220%3Bdemo.js%26%238221%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%C2%A0%C2%A0%0A%E7%BC%96%E8%AF%91%E5%90%8E%26%238211%3B%26gt%3B%C2%A0%C2%A0%0A%26lt%3Bscript%C2%A0type%3D%26%238220%3Btext%2Fjavascript%26%238221%3B%C2%A0src%3D%26%238220%3B%2Fstatic%2Fjs%2Fdemo_33c5143.js%26%238221%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%C2%A0%C2%A0%0A%3C%2Fpre">
它是如何做到的，上篇文章中解释了，运行fis release 会查找当前目录下的fis-conf.js这个文件，根据不同的配置，就可以发布定位到线上的地址了。
fis.config.merge({
roadmap : {
path : [
{
//所有的js文件
reg : ‘**.js’,
//发布到/static/js/xxx目录下
release : ‘/static/js$&’
},
{
//所有的css文件
reg : ‘**.css’,
//发布到/static/css/xxx目录下
release : ‘/static/css$&’
},
{
//所有image目录下的.png，.gif文件
reg : /^/images/(.*.(?:png|gif))/i,
//发布到/static/pic/xxx目录下
release : ‘/static/pic/$1′
}
]
}
});
同理CSS文件，JS文件也会引用到相应的静态资源：
/*源码：
@import url(‘demo.css’);
编译后*/
@import url(‘/demo_7defa41.css’);
.style {
/*源码：
background: url(‘images/body-bg.png’);
编译后*/
background: url(‘/images/body-bg_1b8c3e0.png’);
/*源码：
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/imgr?src=http%3A%2F%2Fwww.rainweb.cn%2Farticle%2F%26%238217%3Bimages%2Fbody-bg.png%26%238217%3B%29%3B%C2%A0%0A%C2%A0%C2%A0%C2%A0%C2%A0%E7%BC%96%E8%AF%91%E5%90%8E%2A%2F%C2%A0%C2%A0%0A%C2%A0%C2%A0%C2%A0%C2%A0_filter%3Aprogid%3ADXImageTransform.Microsoft.AlphaImageLoader%28src%3D%26%238216%3B%2Fimages%2Fbody-bg_1b8c3e0.png%26%238217%3B%29%3B%C2%A0%C2%A0%0A%7D%C2%A0%C2%A0%0A%3C%2Fpre">
/*源码:
var img = __uri(‘images/logo.gif’);
编译后*/
var img = ‘/images/logo_74e5229.gif’;
/*源码:
var css = __uri(‘demo.css’);
编译后*/
var css = ‘/demo_7defa41.css’;
/*源码:
var js = __uri(‘demo.js’);
编译后*/
var js = ‘/demo_33c5143.js’;
通过对应的配置信息，就可以得到编译后的地址了；
什么是嵌入资源？
编译中文本文件的内容或者二进制文件（如图片）的base编码嵌入到另一个文件中；
拿官网的firstblood做解释：编译前，index.html中通过src引进了js，css，image
什么是声明依赖？
可以回想一下Node.js的插件机制，每个插件安装好，插件目录下会有一个node_moles文件夹，这个文件夹里面的内容就是这个插件所依赖的包。所以这变的声明依赖关系和Node.js的模块依赖有点类似。
这种依赖原型在源文件用@require xx，最后这种关系在编译后形成，编译后会有一个map.json，查看下文件源码：
{
“res” : {
“demo.css” : {
“uri” : “/static/css/demo_7defa41.css”,
“type” : “css”
},
“demo.js” : {
“uri” : “/static/js/demo_33c5143.js”,
“type” : “js”,
“deps” : [ “demo.css” ]
},
“index.html” : {
“uri” : “/index.html”,
“type” : “html”,
“deps” : [ “demo.js”, “demo.css” ]
}
},
“pkg” : {}
}
deps这个属性就显示了各个文件对应依赖的外部文件；当然前提是你在index.html中加了
<!–
@require demo.js
@require “demo.css”
–>
理清了这“三种语言能力“，对FIS的理解又深了一层。。。
何为三种语言能力—FIS，首发于rainweb前端开发。
