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的更多相关文章

  1. 使用React Hook后的一些体会

    一.前言 距离React Hook发布已经有一段时间了,笔者在之前也一直在等待机会来尝试一下Hook,这个尝试不是像文档中介绍的可以先在已有项目中的小组件和新组件上尝试,而是尝试用Hook的方式构建整 ...

  2. 基于 Vue.js 之 iView UI 框架非工程化实践记要

    像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引用一下,不需要就删除.故观念使然,尽管 Nuget 和 Maven ...

  3. CSS面试复习(三):预处理器、工程化方案、三大框架中的CSS

    一.预处理器 1.介绍 基于CSS的另一种语言.通过工具编译成CSS.添加了很多CSS不具备的特性.能提升CSS文件的组织 2.less嵌套 3 .sass嵌套 4. less变量 5.sass变量 ...

  4. 基于 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 时代,包括其插件在需要时就引 ...

  5. Vue工程化之引入element-ui框架后图标失效

    场景: vue-cli搭建的工程化项目,引入element框架后发现图标无效,变为方块 解决方案: 在index.html引入样式文件CDN链接即可 <!-- 引入样式 --> <l ...

  6. 程序员必懂:javaweb三大框架知识点总结

    原文链接:http://www.cnblogs.com/SXTkaifa/p/5968631.html javaweb三大框架知识点总结 一.Struts2的总结 1.Struts 2的工作流程,从请 ...

  7. 基于webpack的前端工程化开发解决方案探索(一):动态生成HTML(转)

    1.什么是工程化开发 软件工程的工程化开发概念由来已久,但对于前端开发来说,我们没有像VS或者eclipse这样量身打造的IDE,因为在大多数人眼中,前端代码无需编译,因此只要一个浏览器来运行调试就行 ...

  8. js框架简明

    jquery 主要战场还是在dom这块.其它经典怀旧的2个需要了解一下,mootools, prototype.是他们启发了js向工程化,团队化,协作化发展的转变,yui虽然听说停止开发了,但他的代码 ...

  9. 001医疗项目-项目框架的搭建(四个maven工程)

    这个项目资料来源于传智播客.用的是ssm框架, 我们首先建立一个working sets里面存放,我们的maven工程. 如下:

随机推荐

  1. OpenStack 认证服务 KeyStone 服务注册(五)

    创建服务实体和API端点 创建服务 openstack service create --name keystone --description "OpenStack Identity&qu ...

  2. android客户端app和服务端交互token的作用

    Android客户端和服务端如何使用Token和Session niceheart关注1人评论34644人阅读2014-09-16 16:38:44   对于初学者来说,对Token和Session的 ...

  3. Java模拟http请求远程调用接口工具类

    package ln; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamRea ...

  4. Eclipse的一些常用的快捷键

    写代码的时候常用的: Ctrl + 鼠标左键: 进入函数定义,变量声明: Alt + ←: 回到上次编辑的地方, 同理 Alt + → 可以移回来 Ctrl + O: 查找当前类的所有函数,变量 Ct ...

  5. python获取指定目录下所有文件名os.walk和os.listdir

    python获取指定目录下所有文件名os.walk和os.listdir 觉得有用的话,欢迎一起讨论相互学习~Follow Me os.walk 返回指定路径下所有文件和子文件夹中所有文件列表 其中文 ...

  6. Signal ()函数详细介绍

    1. 功能 设置某一信号的对应动作 2. 声明 #include <signal.h> typedef void (*sighandler_t)(int); sighandler_t si ...

  7. Dubbo学习笔记11:使用Dubbo中需要注意的一些事情

    指定方法异步调用 前面我们讲解了通过设置ReferenceConfig的setAsync()方法来让整个接口里的所有方法变为异步调用,那么如何指定某些方法为异步调用呢?下面讲解下如何正确地设置默写方法 ...

  8. github 远程仓库

    因为本地Git仓库和GitHub仓库之间的传输是通过SSH加密的,所以设置一下 第1步:创建SSH Key.在用户主目录下,看看有没有.ssh目录,如果有,再看看这个目录下有没有id_rsa和id_r ...

  9. 有关楼层滚动且对应楼层Nav导航高亮显示

    $(document).ready(function(e) { //定义数组,储存楼层距离顶部的高度(floorsTop) var floorsTop=[]; function floorsTopF( ...

  10. [python]python错误集锦

    ValueError: invalid literal : ''不能将非数字字符串转换为整型 object has no attribute 对象调用一个没有的方法(内建或自定义) TypeError ...