整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
们可以使用以下的方式去渲染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中我们可以使用特殊的双花括号来渲染title这个值
<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的过程，有时看API很难理解vue作者的思想，这促使我想要去深入了解vue底层的思想，了解完底层的一些思想，才能更好的用活框架，虽然网上已经有很多源码解析的文档，但我觉得只有自己动手了，才能更加深印象。
对于没使用过Vue的，这里我们来说下Vue的使用步骤：
1. 编写 页面 模板
a. 直接在HTML标签中写
b. 使用template
c. 使用单文件（<template />）
2. 创建Vue的实例
a. 在Vue的实例中(或者说在Vue 的构造函数中)
b. 里面为我们提供了：data，methods，computed，watch，props….等属性
3. 讲Vue挂载到页面中
a. 获得模板，以及页面中的数据
b. 将数据放到模板中
c. 将渲染好的HTML加载到页面
重点:Vue 利用 我们提供的数据 和 页面中 模板 生成了 一个新的 HTML 标签 ( node 元素 ), 替换到了 页面中 放置模板的位置.
这里我们分步来看一下代码：
第一步：
注意：因为今天对Vue源码的初步学习，这里我们就直接写出来了，在Vue项目中是需要方法获取到的，我们在下面的课程中也会给大家详细讲解！ 记得来听课哦！
第二部：
第三步：
前期为了方面同学们理解，对Vue的源码很多地方进行了简化。我们刚才的模板是直接写出来的，而Vue是通过Vue函数渲染出来的
来看一下代码：
我们在Vue源码中都是将渲染部分挂载到Vue的prototype上通过上面的代码实现页面的渲染，这里怕同学们误会，所以借用了JGVue函数。
但我们平时在工作中对象里面如果还有对象
像上面这个一样，我们要获取到元素中的e的值，要通过obj.a.b.c.d.e才能获取到，在Vue中我们又是怎么获取到的呢？
我们来看一下：
我们通过createGetValueBuPath函数进行遍历获取到当前打点的元素的值，这里用到了函数柯里化，减少了我们的参数，这个算法对于工作时间短的同学可能有点难度，想学习的同学可以加一下老师的VX。
在之前使用jquery开发的年代，我们关注的往往是如何对节点进行操作，所以我们开发组件时候，可能需要提供一些复杂的API接口文档给用户，这些组件的API往往非常复杂，使用者需要了解每个接口传参定义，很细微的界面变化也需要通过调用API进行操作。
在vuejs框架当中这些问题的考虑就没有那么重要，因为我们实现了以数据的形式去驱动页面的变化，当我们改变数据时，页面就会自动发生变化，所以用vuejs所实现的组件往往API非常简洁，因为我们只关注数据本身而不需要定义大量接口方法了。
Vue 源码本身比较复杂, 对于没有接触过源码的开发者来说入手比较困难. 这里我们准备了手写过程进行过渡, 对 Vue 使用的探讨进行手写部分简约的逻辑, 这样在后面直接分析源码的时候更加容易掌握源码的思想. Vue 的渲染采用的是以字符串为模板, 然后进行编译生成抽象语法树, 最后得到虚拟 DOM 来进行的页面渲染. 我们一开始不进行这么复杂的处理, 也方便进行一个理解，虽然学习起来可能有些难度，但相信你坚持下来的话，不管是对以后工资的提升以及对业务的需求都会有一个质的提升。加油！！
当我们访问一个网站的时候，我们通常是在浏览器中输入我们所需要访问的网址，然后点击就可以浏览我们所需要浏览的网站，但浏览器在我们输入域名到返回给我们最后的结果也是经历了一番繁琐的操作。
浏览器通常的步骤如下
1.浏览器的地址栏输入URL并按下回车。
2.浏览器查找当前URL是否存在缓存，并比较缓存是否过期。
3.DNS解析URL对应的IP。
4.根据IP建立TCP连接（三次握手）。
5.HTTP发起请求。
6.服务器处理请求，浏览器接收HTTP响应。
7.渲染页面，构建DOM树。
8.关闭TCP连接（四次挥手）
接下来我们主要分析第七点，也就是浏览器如何根据获取到的文件渲染出相应的页面，主要从HTML、CSS、JS这三点来分析
HTML称为超文本标签语言，是一种标识性的语言。普通的txt文档在加了HTML标签之后，就变得具有语义了，浏览器能根据不同的语义进行不同的解析。目前常见的HTML分为两种，一种是HTML另一种是XHTML。相较于XHTML的”严格“，HTML以其相对较为”宽松“的特效获得了较为广泛的喜爱
浏览器获取到HTML文挡的时候，会逐行解析文档，并根据文档内容将文档内容转化为DOM树在在浏览器中渲染出来
<html> <body> <h1> Hello World </h1> </body> </html> 这是一个最基础的HTML文档，当浏览器获取到这个文件的时候，通过解析文字中的语义化标签，通过解析标签的<(Tag open state：开始标签)到>(Tag name state：结束标签)，属性名称和相应值，直到文档结束，并将其转换为DOM树并最终在浏览器中绘制出来。
DOM树
浏览器遇到语义解释性的CSS标签嵌入文件，那么此时IE的下载过程会启用单独连接进行下载，并在下载后继续进行解析。并且只有在文件解析完成后才会在往下解析（浏览器阻塞），浏览器对CSS样式的解析是从左到右的，比如.box .left p,会在页面中找到所有的p标签，然后在p标签中找其父元素有.left类的p元素，再找祖父元素有.box的p标签
如下图示，浏览器会按照从右向左的顺序去读取选择器。先找到span然后顺着往上找到class为“haha”的div再找到id为“molly”的元素。成功匹配到则加入结果集，如果直到根元素html都没有匹配，则不再遍历这条路径，从下一个span开始重复这个过程
提升渲染效率的几个点 - 尽量少的去对标签进行选择，而是用class - 不要去用标签限定ID或者类选择符 - 减少层级关系，使查询效率更高 - 尽量少的去使用后代选择器，降低选择器的权重值 - 不要放空的class - 多用继承属性，可以通过继承避免对属性重复使用
浏览器遇到语义解释性的JS标签嵌入文件，那么此时IE的下载过程会启用单独连接进行下载，并在下载后继续进行解析。并且只有在JS文件解析完成并且加载完后才会继续往下解析（浏览器阻塞）
在当前作用域中，JavaScript代码执行之前，浏览器首先会默认的把所有带var和function声明的变量进行提前的声明或者定义（主要指的是ES6之前，由于ES6引了let和const所以会存在不同）
JS代码在逐行解析代码的时候，变量赋值表达式是可以修改预解析的值。但如果有多个表达式对相同的变量多次赋值，那么除过函数声明不能修改上次的赋值，变量赋值和函数表达式都可以修改这个变量的值
整个渲染的过程大致上可以概述为
- 用户输入网址，服务器返回html文档
- 浏览器开始解析HTML文档
- 浏览器解析文档过程中解析到CSS或者JS标签嵌入文件，这时候浏览器优先解析标签嵌入文件，待标签嵌入文件解析完成并执行完成后在继续解析HTML文档
- 浏览器将解析好的DOM进行绘制，在浏览器中绘制出来
https://segmentfault.com/a/1190000016253407
https://www.jianshu.com/p/b41f1258c044
*请认真填写需求信息，我们会在24小时内与您取得联系。
