Node.js建站笔记-使用react和react-router取代Backbone

斟酌之后,决定在《嗨猫》项目中引入react,整体项目偏重spa模式,舍弃部分server端的模板渲染,将一部分渲染工作交给前端react实现。

react拥有丰富的组件,虽然不如Backbone和underscore这对老基友成熟,但考虑到嗨猫的前端并不需要很多的MV*架构,目前使用到Backbone的地方只有hash路由而已,所以最终决定使用react-router取代Backbone,underscore也从项目依赖中移除。

下面就以登录&注册页为例,简单讲述整个替代过程。

1. 安装并二次编译react-router

因为项目前端仍然使用AMD规范,使用bower install react-router安装后的react-router是原始的ES6 module规范,不能兼容AMD规范。
react-router源码中提供了编译配置文件scripts/build.js,进入react-router根目录执行:

npm install

安装依赖工具之后执行:

node scripts/build.js

编译成功后生成lib和umd两个文件夹,lib目录下的是CommonJS规范的文件,umd目录下是UMD规范文件,项目中前端使用的是umd目录下的文件。

编译完毕之后配置/assets/global/js/dev/main.es中的requirejs的配置项:

paths: {
		"jquery": 'jquery/jquery.min',
		"requirejs": 'requirejs/require',
		"react": 'react/react',
		'react-dom': 'react/react-dom',
		"react-router": "react-router/umd/ReactRouter.min",
		"jqSlidejs": 'jquery-slide/jqSlide.min',
		'jqValidate': 'jquery-validation/dist/jquery.validate.min'
	}

配置完毕后便可以在其他js文件中直接使用import关键字引入react-router组件。

2. 引入React并编写前端组件

以下改的均是在登录注册页的主要js文件/assets/components/passport/js/dev/main.es中进行。

2.1 首先引入react和react-dom。

React的新版本将react-dom分离出来专注于组件的render,原来的React.render函数被弃用。

import React from 'react'
import { render } from 'react-dom'
2.2 编写组件

将server端的swig模板进一步简化,除了logo区域之外的UI由react渲染,swig模板只提供一个外层容器:

<div class="hc_pwd_box"></div>

这个容器便是react组件的append dom的目标,我们首先将它储存起来:

let container = $('.hc_pwd_box')[0];

react的render方法不支持jquery对象,必须是原始的dom节点。

2.2.1 nav组件

需要注意,nav是有状态的,tab文字下方的黑条指示当前的显示表单是注册还是登录,所以在编写nav组件是需要用到props,代码如下:

// nav 组件
const Nav = React.createClass({
render(){
  let mode = this.props.mode;
  let class_login = '',class_signup = '';
  if(mode === 'login'){
    class_login = 'box_nav_item box_nav_item_login box_nav_item-current';
    class_signup = 'box_nav_item box_nav_item_signup';
  }else{
    class_signup = 'box_nav_item box_nav_item_signup box_nav_item-current';
    class_login = 'box_nav_item box_nav_item_login';
  }
  return(
    <ul className="box_nav_list">
      <li className={class_signup}>
        <a className="item_link" href="#signup">注册</a>
        <div className="item_tray"></div>
      </li>
      <li className={class_login}>
        <a className="item_link" href="#login">登录</a>
        <div className="item_tray"></div>
      </li>
    </ul>
  );
}
});

jsx中class的声明必须使用className的写法。

上述代码中的this.props.mode是生成nav组件时传入的数据,然后组件内部根据这个数据判断显示哪个指示条。生成Nav组件的代码如下:

<Nav mode={'login'} />

Nav组件内部this.props.mode的值便是'login'

2.2.2 form表单的容器组件

容器组件最大的特性就是可以接收子节点,这里需要用到react中的this.props.children,它的作用于swig模板的block有相似之处,但是不能像block那样命名。FormBox组件代码如下:

