如何像后端一樣寫前端代碼？
2016-01-19 21:57:36 來源： mengyidan1988 評論：0 點擊：
本文轉自OneAPM，作者：賈婭妮 聲明：筆者會以一個后端開發人員（類 C 語言）的身份來做前端的開發，但是需要一些前端基礎知識，比如：HTML 標記、DOM 文檔等。 除此之外需要安
本文轉自OneAPM，作者：賈婭妮
聲明：筆者會以一個后端開發人員（類 C 語言）的身份來做前端的開發，但是需要一些前端基礎知識，比如：HTML 標記、DOM 文檔等。
除此之外需要安裝有 Node.js 4.0+ 版本，最好在 GitHub 上 Clone 本文源碼。
傳統的 Web 開發中，寫 js 代碼很少考慮面向對象、模塊化，因為沒有這方面的要求，也沒必要。傳統的 Web 開發，前端僅僅負責數據的展示，很少或根本不負責動態交互。
隨著頁面越加復雜，頁面的交互越來越多，勢必增加 js 的權重，不考慮面向對象、沒有模塊化的 js 很可能會導致代碼結構的崩塌。另一方面，后端語言（比如 C#、Java 等）卻可以很輕松的完成復雜邏輯的編寫工作。
這使得人們開始重新思考 js 的定位。2013 年橫空出世的 React 框架，加上定稿的 ES6 語法，終于賦予了前端模塊化定制的能力。
一個簡單的例子
以上代碼就是一個通常的理解的類，按照規范單獨成一個文件，有自己的構造函數和 render 方法。
1.構造函數在 new 的時候調用。
2.render 方法根據名字判斷是渲染成 HTML 文檔。
3.引入了一個已有的模塊 react，從之繼承。
以上，就是作為后端開發，咱一眼能看出來的東西。事實呢，也確實如此！
1.構造函數不用講了，super 關鍵字指向了父類的相關信息，這個必須在構造函數第一行。
2.render 方法會把 return 返回的 HTML 元素，在適當的時機，添加到 DOM 文檔中去。
3.至于 import 語句，是 ES6 語法固定的寫法，就好比 C# 的 using 語句。
4.export default 可以類比成 C# 里面的 public 關鍵字，這樣才能在別的類中調用；可以省略，表示只在當前文件可見，相當于添加了 private 關鍵字。
連接HelloMessage模塊
就好像 C# 代碼需要一個入口點函數一樣，模塊化的 js 需要一個入口文件：
解釋下這段代碼：
1.導入 React 框架的渲染類、HelloMessage 模塊類。
2.將 HelloMessage 模塊類渲染到 id='container' 元素上
編譯 js 文件
是的，你沒看錯，即使是 js 仍然需要編譯才能運行。編譯這塊我不多解釋了，這次的任務主要是帶領大家得到一個以后端形式編寫的頁面。
在控制臺中鍵入 npm start 后u看到如下圖所示的結果后即表示構建完成：
此時，雙擊根目錄下的 index.html 就能看到最終結果了：
引入到 .html 文件并運行
在 .html 文件中引入編譯后的 js 文件，點擊在瀏覽器中打開。
一些必要的說明
DEMO 運行起來了，我們能看到的只是出現了一行文字而已，距離理想中高大上的網頁，還有十萬八千里，但是我們已經邁出了第一步，剩下的就是把這段路走完而已。
1.前端代碼模塊化后，開發過程中是需要拆分文件的，規范的做法是一個模塊一個文件，類比到 C# 代碼就是一個 class 一個 cs 文件。
2.拆分各個模塊后，模塊間的相互引用，需要使用 export default 和 import 語法來導出和導入，類比到 C# 代碼就是 public 關鍵字和文件頭的 using 語句。
3.入口文件是必須的。就好像 C# 控制臺程序，從 Program.Main 方法啟動。因為 js 是按照代碼從上往下執行的，所以 js 入口文件需要先 import 需要的模塊，調用 ReactDOM.render 方法將目標模塊渲染到目標元素上。
在 .html 文件中以 script 引入編譯后的文件，這里是引入了兩個文件：
聲明：筆者會以一個后端開發人員（類 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 方法。
1.構造函數在 new 的時候調用。
2.render 方法根據名字判斷是渲染成 HTML 文檔。
3.引入了一個已有的模塊 react，從之繼承。
以上，就是作為后端開發，咱一眼能看出來的東西。事實呢，也確實如此！
1.構造函數不用講了，super 關鍵字指向了父類的相關信息，這個必須在構造函數第一行。
2.render 方法會把 return 返回的 HTML 元素，在適當的時機，添加到 DOM 文檔中去。
3.至于 import 語句，是 ES6 語法固定的寫法，就好比 C# 的 using 語句。
4.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')); 解釋下這段代碼：
1.導入 React 框架的渲染類、HelloMessage 模塊類。
2.將 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 運行起來了，我們能看到的只是出現了一行文字而已，距離理想中高大上的網頁，還有十萬八千里，但是我們已經邁出了第一步，剩下的就是把這段路走完而已。
1.前端代碼模塊化后，開發過程中是需要拆分文件的，規范的做法是一個模塊一個文件，類比到 C# 代碼就是一個 class 一個 cs 文件。
2.拆分各個模塊后，模塊間的相互引用，需要使用 export default 和 import 語法來導出和導入，類比到 C# 代碼就是 public 關鍵字和文件頭的 using 語句。
3.入口文件是必須的。就好像 C# 控制臺程序，從 Program.Main 方法啟動。因為 js 是按照代碼從上往下執行的，所以 js 入口文件需要先 import 需要的模塊，調用 ReactDOM.render 方法將目標模塊渲染到目標元素上。
- 目標模塊需要傳遞的參數，按照 attribute 的形式添加到元素中。
- 注意引入的模塊首字母必須是大寫的，這是 React 的約定，防止和原生的 HTML 組件名稱沖突，比如：div 就是 HTML 元素，HelloMessage 是咱寫的組件。
在 .html 文件中以 script 引入編譯后的文件，這里是引入了兩個文件：
- core.js 表示公共模塊，好比 C# 運行中需要的 System.dll 文件。
- index.js 表示咱寫的 js 代碼。
分享到：
收藏
收藏
