web前端必學(xué)功法之一：留言板

# web前端必學(xué)功法之一：留言板

案例效果：

![在這里插入圖片描述](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

<!--

留言板

實(shí)現(xiàn)思路：

1.獲取用戶姓名與留言內(nèi)容

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

3.綁定提交按鈕的點(diǎn)擊事件

4.獲取姓名，留言內(nèi)容以及當(dāng)前系統(tǒng)時(shí)間，拼接成指定的html標(biāo)簽

5.將標(biāo)簽追加到留言表中

-->

// 發(fā)送留言

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

//獲取用戶姓名

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

//判斷非空

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

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

return;

}

//獲取留言內(nèi)容

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

//判斷非空

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

$("#msg").html("請(qǐng)輸入留言內(nèi)容！");

return;

}

//留言數(shù)據(jù)

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

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

//將留言內(nèi)容追加到留言板中

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

//清空內(nèi)容與提示信息

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

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

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

});

//格式化時(shí)間

function formatDate(){

//獲取系統(tǒng)當(dāng)前時(shí)間

var date=new Date();

//獲取年月日時(shí)分秒

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

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

return str;

}

</script>

文共1482字，預(yù)計(jì)學(xué)習(xí)時(shí)長(zhǎng)6分鐘

圖源：papan01

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

這六個(gè)JS框架，真的值得你好好學(xué)習(xí)。

一、Vue.js

圖源：modernweb

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

使用Vue.js構(gòu)建的頂級(jí)網(wǎng)站:

· Gitlab

訪客人數(shù):2211萬

Gitlab是一個(gè)基于web的源代碼版本控制庫(kù)。它有多個(gè)會(huì)員選項(xiàng)，個(gè)人/組織可以根據(jù)自己的需求進(jìn)行選擇。該應(yīng)用是在前端使用Vue開發(fā)的。

圖源：unsplash

· Behance

訪客人數(shù):4929萬人

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

二、Next.Js

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

圖源：soshace

Next.js的特性：

1.Next.Js讓用戶可以用JavaScript 和 React.Js來開發(fā)應(yīng)用程序。用 Next.Js來創(chuàng)建應(yīng)用程序非常簡(jiǎn)單。

2.可以進(jìn)行更小規(guī)模構(gòu)建、更快的開發(fā)編譯，還有許多其他改進(jìn)。

3.自動(dòng)代碼拆分、基于文件系統(tǒng)的路徑選擇、熱代碼重新加載和通用呈現(xiàn)——頁面只呈現(xiàn)它們需要的庫(kù)和JavaScript，僅此而已。

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

三、Riot.Js

Riot.Js專注于為用戶提供最有效和最簡(jiǎn)單的架構(gòu)。Riot.Js的特性包括以下幾點(diǎn)：

圖源：jscrambler

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

2.該架構(gòu)高度關(guān)注微功能，使用戶可以在同一時(shí)間單獨(dú)處理不同的應(yīng)用程序。

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

四、Aurelia

Aurelia堪稱現(xiàn)代最干凈的框架之一，符合理想的web標(biāo)準(zhǔn)。Aurelia因其能創(chuàng)建強(qiáng)大而完美的網(wǎng)站而被認(rèn)為是下一代框架。

圖源：github

Aurelia的最佳特性包括：

1.Aurelia能與任何對(duì)象進(jìn)行強(qiáng)有力的反應(yīng)性結(jié)合。通過使用自適應(yīng)技術(shù)，Aurelia選擇了最有效的方法來觀察模型中的每個(gè)屬性，并自動(dòng)將用戶界面和狀態(tài)同步到最佳性能。

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

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

4.Aurelia是完全獨(dú)立的框架，具有許多有用的內(nèi)置工具，如端到端功能。

五、WebRx

WebRx 是基于瀏覽器的模型-視圖-視圖-模型構(gòu)建的JavaScript框架。它將編程的響應(yīng)性和功能性結(jié)合在一起，為用戶提供了一個(gè)漂亮的用戶界面環(huán)境。

WebRx

WebRx的最佳性能：

1.該框架提供了演示性的雙向數(shù)據(jù)綁定，可自動(dòng)更新基本數(shù)據(jù)存儲(chǔ)。

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

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

六、Angular

Angular是一個(gè)成熟的框架，但并不像React那樣靈活。該框架內(nèi)置了一切，但許多開發(fā)人員不喜歡這一點(diǎn)。

圖源：medium

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

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

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

留言點(diǎn)贊關(guān)注