// form容器组件
const FormBox = React.createClass({
 render(){
   let mode = this.props.mode;
   let current = 'box_form_container box_form_container_'+mode;
   return (
     <div className={current}>
       <iframe style={{display:'none'}} name='target_ifr'></iframe>
       {this.props.children}
     </div>
   );
 }
});
  1. FormBox组件与Nav组件一样,是有状态的,根据状态值控制对应表单的display;
  2. {this.props.children}位置接收子节点,下文后讲解如何实现;
  3. jsx语法不能直接使用style='display:none'这种原始写法,必须写成上述代码中的格式,并且类似margin-top这种属性,必须写成与js语法相同的驼峰式marginTop

2.2.3 登录&注册表单组件

登录&注册form组件有以下几点注意:

  1. Login和Signup组件是render和react-router的入口,所以组件内部需要调用Nav和FormBox以及其他组件;
  2. 表单中的验证码图片需要请求接口获取。

首先贴上代码(以Login组件为例):

// 登录form组件
const Login = React.createClass({
 getInitialState(){
   return {
     verify_img: ""
   };
 },
 componentDidMount(){
   $.ajax({
     url: '/getverifycode',
     type: 'get',
     dataType: 'json'
   }).done(function(res) {
     if(this.isMounted()){
       this.setState({
         verify_img: res.img
       });
     }
   }.bind(this));
 },
 render(){
   return(
     <div>
     <Nav mode={'login'} />
     <FormBox mode={'login'}>
       <form action="/login" method="post" className="login_form" target='target_ifr'>
           <div className="form_item form_item_input">
             <input type="text" name='signname' className="form_input hc_input hc_input_grey hc_input_borderdash" placeholder="用户名或邮箱" />
             <span className="form_input_placeholder"></span>
             <div className="form_error"></div>
           </div>
           <div className="form_item form_item_input">
             <input type="password" name='password' className="form_input hc_input hc_input_grey hc_input_borderdash" placeholder="密码" />
             <span className="form_input_placeholder"></span>
             <div className="form_error"></div>
           </div>
           <div className="form_item form_item_input">
             <input type="text" name='verifycode' className="form_input form_input_verifycode hc_input hc_input_grey hc_input_borderdash" placeholder="验证码"/>
             <span className="form_input_placeholder"></span>
             <img src={this.state.verify_img} alt="验证码" className="form_img_verifycode"/>
             <div className="form_error"></div>
           </div>
           <div className="form_item form_item_submit">
             <button type="submit" className="hc_btn hc_btn_orange form_btn_submit">登录嗨猫</button>
           </div>
       </form>
     </FormBox>
     <Thirdparty />
     </div>
   );
 }
});
  1. getInitialState初始化Login组件的state;
  2. componentDidMount在组件绘制时触发,本例中使用jquery实现ajax请求;
  3. jsx中调用state的语法为{this.state.verify_img};
  4. FormBox组件调用时讲子节点写在其闭合标签内部,这一点与swig的block异曲同工。
  5. 另外需要注意的是,jsx中像img、input这类标签,必须不能遗漏闭合的斜杠/,否则会报语法错误。
2.3 配置react-router

react-router的配置比较简单,参照文档编写如下配置项:

const routeConf = [{
 path: '/',
 component: Pwd,
 indexRoute: {component: Signup},
 childRoutes: [{
   path: 'login',
   component: Login
  },{
   path: 'signup',
   component: Signup
  }]
}];
  1. 最外层的path指的是根目录,它调用的组件Pwd是一个空白得容器组件;
  2. indexRoute是进入页面默认的路由指向,本例中默认是注册表单;
  3. childRoutes是子路由的分发,path和component分别代表路径和对应的组件,上文提到的Nav组件中的两个a标签的href值分别对应childRoutes的path,本例中我们使用的是hash路由。

然后如下方式生产router:

render((<Router routes={routeConf}/>),container);

