工程化框架之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工程. 如下:
随机推荐
- SQL Server 事务与隔离级别实例讲解
上班途中,你在一处ATM机前停了下来.正当你在敲入密码的时候,你的一位家人也正在镇上的另一处TAM机上输入密码.你打算从某个还有500元余额的账户上转出400元,而你的家人想从同一账户取走300元.倘 ...
- springMvc + Maven 项目提示 hessian 依赖包 无法下载;
首先 从 https://github.com/alibaba/dubbo/archive/master.zip 下载最新的 dubbo 源码包到本地某个目录, 解压出来: cmd 进入该目录: 执行 ...
- Hash::make与Hash::check
调用方法之前要先去引用: use Illuminate\Support\Facades\Hash; 可以调用 Hash 门面上的 make 方法对存储密码进行哈希: $pwd = Hash::make ...
- 工作目录与os.getcwd()
假设某程序在/root/a/aa.py,在shell,当前pwd为/root,输入./a/aa.py运行py程序,则爱程序的工作目录是/root.而不是程序所在文件夹,os.getcwd()就是查看工 ...
- 【ARTS】01_04_左耳听风-20181203~1209
ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...
- python3之memcached
1.memcached介绍 Memcached是一个自由开源的,高性能,分布式内存对象缓存系统. Memcached是以LiveJournal旗下Danga Interactive公司的Brad Fi ...
- springMVC非注解常用的"处理器映射器"、"适配器"、"处理器"
非注解处理器映射器1. org.springframework.web.servlet.handler.BeanNameUrlHandlerMapping url 到bean name的映射2. or ...
- 【linux kernel】 中断处理-中断下半部【转】
转自:http://www.cnblogs.com/embedded-tzp/p/4453987.html 欢迎转载,转载时需保留作者信息,谢谢. 邮箱:tangzhongp@163.com 博客园地 ...
- phantomhs获取网页的高度
function heheda() { window.setTimeout(function () { console.log("---------------------Capture O ...
- Android网络框架之Retrofit + RxJava + OkHttp 变化的时代
1.什么是Retrofit框架? 它是Square公司开发的现在非常流行的网络框架,所以我们在导入它的包的时候都可以看到这个公司的名字,目前的版本是2. 特点: 性能好,处理快,使用简单,Retrof ...