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

时间 2019-12-04

标签如何后端同样前端代码繁體版

原文原文链接

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

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

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

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

这使得人们开始从新思考 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 方法。github

构造函数在 new 的时候调用。npm
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' 元素上

编译 js 文件

是的，你没看错，即便是 js 仍然须要编译才能运行。编译这块我很少解释了，此次的任务主要是带领你们获得一个之后端形式编写的页面。

在控制台中键入 npm start 后u看到以下图所示的结果后即表示构建完成：

此时，双击根目录下的 index.html 就能看到最终结果了：

引入到 `.html` 文件并运行

在 .html 文件中引入编译后的 js 文件，点击在浏览器中打开。

<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="container"></div>
  <script src="dist/core.js" charset="utf-8"></script>
  <script src="dist/index.js" charset="utf-8"></script>
</body>
</html>

一些必要的说明

DEMO 运行起来了，咱们能看到的只是出现了一行文字而已，距离理想中高大上的网页，还有十万八千里，可是咱们已经迈出了第一步，剩下的就是把这段路走完而已。

前端代码模块化后，开发过程当中是须要拆分文件的，规范的作法是一个模块一个文件，类比到 C# 代码就是一个 class 一个 cs 文件。
拆分各个模块后，模块间的相互引用，须要使用 export default 和 import 语法来导出和导入，类比到 C# 代码就是 public 关键字和文件头的 using 语句。
入口文件是必须的。就好像 C# 控制台程序，从 Program.Main 方法启动。由于 js 是按照代码从上往下执行的，因此 js 入口文件须要先 import 须要的模块，调用 ReactDOM.render 方法将目标模块渲染到目标元素上。
- 目标模块须要传递的参数，按照 attribute 的形式添加到元素中。
- 注意引入的模块首字母必须是大写的，这是 React 的约定，防止和原生的 HTML 组件名称冲突，好比：div 就是 HTML 元素，HelloMessage 是咱写的组件。
在 .html 文件中以 script 引入编译后的文件，这里是引入了两个文件：
- core.js 表示公共模块，比如 C# 运行中须要的 System.dll 文件。
- index.js 表示咱写的 js 代码。

OneAPM Mobile Insight 以真实用户体验为度量标准进行 Crash 分析，监控网络请求及网络错误，提高用户留存。访问 OneAPM 官方网站感觉更多应用性能优化体验，想阅读更多技术文章，请访问 OneAPM 官方技术博客。