構建前端項目

mindwind 發布于2019-08-23 13:51 / 2146人閱讀

摘要：解決思路服務器端渲染服務器端和前端公用同一個應用，然后通過構建工具及配置，確定哪些組件需要再服務器端渲染，那些組件需要再客戶端渲染。服務器端渲染，由框架與構建工具配合，并依據一定的項目結構和編碼方式，共同運行。

分離

為什么需要 “前后端分離、web服務器與static服務器分離”:

前端與后端耦合 (需求)

自動化、工程化的構建前端的代碼 (基礎條件)

模塊化、組件化，項目共享代碼 (過程)

瀏覽器運行速度 (硬件)

前后端分離具體：

工程分離

數據流分離

web服務器與static服務器分離:

web 服務器：存放運行后端 web 應用的程序，以及前端 html 文件（入口文件）

static 服務器：靜態資源服務器，存放前端除 html 文件之外的其他資源文件，包括 js， css， images

web服務器與static服務器的缺點：

前端構建過程中會產生大量的冗余文件

前端人員能夠直接接觸到后端代碼，也不夠安全

靜態資源會占用 web 服務器的資源和帶寬

web服務器與static服務器的注意點：

多個項目共用同一個 static 服務器

保證靜態資源的路徑的正確

并行開發

本地化接口模擬、前后端并行開發

本地化接口模擬原因: 前端與后端耦合，web 前端程序依賴數據。

本地數據模擬的解決方案的思路：(更多項目是配合使用)

同等模擬服務器環境，就是依據文檔，完全按照服務器的接口配置搭建本地的接口服務；

多環境配置&切換，就是從代碼的層面配置多個環境（如線上環境，本地環境），根據是在線上還是在本地切換不同的環境。

同等模擬服務器環境

mork json數據

RAML(RESTful API Modeling Language 即 RESTful API 建模語言)

Swagger

多環境配置&切換

把應用對接口的實現進行一次封裝隔離 (fetch file)

更好的管理代碼

開發過程中預定 3 個環境：0（線上環境 prod），1（本地模擬后臺接口環境 dev），2（并行開發環境 uat）

規范

編碼規范

項目結構規范

框架、工具規范

其他約定

編碼規范

Code Guide

html: 縮進，標簽，加載順序

css: 縮進，換行，引號，注釋

js: 縮進，換行，變量名稱，括號，文檔注釋

項目結構規范

文件、目錄命名規范，模塊化分組規范，組件化規范

變量:
完整英文命名的用復數形式，縮寫用單數形式
全部采用小寫方式，以下劃線分隔

模塊化分組規范：

/project/src/: 工作空間

index.html: html 入口文件

index.js: js 入口文件

index.(css|less|scss): 樣式入口文件

js/: js 文件目錄

js/ajax/: 對 ajax 封裝的目錄
js/util/: 工具類函數的目錄
js/pages/: spa 應用頁面目錄
js/data/: 靜態數據目錄
js/tpl/: 模板目錄
js/(event|view)/: 事件監聽文件目錄

data/: 本地 json 數據模擬

(css|less|scss)/: 樣式文件目錄

images/: 圖片文件目錄

components/: 組件目錄（如果基于 react, vue 等組件化框架）

組件化規范：這里的組件化并不是指在代碼、框架層面的組件化，而是在架構和規范層面的組件化

/project/src/component/hello/: hello 組件的工作空間

README.md: 組件的說明，包括功能介紹、api文檔、一些用例等等

index.js: 組件的入口文件，調用組件將使用如下的方式

demo/：用例目錄

框架、工具規范

框架和 UI 庫：

從最開始的時候要確定要技術選型，并且最好不要更改選定的框架和UI庫，因為不同的框架，不同的UI庫一般相互之間是不兼容的，同時用多個框架或UI庫也是要盡量避免。

框架選型

jquery + bootstrap

react + ant-design | material-ui |

Semantic-UI

vue + element-ui | vux

工具規范：

eslint: 語法規則和代碼風格的檢查工具，可以用來保證寫出語法正確、風格統一的代碼。

其它約定

每個 js 文件不應該超過 400 行，超過就應該分塊

每個 css 文件不應該超過 200 行，超過就應該分塊

文檔

目的

降低團隊的協作成本和維護成本

提高開發效率和質量

開發人員的變動而產生較大的影響

形成文檔內容

注釋 JSDoc：放在方法或函數或類聲明之前

業務邏輯: 比較復雜的業務邏輯不合適放在注釋里，需要多帶帶寫邏輯文檔

更新日志: 方便查找更新狀態、時間、開發人員

備注: 額外有用的信息

/**
 * 函數功能描述
 *
 * @param arg {type} 變量描述
 * @return {type} 返回值作用描述
 */

SPA

SPA優點：

本地路由，由JS定義路由，根據路由渲染頁面，控制跳轉（最基本特點）

文件只會加載一次，最大限度重用文件，提升加載速度。

整個應用只有一個入口html文件，路由由前端控制，有時候需要后端配合

Hash Router

原理：location hash

http://www.example.com -> index.html

