web前端必學功法之一：留言板

# web前端必學功法之一：留言板

案例效果：

![在這里插入圖片描述](https://img-blog.csdnimg.cn/81d380bed5294f54bdc41d63ec79214d.gif#pic_center)

```html

css部分

<style>

.container{

width: 600px;

}

.mes-board{

margin: 25px 0;

padding: 10px;

background-color: gray;

}

.mes-board li{

padding: 0.7em;

list-style: none;

}

.mes-board li + li {

border-top: 1px dashed #ffffff;

}

.mes-board h4{

display: inline;

margin-right: 10px;

font-weight: 400px;

color: #000000;

}

.mes-board small{

color: #999999;

float: right;

}

.mes-board div{

padding: 0.4em 0;

text-align: justify;

font-size: 12px;

margin-top: 10px;

}

</style>

html部分：

</div>

<li>

<h4>admin</h4>

<div>

EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEOOOOOO

PPPPPPPPPPPPPPPPPPPPPPPPPPPPPEEEEEEEEEEEEEEEEEEEEEEEEEEE

</div>

</li>

<li>

<h4>admin</h4>

<div>

EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEOOOOOO

PPPPPPPPPPPPPPPPPPPPPPPPPPPPPEEEEEEEEEEEEEEEEEEEEEEEEEEE

</div>

</li>

</div>

```

```javascript

<!--

留言板

實現思路：

1.獲取用戶姓名與留言內容

2.判斷值是否為空，如果為空，則提示信息

3.綁定提交按鈕的點擊事件

4.獲取姓名，留言內容以及當前系統時間，拼接成指定的html標簽

5.將標簽追加到留言表中

-->

// 發送留言

$("#sendBtn").click(function(){

//獲取用戶姓名

var userName=$("#userName").val();

//判斷非空

if(userName==null || userName.trim()==""){

$("#msg").html("用戶姓名不能為空！");

return;

}

//獲取留言內容

var content=$("#content").val();

//判斷非空

if(content.trim()==""){

$("#msg").html("請輸入留言內容！");

return;

}

//留言數據

var msg="<li><h4>"+userName+"</h4><small>"+formatDate()+"</small>";

msg +="<div>"+content+"</div></li>";

//將留言內容追加到留言板中

$("#msgBoard").prepend(msg);

//清空內容與提示信息

$("#userName").val("");

$("#content").val("");

$("msg").val("");

});

//格式化時間

function formatDate(){

//獲取系統當前時間

var date=new Date();

//獲取年月日時分秒

var str=date.getFullYear()+"-"+(parseInt(date.getMonth())+1)+"-"+date.getDate();

str +" "+ date.getHours +":"+ date.getMinutes()+":"+date.getSeconds();

return str;

}

</script>

文共1482字，預計學習時長6分鐘

圖源：papan01

2020最熱門的Javascript框架新鮮出爐啦。為什么要使用流行框架？其優點在于運行快效率高，方便省事易上手。

這六個JS框架，真的值得你好好學習。

一、Vue.js

圖源：modernweb

Vue.Js是開源框架，它以一些主要的JS框架為基礎，比如Angular和React。Vue.Js具備一系列有用的特性，多年來，Vue一直為許多單頁Web應用（SPA）和跨平臺應用提供簡單有效的解決方案。

使用Vue.js構建的頂級網站:

· Gitlab

訪客人數:2211萬

Gitlab是一個基于web的源代碼版本控制庫。它有多個會員選項，個人/組織可以根據自己的需求進行選擇。該應用是在前端使用Vue開發的。

圖源：unsplash

· Behance

訪客人數:4929萬人

Behance是平面設計師向世界展示其才華的而廣泛使用的網站之一。這里使用的Vue.JS是一種前端編程語言。

二、Next.Js

Next.Js是用開源框架編寫的JavaScript，主要用于開發高度可定制的基于web的應用程序。其創建者將其宣傳為一個零配置、單命令的React應用工具鏈。

圖源：soshace

Next.js的特性：

1.Next.Js讓用戶可以用JavaScript 和 React.Js來開發應用程序。用 Next.Js來創建應用程序非常簡單。

2.可以進行更小規模構建、更快的開發編譯，還有許多其他改進。

3.自動代碼拆分、基于文件系統的路徑選擇、熱代碼重新加載和通用呈現——頁面只呈現它們需要的庫和JavaScript，僅此而已。

該應用程序不是生成一個包含所有應用程序代碼的單一JavaScript文件，而是由Next.js在幾個不同的資源中自動分解。

三、Riot.Js

Riot.Js專注于為用戶提供最有效和最簡單的架構。Riot.Js的特性包括以下幾點：

圖源：jscrambler

1.Riot.Js使用戶能夠在頁面和web應用程序中應用自定義的HTML標簽，還可以重用這些標簽。

2.該架構高度關注微功能，使用戶可以在同一時間單獨處理不同的應用程序。

3.這個框架類似于polymer和react.js。然而，與這兩個框架相比，它更有組織性和緊湊性。

四、Aurelia

Aurelia堪稱現代最干凈的框架之一，符合理想的web標準。Aurelia因其能創建強大而完美的網站而被認為是下一代框架。

圖源：github

Aurelia的最佳特性包括：

1.Aurelia能與任何對象進行強有力的反應性結合。通過使用自適應技術，Aurelia選擇了最有效的方法來觀察模型中的每個屬性，并自動將用戶界面和狀態同步到最佳性能。

2.該框架是高度可擴展的。使用這個框架，可以輕松地添加或刪除其他工具(JQuery、React)、JS庫。

3.Aurelia是開源框架。這意味著開發者將從Aurelia社區獲得大量的幫助。

4.Aurelia是完全獨立的框架，具有許多有用的內置工具，如端到端功能。

五、WebRx

WebRx 是基于瀏覽器的模型-視圖-視圖-模型構建的JavaScript框架。它將編程的響應性和功能性結合在一起，為用戶提供了一個漂亮的用戶界面環境。

WebRx

WebRx的最佳性能：

1.該框架提供了演示性的雙向數據綁定，可自動更新基本數據存儲。

2.WebRx 提供了一種有效的收集處理方法，包括過濾投影、分頁和許多其他功能。

3.該框架提供了由不同消息總線提供的強大的組件間通信。這樣，用戶就更容易在一個或幾個應用程序之間建立通信了。

六、Angular

Angular是一個成熟的框架，但并不像React那樣靈活。該框架內置了一切，但許多開發人員不喜歡這一點。

圖源：medium

開發人員喜歡為了解決問題而探索各種工具和庫。但是Angular堅持己見，并沒有為開發人員提供其他框架那種靈活性。

這是一個強大的JavaScript框架，可以無縫地組織項目。一旦開始使用，它那令人難以置信的速度和多功能性真讓人著迷。

選擇一個滿足你的需求和興趣的框架，然后開始練習吧！

留言點贊關注

我們一起分享AI學習與發展的干貨

如轉載，請后臺留言，遵守轉載規范

個網站, 可大可小, 大到整個阿里巴巴, 小到你自己的博客, 留言板. 雖然所采用的技術不一樣, 規模不一樣, 但是都由一些執行相同作用的組件所構成的, 當然根據規模的不同, 要實現的功能的不同, 有一些組件并不一定是必須, 但是當一個項目從小到大的演變過程中, 需要加入的組件都是大致功能類似的. 下面我們就從最簡單的Web項目開始, 到隨著功能, 規模的遞增, 看看有那些組件需要加入, 和各自的作用.

1. 種子規模

這個規模的項目最好的實例就是個人博客, 留言板, 公司介紹網站等, 基本結構如下

種子規模項目結構

這是最簡單的模式, 基本上可以概括為請求-響應模式. 主要的組件是由Web框架和數據庫兩個部分組成, Web框架負責為開發者提供基礎的應用程序結構和功能: 1. 接收HTTP請求 2.渲染返回的HTML頁面, 數據庫則負責持久化數據: 比如留言的內容.

隨著使用人數的上升, 性能很快入不敷出, 你開始覺得訪問的時候速度不如原來快了. 但是你在用top命令查看系統開銷的時候會發現, 其實系統的CPU占用并不是很高. 原來這個時候大部分的時候CPU都在等帶數據庫查詢的結果, 而數據庫查詢結果很多時候是重復的, 比如當沒有人留言的時候, 返回的最新留言列表. 為了避免無謂的IO開銷, 我們需要用一個比數據庫快N倍的存儲設備來緩存查詢的結果, 這樣當我們發現查詢結果不會有變化的時候, 就能通過更快的存儲設備拿到結果, 比如內存就是用戶級應用程序能訪問的最快, 而且現在看來容量也夠大(將來會越來越大)的存儲設備了. 這個時候我們需要引入一個新的組件: 內存緩存

2. 發芽規模(開始擴展了)

引入緩存后, 項目的基本結構如下圖所示:

帶緩存的項目結構

目前最常用的內存緩存基本上就MemoryCache和Redis兩個了, MemoryCache就是個單存的內存緩存, 而Redis不光快, 還是個啥都能干的萬金油, 你可以將其視作為一個在線內存數據結構服務, 除了KV之外還提供了SET, List, Hash等多種數據結構, 功能太強我們后面還會提到詳細說.

緩存大體上有兩種使用的方式, 一種是輸出緩存, 另一種是數據緩存.

輸出緩存是作用在Web框架輸出端, 基本的作用過程是這樣子的.

輸出緩存執行邏輯

當讀取的頻率大于寫入或者更新的時候, 輸出緩存能夠很大程度上的提升性能, 因為大部分原本需要通過數據庫去獲取的數據直接通過內存獲得了, 而內存的速度是數據庫的N倍, 所以系統的容量能夠成倍的增長.

但是, 如果輸出的內容需要在數據的基礎上做一些處理, 比如返回了留言列表, 但是要根據和當前日期的比對顯示留言的時間, 最近的幾條顯示諸如: 剛剛, 1分鐘前, 半小時前... 等. 隨著時間的變動, 返回的留言沒變, 但是留言時間的顯示需要變化, 那么這個時候輸出緩存就無能為力了, 我們需要數據緩存來滿足需求.

數據緩存的執行邏輯如下圖所示:

數據緩存執行邏輯

但是這兩種緩存模式都是在項目中根據需要來使用, 大多數時候一個項目中兩種模式都會存在.在實際的項目中緩存并非只有自建一種選擇, 還有客戶端緩存和CDN之類的緩存形式, 我們在緩存的部分專門展開來詳細介紹.

隨著規模的增長, 功能的增加, 有的時候我們需要在項目中增加一些很耗時的操作, 比如上傳了視頻后需要壓縮視頻等操作, 會產生大量的IO等待, 又比如一些匯總查詢, 都是很耗時的操作, 這個時候我們就需要將這些操作放到別的進程去執行, 那么就又需要加入兩個新的組件: 消息總線和任務服務.

3.小苗規模

這個階段呢, 有一些需求會需要訪問慢IO, 或者產生高CPU運算的任務, 會嚴重影響系統的吞吐量. 這個時候我們需要充分的運用多核CPU的優勢, 將耗時的工作交給別的CPU去搞定, 所以需要一個進程管理器來管理一組進程來專門接收-執行這些任務, 而為了通知這些進程來獲取要執行任務的數據, 需要消息總線來負責在Web應用和進程管理器之間來傳遞消息.

加上這兩個組件后, 項目的結構變成了這樣子:

在這個階段, 我們已經可以精細的將不同開銷的任務解藕開, 將高開銷, 高耗時的邏輯從Web的主進程中剝離出來, 從而滿足進一步擴大系統吞吐量的目的.

而消息服務的引入進一步擴展了系統的彈性, 我們可以將不同的功能分解成獨立的服務, 各自通過消息服務整合起來, 從而實現了整個系統的微服務化.

在這個結構下, 一個開銷很大的請求的執行過程如下:

由任務服務處理的請求執行過程

在這個階段, 各個模塊已經實現了基本上的解藕, 無論是功能或者容量上的擴展都比較方便了, 所以接下來的目標就是針對一個特殊的需求添加必要的組件了

4. 小樹規模(生長枝條)

演變到這個階段, 系統的大體模型已經固定下來了, 生下來的是根據不同的需要添加一些特殊的組件了.結構如下:

4.1 全文檢索

在傳統的關系型數據庫中, 類似 Like '% 張三 %' 這類的查詢都是會丟失索引, 所以類似這樣的查詢只有通過全文檢索引擎來搜索才能有足夠的效率, 在互聯網領域用得最多的MySQL在全文檢索方面的功能太過于孱弱, 所以現在而今眼目下業內大多用Solr, Elasticsearch等全文檢索引擎來提供全文檢索服務. 如果你是PostgreSQL黨的話就會省心很多, 數據庫自帶的Gist, Gin, Brin這些類型的索引都能提供很好的全文檢索能力.

4.2 日志系統(收集+存儲+檢索)

當整個系統都微服務化后, 服務進程數量很多, 且會分布在不同的主機上, 這個時候再將日志寫到本地磁盤上, 采集整理日志會非常的痛苦, 所以需要統一的日志系統來處理系統日志.

一般的日志系統都是由前端采集器 - 采集對列 - 寫入器三個部分構成, 數據存儲基本上都由全文檢索引擎來搞定了, 這樣方便了后續對日志的處理.

4.3 LBS索引

在傳統的關系型數據庫中沒有Gist索引, 所以沒有辦法對經緯度等數據進行索引, 所以需要單獨的LBS索引服務. 當然對于PostgreSQL來說并沒有這個必要.

4.4 OLAP數據倉庫(數據分析)

我們常用的MySQL, PostgreSQL都是OLTP型的關系型數據庫, 也就是針對聯機事務處理優化模式工作的數據庫, 俗話說就是針對增刪改查等操作專門優化, 跑起來傻快傻快的, 但是對于要做匯總查詢之類的就速度上不行了. 如果要對數據進行專門的挖掘鉆取的話, 需要把數據存入專門對數據分析優化的OLAP類型的數據倉庫中. 術業有專攻, 這個領域不是強項所以簡略帶過, 后面有機會再詳細說

以上所有的服務我們在后面都有相應的主題來詳細描述, 這里就簡略帶過了.

5. 大樹規模(群集化, 超大規模)

在這個階段, 結構得到了充分的展開, 每一個組件充分的解藕, 就能夠根據具體的系統負載來針對特定的瓶頸來優化, 擴容, 升級. 這個時候并沒有一個固定的模式了, 不同的業務需求, 不同的數據類型都會造成在這個階段的需求是不一樣的, 結構也是不一樣的, 所以我們會單獨拿一個主題來詳細說明.

下一節主題: Web框架如何快速入門

to be continue...

在線咨詢

上一篇：第53期Java面試題：XML和HTML的區別、XM
下一篇：php寶塔搭建實戰一鍵生成表白頁面在線制作生成網站p

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

web前端必學功法之一：留言板

一、Vue.js

二、Next.Js

三、Riot.Js

四、Aurelia

五、WebRx

六、Angular

您的項目需求