工程化框架之feather
feather是一个工程化框架,他的主要任务是框架规范、性能优化、代码部署、自动化、本地调试、多人协同、静态资源管理。
一、安装
因为feather 为npm包,要安装node.js;
如果需要本地调试功能,需安装java,php。
二、本地调试
1、新建项目
feather init -c utf-8 feathertest
2、启动本地服务器
feather server start
3、加md5码,编译
feather release -mD -d dev_hy
4、优化,压缩,合并,编译
feather release -opmD -d dev_hy
5、监听
feather release –w
6、查看feather server的命令参数
feather server -h
7、查看feather release的命令参数
feather release –h
8、lothar编译模块
lothar release dev -r common -d dev_hy
lothar release debug -r common -d dev_hy
lothar release test -r common -d dev_hy
lothar release pd -r common -d dev_hy
三、组件化
只负责开发阶段的代码重用。
1、前后端插件
可以引入前端插件或类库,比如前端模板引擎,kissy,jquery,angular,react。
2、Submodule
Feather1里面有submodule,不太方便,手动引入自定义插件,容易引起代码冲突,而Feather2里新增加install功能,自动管理包依赖。
四、组件化优劣
1、好处
A、单页面可以拆分多个功能模块,多个人同时开发一个页面,提高开发效率。
B、多页面调用公用模块。
2、坏处
如果文件没有合并,那么一个页面会加载多个css,js
五、Sprite功能
Feather中的sprite功能会对合并的css自动启用。
六、资源引用
1、资源定位
var aimg=new Image;
aimg.src=__uri(‘/static/1.png’); //获取一个文件产出后的路径
2、资源内嵌
<style src=”/static/1.css?__inline”></style>
div.innerHTML=__inline(‘/static/test.html’);
3、依赖声明
<!--
@require /static/1.css
@require /static/1.js
-->
等同于
<link rel=”stylesheet”href=”/static/1.css” type=”text/css”/>
<script src=”/static/1.js”></script>
4、资源加载
如果要求使用前被加载,可以用require方式引入js文件,如果要求异步加载或者延迟加载,可以用require.async方式引入js文件。
七、静态资源管理方案(map表)
1、map表管理静态资源模式
从map表查看某页面,调用哪些模块,某模块调用哪些css,js。
A、内置模块加载
Feather.js是feather内置的module loader,遵循CMD规范,它是前端代码模块化的一个工具包,类似于seajs,requires。
如果要关闭feather中的模块加载工具,可以在feather_conf.js中设置feather.config.set(‘require.use’,false);那么feather.js就不会加载,如果要处理依赖,可以用feather的依赖声明功能,所有的js和css则可以用标签方式引入。
B、内置轻量PHP模板引擎,内置server实现本地调试,url模拟,随机数据。
Feather_view是内置的php模板引擎,结合fis提供的fis-server,可以实现动态模版渲染本地调试功能。这个插件是后端提供的,前端和后端的联系仅仅通过Feather_view。
C、提升前后端并行开发能力,后端只需要关注接口。
为什么页面上会有那坨map表,如果map表没有实际用途,可以不用把它们输出在页面上?
模块化加载的url对应的正确路径依赖于后端的map.json,随着页面加载动态计算需要的map表,所以不能写死在js中,于是map表就输出到页面了。
2、非map表管理静态资源模式
在feather_conf.js设置staticMode:true
八、静态资源优化
1、资源合并
如果是Feather1项目,可以在feather_conf.js设置
http://feather-team.github.io/page/feather.html#config
feather.config.set('pack',{‘static/index/combine.js’:[‘/static/index/index.js’, ‘/static/index/index2.js’]}); //手动合并
如果是lothar项目,可以在conf.js中设置
lothar.config.set('autoPack.type', 'combo'); //自动合并
2、配置本地缓存
3、采用内容摘要算法(文件后加MD5码),文件一旦修改了,会出现不同的MD5码
4、CDN部署,如果没修改,就继续访问CDN上面的文件。
九、代码发布
1、覆盖式发布
时间戳,版本号,没有冗余文件,容易出现页面瘫痪。
2、非覆盖式发布
MD5码,有冗余文件,平滑式更新文件。
十、参考链接
http://home.fe.anhouse.com.cn/,http://feather-team.github.io/,https://github.com/feather-team
工程化框架之feather的更多相关文章
- 使用React Hook后的一些体会
一.前言 距离React Hook发布已经有一段时间了,笔者在之前也一直在等待机会来尝试一下Hook,这个尝试不是像文档中介绍的可以先在已有项目中的小组件和新组件上尝试,而是尝试用Hook的方式构建整 ...
- 基于 Vue.js 之 iView UI 框架非工程化实践记要
像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引用一下,不需要就删除.故观念使然,尽管 Nuget 和 Maven ...
- CSS面试复习(三):预处理器、工程化方案、三大框架中的CSS
一.预处理器 1.介绍 基于CSS的另一种语言.通过工具编译成CSS.添加了很多CSS不具备的特性.能提升CSS文件的组织 2.less嵌套 3 .sass嵌套 4. less变量 5.sass变量 ...
- 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core,如何
基于 Vue.js 之 iView UI 框架非工程化实践记要 像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引 ...
- Vue工程化之引入element-ui框架后图标失效
场景: vue-cli搭建的工程化项目,引入element框架后发现图标无效,变为方块 解决方案: 在index.html引入样式文件CDN链接即可 <!-- 引入样式 --> <l ...
- 程序员必懂:javaweb三大框架知识点总结
原文链接:http://www.cnblogs.com/SXTkaifa/p/5968631.html javaweb三大框架知识点总结 一.Struts2的总结 1.Struts 2的工作流程,从请 ...
- 基于webpack的前端工程化开发解决方案探索(一):动态生成HTML(转)
1.什么是工程化开发 软件工程的工程化开发概念由来已久,但对于前端开发来说,我们没有像VS或者eclipse这样量身打造的IDE,因为在大多数人眼中,前端代码无需编译,因此只要一个浏览器来运行调试就行 ...
- js框架简明
jquery 主要战场还是在dom这块.其它经典怀旧的2个需要了解一下,mootools, prototype.是他们启发了js向工程化,团队化,协作化发展的转变,yui虽然听说停止开发了,但他的代码 ...
- 001医疗项目-项目框架的搭建(四个maven工程)
这个项目资料来源于传智播客.用的是ssm框架, 我们首先建立一个working sets里面存放,我们的maven工程. 如下:
随机推荐
- java基础基础总结----- Date
前言:其实在学习这个的时候,自我感觉学到什么直接查询API就可以了,没有必要再去研究某个方法怎么使用, 重点学习一下经常用到的方法.感觉自己的写的博客,就跟自己的笔记一样,用的是时候,就能快速的查找 ...
- CentOS7安装新版git
#安装Git yum install -y epel-release rpm -ivh https://centos7.iuscommunity.org/ius-release.rpm yum lis ...
- 人生效率手册:如何卓有成效地过好每一天--By张萌姐姐--读书笔记
读书笔记:<人生效率手册>:如何卓有成效地过好每一天--By张萌姐姐... 整本书看完的感受: 这本书主要讲的是生活中我们需要给自己一个目标,然后通过自己的努力去实现这个目标,书中说的很多 ...
- Python正则表达式(regular expression)简介-re模块
Python正则表达式(regular expression)简介-re模块 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 就其本质而言,正则表达式(或RE模块)是一种小型的,高度 ...
- vue element-ui 实现点击查看审核记录
<el-dialog title="审核信息" :visible.sync="seeVisible" width="30%" :bef ...
- 蓝桥杯 问题 1110: 2^k进制数 (排列组合+高精度巧妙处理)
题目链接 题目描述 设r是个2^k 进制数,并满足以下条件: (1)r至少是个2位的2^k 进制数. (2)作为2^k 进制数,除最后一位外,r的每一位严格小于它右边相邻的那一位. (3)将r转换为2 ...
- Zookeeper笔记之命令行操作
$ZOOKEEPER_HOME/bin下的zkCli.sh进入命令行界面,使用help可查看支持的所有命令: 一.节点相关操作 create [-s] [-e] path data acl creat ...
- Linux释放内存小脚本
最近发现渣渣ECS内存总是不够用,内存太小一不小心就用完了,用完就用完吧,内存用来做cache是可以快一些,但是内存用完了老是一顿一顿的卡,实在有点受不了,于是就写了释放内存的小脚本,觉得卡了就释放下 ...
- 内置函数bytes()
a=b'\x00\x9c@c' print a[3]#99,c的ascii码是99 print a[1]#156 并且byte是无法修改的 c[1]=155 Traceback (most recen ...
- 搭建RabbitMQ集群(Docker)
前一篇搭建RabbitMQ集群(通用)只是把笔记直接移动过来了,因为我的机器硬盘已经满了,实在是开不了那么虚拟机. 还好,我的Linux中安装了Docker,这篇文章就简单介绍一下Docker中搭建R ...