資訊專欄INFORMATION COLUMN
摘要：解決思路服務(wù)器端渲染服務(wù)器端和前端公用同一個應(yīng)用，然后通過構(gòu)建工具及配置，確定哪些組件需要再服務(wù)器端渲染，那些組件需要再客戶端渲染。服務(wù)器端渲染，由框架與構(gòu)建工具配合，并依據(jù)一定的項目結(jié)構(gòu)和編碼方式，共同運行。
分離
為什么需要 “前后端分離、web服務(wù)器與static服務(wù)器分離”:
前端與后端耦合 (需求)
自動化、工程化的構(gòu)建前端的代碼 (基礎(chǔ)條件)
模塊化、組件化，項目共享代碼 (過程)
瀏覽器運行速度 (硬件)
前后端分離具體：
工程分離
數(shù)據(jù)流分離
web服務(wù)器與static服務(wù)器分離:
web 服務(wù)器：存放運行后端 web 應(yīng)用的程序，以及前端 html 文件（入口文件）
static 服務(wù)器：靜態(tài)資源服務(wù)器，存放前端除 html 文件之外的其他資源文件，包括 js， css， images
web服務(wù)器與static服務(wù)器的缺點：
前端構(gòu)建過程中會產(chǎn)生大量的冗余文件
前端人員能夠直接接觸到后端代碼，也不夠安全
靜態(tài)資源會占用 web 服務(wù)器的資源和帶寬
web服務(wù)器與static服務(wù)器的注意點：
多個項目共用同一個 static 服務(wù)器
保證靜態(tài)資源的路徑的正確
并行開發(fā)本地化接口模擬、前后端并行開發(fā)
本地化接口模擬原因: 前端與后端耦合，web 前端程序依賴數(shù)據(jù)。
本地數(shù)據(jù)模擬的解決方案的思路：(更多項目是配合使用)
同等模擬服務(wù)器環(huán)境，就是依據(jù)文檔，完全按照服務(wù)器的接口配置搭建本地的接口服務(wù)；
多環(huán)境配置&切換，就是從代碼的層面配置多個環(huán)境（如 線上環(huán)境，本地環(huán)境），根據(jù)是在線上還是在本地切換不同的環(huán)境。
同等模擬服務(wù)器環(huán)境
mork json數(shù)據(jù)
RAML(RESTful API Modeling Language 即 RESTful API 建模語言)
Swagger
多環(huán)境配置&切換
把應(yīng)用對接口的實現(xiàn)進行一次封裝隔離 (fetch file)
更好的管理代碼
開發(fā)過程中預(yù)定 3 個環(huán)境：0（線上環(huán)境 prod），1（本地模擬后臺接口環(huán)境 dev），2（并行開發(fā)環(huán)境 uat）
規(guī)范編碼規(guī)范
項目結(jié)構(gòu)規(guī)范
框架、工具規(guī)范
其他約定
編碼規(guī)范
Code Guide
html: 縮進，標簽，加載順序
css: 縮進，換行，引號，注釋
js: 縮進，換行，變量名稱，括號，文檔注釋
項目結(jié)構(gòu)規(guī)范
文件、目錄命名規(guī)范，模塊化分組規(guī)范，組件化規(guī)范
變量:
完整英文命名的用復(fù)數(shù)形式，縮寫用單數(shù)形式
全部采用小寫方式， 以下劃線分隔
模塊化分組規(guī)范：
/project/src/: 工作空間
index.html: html 入口文件
index.js: js 入口文件
index.(css|less|scss): 樣式入口文件
js/: js 文件目錄
js/ajax/: 對 ajax 封裝的目錄 js/util/: 工具類函數(shù)的目錄 js/pages/: spa 應(yīng)用頁面目錄 js/data/: 靜態(tài)數(shù)據(jù)目錄 js/tpl/: 模板目錄 js/(event|view)/: 事件監(jiān)聽文件目錄
data/: 本地 json 數(shù)據(jù)模擬
(css|less|scss)/: 樣式文件目錄
images/: 圖片文件目錄
components/: 組件目錄（如果基于 react, vue 等組件化框架）
組件化規(guī)范：這里的組件化并不是指在代碼、框架層面的組件化，而是在架構(gòu)和規(guī)范層面的組件化
/project/src/component/hello/: hello 組件的工作空間
README.md: 組件的說明，包括功能介紹、api文檔、一些用例等等
index.js: 組件的入口文件，調(diào)用組件將使用如下的方式
demo/：用例目錄
框架、工具規(guī)范
框架和 UI 庫：
從最開始的時候要確定要技術(shù)選型，并且最好不要更改選定的框架和UI庫，因為不同的框架，不同的UI庫一般相互之間是不兼容的，同時用多個框架或UI庫也是要盡量避免。
框架選型
jquery + bootstrap
react + ant-design | material-ui |
Semantic-UI
vue + element-ui | vux
工具規(guī)范：
eslint: 語法規(guī)則和代碼風(fēng)格的檢查工具，可以用來保證寫出語法正確、風(fēng)格統(tǒng)一的代碼。
其它約定
每個 js 文件不應(yīng)該超過 400 行，超過就應(yīng)該分塊
每個 css 文件不應(yīng)該超過 200 行，超過就應(yīng)該分塊
文檔目的
降低團隊的協(xié)作成本和維護成本
提高開發(fā)效率和質(zhì)量
開發(fā)人員的變動而產(chǎn)生較大的影響
形成文檔內(nèi)容
注釋 JSDoc：放在方法或函數(shù)或類聲明之前
業(yè)務(wù)邏輯: 比較復(fù)雜的業(yè)務(wù)邏輯不合適放在注釋里，需要多帶帶寫邏輯文檔
更新日志: 方便查找更新狀態(tài)、時間、開發(fā)人員
備注: 額外有用的信息
/**
* 函數(shù)功能描述
*
* @param arg {type} 變量描述
* @return {type} 返回值作用描述
*/
SPA
SPA優(yōu)點：
本地路由，由JS定義路由，根據(jù)路由渲染頁面，控制跳轉(zhuǎn)（最基本特點）
文件只會加載一次，最大限度重用文件，提升加載速度。
整個應(yīng)用只有一個入口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 開發(fā)模板: antd-admin | ant-design-pro
SSR 和 node中間層解決痛點：
使用SPA后，整個頁面的渲染基本上都由前端JS動態(tài)渲染，搜索引擎的爬取不到，SEO實現(xiàn) 麻煩
電商類應(yīng)用必須要使用。
解決思路:
服務(wù)器端渲染（SSR）：服務(wù)器端和前端公用同一個應(yīng)用，然后通過構(gòu)建工具及配置，確定哪些組件需要再服務(wù)器端渲染，那些組件需要再客戶端渲染。
node中間層：保留服務(wù)器端模板渲染的功能，但是由node程序來代替后端語言模板渲染，后端語言與node程序只做數(shù)據(jù)交互。
SSR
服務(wù)器端渲染，由框架與構(gòu)建工具配合，并依據(jù)一定的項目結(jié)構(gòu)和編碼方式，共同運行。
next.js: 服務(wù)器端渲染 react 組件，使用方法用Next.js快速上手React服務(wù)器渲染
nuxt.js: 服務(wù)器端渲染 vue 組件，使用方法nuxt.js
node 中間層
從NodeJS搭建中間層再談前后端分離
淘寶前后端分離實踐
node中間層做開發(fā)，難點如何讓前后端分離的兩個項目協(xié)同開發(fā)與調(diào)試:
一般web項目開發(fā)時有熱更新(Hot Reloading)與熱替換(Hot Replacing)功能
一般node項目開發(fā)時有 nodemon功能
能將兩者結(jié)合起來開發(fā)，不管改動web項目文件還是node項目文件，瀏覽器頁面都能夠自動刷新，就可以在本地調(diào)試node中間層的模板輸出。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/99670.html
摘要：如何構(gòu)建大型的前端項目搭建好項目的腳手架一般新開發(fā)一個項目時，我們會首先搭建好一個腳手架，然后才會開始寫代碼。組件化一般分為項目內(nèi)的組件化和項目外的組件化。 如何構(gòu)建大型的前端項目 1. 搭建好項目的腳手架 一般新開發(fā)一個項目時，我們會首先搭建好一個腳手架，然后才會開始寫代碼。一般腳手架都應(yīng)當有以下的幾個功能： 自動化構(gòu)建代碼，比如打包、壓縮、上傳等功能 本地開發(fā)與調(diào)試，并有熱替換與...
摘要：如何構(gòu)建大型的前端項目搭建好項目的腳手架一般新開發(fā)一個項目時，我們會首先搭建好一個腳手架，然后才會開始寫代碼。組件化一般分為項目內(nèi)的組件化和項目外的組件化。 如何構(gòu)建大型的前端項目 1. 搭建好項目的腳手架 一般新開發(fā)一個項目時，我們會首先搭建好一個腳手架，然后才會開始寫代碼。一般腳手架都應(yīng)當有以下的幾個功能： 自動化構(gòu)建代碼，比如打包、壓縮、上傳等功能 本地開發(fā)與調(diào)試，并有熱替換與...
摘要：從到再到搭建編寫構(gòu)建一個前端項目選擇現(xiàn)成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現(xiàn)成的項目模板自己搭建項目骨架。使用版本控制系統(tǒng)管理源代碼項目搭建好后，需要一個版本控制系統(tǒng)來管理源代碼。 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個前端項目 1. 選擇現(xiàn)成的項目模板還是自己搭建項目骨架 搭建一個前端項目的方式有兩種：選擇現(xiàn)成的項目模板、自己搭建項目骨架。 ...
摘要：從到再到搭建編寫構(gòu)建一個前端項目選擇現(xiàn)成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現(xiàn)成的項目模板自己搭建項目骨架。使用版本控制系統(tǒng)管理源代碼項目搭建好后，需要一個版本控制系統(tǒng)來管理源代碼。 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個前端項目 1. 選擇現(xiàn)成的項目模板還是自己搭建項目骨架 搭建一個前端項目的方式有兩種：選擇現(xiàn)成的項目模板、自己搭建項目骨架。 ...
摘要：從到再到搭建編寫構(gòu)建一個前端項目選擇現(xiàn)成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現(xiàn)成的項目模板自己搭建項目骨架。使用版本控制系統(tǒng)管理源代碼項目搭建好后，需要一個版本控制系統(tǒng)來管理源代碼。 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個前端項目 1. 選擇現(xiàn)成的項目模板還是自己搭建項目骨架 搭建一個前端項目的方式有兩種：選擇現(xiàn)成的項目模板、自己搭建項目骨架。 ...
摘要：前端準備前端了解過關(guān)了嗎前端基礎(chǔ)架構(gòu)和硬核介紹技術(shù)棧的選擇首先我們構(gòu)建前端架構(gòu)需要對前端生態(tài)圈有一切了解，并且最好帶有一定的技術(shù)前瞻性，好的技術(shù)架構(gòu)可能日后會方便的擴展，減少重構(gòu)的次數(shù)，即使重構(gòu)也不需要大動干戈，我通常選型技術(shù)棧會參考以下三 # 前端準備 ：前端了解過關(guān)了嗎？前端基礎(chǔ)架構(gòu)和硬核介紹 showImg(https://segmentfault.com/img/remote/...
閱讀 3053·2021-09-03 10:33
閱讀 1278·2019-08-30 15:53
閱讀 2627·2019-08-30 15:45
閱讀 3389·2019-08-30 14:11
閱讀 541·2019-08-30 13:55
閱讀 2590·2019-08-29 15:24
閱讀 1921·2019-08-26 18:26
閱讀 3573·2019-08-26 13:41
