v_wuchen_test
v0.0.2
Published
自己测试用的
Downloads
3
Readme
title: UI模块化 type: order: -1
糯米餐饮FE团队 UI模块化
git clone ssh://[email protected]:8022/t10/widgets.git
项目主页:http://gitlab.baidu.com/t10/widgets
项目目标
- 页面模块化,减少重复开发工作量
- 减少模块体积, 使用时引入, 未使用的不引入, 避免体积过大
- wap端和本地开发时使用模拟BNJS
- 生成示例网站
- 组件使用说明(markdown文件)
- 直接嵌入组件demo
- 示例页面
使用技术
- react
- fis3
- hoxy(浏览文档及demo效果)
- mocha/chai/enzyme 单元测试框架
安装使用
安装
# 安装t10-ui
npm install -d t10-ui --registry=http://registry.npm.baidu.comfis3依赖
# fis3
npm install -g fis3
# fis3依赖
npm install -g fis3-hook-module
npm install -g fis3-hook-commonjs
npm install -g fis3-hook-node_modules
npm install -g fis3-postpackager-loader
npm install -g fis3-deploy-replace
npm install -g fis-parser-less
npm install -g fis3-parser-babel2配置fis-conf.js
// 直接引入t10-ui的fis-conf,配置使用node_modules
var t10 = require('t10-ui');
var media = fis.project.currentMedia();
fis.set('project.ignore', ['/output/**', 'node_modules/**']);
fis.set('project.files', ['demo/**', '/map.json', 'widgets/**', 'o/**']);
fis.match('config.json', {release: 'config.json', useHash: false});
// wap需要输出bnjs
if (media == 'web')
fis.media(media)
.match('bnjs/*', {release: '$0'});
if (media == 'debug')
fis.media(media)
.match('vconsole/*', {release: '$0'});
if (media == 'prod')
t10.min(fis.media(media))
// t10.useBNJSCompPackage(); // 使用公共资源, 公共资源会打包到__BNJSComPackage目录
// t10.noBNJSCompPackage(); // 不使用公共资源, 会取消config.json中的静态资源配置配置.gitignore,避免忽略node_modules中资源
!node_modules使用
- 假如页面中使用到BNJS.ui函数,只需要增加注释 @require t10-ui/bnjs/ui,其他bnjs内容无需引入
- 例如使用筛选菜单模块,则在代码中增加 filter = require('t10-ui/widgets/search-filter')
- 模拟的BNJS增加了BNJS.isWap,值为true,同时支持wap和na的内容可以通过BNJS.isWap来判断当前环境
目录结构
├── README.md // 说明文档,打包到index.html
├── node_modules // 外部公共库,jquery,zepto,vue,react等
├── common // 组件制作时使用的共用css,js和tpl
├── bnjs // 组件开发时使用的模拟BNJS,wap开发时使用require引入,打包成na时忽略
├── demo // 示例页面文件夹
├── widgets // 频道页模块列表
├── o // 下单页模块列表
│
├── test // 单元测试代码
│ ├── setup.js // 单元测试配置
│ └── xxx.spec.js // xxx 项目的单元测试代码
|
├── hexo // 生成文档的文件夹
│ ├── _config.yml // hexo文档配置
│ ├── public // fis3打包出来的静态文件
│ └── source // fis3打包出来的md文档
│
├── fis-conf.js // 打包示例页面
├── package.json
└── output // 输出文件夹组件规范
- react组件文件夹需要增加readme.md文件说明,其中可以使用iframe引入demo示例
- readme.md格式按照hexo文档格式,顶部格式部分需增加title、type、order(排序使用),内容中需包含:适用范围(NA|Wap)、参数、引入demo、后端接口格式,修改历史、维护人员等
- 公共库通过node_modules引入
- 使用的BNJS部分请在注释中增加@require,例如引用ui模块: @require '../../bnjs/ui.js';
- 增加引用时使用相对路径避免发布成npm包后不兼容的情况
- 需要引入资源时,推荐采用@require引入,尽量不采用__inline,避免多处同时引用造成资源浪费
- order分配: 示例页面: <0, 频道页相关模块:1-100, 下单页相关模块: 101-200, 其他:1000+
本地开发
- 安装node模块:fis3,fis3依赖模块,hexo文档工具
- 组件的说明文档为hexo的md文档格式,请至少指定标题,每次更新可修改更新时间
# fis3
npm install -g fis3
# fis3依赖
npm install -g fis3-hook-module
npm install -g fis3-hook-commonjs
npm install -g fis3-hook-node_modules
npm install -g fis3-postpackager-loader
npm install -g fis3-deploy-replace
npm install -g fis3-deplo-zip
npm install -g fis-parser-less
npm install -g fis-parser-babel-5.x- 打包示例网站
fis3 release hexo- 启动文档,本地查看效果(在hexo目录中执行hexo server)
cd hexo
# 第一次需要安装hexo工具
npm install -g hexo-cli
npm install
# 启动文档服务器
hexo server打包命令集合
fis3 release hexo # 打包文档
fis3 release -d output # 打包项目,包括bnjs
fis3 release min -d output # 打包wap端并压缩
fis3 release na -d output # 打包na端(不包含bnjs)
fis3 release namin -d output # 打包na端并压缩
fis3 release nazip -d output # 打包na端并生成zip文件(代码不压缩)
fis3 release naminzip -d output # 打包na端压缩后生成zip文件todo
模块相关
- [ ] 模拟BNJS(ui,page,bnjsReady)
- [ ] 轻登录模块(wap)
- [ ] 整数键盘
- [ ] 数字键盘
- [ ] 算价模块
- [ ] 活动区块扩展: 一行2个, 一行4个, 两行4个, 组合(7块,8块)
- [x] 输入价格(保留两个小数点并在前面增加人民币提示)
- [x] 引入vConsole,便于调试开发,min版本时不引入文件
- [ ] 添加vue模块
- [ ] 更多模块
hexo示例网站相关
- [x] 网站内搜索
- [x] 网站内直接查看示例代码
- [x] 美化highlight查看代码效果
- [x] 增加公共资源及公共资源打包
示例页面制作
- [x] 到店付频道页(母志龙)
- [x] 企业付频道页(陈婷婷)
- [x] 储值卡频道页(穆生箫)
其他
- [ ] 增加测试case,避免修改后之前程序出错
- [x] 优化打包速度,只打包引用的文件
- [x] 打包到na端和wap端,并可正常查看
- [x] 生成示例组件widgets,上传到developer.nuomi.com,手机扫码查看示例效果
- [x] 直接打包成zip文件,避免window下手动压缩文件
- [x] 合并文件夹markdown文件的修改历史到ChangeLog
- [x] 打包成node模块,上传到npm.baidu.com
- [x] git更新后示例网站自动更新
react升级到15.3的改动
- getDomNode取消, refs引用的对象直接是dom对象(怎么获取根节点呢? 直接在根节点上增加个ref)
- 使用ReactDom渲染
var ReactDom = require('react-dom');
var React = require('react');
var Selector = require('./../Selector.jsx');
ReactDom.render(<Selector
filterAPI="./filter.json"
/>, document.querySelector('#selector'));- 父组件改变子组件状态:
- 可在子组件中增加componentWillReceiveProps(nextProps), 当父组件传递过来的props改变时子组件将会被调用
- 引用子组件时ref可以是个函数,子组件mount后被调用
适用平台
Na和wap
修改历史
- 2016.11.11
- 发布版本v0.1.6
- 2016.11.02
- 增加merchant测试代码示例
- fis打包jsx插件改为fis-parser-babel-5.x
- 2016.10.28
- 发布版本v0.1.5
- 取消组件zepto依赖
- 2016.10.23
- 文档增加本地搜索功能
- 2016.10.22
- 文档中增加代码
- 2016.10.18
- 使用糯米静态资源__BNJSComPackage;
- react版本改为0.13.3
- 2016.10.11
- 合并修改历史到CHANGELOG
- 修改highlight代码效果
- 2016.10.10
- 发布到baidu.npm,使用node_modules引入