最新消息:前端博客、web前端博客、Angularjs、javascript、jQuery、HTML5、CSS3

何为三种语言能力—FIS

杂谈/运维 AZ 1802浏览 0评论

起初看到三种语言能力一直没搞清楚,为什么是三种语言能力,明明没有看到对编程语言的要求;原来早期FIS团队在设计这个前端集成系统的时候,也会有迷茫区,不知道最终要打到什么目的;就在纠结期与迷茫期,最后找到了前端开发所需要的编译能力只有三种:资源定位、内容嵌入、依赖声明

什么是资源定位?

项目发布后,一个用户访问页面各种资源的地址;如何将开发中资源路径定位到线上环境中资源路径?

1

一个页面有HTML文件,CSS文件,JS文件,分别了解下各个文件是做到资源如何定位的:

HTML文件代码:

XML/HTML代码
  1. <!–源码:  
  2. <img title=“百度logo” src=“images/logo.gif”/>  
  3. 编译后–>  
  4. <img title=“百度logo” src=“/static/pic/logo_74e5229.gif”/>  
  5.   
  6. <!–源码:  
  7. <link rel=“stylesheet” type=“text/css” href=“demo.css”>  
  8. 编译后–>  
  9. <link rel=“stylesheet” type=“text/css” href=“/static/css/demo_7defa41.css”>  
  10.   
  11. <!–源码:  
  12. <script type=“text/javascript” src=“demo.js”></script>  
  13. 编译后–>  
  14. <script type=“text/javascript” src=“/static/js/demo_33c5143.js”></script>  

 

它是如何做到的,上篇文章中解释了,运行fis release 会查找当前目录下的fis-conf.js这个文件,根据不同的配置,就可以发布定位到线上的地址了。

 

JavaScript代码
  1. fis.config.merge({  
  2.     roadmap : {  
  3.         path : [  
  4.             {  
  5.                 //所有的js文件  
  6.                 reg : ‘**.js’,  
  7.                 //发布到/static/js/xxx目录下  
  8.                 release : ‘/static/js$&’  
  9.             },  
  10.             {  
  11.                 //所有的css文件  
  12.                 reg : ‘**.css’,  
  13.                 //发布到/static/css/xxx目录下  
  14.                 release : ‘/static/css$&’  
  15.             },  
  16.             {  
  17.                 //所有image目录下的.png,.gif文件  
  18.                 reg : /^/images/(.*.(?:png|gif))/i,  
  19.                 //发布到/static/pic/xxx目录下  
  20.                 release : ‘/static/pic/$1′  
  21.             }  
  22.         ]  
  23.     }  
  24. });  

 

同理CSS文件,JS文件也会引用到相应的静态资源:

CSS代码
  1. /*源码: 
  2. @import url(‘demo.css’); 
  3. 编译后*/  
  4. @import url(‘/demo_7defa41.css’);  
  5.   
  6. .style {  
  7.     /*源码: 
  8.     background: url(‘images/body-bg.png’); 
  9.     编译后*/  
  10.     backgroundurl(‘/images/body-bg_1b8c3e0.png’);  
  11.   
  12.     /*源码: 
  13.     _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/body-bg.png’); 
  14.     编译后*/  
  15.     _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘/images/body-bg_1b8c3e0.png’);  
  16. }  

 

JavaScript代码
  1. /*源码: 
  2. var img = __uri(‘images/logo.gif’); 
  3. 编译后*/  
  4. var img = ‘/images/logo_74e5229.gif’;  
  5.   
  6. /*源码: 
  7. var css = __uri(‘demo.css’); 
  8. 编译后*/  
  9. var css = ‘/demo_7defa41.css’;  
  10.   
  11. /*源码: 
  12. var js = __uri(‘demo.js’); 
  13. 编译后*/  
  14. var js = ‘/demo_33c5143.js’;  

通过对应的配置信息,就可以得到编译后的地址了;

 

什么是嵌入资源?

编译中文本文件的内容或者二进制文件(如图片)的base64编码嵌入到另一个文件中;

拿官网的firstblood做解释:编译前,index.html中通过src引进了js,css,image

XML/HTML代码
  1. <style>  
  2.             @import url(‘demo.css?__inline’);  
  3.             .style {  
  4.                 background: url(‘images/logo.gif?__inline’);  
  5.                 /*filter不支持base64,所以没做处理*/  
  6.                 _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘images/body-bg.png?__inline’);  
  7.             }  
  8. </style>  
  9. <img title=“百度logo” src=“images/logo.gif?__inline”/>  
  10. <script type=“text/javascript” src=“demo.js?__inline”></script>  

编译后在查看index.html

XML/HTML代码
  1. <style>  
  2.             img { border: 5px solid #ccc; }  
  3.             .style {  
  4.                 background: url(‘data:image/gif;base64,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′);  
  5.                 /*filter不支持base64,所以没做处理*/  
  6.                 _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘/images/body-bg.png?__inline’);  
  7.             }  
  8. </style>  
  9. <img title=“百度logo” src=“data:image/gif;base64,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″/>  
  10. <script type=“text/javascript”>console.log(‘inline file’);</script>  

通俗的讲就是原先用外链引入的内容,经过编译直接在页面上输出出来;

 

什么是声明依赖?

可以回想一下Node.js的插件机制,每个插件安装好,插件目录下会有一个node_modules文件夹,这个文件夹里面的内容就是这个插件所依赖的包。所以这变的声明依赖关系和Node.js的模块依赖有点类似。

这种依赖原型在源文件用@require xx,最后这种关系在编译后形成,编译后会有一个map.json,查看下文件源码:

JavaScript代码
  1. {  
  2.     “res” : {  
  3.         “demo.css” : {  
  4.             “uri” : “/static/css/demo_7defa41.css”,  
  5.             “type” : “css”  
  6.         },  
  7.         “demo.js” : {  
  8.             “uri” : “/static/js/demo_33c5143.js”,  
  9.             “type” : “js”,  
  10.             “deps” : [ “demo.css” ]  
  11.         },  
  12.         “index.html” : {  
  13.             “uri” : “/index.html”,  
  14.             “type” : “html”,  
  15.             “deps” : [ “demo.js”“demo.css” ]  
  16.         }  
  17.     },  
  18.     “pkg” : {}  
  19. }  

deps这个属性就显示了各个文件对应依赖的外部文件;当然前提是你在index.html中加了

XML/HTML代码
  1. <!–  
  2.     @require demo.js  
  3.     @require “demo.css”  
  4. >  

 

 

理清了这“三种语言能力“,对FIS的理解又深了一层。。。

何为三种语言能力—FIS,首发于rainweb前端开发

转载请注明:TUTERM.COM » 何为三种语言能力—FIS

如果您觉得本文的内容对您的学习有所帮助,您可以支付宝(左)或微信(右):
alipay weichat

您必须 登录 才能发表评论!