以上便是react-router替代Backbone的大概流程,目前遗留的问题有:

  1. 如何配合jquery validation实现表单验证?由于react-router每次的路由都是重新渲染dom节点,原来的dom节点被删除,导致jquery validation失效。
  2. 是否有比jquery validation更好的选择?

2015.12.2更新

3. 使用formsy-react取代jquery-validation

引入React的一个非常麻烦的事情是,react-router每次切换路径都会重绘dom,导致原来由jquery选定并保存的dom对象与重绘后的dom不一致。

如果是事件响应,可以使用dalegation处理,但是jquery validation插件并不支持类似dalegation的机制,这令两者的兼容面对一个死结。最终,奔着劲量减少耦合的目标(其实是没有研究出箭筒react-router和jquery validation的方案),决定使用react的表单验证组件formsy-react(下文简称为formsy)取代jquery validation,下文简单记录一下整个替代过程。

3.1 安装formsy-react并配置依赖

在项目根目录下执行:

bower install formsy-react --save

formsy安装在第三方库目录/assets/global/libs/下,formsy的目录结构如下:

src目录下是CommonJS规范的源文件,release目录下是编译后的umd规范文件,也是我们将在项目中引入的文件。在global/js/dev/main.es中的path中添加如下配置:

'formsy-react': 'formsy-react/release/formsy-react',

formsy安装成功后,便面临一个问题:前端react组件的重构。

3.2 react组件重构

使用formsy的前提是:form表单必须使用<Formsy.Form>生成,所以之前直接使用原始<form>生成的react组件必须重构为formsy格式。

3.2.1 创建组件库

之所以在此时创建组件库,一方面是为了迎合formsy,但这并不是主要目的。随着项目规模的扩大,组件库是必须的一部分。

以formsy的需求为例,组件库的创建过程如下:

1.新建文件global/js/dev/UIComponents.es(目录不固定,暂时存于此);

2.引入依赖:

import React from 'react';
import Formsy from 'formsy-react';

3.创建formsy-react组件HCInput:

/**
* react-input组件
*/
export const HCInput = React.createClass({
  mixins: [Formsy.Mixin],
  changeValue(event) {
    this.setValue(event.currentTarget[this.props.type === 'checkbox' ? 'checked' : 'value']);
  },
  render(){
    const className = 'form_item form_item_input' + (this.props.className || ' ') + (this.showRequired() ? 'required' : this.showError() ? 'error' : null);
    const errorMessage = this.getErrorMessage();
    return(
      <div className={className}>
        <input type={this.props.type || 'text'} name={this.props.name} className={this.props.inputClass} placeholder={this.props.placeholder} onChange={this.changeValue} value={this.getValue()} checked={this.props.type === 'checkbox' && this.getValue() ? 'checked' : null}/>
        <span className="form_input_placeholder" style={{display:'none'}}></span>
        {this.props.children}
        <div className="form_error">{errorMessage}</div>
      </div>
    )
  }
});

编写formsy组件时有几点需要注意(规范):

  • this.getErrorMessage() 获取的是调用组件时传入的validationError参数值;
  • onChange事件是不可缺少的,用来触发formsy的验证逻辑;

另外,根据项目需求,验证码部分需要在HCInput组件内安置验证码图片的dom,所以HCInput组件接受children组件this.props.children

4.将组件加入依赖配置

UIComponents组件将会成为项目中的基础依赖被多个场景使用,所以将它加入依赖配置文件,方便开发工作。在global/js/dev/main.es中的path中添加如下配置:

// 自定义组件
'UIComponents': './../js/prod/UIComponents'

3.2.2 Login组件重构

组件库创建完毕后,开始进行前端react组件的重构工作,以下内容以Login组件为例。

Login组件的render方法重构后的结构如下:

