v_wuchen_test

title: UI模块化 type: order: -1

糯米餐饮FE团队 UI模块化

git clone ssh://[e-mail]: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.com

fis3依赖

# 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引入

维护人员

• 王俊
• 母志龙
• 陈婷婷
• 穆生箫

参考资料

• 糯米组件公共资源库使用文档
• hexo文档增加本地搜索功能