工程化框架之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