http://www.example.com -> 主頁面
http://www.example.com/#/ -> 主頁面
http://www.example.com/#/page1 -> page1 頁面
http://www.example.com/#/page2 -> page2 頁面

路由組件：

react-router

vue-router

page.js

director

按需加載

按需加載:

按照需要來加載不同的組件/文件

避免首頁加載緩慢

react 全家桶：react + react-router + redux + redux-saga + react-redux + dva

react 全家桶 + ant-design 開發模板: antd-admin | ant-design-pro

SSR 和 node中間層

解決痛點：

使用SPA后，整個頁面的渲染基本上都由前端JS動態渲染，搜索引擎的爬取不到，SEO實現麻煩

電商類應用必須要使用。

解決思路:

服務器端渲染（SSR）：服務器端和前端公用同一個應用，然后通過構建工具及配置，確定哪些組件需要再服務器端渲染，那些組件需要再客戶端渲染。

node中間層：保留服務器端模板渲染的功能，但是由node程序來代替后端語言模板渲染，后端語言與node程序只做數據交互。

SSR

服務器端渲染，由框架與構建工具配合，并依據一定的項目結構和編碼方式，共同運行。

next.js: 服務器端渲染 react 組件，使用方法用Next.js快速上手React服務器渲染
nuxt.js: 服務器端渲染 vue 組件，使用方法nuxt.js

node 中間層

從NodeJS搭建中間層再談前后端分離

淘寶前后端分離實踐

node中間層做開發，難點如何讓前后端分離的兩個項目協同開發與調試:

一般web項目開發時有熱更新(Hot Reloading)與熱替換(Hot Replacing)功能

一般node項目開發時有 nodemon功能

能將兩者結合起來開發，不管改動web項目文件還是node項目文件，瀏覽器頁面都能夠自動刷新，就可以在本地調試node中間層的模板輸出。

GPU云服務器云服務器前端構建如何構建java項目前端項目前端項目視頻

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99670.html

如何構建大型的前端項目

摘要：如何構建大型的前端項目搭建好項目的腳手架一般新開發一個項目時，我們會首先搭建好一個腳手架，然后才會開始寫代碼。組件化一般分為項目內的組件化和項目外的組件化。如何構建大型的前端項目 1. 搭建好項目的腳手架一般新開發一個項目時，我們會首先搭建好一個腳手架，然后才會開始寫代碼。一般腳手架都應當有以下的幾個功能：自動化構建代碼，比如打包、壓縮、上傳等功能本地開發與調試，并有熱替換與...

lykops 2019-08-29 16:56 評論0 收藏0
如何構建大型的前端項目

摘要：如何構建大型的前端項目搭建好項目的腳手架一般新開發一個項目時，我們會首先搭建好一個腳手架，然后才會開始寫代碼。組件化一般分為項目內的組件化和項目外的組件化。如何構建大型的前端項目 1. 搭建好項目的腳手架一般新開發一個項目時，我們會首先搭建好一個腳手架，然后才會開始寫代碼。一般腳手架都應當有以下的幾個功能：自動化構建代碼，比如打包、壓縮、上傳等功能本地開發與調試，并有熱替換與...

plokmju88 2019-08-23 12:18 評論0 收藏0
從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目

摘要：從到再到搭建編寫構建一個前端項目選擇現成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現成的項目模板自己搭建項目骨架。使用版本控制系統管理源代碼項目搭建好后，需要一個版本控制系統來管理源代碼。從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目 1. 選擇現成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種：選擇現成的項目模板、自己搭建項目骨架。 ...

call_me_R 2019-08-23 13:43 評論0 收藏0
從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目

摘要：從到再到搭建編寫構建一個前端項目選擇現成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現成的項目模板自己搭建項目骨架。使用版本控制系統管理源代碼項目搭建好后，需要一個版本控制系統來管理源代碼。從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目 1. 選擇現成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種：選擇現成的項目模板、自己搭建項目骨架。 ...

wzyplus 2019-08-02 12:08 評論0 收藏0
從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目

摘要：從到再到搭建編寫構建一個前端項目選擇現成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現成的項目模板自己搭建項目骨架。使用版本控制系統管理源代碼項目搭建好后，需要一個版本控制系統來管理源代碼。從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目 1. 選擇現成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種：選擇現成的項目模板、自己搭建項目骨架。 ...

aristark 2019-08-29 17:24 評論0 收藏0
《從零構建前后分離的web項目》：前端了解過關了嗎？前端基礎架構和硬核介紹

摘要：前端準備前端了解過關了嗎前端基礎架構和硬核介紹技術棧的選擇首先我們構建前端架構需要對前端生態圈有一切了解，并且最好帶有一定的技術前瞻性，好的技術架構可能日后會方便的擴展，減少重構的次數，即使重構也不需要大動干戈，我通常選型技術棧會參考以下三 # 前端準備：前端了解過關了嗎？前端基礎架構和硬核介紹 showImg(https://segmentfault.com/img/remote/...

SwordFly 2019-08-29 16:37 評論0 收藏0