render(){
        return(
          <div>
          <Nav mode={'login'} />
          <FormBox mode={'login'} >
            <Formsy.Form  action='/login' method="post" className="login_form" target='target_ifr' onSubmit={this.submit} mapping={this.mapInputs} onValid={this.enableSubimit} onInvalid={this.disableSubimit}>
              <HCInput
                type="text"
                name='signname'
                placeholder="用户名或邮箱"
                inputClass='form_input hc_input hc_input_grey hc_input_borderdash'
                validations='isSignname,isNotEmpty'
                validationErrors={{
                  isSignname: '请输入正确的用户名或邮箱',
                  isNotEmpty: !!this.state.emptyError ? '请输入用户名或邮箱': ''
                }}
              />
              <HCInput
                type="password"
                name='password'
                placeholder="密码"
                inputClass='form_input hc_input hc_input_grey hc_input_borderdash'
                validations='isNotEmpty'
                validationErrors={{
                  isNotEmpty: !!this.state.emptyError ? '请输入密码': ''
                }}
              />
              <HCInput
                type="text"
                name='verifycode'
                placeholder="验证码"
                inputClass='form_input form_input_verifycode hc_input hc_input_grey hc_input_borderdash'
                validations='isNotEmpty'
                validationErrors={{
                  isNotEmpty: !!this.state.emptyError ? '请输入验证码': '',
                  isLength: '验证码不正确'
                }}>
                <img src={this.state.verify_img} alt="验证码" className="form_img_verifycode"/>
              </HCInput>
              <div className="form_item form_item_submit">
                <button type="submit" className="hc_btn hc_btn_orange form_btn_submit">登录嗨猫</button>
              </div>
            </Formsy.Form>
          </FormBox>
          <Thirdparty />
          </div>
        );
      }

下面逐条讲解重构细节。

1.<Formsy.Form>

除了标签不同以外,其他语法与常规react组件相同,需要注意的是几个监听函数:

  • onSubmit:用于拦截表单默认的submit行为,这一点与jquery validation的submitHandler功能相同;
  • mapping:将表单中各个input元素映射为自定义的Object。mapping并不是必须的;
  • onValid:表单中各元素都验证通过后触发;
  • onInvalid:与onValid相反,表单中任何一个元素验证不通过就会触发onInvalid,一般与onValid配合控制submit开关。

2.submit开关控制

前文提到使用onInvalid和onValid对submit进行开关控制,需要配合React组件的State实现。

首先在Login组件的getInitialState()方法中添加canSubmit作为submit开关:

getInitialState(){
	return {
		verify_img: "",
		canSubmit: false
	};
}

然后再onValid和onInvalid对应的响应函数中添加开关逻辑:

enableSubimit(){
	this.setState({
		canSubmit: true
	});
},
disableSubimit(){
	this.setState({
		canSubmit: false
	});
}

最后,在onSubmit对应的响应函数中根据开关判断是否提交表单:

submit(data){
	 //开关off时不提交
   if(!this.state.canSubmit){
     return;
   }
   // ajax提交表单
 }

3.扩展formsy的验证规则

formsy自带的验证规则并不能完全满足项目的需求,比如登录时支持用户名和邮箱共享一个input,然后通过正则分发。formsy并没有这种混合验证的需求,所以我们需要对其验证规则进行扩展。

formsy提供了addValidationRule()API用来扩展验证规则。以signname为例,简单讲述一下扩展方法。

之前使用jquery validation已经完成了isSignname的验证规则制定,现在我们将它迁移到formsy,在UIComponents.es中添加代码如下:

/**
* @desc 登录名判断 - 纯文字或邮箱
*/
Formsy.addValidationRule('isSignname',function(values,value){
  let reg_isemail = /[@]/,
    reg_email =
    /^[a-z]([a-z0-9]*[-_]?[a-z0-9]+)*@([a-z0-9]*[-_]?[a-z0-9]+)+[\.][a-z]{2,3}([\.][a-z]{2})?$/i;
  return !reg_isemail.test(value) || (reg_isemail.test(value) &&
    reg_email.test(value));
});

这样,在Login组件内便可以使用isSignname验证规则:

