项目存在问题

  • 代码量大，耦合严重
  • 业务开发分工不明确，开发人员要关心非业务的代码
  • 改代码时，可能会影响其他业务，牵一发动全身

优点

  • 架构更清晰，解耦
  • 业务分工明确，开发人员仅专注与自己的业务
  • 提高开发效率
  • 组件、业务独立更新版本，可回滚，持续集成

原则

  1. 单一的职责

    专注于解决一个单一的问题，独立的, 可复用的, 微小的 and 可测试的

  2. 组件命名

    • 有意义的: 不过于具体，也不过于抽象
    • 简短: 2 到 3 个单词
    • 具有可读性: 以便于沟通交流
    1. # bad: Menu Table
    2. # bad: UserCenterLeftPartOperateMenu
    3. # bad: Xmenu
    4.   good: UserCenterMenu

  3. 组件表达式简单化

    过于复杂的判断逻辑抽离，不要在render中写臃肿的表达式，保持组件dom简洁，可读。
    bad:

    1. { this.state.hasQueue && this.state.hasQueue.length > 0 && this.state.hasQueue.indexOf(value.id) > -1 ? <a href={TJ.tourl('/directivity?orderId=' + value.id) }  className="line-normal-btn fl maincolor mainborder">智能导引单</a> : null }
    2.                             {((value.examDate && !value.isLocalePay && (value.status == 2 || value.status == 1 ||  value.status == 0) && !value.isExport) && !value.isHidePrice) ?
    3.                                 <a href="javascript:;" className="line-normal-btn" onClick={this.changeItems.bind(this, value)}>改项目</a>
    4.                                 : null
    5.                             }

    good:

    1. // 是否可见智能导引单
    2. let isHasQueue = this.state.hasQueue && this.state.hasQueue.length > 0 && this.state.hasQueue.indexOf(value.id) > -1;
    4. // 是否可改期
    5. // 订单状态：...order status
    6. let canChangeItem = function(value) {
    7.   return ((value.examDate && !value.isLocalePay && (value.status == 2 || value.status == 1 ||  value.status == 0) && !value.isExport) && !value.isHidePrice)
    8. }
    10. { isHasQueue && <a href={TJ.tourl('/directivity?orderId=' + value.id)}  className="line-normal-btn fl maincolor mainborder">智能导引单</a> }
    12. { !!canChangeItem(value) ? <a href="javascript:;" className="line-normal-btn" onClick={this.changeItems.bind(this, value)}>改项目</a> }

    ps:

    1. {placeholder && <span className="fr text-grey linehight48">{placeholder}</span>}
    2. # 这种简写有问题，当placeholder为0的时候，显示不正常; 需要 placeholder 为 boolean 型。
    4. 转化为boolean型：{!!placeholder ...}

  4. 不使用难以理解的「魔鬼数字」

    bad:

    1. // 订单是否可改期
    2. let canChangeItem = function(value) {
    3.   ((value.examDate && !value.isLocalePay && 
    4.     # (value.status == 2 || value.status == 1 ||  value.status == 0) 
    5.     && !value.isExport) && !value.isHidePrice)
    6. }

    good:

    1. const ORDER_STU = {
    2.   unpay: 0, // 未支付
    3.   paid: 1, // 支付完成
    4.   paying: 2 // 已预约
    5. }
    7. (value.status == ORDER_STU.paying || value.status == ORDER_STU.paid ||  value.status == ORDER_STU.unpay)

  5. 组件 props 原子化

    尽量只使用JavaScript 原始类型(字符串、数字、布尔值) 和 函数。尽量避免复杂的对象

    1. <!-- bad -->
    2. <range-slider :config="complexConfigObject"></range-slider>
    4. <!-- good -->
    5. <range-slider
    6.   :values="[10, 20]"
    7.   min="0"
    8.   max="100"
    9.   step="5"
    10.   :on-slide="updateInputs"
    11.   :on-end="updateResults">
    12. </range-slider>
    14.   or
    16.   let complexConfigObject = {
    17.     .., ..
    18.     .., ..
    19.   }
    21.   <range-slider
    22.   {...complexConfigObject} >
    23. </range-slider>

  6. 验证组件的 props，由其对于ui组件

    • 提供默认值

    • 使用 type 属性校验类型

    • 使用 props 之前先检查该 prop 是否存在

      好处：保证你的组件永远是可用的(防御性)

      1. React.createClass({
      2.   getDefaultProps()...
      4.   propTypes: {
      5.     hospitals: React.PropTypes.array.isRequired,
      6. ...
      8. // vue
      9. export default {
      10.     props: {
      11.       max: {
      12.         type: Number, // 这里添加了数字类型的校验
      13.         default() { return 10; },
      14.       }
      15. ...

  7. 当前component 指向 this

    尽量不要这样：

    1.  const self = this; // 一般情况没有必要这样声明

  8. 组件结构规范

    按照一定的习惯组织代码，使得组件便于理解

    react:

    1.  //设置数据默认值
    2.  getDefaultProps() {}
    4.  propTypes: {}
    6.  getInitialState() {}
    8.  componentWillMount() {}
    10.  componentDidMount() {}
    12.  componentWillReceiveProps(nextProps) {}
    14.  shouldComponentUpdate() {}
    16.  componentWillUpdate() {}
    18.  componentDidUpdate() {}
    20.  componentWillUnmount() {}
    22.  selfMethod()... //自定义方法
    24.  render() ...

    vue:

    1.  export default {
    2.  // 不要忘记了 name 属性
    3.  name: 'RangeSlider',
    4.  // 组合其它组件
    5.  extends: {},
    6.    // 使用其它组件
    7.  components: {},
    8.  // 组件属性、变量
    9.  props: {
    10.    bar: {}, // 按字母顺序
    11.    foo: {},
    12.    fooBar: {},
    13.  },
    14.  // 变量
    15.  data() {},
    16.  computed: {},
    17.    // 方法
    18.  methods: {},
    19.  watch: {},
    20.  // 生命周期函数
    21.  beforeCreate() {},
    22.  mounted() {},
    23.  };

    合理的 CSS 书写规则，如 BEM 或 oocss

    使用组件名作为样式作用域空间

    1.  BEM：块（block）、元素（element）、修饰符（modifier）
    3.  <form class="search-form">
    4.      <input type="text" class="search-form__username">
    5.      <input type="password" class="search-form__password     ml10">
    6.      <button class="search-form__submit active"></button>
    7.  <form>

  9. 事件命名规则

    驼峰命名：oneTwoThree

    动词 + 形容词 / 动词 + 名词

    原生事件传递：handleClick, handleChange …

    1. 编辑器

      统一缩进2格

      js中使用单引号，html中使用双引号

    2. 必要时，添加readme文件

      三种方式 ( react )

    3. 函数式定义的无状态组件（react v0.14）

    4. es5原生方式React.createClass定义的组件，目前我们系统使用方式

    5. es6形式的extends React.Component定义的组件

do it

第一步：划分组件

组件划分

第二步：编写静态版本

  1. render: function() {
  2.         if (this.state.loading) {
  3.             return null;
  4.         }
  6.         let headerProps = {
  7.           gender: this.state.account.gender,
  8.           name: this.state.account.name,
  9.           idCard: this.state.account.idCard,
  10.           employeeId: this.state.account.employeeId,
  11.           cardCount: this.state.amounts.cardCount,
  12.           balanceAmount: this.state.amounts.balanceAmount
  13.         };
  15.         let orderBadgeLabel = (this.state.amounts.unExamOrderCount && this.state.amounts.unExamOrderCount > 0) ? this.state.amounts.unExamOrderCount : '';
  16.         let menuList1 = [
  17.           {label: '我的订单', location: TJ.tourl('/orderlist'), ...},
  18.           {label: '体检人管理', location: TJ.tourl('/healthermanage'), ...}
  19.         ]
  21.         let menuList2 = [
  22.           {label: '个人信息', location: TJ.tourl('/personalinfo'), ...},
  23.           {label: '修改密码', location: TJ.tourl('/updatepwd'), icon: 'icon-xiugaimima color-red'},
  24.         ]
  26.         let menuList3 = [
  27.           {label: '了解更多', location: TJ.tourl('/guidance'), ...},
  28.           {label: '意见反馈', location: TJ.tourl('/feedback'), ...},
  29.           {label: '联系客服', location: 'tel://400-0185-800', ...}
  30.         ]
  32. let rightBtn = (<a className="moremenu-icon iconfont icon-shouye" href={TJ.tourl('/welcome')}> </a>);
  34.         return (
  35.           <div className="container">
  36.               <HeaderView title='个人中心' rightBtn={rightBtn}/>
  38.               <UcHeaderView {...headerProps} />
  40.               <UcBodyView menuList1={menuList1} menuList2={menuList2} menuList3={menuList3} />
  42.               <UcFooterView isWeixin={this.state.wxbind} />
  44.           </div>
  46.         );
  47.       }
  49. /*
  50. * 个人中心页面上部
  51. */
  52. var UcHeader = React.createClass({
  54.     getDefaultProps() {
  55.       return {
  56.         gender: 0
  57.       }
  58.     },
  60.     propTypes: {
  61.       cardCount: React.PropTypes.number,
  62.       balanceAmount: React.PropTypes.number
  63.     },
  65.     render: function() {
  66.       let { name, gender, idCard, employeeId, cardCount, balanceAmount } = this.props;
  68.       let accountingItems = [
  69.         { label: '体检卡', amount:  cardCount, location: '/usercentercard' },
  70.         { label: '余额', amount:  TJ.formatPrice(balanceAmount), location: '/cashaccount' }
  71.       ];
  73.       return (
  74.         <div>
  75.           <AccountInfoView name={name} gender={gender} idCard={idCard} employeeId={employeeId} />
  76.           <AccountingView accountingItems={accountingItems} />
  77.         </div>
  78.       );
  79.     }
  80. });
  82. /*
  83. * 菜单项
  84. * location 跳转路径
  85. * icon 图标className
  86. * badgeLabel 红色徽标显示内容
  87. * showArrow 是否显示右边箭头
  88. * placeholder 右边显示内容
  89. */
  90. var MenuView = React.createClass({
  91.   getDefaultProps() {
  92.     return {
  93.       showArrow: true
  94.     }
  95.   },
  97.   propTypes: {
  98.     label: React.PropTypes.string.isRequired
  99.   },
  101.   render: function() {
  102.     let {label, location, icon, badgeLabel, showArrow, placeholder} = this.props;
  104.     return (
  105.       <a href={location} className="common-link grey-bor" style={{padding: '0rem 0.2rem'}}>
  106.           <i className={'iconfont ico-margin ' + icon} />
  107.           <span className="text-dark">{label}</span>
  108.           {showArrow ? <i className="next-link iconfont icon-xiangyou" /> : null}
  109.           {badgeLabel ? <em className="morenum-icon fr" >{badgeLabel}</em> : null}
  110.           {placeholder ? <span className="fr text-grey linehight48">{placeholder}</span> : null}
  111.       </a>
  112.     );
  113.   }
  114. });

第三步：添加 状态 / 逻辑

  1. // 用户信息
  2. var AccountInfoView = React.createClass({
  3.   // 1. 组件内部交互
  4.   this.setState({showModal: true});
  6.   render: function() {
  8.     // 2. 对数据的处理，如果没有名字，显示身份证号，如果没有身份证，显示员工号
  9.     let username = (this.props.name || this.props.idCard || this.props.employeeId);
  11.     // 3. 变量的转化，简化DOM使用参数
  12.     let imgUrl = 
  13.         (this.props.gender && this.props.gender == 1) ? '/app/base/bg/girl.png' : '/app/base/bg/boy.png';
  15.     // 4. 添加事件
  16.     shake(e) {
  17.       let [obj, i, timer, d] = [$(e.target), 5, null, 5];
  18.       clearInterval(timer);
  19.       timer = setInterval(function(){
  20.         obj.css({"position": "relative", "left": d + "px"});
  21.         i--;
  22.         d = -d;
  23.         if (i === 0) {
  24.           clearInterval(timer);
  25.         }
  26.       },50);
  27.       },
  29.     return (
  30.       <div className="photo-bg mainbackground">
  31.           <img src={imgUrl} onClick={this.shake} />
  32.           <p>{username}</p>
  33.       </div>
  34.     );
  35.   }
  37. });

第四步：通信

常用几种方式：props传递、pub-sub方式、flux/redux(vuex)

  1. props:

    1. <Parent>
    2.       {/* 以属性的形式传入子组件 */}
    3.     <Children handleClick={this.operate} />
    4. </Parent>
    6. {/* 子组件调用父组件传入的方法 */}
    7. <Children onClick={this.props.handleClick} />

  2. pub-sub:

    1. # pub: 
    2. PubSub.publish('usercneter:testpubsub:success', 'bgred');
    4. # sub:
    5. componentWillMount() {
    6.   this.testpubsubToken = PubSub.subscribe('usercneter:testpubsub:success', (msg, data) =>         {
    7.     this.changeBg(data);
    8.   });
    9. }
    11. # 注销发布
    12. componentWillUnmount() {
    13.   PubSub.unsubscribe(this.testpubsubToken);
    14. }
    16. # key值规则
    17. PubSub.publish('usercneter:testpubsub:success');
    18. `模块:动作:状态`

  3. flux/redux

    利用全局状态管理（store），需要框架支持，目前C端还未使用。

    vuex 管理组件间状态和通信，运维管理系统(ops)、渠道商管理(crm-channel)中已使用。

属性类型验证

  1. React.createClass({
  2.   propTypes: {
  3.     // You can declare that a prop is a specific JS primitive. By default, these
  4.     // are all optional.
  5.     optionalArray: React.PropTypes.array,
  6.     optionalBool: React.PropTypes.bool,
  7.     optionalFunc: React.PropTypes.func,
  8.     optionalNumber: React.PropTypes.number,
  9.     optionalObject: React.PropTypes.object,
  10.     optionalString: React.PropTypes.string,
  12.     // Anything that can be rendered: numbers, strings, elements or an array
  13.     // containing these types.
  14.     optionalNode: React.PropTypes.node,
  16.     // A React element.
  17.     optionalElement: React.PropTypes.element,
  19.     // You can also declare that a prop is an instance of a class. This uses
  20.     // JS's instanceof operator.
  21.     optionalMessage: React.PropTypes.instanceOf(Message),
  23.     // You can ensure that your prop is limited to specific values by treating
  24.     // it as an enum.
  25.     optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
  27.     // An object that could be one of many types
  28.     optionalUnion: React.PropTypes.oneOfType([
  29.       React.PropTypes.string,
  30.       React.PropTypes.number,
  31.       React.PropTypes.instanceOf(Message)
  32.     ]),
  34.     // An array of a certain type
  35.     optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
  37.     // An object with property values of a certain type
  38.     optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
  40.     // An object taking on a particular shape
  41.     optionalObjectWithShape: React.PropTypes.shape({
  42.       color: React.PropTypes.string,
  43.       fontSize: React.PropTypes.number
  44.     }),
  46.     // You can chain any of the above with `isRequired` to make sure a warning
  47.     // is shown if the prop isn't provided.
  48.     requiredFunc: React.PropTypes.func.isRequired,
  50.     // A value of any data type
  51.     requiredAny: React.PropTypes.any.isRequired,
  53.     // You can also specify a custom validator. It should return an Error
  54.     // object if the validation fails. Don't `console.warn` or throw, as this
  55.     // won't work inside `oneOfType`.
  56.     customProp: function(props, propName, componentName) {
  57.       if (!/matchme/.test(props[propName])) {
  58.         return new Error('Validation failed!');
  59.       }
  60.     }
  61.   },
  62.   /* ... */
  63. });

Props与State对比

Props与State之间也是有很多交集的，譬如：
  • Props与State都是JS对象。
  • Props与State的值的改变都会触发界面的重新渲染。
  • Props与State都是确定性的，无副作用的，即在确定的Props或者State的值的情况下都会得出相同的界面。
差异：

Props顾名思义，更多的是作为Component的配置项存在。Props往往是由父元素指定并且传递给自己的子元素，不过自身往往不会去改变Props的值。另一方面，State在组件被挂载时才会被赋予一个默认值，而常常在与用户的交互中发生更改。往往一个组件独立地维护它的整个状态机，可以认为State是一个私有属性

Mixins：组件的继承

虽然组件的原则就是模块化，彼此之间相互独立，但是有时候不同的组件之间可能会共用一些功能，共享一部分代码。所以 React 提供了 mixins 这种方式来处理这种问题。Mixin 就是用来定义一些方法，使用这个 mixin 的组件能够自由的使用这些方法（就像在组件中定义的一样），所以 mixin 相当于组件的一个扩展，在 mixin 中也能定义“生命周期”方法。

  1. var SetIntervalMixin = {
  2.     componentWillMount: function() {
  3.         this.intervals = [];
  4.     },
  5.     setInterval: function() {
  6.         this.intervals.push(setInterval.apply(null, arguments));
  7.     },
  8.     componentWillUnmount: function() {
  9.         this.intervals.map(clearInterval);
  10.     }
  11. };
  13. var TickTock = React.createClass({
  14.     mixins: [SetIntervalMixin], // Use the mixin
  15.     getInitialState: function() {
  16.         return {seconds: 0};
  17.     },
  18.     componentDidMount: function() {
  19.         this.setInterval(this.tick, 1000); // Call a method on the mixin
  20.     },
  21.     tick: function() {
  22.         this.setState({seconds: this.state.seconds + 1});
  23.     },
  24.     render: function() {
  25.         return (
  26.             <p>
  27.                 React has been running for {this.state.seconds} seconds.
  28.             </p>
  29.         );
  30.     }
  31. });
  33. React.render(
  34.     <TickTock />,
  35.     document.getElementById('example')
  36. );

React 的 mixins 的强大之处在于，如果一个组件使用了多个 mixins，其中几个 mixins 定义了相同的“生命周期方法”，这些方法会在组件相应的方法执行完之后按 mixins 指定的数组顺序执行。

ref:

​ https://segmentfault.com/a/1190000003748289

​ http://www.tuicool.com/articles/2yI3ea6

​ http://blog.csdn.net/shilu89757/article/details/42418283

​ https://zhuanlan.zhihu.com/p/25654116

文档更新时间: 2019-07-22 09:54