我們一起分享AI學(xué)習(xí)與發(fā)展的干貨

如轉(zhuǎn)載，請(qǐng)后臺(tái)留言，遵守轉(zhuǎn)載規(guī)范

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

1. 種子規(guī)模

這個(gè)規(guī)模的項(xiàng)目最好的實(shí)例就是個(gè)人博客, 留言板, 公司介紹網(wǎng)站等, 基本結(jié)構(gòu)如下

種子規(guī)模項(xiàng)目結(jié)構(gòu)

這是最簡(jiǎn)單的模式, 基本上可以概括為請(qǐng)求-響應(yīng) 模式. 主要的組件是由Web框架和數(shù)據(jù)庫(kù)兩個(gè)部分組成, Web框架負(fù)責(zé)為開發(fā)者提供基礎(chǔ)的應(yīng)用程序結(jié)構(gòu)和功能: 1. 接收HTTP請(qǐng)求 2.渲染返回的HTML頁面, 數(shù)據(jù)庫(kù)則負(fù)責(zé)持久化數(shù)據(jù): 比如留言的內(nèi)容.

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

2. 發(fā)芽規(guī)模(開始擴(kuò)展了)

引入緩存后, 項(xiàng)目的基本結(jié)構(gòu)如下圖所示:

帶緩存的項(xiàng)目結(jié)構(gòu)

目前最常用的內(nèi)存緩存基本上就MemoryCache和Redis兩個(gè)了, MemoryCache就是個(gè)單存的內(nèi)存緩存, 而Redis不光快, 還是個(gè)啥都能干的萬金油, 你可以將其視作為一個(gè)在線內(nèi)存數(shù)據(jù)結(jié)構(gòu)服務(wù), 除了KV之外還提供了SET, List, Hash等多種數(shù)據(jù)結(jié)構(gòu), 功能太強(qiáng)我們后面還會(huì)提到詳細(xì)說.

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

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

輸出緩存執(zhí)行邏輯

當(dāng)讀取的頻率大于寫入或者更新的時(shí)候, 輸出緩存能夠很大程度上的提升性能, 因?yàn)榇蟛糠衷拘枰ㄟ^數(shù)據(jù)庫(kù)去獲取的數(shù)據(jù)直接通過內(nèi)存獲得了, 而內(nèi)存的速度是數(shù)據(jù)庫(kù)的N倍, 所以系統(tǒng)的容量能夠成倍的增長(zhǎng).

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

數(shù)據(jù)緩存的執(zhí)行邏輯如下圖所示:

數(shù)據(jù)緩存執(zhí)行邏輯

但是這兩種緩存模式都是在項(xiàng)目中根據(jù)需要來使用, 大多數(shù)時(shí)候一個(gè)項(xiàng)目中兩種模式都會(huì)存在.在實(shí)際的項(xiàng)目中緩存并非只有自建一種選擇, 還有客戶端緩存和CDN之類的緩存形式, 我們?cè)诰彺娴牟糠謱ｉT展開來詳細(xì)介紹.

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

3.小苗規(guī)模

這個(gè)階段呢, 有一些需求會(huì)需要訪問慢IO, 或者產(chǎn)生高CPU運(yùn)算的任務(wù), 會(huì)嚴(yán)重影響系統(tǒng)的吞吐量. 這個(gè)時(shí)候我們需要充分的運(yùn)用多核CPU的優(yōu)勢(shì), 將耗時(shí)的工作交給別的CPU去搞定, 所以需要一個(gè)進(jìn)程管理器來管理一組進(jìn)程來專門接收-執(zhí)行這些任務(wù), 而為了通知這些進(jìn)程來獲取要執(zhí)行任務(wù)的數(shù)據(jù), 需要消息總線來負(fù)責(zé)在Web應(yīng)用和進(jìn)程管理器之間來傳遞消息.

加上這兩個(gè)組件后, 項(xiàng)目的結(jié)構(gòu)變成了這樣子:

在這個(gè)階段, 我們已經(jīng)可以精細(xì)的將不同開銷的任務(wù)解藕開, 將高開銷, 高耗時(shí)的邏輯從Web的主進(jìn)程中剝離出來, 從而滿足進(jìn)一步擴(kuò)大系統(tǒng)吞吐量的目的.

而消息服務(wù)的引入進(jìn)一步擴(kuò)展了系統(tǒng)的彈性, 我們可以將不同的功能分解成獨(dú)立的服務(wù), 各自通過消息服務(wù)整合起來, 從而實(shí)現(xiàn)了整個(gè)系統(tǒng)的微服務(wù)化.

