工程化框架之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
转载于:https://www.cnblogs.com/camille666/p/engineered_frame_feather.html
工程化框架之feather相关推荐
- 基于C++的高性能http框架cinatra及其web框架示例feather介绍及开发演示
说起web开发框架,一定会想到java,php,python等快速开发语言,在从多web开发技术中少有使用C++进行开发,虽然C++性能优越,但是由于开发周期长,语言本身的复杂性,不符合当前快速敏捷开 ...
- [feather]StarlingUi框架——初识feather、界面启动及Ui加载
这个星期六星期天,一是完结上周遗留下来的事情,也就是用feather来做一个应用:二是将这周的3D知识好好的记录和汇总一下. feather初识: 这是一个基于Starling的Ui框架集,Starl ...
- 架构 | 前后端分离与前端工程化
文章目录 前言 前后端分离 核心 对开发行为和职责的直接影响 前端工程化 本地代理与ngix反向代理 node是什么,有什么特点,与前后端分离,前端工程化的关系 node,npm,package.js ...
- 弄懂webpack,只要看这一片就够了(文末有福利)
什么是webpack webpack是什么,官网中是这么说的. 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webp ...
- 深入前端研发效能治理:数据化运营思路及其实践
简介: 数据中台前端研发无不让人厚重真实地感受到"唯一不变的是变化".拿集团的数据资产服务平台来说,业务上经过两年的发展,已由单一的数据管理和使用平台发展成了集团具有一定规模和影响 ...
- ionic 修改组件默认样式_开源Magpie:组件库详解
开源项目专题系列(八)1.开源项目名称:magpie_fly2.github地址: https://github.com/wuba/magpie_fly 3.简介:magpie_fly 是58集体出品 ...
- 埋点用例管理_API管理平台之系统设计篇
导语 根据接口开发过程中的一系列痛点,提供接口文档管理,接口Mock,接口调试.测试等有效解决方案,使前后端接口相关工作更加高效. 背景 互联网的高速发展,API变得至关重要.随着API数量持续增多, ...
- 【设计】1359- Umi3 如何实现插件化架构
插件化架构 插件化架构(Plug-in Architecture),也被称为微内核架构(Microkernel Architecture),是一种面向功能进行拆分的可扩展性架构,在如今的许多前端主流框 ...
- 这是一个谷歌抄腾讯的时代
最近腾讯立知和即刻之间的种种纠葛,又把腾讯和"抄袭"这个近乎其原罪的词联系到了一起. 可是对于这种新闻,估计吃瓜群众已经见怪不怪了.但假如说"不作恶"的谷歌,抄 ...
最新文章
- 如何关闭win10自动更新_如何关闭win10系统自动更新
- 可申请试用!GN4系列GPU云服务器重磅来袭
- CLI or GUI --- 要高效还是要易用? (该文作者的功底真的很深厚啊)
- JVM调优总结(七)-典型配置举例1
- LeetCode 1147. 段式回文(贪心)
- ActionScript 3 step by step (2) - 使用Trace()跟踪输出
- OpenShift 4 - 用Pull Secret访问红帽官方或其他外部Registry的Image
- 解决hash冲突的三个方法
- weblogic8.1在myeclipse中启动正常,在单独的weblogic中无法正常启动的解决方案.
- 账龄分析表excel模板_优秀财务的Excel水平!
- 【LSTM时间序列预测】基于matlab贝叶斯网络优化LSTM时间序列预测【含Matlab源码 1329期】
- 【笔记】菜鸟教程-JavaScript
- java生成word目录_Apache POI自动生成Word文档(带目录)
- Labview连接sql server数据库
- 64位系统可以装python32位吗_Python - pyinstaller在64位系统下打包32位程序
- pageContext
- 什么是云平台,云平台的分类和优势有哪些?
- jQuery实现BBS发贴操作
- Windows下安装python2与python3以及分别对应的virtualenv
- 深入了解:HTML5下载属性
热门文章
- vsftpd通过cmds_allowed进行精确权限控制
- ps抠图基础篇:最常用的四种抠图方法
- html简单淘宝搜索框怎么做,天猫前端系列教材 (八)- 公共页面 - 简单搜索栏...
- 质量管理三个概念:QC、QA和QM,你能分得清吗?
- Android 简单直接--无需jar包zing实现生成、扫描二维码
- [论文笔记]Teaching Machines to Read and Comprehend
- MATLAB图形计算器去广告,多功能科学图形计算器(Mathlab)
- 计组--CISC和RISC特点和区别
- usart hmi(串口屏)常用命令
- R语言销售分析计算某商品的连带或连带率指标函数