如何像后端一样写前端代码？

声明：笔者会以一个后端开发人员（类 C 语言）的身份来做前端的开发，但是需要一些前端基础知识，比如：HTML 标记、DOM 文档等。

除此之外需要安装有 Node.js 4.0+ 版本，最好在 GitHub 上 Clone 本文源码。

传统的 Web 开发中，写 js 代码很少考虑面向对象、模块化，因为没有这方面的要求，也没必要。传统的 Web 开发，前端仅仅负责数据的展示，很少或根本不负责动态交互。

随着页面越加复杂，页面的交互越来越多，势必增加 js 的权重，不考虑面向对象、没有模块化的 js 很可能会导致代码结构的崩塌。另一方面，后端语言（比如 C#、Java 等）却可以很轻松的完成复杂逻辑的编写工作。

这使得人们开始重新思考 js 的定位。2013 年横空出世的 React 框架，加上定稿的 ES6 语法，终于赋予了前端模块化定制的能力。

一个简单的例子

import React, {Component} from 'react';

export default class HelloMessage extends Component {
  constructor(props, context) {
    super(props, context);
  }

  render() {
    return (
      <div>Hello {this.props.name}!</div>
    );
  }
}

以上代码就是一个通常的理解的类，按照规范单独成一个文件，有自己的构造函数和 render 方法。

构造函数在 new 的时候调用。
render 方法根据名字判断是渲染成 HTML 文档。
引入了一个已有的模块 react，从之继承。

以上，就是作为后端开发，咱一眼能看出来的东西。事实呢，也确实如此！

构造函数不用讲了，super 关键字指向了父类的相关信息，这个必须在构造函数第一行。
render 方法会把 return 返回的 HTML 元素，在适当的时机，添加到 DOM 文档中去。
至于 import 语句，是 ES6 语法固定的写法，就好比 C# 的 using 语句。
export default 可以类比成 C# 里面的 public 关键字，这样才能在别的类中调用；可以省略，表示只在当前文件可见，相当于添加了 private 关键字。

连接 HelloMessage 模块

就好像 C# 代码需要一个入口点函数一样，模块化的 js 需要一个入口文件：

import React from 'react';
import ReactDOM from 'react-dom';

import HelloMessage from './HelloMessage.jsx';

ReactDOM.render(<HelloMessage name="张三" />, document.getElementById('container'));

解释下这段代码：

导入 React 框架的渲染类、HelloMessage 模块类。
将 HelloMessage 模块类渲染到 id='container' 元素上