<HCInput
 type="text"
 name='signname'
 placeholder="用户名或邮箱"
 inputClass='form_input hc_input hc_input_grey hc_input_borderdash'
 validations='isSignname,isNotEmpty'
 validationErrors={{
   isSignname: '请输入正确的用户名或邮箱',
   isNotEmpty: !!this.state.emptyError ? '请输入用户名或邮箱': ''
 }}
/>

上述代码中的isNotEmpty也是我们自定义的验证规则,随后将会详细讲解为何不使用formsy自带的required验证规则。

formsy多个验证规则可以按上述代码搬使用逗号分隔,也可以写成类似validationErrors的格式
存在多个validation错误提示文案是必须使用validationErrors,注意是复数形式,如果写成validationError会解析出错。

下面解释一下为何需要自定义的isNotEmpty替代formsy自带的required规则。

  1. isNotEmpty规则的应用场景

简单来说,isNotEmpty规则存在的唯一目的,是保证进入页面之后初始状态没有错误提示信息。因为formsy的在表单创建成功之后立即进行验证。这样的规则之下,每次进入页面或者进行hash路由后,在用户输入信息之前便会显示错误提示信息,这显然是不合理的。

isNotEmpty的验证规则非常简单:

Formsy.addValidationRule('isNotEmpty',function(values,value){
  let isNotEmpty = !!value;
  return isNotEmpty;
});

isNotEmpty的关键逻辑在Login组件State的转换上面。参照本节最初Login组件的完整代码,将isNotEmpty的错误提示文案取值为this.state.emptyError,验证流程如下:

  1. 进入页面或切换hash路由之后,formsy立即对表单进行验证,此时isNotEmpty规则返回false,显示isNotEmpty错误提示文案,但是我们不想让用户看到这个提示,所以将次文案设置为空字符串,这就是为何this.state.emptyError初始值为''的原因;
  2. 用户输入信息之后点击submit按钮,触发submit函数中emptyError的设置逻辑this.setState({emptyError: '不能为空'});,在此之后,所有的验证逻辑便可以正常进行。

可能会有人疑惑为何this.setState({emptyError: '不能为空'});没有触发组件的重绘?经本人验证,只有在组件中state以某个属性直接使用(比如className={{this.state.emptyError}}这种)的情况下,setState才会触发重绘。formsy组件中,state作为formsy组件的某个配置参数,而不是直接使用,换句换说,this.state.emptyError只是作为值传入,而不是引用传入,并没有绑定关系。这种情况下setState是不会触发重绘的。

目前暂时采用的isNotEmpty方案并不是最优解,并且交互逻辑仍然有细微的问题,后续会深入研究formsy是否有原生可支持场景需求的方案。


2015.12.07更新

去除isNotEmpty验证规则,使用formsy isPristine API弥补空白验证缺陷

前文提到使用isNotEmpty配合组件的state避免hash路由切换后自动进行表单验证,导致初始进入表达后便显示错误提示。isNotEmpty规则配合state虽然能够解决这个问题,但是实现方式有些tricky。仔细研究formsy的API之后发现了isPristine,这个API的作用如下:

By default all formsy input elements are pristine, which means they are not "touched". As soon as the setValue method is run it will no longer be pristine.

默认情况下formsy的input控件都是原始值,换句话说就是它们还没有被触及。当formsy组件的setValue被调用后,input控件便不再是原始的了。

根据这个API的说明,我们可以进行这样的判断:如果input控件是原始的,那么它的错误提示便是空白的,用户便看不到错误提示。一旦组件的setValue被调用,便将错误提示替换为正常的值。根据这个规则,我们去掉与isNotEmpty规则匹配的state操作,修改HCInput控件的错误提示为:

<div className="form_error">{this.isPristine() ? '':errorMessage}</div>

这样,我们就省去了繁琐的state操作,直接使用formsy内部机制实现项目的需求了。

posted @ 2016-04-18 13:08  JunpengZ  阅读(1835)  评论(0编辑  收藏  举报