如何像後端同樣寫前端代碼？

時間 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 代碼。