整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
們可以使用以下的方式去渲染html
func main() {
router := gin.Default()
router.LoadHTMLGlob("templates/*")
//router.LoadHTMLFiles("templates/template1.html", "templates/template2.html")
router.GET("/index", func(c *gin.Context) {
c.HTML(http.StatusOK, "index.tmpl", gin.H{
"title": "Main website",
})
})
router.Run(":8080")
}在html中我們可以使用特殊的雙花括號(hào)來渲染title這個(gè)值
<html>
<h1>
{{ .title }}
</h1>
</html>
值得注意的是這種方式并不是gin特有的，而是golang特有的，它還有其他的模板語法。
{{$article := "hello"}}也可以給變量賦值
{{$article := .ArticleContent}}{{funcname .arg1 .arg2}}{{if .condition}}
{{end}}{{if .condition1}}
{{else if .contition2}}
{{end}}{{if not .condition}}
{{end}}{{if and .condition1 .condition2}}
{{end}}{{if or .condition1 .condition2}}
{{end}}{{if eq .var1 .var2}}
{{end}}{{if ne .var1 .var2}}
{{end}}(less than){{if lt .var1 .var2}}
{{end}}{{if le .var1 .var2}}
{{end}}{{if gt .var1 .var2}}
{{end}}{{if ge .var1 .var2}}
{{end}}{{range $i, $v := .slice}}
{{end}}{{template "navbar"}}使用vue2.0的過程，有時(shí)看API很難理解vue作者的思想，這促使我想要去深入了解vue底層的思想，了解完底層的一些思想，才能更好的用活框架，雖然網(wǎng)上已經(jīng)有很多源碼解析的文檔，但我覺得只有自己動(dòng)手了，才能更加深印象。
對于沒使用過Vue的，這里我們來說下Vue的使用步驟：
1. 編寫 頁面 模板
a. 直接在HTML標(biāo)簽中寫
b. 使用template
c. 使用單文件（<template />）
2. 創(chuàng)建Vue的實(shí)例
a. 在Vue的實(shí)例中(或者說在Vue 的構(gòu)造函數(shù)中)
b. 里面為我們提供了：data，methods，computed，watch，props….等屬性
3. 講Vue掛載到頁面中
a. 獲得模板，以及頁面中的數(shù)據(jù)
b. 將數(shù)據(jù)放到模板中
c. 將渲染好的HTML加載到頁面
重點(diǎn):Vue 利用 我們提供的數(shù)據(jù) 和 頁面中 模板 生成了 一個(gè)新的 HTML 標(biāo)簽 ( node 元素 ), 替換到了 頁面中 放置模板的位置.
這里我們分步來看一下代碼：
第一步：
注意：因?yàn)榻裉鞂ue源碼的初步學(xué)習(xí)，這里我們就直接寫出來了，在Vue項(xiàng)目中是需要方法獲取到的，我們在下面的課程中也會(huì)給大家詳細(xì)講解！ 記得來聽課哦！
第二部：
第三步：
前期為了方面同學(xué)們理解，對Vue的源碼很多地方進(jìn)行了簡化。我們剛才的模板是直接寫出來的，而Vue是通過Vue函數(shù)渲染出來的
來看一下代碼：
我們在Vue源碼中都是將渲染部分掛載到Vue的prototype上通過上面的代碼實(shí)現(xiàn)頁面的渲染，這里怕同學(xué)們誤會(huì)，所以借用了JGVue函數(shù)。
但我們平時(shí)在工作中對象里面如果還有對象
像上面這個(gè)一樣，我們要獲取到元素中的e的值，要通過obj.a.b.c.d.e才能獲取到，在Vue中我們又是怎么獲取到的呢？
我們來看一下：
我們通過createGetValueBuPath函數(shù)進(jìn)行遍歷獲取到當(dāng)前打點(diǎn)的元素的值，這里用到了函數(shù)柯里化，減少了我們的參數(shù)，這個(gè)算法對于工作時(shí)間短的同學(xué)可能有點(diǎn)難度，想學(xué)習(xí)的同學(xué)可以加一下老師的VX。
在之前使用jquery開發(fā)的年代，我們關(guān)注的往往是如何對節(jié)點(diǎn)進(jìn)行操作，所以我們開發(fā)組件時(shí)候，可能需要提供一些復(fù)雜的API接口文檔給用戶，這些組件的API往往非常復(fù)雜，使用者需要了解每個(gè)接口傳參定義，很細(xì)微的界面變化也需要通過調(diào)用API進(jìn)行操作。
在vuejs框架當(dāng)中這些問題的考慮就沒有那么重要，因?yàn)槲覀儗?shí)現(xiàn)了以數(shù)據(jù)的形式去驅(qū)動(dòng)頁面的變化，當(dāng)我們改變數(shù)據(jù)時(shí)，頁面就會(huì)自動(dòng)發(fā)生變化，所以用vuejs所實(shí)現(xiàn)的組件往往API非常簡潔，因?yàn)槲覀冎魂P(guān)注數(shù)據(jù)本身而不需要定義大量接口方法了。
Vue 源碼本身比較復(fù)雜, 對于沒有接觸過源碼的開發(fā)者來說入手比較困難. 這里我們準(zhǔn)備了手寫過程進(jìn)行過渡, 對 Vue 使用的探討進(jìn)行手寫部分簡約的邏輯, 這樣在后面直接分析源碼的時(shí)候更加容易掌握源碼的思想. Vue 的渲染采用的是以字符串為模板, 然后進(jìn)行編譯生成抽象語法樹, 最后得到虛擬 DOM 來進(jìn)行的頁面渲染. 我們一開始不進(jìn)行這么復(fù)雜的處理, 也方便進(jìn)行一個(gè)理解，雖然學(xué)習(xí)起來可能有些難度，但相信你堅(jiān)持下來的話，不管是對以后工資的提升以及對業(yè)務(wù)的需求都會(huì)有一個(gè)質(zhì)的提升。加油！！
當(dāng)我們訪問一個(gè)網(wǎng)站的時(shí)候，我們通常是在瀏覽器中輸入我們所需要訪問的網(wǎng)址，然后點(diǎn)擊就可以瀏覽我們所需要瀏覽的網(wǎng)站，但瀏覽器在我們輸入域名到返回給我們最后的結(jié)果也是經(jīng)歷了一番繁瑣的操作。
瀏覽器通常的步驟如下
1.瀏覽器的地址欄輸入U(xiǎn)RL并按下回車。
2.瀏覽器查找當(dāng)前URL是否存在緩存，并比較緩存是否過期。
3.DNS解析URL對應(yīng)的IP。
4.根據(jù)IP建立TCP連接（三次握手）。
5.HTTP發(fā)起請求。
6.服務(wù)器處理請求，瀏覽器接收HTTP響應(yīng)。
7.渲染頁面，構(gòu)建DOM樹。
8.關(guān)閉TCP連接（四次揮手）
接下來我們主要分析第七點(diǎn)，也就是瀏覽器如何根據(jù)獲取到的文件渲染出相應(yīng)的頁面，主要從HTML、CSS、JS這三點(diǎn)來分析
HTML稱為超文本標(biāo)簽語言，是一種標(biāo)識(shí)性的語言。普通的txt文檔在加了HTML標(biāo)簽之后，就變得具有語義了，瀏覽器能根據(jù)不同的語義進(jìn)行不同的解析。目前常見的HTML分為兩種，一種是HTML另一種是XHTML。相較于XHTML的”嚴(yán)格“，HTML以其相對較為”寬松“的特效獲得了較為廣泛的喜愛
瀏覽器獲取到HTML文擋的時(shí)候，會(huì)逐行解析文檔，并根據(jù)文檔內(nèi)容將文檔內(nèi)容轉(zhuǎn)化為DOM樹在在瀏覽器中渲染出來
<html> <body> <h1> Hello World </h1> </body> </html> 這是一個(gè)最基礎(chǔ)的HTML文檔，當(dāng)瀏覽器獲取到這個(gè)文件的時(shí)候，通過解析文字中的語義化標(biāo)簽，通過解析標(biāo)簽的<(Tag open state：開始標(biāo)簽)到>(Tag name state：結(jié)束標(biāo)簽)，屬性名稱和相應(yīng)值，直到文檔結(jié)束，并將其轉(zhuǎn)換為DOM樹并最終在瀏覽器中繪制出來。
DOM樹
瀏覽器遇到語義解釋性的CSS標(biāo)簽嵌入文件，那么此時(shí)IE的下載過程會(huì)啟用單獨(dú)連接進(jìn)行下載，并在下載后繼續(xù)進(jìn)行解析。并且只有在文件解析完成后才會(huì)在往下解析（瀏覽器阻塞），瀏覽器對CSS樣式的解析是從左到右的，比如.box .left p,會(huì)在頁面中找到所有的p標(biāo)簽，然后在p標(biāo)簽中找其父元素有.left類的p元素，再找祖父元素有.box的p標(biāo)簽
如下圖示，瀏覽器會(huì)按照從右向左的順序去讀取選擇器。先找到span然后順著往上找到class為“haha”的div再找到id為“molly”的元素。成功匹配到則加入結(jié)果集，如果直到根元素html都沒有匹配，則不再遍歷這條路徑，從下一個(gè)span開始重復(fù)這個(gè)過程
提升渲染效率的幾個(gè)點(diǎn) - 盡量少的去對標(biāo)簽進(jìn)行選擇，而是用class - 不要去用標(biāo)簽限定ID或者類選擇符 - 減少層級(jí)關(guān)系，使查詢效率更高 - 盡量少的去使用后代選擇器，降低選擇器的權(quán)重值 - 不要放空的class - 多用繼承屬性，可以通過繼承避免對屬性重復(fù)使用
瀏覽器遇到語義解釋性的JS標(biāo)簽嵌入文件，那么此時(shí)IE的下載過程會(huì)啟用單獨(dú)連接進(jìn)行下載，并在下載后繼續(xù)進(jìn)行解析。并且只有在JS文件解析完成并且加載完后才會(huì)繼續(xù)往下解析（瀏覽器阻塞）
在當(dāng)前作用域中，JavaScript代碼執(zhí)行之前，瀏覽器首先會(huì)默認(rèn)的把所有帶var和function聲明的變量進(jìn)行提前的聲明或者定義（主要指的是ES6之前，由于ES6引了let和const所以會(huì)存在不同）
JS代碼在逐行解析代碼的時(shí)候，變量賦值表達(dá)式是可以修改預(yù)解析的值。但如果有多個(gè)表達(dá)式對相同的變量多次賦值，那么除過函數(shù)聲明不能修改上次的賦值，變量賦值和函數(shù)表達(dá)式都可以修改這個(gè)變量的值
整個(gè)渲染的過程大致上可以概述為
- 用戶輸入網(wǎng)址，服務(wù)器返回html文檔
- 瀏覽器開始解析HTML文檔
- 瀏覽器解析文檔過程中解析到CSS或者JS標(biāo)簽嵌入文件，這時(shí)候?yàn)g覽器優(yōu)先解析標(biāo)簽嵌入文件，待標(biāo)簽嵌入文件解析完成并執(zhí)行完成后在繼續(xù)解析HTML文檔
- 瀏覽器將解析好的DOM進(jìn)行繪制，在瀏覽器中繪制出來
https://segmentfault.com/a/1190000016253407
https://www.jianshu.com/p/b41f1258c044
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