在這個(gè)結(jié)構(gòu)下, 一個(gè)開銷很大的請(qǐng)求的執(zhí)行過程如下:

由任務(wù)服務(wù)處理的請(qǐng)求執(zhí)行過程

在這個(gè)階段, 各個(gè)模塊已經(jīng)實(shí)現(xiàn)了基本上的解藕, 無論是功能或者容量上的擴(kuò)展都比較方便了, 所以接下來的目標(biāo)就是針對(duì)一個(gè)特殊的需求添加必要的組件了

4. 小樹規(guī)模(生長(zhǎng)枝條)

演變到這個(gè)階段, 系統(tǒng)的大體模型已經(jīng)固定下來了, 生下來的是根據(jù)不同的需要添加一些特殊的組件了.結(jié)構(gòu)如下:

4.1 全文檢索

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

4.2 日志系統(tǒng)(收集+存儲(chǔ)+檢索)

當(dāng)整個(gè)系統(tǒng)都微服務(wù)化后, 服務(wù)進(jìn)程數(shù)量很多, 且會(huì)分布在不同的主機(jī)上, 這個(gè)時(shí)候再將日志寫到本地磁盤上, 采集整理日志會(huì)非常的痛苦, 所以需要統(tǒng)一的日志系統(tǒng)來處理系統(tǒng)日志.

一般的日志系統(tǒng)都是由前端采集器 - 采集對(duì)列 - 寫入器三個(gè)部分構(gòu)成, 數(shù)據(jù)存儲(chǔ)基本上都由全文檢索引擎來搞定了, 這樣方便了后續(xù)對(duì)日志的處理.

4.3 LBS索引

在傳統(tǒng)的關(guān)系型數(shù)據(jù)庫(kù)中沒有Gist索引, 所以沒有辦法對(duì)經(jīng)緯度等數(shù)據(jù)進(jìn)行索引, 所以需要單獨(dú)的LBS索引服務(wù). 當(dāng)然對(duì)于PostgreSQL來說并沒有這個(gè)必要.

4.4 OLAP數(shù)據(jù)倉(cāng)庫(kù)(數(shù)據(jù)分析)

我們常用的MySQL, PostgreSQL都是OLTP型的關(guān)系型數(shù)據(jù)庫(kù), 也就是針對(duì)聯(lián)機(jī)事務(wù)處理優(yōu)化模式工作的數(shù)據(jù)庫(kù), 俗話說就是針對(duì) 增刪改查等操作專門優(yōu)化, 跑起來傻快傻快的, 但是對(duì)于要做匯總查詢之類的就速度上不行了. 如果要對(duì)數(shù)據(jù)進(jìn)行專門的挖掘鉆取的話, 需要把數(shù)據(jù)存入專門對(duì)數(shù)據(jù)分析優(yōu)化的OLAP類型的數(shù)據(jù)倉(cāng)庫(kù)中. 術(shù)業(yè)有專攻, 這個(gè)領(lǐng)域不是強(qiáng)項(xiàng)所以簡(jiǎn)略帶過, 后面有機(jī)會(huì)再詳細(xì)說

以上所有的服務(wù)我們?cè)诤竺娑加邢鄳?yīng)的主題來詳細(xì)描述, 這里就簡(jiǎn)略帶過了.

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

在這個(gè)階段, 結(jié)構(gòu)得到了充分的展開, 每一個(gè)組件充分的解藕, 就能夠根據(jù)具體的系統(tǒng)負(fù)載來針對(duì)特定的瓶頸來優(yōu)化, 擴(kuò)容, 升級(jí). 這個(gè)時(shí)候并沒有一個(gè)固定的模式了, 不同的業(yè)務(wù)需求, 不同的數(shù)據(jù)類型都會(huì)造成在這個(gè)階段的需求是不一樣的, 結(jié)構(gòu)也是不一樣的, 所以我們會(huì)單獨(dú)拿一個(gè)主題來詳細(xì)說明.

下一節(jié)主題: Web框架如何快速入門

to be continue...

在線咨詢

上一篇：第53期Java面試題：XML和HTML的區(qū)別、XM
下一篇：php寶塔搭建實(shí)戰(zhàn)一鍵生成表白頁面在線制作生成網(wǎng)站p

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

web前端必學(xué)功法之一：留言板

一、Vue.js

二、Next.Js

三、Riot.Js

四、Aurelia

五、WebRx

六、Angular

您的項(xiàng)目需求