component design specification

JavaScript 评论

设计基础

  • 字体
  • 排版
  • 色彩
  • 交互原则

组件原则

  • 高效
  • 轻量
  • 低耦
  • 独立
  • 易用

组件定义

基础服务组件

  • 排版 （栅格组件）
  • 动画组件

基础通用组件

  • Button
  • Icon
  • Loading
  • 浮层

导航组件

  • Menu
  • Breadcrumb
  • Pagination
  • Steps

交互组件

  • Alert
  • Message
  • Modal

表单组件

  • Form
  • Input
  • Radio
  • CheckBox
  • Select
  • Switch
  • DatePicker

数据呈现型组件

  • Card
  • Badge
  • Table
  • Tag
  • TimeLine
  • Tooltip

开发方式

渐进式开发

剥离 CSS 与 组件的耦合性，将CSS 独立为CSS库。

组件开发规范

1. 组件分离

  1. 每个组件单独一个文件夹

  2. 在父级建立统一入口 index.ts，由应用方通过 AppModule 导入：如 

     import { NgModule } from '@angular/core';
 import { ButtonsModule } from './buttons';

 @NgModule({
     exports: [ ButtonsModule ],

 })
     export class pingUIModules {
 }

2. 独立调用

  1. 在文件夹外部，应单独暴露出某个组件，以便用户独立调用。如在Component 目录下的 Buttons 同级目录下建立 buttons.ts:

     export { ButtonComponent } from './buttons/button.component';
 export { ButtonsModule } from './buttons/buttons.module';

3. 公共部分

  1. 将组件都可以用到的公共部分抽象化

4. 组件构成

  1. 每个组件应当由下列文件构成:

      [name].component.html   模板文件
  [name].module.ts  模块文件
  [name].component.ts  组件类
  [name].component.spec.ts  //若需要Karma测试
  readme.md  使用文档
  [name].d.ts 文件，若需要

编码规范

  • 文件夹、文件名全部小写
  • 内部文件以 [name].component.ts 这样的风格命名
  • 文件内部的类名以 首字母大写的驼峰式 命名
  • 文件的模块化导入导出使用 Es6 规范，不要使用 Webpack、CommonJs 等库风格的 Require()
  • 全部使用4格缩进

其他规范详情参考 https://github.com/fex-team/styleguide/blob/master/javascript.md

团队尽量保持一个简单、易读、语义化、清晰的风格