Vue.js 模板解析器原理
本文来自《深入浅出Vue.js》模板编译原理篇的第九章,主要讲述了如何将模板解析成AST,这一章的内容是全书最复杂且烧脑的章节。本文排版较为紧凑和图片是未经加工的原稿,真实纸质书的排版和图片会更加精致。
通过第8章的学习,我们知道解析器在整个模板编译中的位置。我们只有将模板解析成AST后,才能基于AST做优化或者生成代码字符串,那么解析器是如何将模板解析成AST的呢?
本章中,我们将详细介绍解析器内部的运行原理。
9.1 解析器的作用
解析器要实现的功能是将模板解析成AST。
例如:
<div >
<p > {{name}}p >
div >
复制代码
上面的代码是一个比较简单的模板,它转换成AST后的样子如下:
{
tag : "div"
type: 1 ,
staticRoot : false ,
static : false ,
plain : true ,
parent : undefined ,
attrsList : [],
attrsMap : {},
children : [
{
tag : "p"
type: 1 ,
staticRoot : false ,
static : false ,
plain : true ,
parent : {tag : "div" , ...},
attrsList : [],
attrsMap : {},
children : [{
type : 2 ,
text : "{{name}}" ,
static : false ,
expression : "_s(name)"
}]
}
]
}
复制代码
其实AST并不是什么很神奇的东西,不要被它的名字吓倒。它只是用JS中的对象来描述一个节点,一个对象代表一个节点,对象中的属性用来保存节点所需的各种数据。比如,parent
属性保存了父节点的描述对象,children
属性是一个数组,里面保存了一些子节点的描述对象。再比如,type
属性代表一个节点的类型等。当很多个独立的节点通过parent
属性和children
属性连在一起时,就变成了一个树,而这样一个用对象描述的节点树其实就是AST。
9.2 解析器内部运行原理
事实上,解析器内部也分了好几个子解析器,比如HTML解析器、文本解析器以及过滤器解析器,其中最主要的是HTML解析器。顾名思义,HTML解析器的作用是解析HTML,它在解析HTML的过程中会不断触发各种钩子函数。这些钩子函数包括开始标签钩子函数、结束标签钩子函数、文本钩子函数以及注释钩子函数。
伪代码如下:
parseHTML(template, {
start (tag, attrs, unary) {
},
end () {
},
chars (text) {
},
comment (text) {
}
})
复制代码
你可能不能很清晰地理解,下面我们举个简单的例子:
<div > <p > 我是Berwinp >div >
复制代码
当上面这个模板被HTML解析器解析时,所触发的钩子函数依次是:start
、start
、chars
、end
、end
。
也就是说,解析器其实是从前向后解析的。解析到
时,会触发一个标签开始的钩子函数
start
;然后解析到
时,又触发一次钩子函数start
;接着解析到我是Berwin
这行文本,此时触发了文本钩子函数chars
;然后解析到
,触发了标签结束的钩子函数
end
;接着继续解析到
,此时又触发一次标签结束的钩子函数
end
,解析结束。
因此,我们可以在钩子函数中构建AST节点。在start
钩子函数中构建元素类型的节点,在chars
钩子函数中构建文本类型的节点,在comment
钩子函数中构建注释类型的节点。
当HTML解析器不再触发钩子函数时,就代表所有模板都解析完毕,所有类型的节点都在钩子函数中构建完成,即AST构建完成。
我们发现,钩子函数start
有三个参数,分别是tag
、attrs
和unary
,它们分别代表标签名、标签的属性以及是否是自闭合标签。
而文本节点的钩子函数chars
和注释节点的钩子函数comment
都只有一个参数,只有text
。这是因为构建元素节点时需要知道标签名、属性和自闭合标识,而构建注释节点和文本节点时只需要知道文本即可。
什么是自闭合标签?举个简单的例子,input
标签就属于自闭合标签:
,而div
标签就不属于自闭合标签:
。
在start
钩子函数中,我们可以使用这三个参数来构建一个元素类型的AST节点,例如:
function createASTElement (tag, attrs, parent ) {
return {
type : 1 ,
tag,
attrsList : attrs,
parent,
children : []
}
}
parseHTML(template, {
start (tag, attrs, unary) {
let element = createASTElement(tag, attrs, currentParent)
}
})
复制代码
在上面的代码中,我们在钩子函数start
中构建了一个元素类型的AST节点。
如果是触发了文本的钩子函数,就使用参数中的文本构建一个文本类型的AST节点,例如:
parseHTML(template, {
chars (text) {
let element = {type : 3 , text}
}
})
复制代码
如果是注释,就构建一个注释类型的AST节点,例如:
parseHTML(template, {
comment (text) {
let element = {type : 3 , text, isComment : true }
}
})
复制代码
你会发现,9.1节中看到的AST是有层级关系的,一个AST节点具有父节点和子节点,但是9.2节中介绍的创建节点的方式,节点是被拉平的,没有层级关系。因此,我们需要一套逻辑来实现层级关系,让每一个AST节点都能找到它的父级。下面我们介绍一下如何构建AST层级关系。
构建AST层级关系其实非常简单,我们只需要维护一个栈(stack)即可,用栈来记录层级关系,这个层级关系也可以理解为DOM的深度。
HTML解析器在解析HTML时,是从前向后解析。每当遇到开始标签
,就触发钩子函数start
。每当遇到结束标签
,就会触发钩子函数end
。
基于HTML解析器的逻辑,我们可以在每次触发钩子函数start
时,把当前构建的节点推入栈中;每当触发钩子函数end
时,就从栈中弹出一个节点。
这样就可以保证每当触发钩子函数start
时,栈的最后一个节点就是当前正在构建的节点的父节点,如图9-1所示。
图9-1 使用栈记录DOM层级关系(
英文为代码体 )
下面我们用一个具体的例子来描述如何从0到1构建一个带层级关系的AST。
假设有这样一个模板:
<div >
<h1 > 我是Berwinh1 >
<p > 我今年23岁p >
div >
复制代码
上面这个模板被解析成AST的过程如图9-2所示。
图9-2构建AST的过程(下面的(1)~(12)需要改成图中那样黑底白字的 )
图9-2给出了构建AST的过程,图中的黑底白数字代表解析的步骤,具体如下。
(1) 模板的开始位置是div
的开始标签,于是会触发钩子函数start
。start
触发后,会先构建一个div
节点。此时发现栈是空的,这说明div
节点是根节点,因为它没有父节点。最后,将div
节点推入栈中,并将模板字符串中的div
开始标签从模板中截取掉。
(2) 这时模板的开始位置是一些空格,这些空格会触发文本节点的钩子函数,在钩子函数里会忽略这些空格。同时会在模板中将这些空格截取掉。
(3) 这时模板的开始位置是h1
的开始标签,于是会触发钩子函数start
。与前面流程一样,start
触发后,会先构建一个h1
节点。此时发现栈的最后一个节点是div
节点,这说明h1
节点的父节点是div
,于是将h1
添加到div
的子节点中,并且将h1
节点推入栈中,同时从模板中将h1
的开始标签截取掉。
(4) 这时模板的开始位置是一段文本,于是会触发钩子函数chars
。chars
触发后,会先构建一个文本节点,此时发现栈中的最后一个节点是h1
,这说明文本节点的父节点是h1
,于是将文本节点添加到h1
节点的子节点中。由于文本节点没有子节点,所以文本节点不会被推入栈中。最后,将文本从模板中截取掉。
(5) 这时模板的开始位置是h1
结束标签,于是会触发钩子函数end
。end
触发后,会把栈中最后一个节点弹出来。
(6) 与第(2)步一样,这时模板的开始位置是一些空格,这些空格会触发文本节点的钩子函数,在钩子函数里会忽略这些空格。同时会在模板中将这些空格截取掉。
(7) 这时模板的开始位置是p
开始标签,于是会触发钩子函数start
。start
触发后,会先构建一个p
节点。由于第(5)步已经从栈中弹出了一个节点,所以此时栈中的最后一个节点是div
,这说明p
节点的父节点是div
。于是将p
推入div
的子节点中,最后将p
推入到栈中,并将p
的开始标签从模板中截取掉。
(8) 这时模板的开始位置又是一段文本,于是会触发钩子函数chars
。当chars
触发后,会先构建一个文本节点,此时发现栈中的最后一个节点是p
节点,这说明文本节点的父节点是p
节点。于是将文本节点推入p
节点的子节点中,并将文本从模板中截取掉。
(9) 这时模板的开始位置是p
的结束标签,于是会触发钩子函数end
。当end
触发后,会从栈中弹出一个节点出来,也就是把p
标签从栈中弹出来,并将p
的结束标签从模板中截取掉。
(10) 与第(2)步和第(6)步一样,这时模板的开始位置是一些空格,这些空格会触发文本节点的钩子函数并且在钩子函数里会忽略这些空格。同时会在模板中将这些空格截取掉。
(11) 这时模板的开始位置是div
的结束标签,于是会触发钩子函数end
。其逻辑与之前一样,把栈中的最后一个节点弹出来,也就是把div
弹了出来,并将div
的结束标签从模板中截取掉。
(12)这时模板已经被截取空了,也就代表着HTML解析器已经运行完毕。这时我们会发现栈已经空了,但是我们得到了一个完整的带层级关系的AST语法树。这个AST中清晰写明了每个节点的父节点、子节点及其节点类型。
9.3 HTML解析器
通过前面的介绍,我们发现构建AST非常依赖HTML解析器所执行的钩子函数以及钩子函数中所提供的参数,你一定会非常好奇HTML解析器是如何解析模板的,接下来我们会详细介绍HTML解析器的运行原理。
9.3.1 运行原理
事实上,解析HTML模板的过程就是循环的过程,简单来说就是用HTML模板字符串来循环,每轮循环都从HTML模板中截取一小段字符串,然后重复以上过程,直到HTML模板被截成一个空字符串时结束循环,解析完毕,如图9-2所示。
在截取一小段字符串时,有可能截取到开始标签,也有可能截取到结束标签,又或者是文本或者注释,我们可以根据截取的字符串的类型来触发不同的钩子函数。
循环HTML模板的伪代码如下:
function parseHTML (html, options ) {
while (html) {
}
}
复制代码
为了方便理解,我们手动模拟HTML解析器的解析过程。例如,下面这样一个简单的HTML模板:
<div >
<p > {{name}}p >
div >
复制代码
它在被HTML解析器解析的过程如下。
最初的HTML模板:
``
复制代码
第一轮循环时,截取出一段字符串
,并且触发钩子函数
start
,截取后的结果为:
`
{{name}}
`
复制代码
第二轮循环时,截取出一段字符串:
`
`
复制代码
并且触发钩子函数chars
,截取后的结果为:
`{{name}}
`
复制代码
第三轮循环时,截取出一段字符串
,并且触发钩子函数start
,截取后的结果为:
`{{name}}
`
复制代码
第四轮循环时,截取出一段字符串{{name}}
,并且触发钩子函数chars
,截取后的结果为:
`
`
复制代码
第五轮循环时,截取出一段字符串
,并且触发钩子函数
end
,截取后的结果为:
`
`
复制代码
第六轮循环时,截取出一段字符串:
`
`
复制代码
并且触发钩子函数chars
,截取后的结果为:
`
`
复制代码
第七轮循环时,截取出一段字符串
,并且触发钩子函数
end
,截取后的结果为:
``
复制代码
解析完毕。
HTML解析器的全部逻辑都是在循环中执行,循环结束就代表解析结束。接下来,我们要讨论的重点是HTML解析器在循环中都干了些什么事。
你会发现HTML解析器可以很聪明地知道它在每一轮循环中应该截取哪些字符串,那么它是如何做到这一点的呢?
通过前面的例子,我们发现一个很有趣的事,那就是每一轮截取字符串时,都是在整个模板的开始位置截取。我们根据模板开始位置的片段类型,进行不同的截取操作。
例如,上面例子中的第一轮循环:如果是以开始标签开头的模板,就把开始标签截取掉。
再例如,上面例子中的第四轮循环:如果是以文本开始的模板,就把文本截取掉。
这些被截取的片段分很多种类型,示例如下。
。
HTML注释,例如
。
DOCTYPE,例如
。
条件注释,例如我是注释
。
文本,例如我是Berwin
。
通常,最常见的是开始标签、结束标签、文本以及注释。
9.3.2 截取开始标签
上一节中我们说过,每一轮循环都是从模板的最前面截取,所以只有模板以开始标签开头,才需要进行开始标签的截取操作。
那么,如何确定模板是不是以开始标签开头?
在HTML解析器中,想分辨出模板是否以开始标签开头并不难,我们需要先判断HTML模板是不是以<
开头。
如果HTML模板的第一个字符不是<
,那么它一定不是以开始标签开头的模板,所以不需要进行开始标签的截取操作。
如果HTML模板以<
开头,那么说明它至少是一个以标签开头的模板,但这个标签到底是什么类型的标签,还需要进一步确认。
如果模板以<
开头,那么它有可能是以开始标签开头的模板,同时它也有可能是以结束标签开头的模板,还有可能是注释等其他标签,因为这些类型的片段都以<
开头。那么,要进一步确定模板是不是以开始标签开头,还需要借助正则表达式来分辨模板的开始位置是否符合开始标签的特征。
那么,如何使用正则表达式来匹配模板以开始标签开头?我们看下面的代码:
const ncname = '[a-zA-Z_][\\w\\-\\.]*'
const qnameCapture = `((?:${ncname} \\:)?${ncname} )`
const startTagOpen = new RegExp (`^<${qnameCapture} ` )
'
' .match(startTagOpen)
"]
'
我是Berwin
'.match(startTagOpen)
'我是Berwin
' .match(startTagOpen)
复制代码
通过上面的例子可以看到,只有'
'
可以成功匹配,而以
开头的或者以文本开头的模板都无法成功匹配。
在9.2节中,我们介绍了当HTML解析器解析到标签开始时,会触发钩子函数start
,同时会给出三个参数,分别是标签名(tagName
)、属性(attrs
)以及自闭合标识(unary
)。
因此,在分辨出模板以开始标签开始之后,需要将标签名、属性以及自闭合标识解析出来。
在分辨模板是否以开始标签开始时,就可以得到标签名,而属性和自闭合标识则需要进一步解析。
当完成上面的解析后,我们可以得到这样一个数据结构:
const start = '
' .match(startTagOpen)
if (start) {
const match = {
tagName : start[1 ],
attrs : []
}
}
复制代码
这里有一个细节很重要:在前面的例子中,我们匹配到的开始标签并不全。例如:
const ncname = '[a-zA-Z_][\\w\\-\\.]*'
const qnameCapture = `((?:${ncname} \\:)?${ncname} )`
const startTagOpen = new RegExp (`^<${qnameCapture} ` )
'
' .match(startTagOpen)
'
' .match(startTagOpen)
'
' .match(startTagOpen)
复制代码
可以看出,上面这个正则表达式虽然可以分辨出模板是否以开始标签开头,但是它的匹配规则并不是匹配整个开始标签,而是开始标签的一小部分。
事实上,开始标签被拆分成三个小部分,分别是标签名、属性和结尾,如图9-3所示。
图9-3 开始标签被拆分成三个小部分(
代码用代码体 )
通过“标签名”这一段字符,就可以分辨出模板是否以开始标签开头,此后要想得到属性和自闭合标识,则需要进一步解析。
1. 解析标签属性
在分辨模板是否以开始标签开头时,会将开始标签中的标签名这一小部分截取掉,因此在解析标签属性时,我们得到的模板是下面伪代码中的样子:
' class="box">div >'
复制代码
通常,标签属性是可选的,一个标签的属性有可能存在,也有可能不存在,所以需要判断标签是否存在属性,如果存在,对它进行截取。
下面的伪代码展示了如何解析开始标签中的属性,但是它只能解析一个属性:
const attribute = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/
let html = ' class="box">'
let attr = html.match(attribute)
html = html.substring(attr[0 ].length)
console .log(attr)
复制代码
如果标签上有很多属性,那么上面的处理方式就不足以支撑解析任务的正常运行。例如下面的代码:
const attribute = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/
let html = ' class="box" id="el">'
let attr = html.match(attribute)
html = html.substring(attr[0 ].length)
console .log(attr)
复制代码
可以看到,这里只解析出了class
属性,而id
属性没有解析出来。
此时剩余的HTML模板是这样的:
' id="el">div >'
复制代码
所以属性也可以分成多个小部分,一小部分一小部分去解析与截取。
解决这个问题时,我们只需要每解析一个属性就截取一个属性。如果截取完后,剩下的HTML模板依然符合标签属性的正则表达式,那么说明还有剩余的属性需要处理,此时就重复执行前面的流程,直到剩余的模板不存在属性,也就是剩余的模板不存在符合正则表达式所预设的规则。
例如:
const startTagClose = /^\s*(\/?)>/
const attribute = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/
let html = ' class="box" id="el">'
let end, attr
const match = {tagName : 'div' , attrs : []}
while (!(end = html.match(startTagClose)) && (attr = html.match(attribute))) {
html = html.substring(attr[0 ].length)
match.attrs.push(attr)
}
复制代码
上面这段代码的意思是,如果剩余HTML模板不符合开始标签结尾部分的特征,并且符合标签属性的特征,那么进入到循环中进行解析与截取操作。
通过match
方法解析出的结果为:
{
tagName : 'div' ,
attrs : [
[' class="box"' , 'class' , '=' , 'box' , null , null ],
[' id="el"' , 'id' ,'=' , 'el' , null , null ]
]
}
复制代码
可以看到,标签中的两个属性都已经解析好并且保存在了attrs
中。
此时剩余模板是下面的样子:
">"
复制代码
我们将属性解析后的模板与解析之前的模板进行对比:
' class="box" id="el">'
'>'
{
tagName : 'div' ,
attrs : []
}
{
tagName : 'div' ,
attrs : [
[' class="box"' , 'class' , '=' , 'box' , null , null ],
[' id="el"' , 'id' ,'=' , 'el' , null , null ]
]
}
复制代码
可以看到,标签上的所有属性都已经被成功解析出来,并保存在attrs
属性中。
2. 解析自闭合标识
如果我们接着上面的例子继续解析的话,目前剩余的模板是下面这样的:
'>'
复制代码
开始标签中结尾部分解析的主要目的是解析出当前这个标签是否是自闭合标签。
举个例子:
<div > div >
复制代码
这样的div
标签就不是自闭合标签,而下面这样的input
标签就属于自闭合标签:
<input type ="text" />
复制代码
自闭合标签是没有子节点的,所以前文中我们提到构建AST层级时,需要维护一个栈,而一个节点是否需要推入到栈中,可以使用这个自闭合标识来判断。
那么,如何解析开始标签中的结尾部分呢?看下面这段代码:
function parseStartTagEnd (html ) {
const startTagClose = /^\s*(\/?)>/
const end = html.match(startTagClose)
const match = {}
if (end) {
match.unarySlash = end[1 ]
html = html.substring(end[0 ].length)
return match
}
}
console .log(parseStartTagEnd('>' ))
console .log(parseStartTagEnd('/>
' ))
复制代码
这段代码可以正确解析出开始标签是否是自闭合标签。
从代码中打印出来的结果可以看到,自闭合标签解析后的unarySlash
属性为/
,而非自闭合标签为空字符串。
3. 实现源码
前面解析开始标签时,我们将其拆解成了三个部分,分别是标签名、属性和结尾。我相信你已经对开始标签的解析有了一个清晰的认识,接下来看一下Vue.js中真实的代码是什么样的:
const ncname = '[a-zA-Z_][\\w\\-\\.]*'
const qnameCapture = `((?:${ncname} \\:)?${ncname} )`
const startTagOpen = new RegExp (`^<${qnameCapture} ` )
const startTagClose = /^\s*(\/?)>/
function advance (n ) {
html = html.substring(n)
}
function parseStartTag ( ) {
const start = html.match(startTagOpen)
if (start) {
const match = {
tagName : start[1 ],
attrs : []
}
advance(start[0 ].length)
let end, attr
while (!(end = html.match(startTagClose)) && (attr = html.match(attribute))) {
advance(attr[0 ].length)
match.attrs.push(attr)
}
if (end) {
match.unarySlash = end[1 ]
advance(end[0 ].length)
return match
}
}
}
复制代码
上面的代码是Vue.js中解析开始标签的源码,这段代码中的html
变量是HTML模板。
调用parseStartTag
就可以将剩余模板开始部分的开始标签解析出来。如果剩余HTML模板的开始部分不符合开始标签的正则表达式规则,那么调用parseStartTag
就会返回undefined
。因此,判断剩余模板是否符合开始标签的规则,只需要调用parseStartTag
即可。如果调用它后得到了解析结果,那么说明剩余模板的开始部分符合开始标签的规则,此时将解析出来的结果取出来并调用钩子函数start
即可:
const startTagMatch = parseStartTag()
if (startTagMatch) {
handleStartTag(startTagMatch)
continue
}
复制代码
前面我们说过,所有解析操作都运行在循环中,所以continue
的意思是这一轮的解析工作已经完成,可以进行下一轮解析工作。
从代码中可以看出,如果调用parseStartTag
之后有返回值,那么会进行开始标签的处理,其处理逻辑主要在handleStartTag
中。这个函数的主要目的就是将tagName
、attrs
和unary
等数据取出来,然后调用钩子函数将这些数据放到参数中。
9.3.3 截取结束标签
结束标签的截取要比开始标签简单得多,因为它不需要解析什么,只需要分辨出当前是否已经截取到结束标签,如果是,那么触发钩子函数就可以了。
那么,如何分辨模板已经截取到结束标签了呢?其道理其实和开始标签的截取相同。
如果HTML模板的第一个字符不是<
,那么一定不是结束标签。只有HTML模板的第一个字符是<
时,我们才需要进一步确认它到底是不是结束标签。
进一步确认时,我们只需要判断剩余HTML模板的开始位置是否符合正则表达式中定义的规则即可:
const ncname = '[a-zA-Z_][\\w\\-\\.]*'
const qnameCapture = `((?:${ncname} \\:)?${ncname} )`
const endTag = new RegExp (`^<\\/${qnameCapture} [^>]*>` )
const endTagMatch = '' .match(endTag)
const endTagMatch2 = ''.match(endTag)
console .log(endTagMatch)
", "div", index: 0, input: ""]
console .log(endTagMatch2)
复制代码
上面代码可以分辨出剩余模板是否是结束标签。当分辨出结束标签后,需要做两件事,一件事是截取模板,另一件事是触发钩子函数。而Vue.js中相关源码被精简后如下:
const endTagMatch = html.match(endTag)
if (endTagMatch) {
html = html.substring(endTagMatch[0 ].length)
options.end(endTagMatch[1 ])
continue
}
复制代码
可以看出,先对模板进行截取,然后触发钩子函数。
9.3.4 截取注释
分辨模板是否已经截取到注释的原理与开始标签和结束标签相同,先判断剩余HTML模板的第一个字符是不是<
,如果是,再用正则表达式来进一步匹配:
const comment = /^' )
if (commentEnd >= 0 ) {
if (options.shouldKeepComment) {
options.comment(html.substring(4 , commentEnd))
}
html = html.substring(commentEnd + 3 )
continue
}
}
复制代码
在上面的代码中,我们使用正则表达式来判断剩余的模板是否符合注释的规则,如果符合,就将这段注释文本截取出来。
这里有一个有意思的地方,那就是注释的钩子函数可以通过选项来配置,只有options.shouldKeepComment
为真时,才会触发钩子函数,否则只截取模板,不触发钩子函数。
9.3.5 截取条件注释
条件注释不需要触发钩子函数,我们只需要把它截取掉就行了。
截取条件注释的原理与截取注释非常相似,如果模板的第一个字符是<
,并且符合我们事先用正则表达式定义好的规则,就说明需要进行条件注释的截取操作。
在下面的代码中,我们通过indexOf
找到条件注释结束位置的下标,然后将结束位置前的字符都截取掉:
const conditionalComment = /^
if (conditionalComment.test(html)) {
const conditionalEnd = html.indexOf(']>' )
if (conditionalEnd >= 0 ) {
html = html.substring(conditionalEnd + 2 )
continue
}
}
复制代码
我们来举个例子:
const conditionalComment = /^
let html = ' '
if (conditionalComment.test(html)) {
const conditionalEnd = html.indexOf(']>' )
if (conditionalEnd >= 0 ) {
html = html.substring(conditionalEnd + 2 )
}
}
console .log(html)
复制代码
从打印结果中可以看到,HTML中的条件注释部分截取掉了。
通过这个逻辑可以发现,在Vue.js中条件注释其实没有用,写了也会被截取掉,通俗一点说就是写了也白写。
9.3.6 截取DOCTYPE
DOCTYPE
与条件注释相同,都是不需要触发钩子函数的,只需要将匹配到的这一段字符截取掉即可。下面的代码将DOCTYPE
这段字符匹配出来后,根据它的length
属性来决定要截取多长的字符串:
const doctype = /^]+>/i
const doctypeMatch = html.match(doctype)
if (doctypeMatch) {
html = html.substring(doctypeMatch[0 ].length)
continue
}
复制代码
示例如下:
const doctype = /^]+>/i
let html = ''
const doctypeMatch = html.match(doctype)
if (doctypeMatch) {
html = html.substring(doctypeMatch[0 ].length)
}
console .log(html)
复制代码
从打印结果可以看到,HTML中的DOCTYPE
被成功截取掉了。
9.3.7 截取文本
若想分辨在本轮循环中HTML模板是否已经截取到文本,其实很简单,我们甚至不需要使用正则表达式。
在前面的其他标签类型中,我们都会判断剩余HTML模板的第一个字符是否是<
,如果是,再进一步确认到底是哪种类型。这是因为以<
开头的标签类型太多了,如开始标签、结束标签和注释等。然而文本只有一种,如果HTML模板的第一个字符不是<
,那么它一定是文本了。
例如:
我是文本div >
复制代码
上面这段HTML模板并不是以<
开头的,所以可以断定它是以文本开头的。
那么,如何从模板中将文本解析出来呢?我们只需要找到下一个<
在什么位置,这之前的所有字符都属于文本,如图9-4所示。
图9-4 尖括号前面的字符都属于文本
在代码中可以这样实现:
while (html) {
let text
let textEnd = html.indexOf('<' )
if (textEnd >= 0 ) {
text = html.substring(0 , textEnd)
html = html.substring(textEnd)
}
if (textEnd < 0 ) {
text = html
html = ''
}
if (options.chars && text) {
options.chars(text)
}
}
复制代码
上面的代码共有三部分逻辑。
第一部分是截取文本,这在前面介绍过了。<
之前的所有字符都是文本,直接使用html.substring
从模板的最开始位置截取到<
之前的位置,就可以将文本截取出来。
第二部分是一个条件:如果在整个模板中都找不到<
,那么说明整个模板全是文本。
第三部分是触发钩子函数并将截取出来的文本放到参数中。
关于文本,还有一个特殊情况需要处理:如果<
是文本的一部分,该如何处理?
举个例子:
1<2
复制代码
在上面这样的模板中,如果只截取第一个<
前面的字符,最后被截取出来的将只有1,而不能把所有文本都截取出来。
那么,该如何解决这个问题呢?
有一个思路是,如果将<
前面的字符截取完之后,剩余的模板不符合任何需要被解析的片段的类型,就说明这个<
是文本的一部分。
什么是需要被解析的片段的类型?在9.3.1节中,我们说过HTML解析器是一段一段截取模板的,而被截取的每一段都符合某种类型,这些类型包括开始标签、结束标签和注释等。
说的再具体一点,那就是上面这段代码中的1被截取完之后,剩余模板是下面的样子:
<2
复制代码
<2
符合开始标签的特征么?不符合。
<2
符合结束标签的特征么?不符合。
<2
符合注释的特征么?不符合。
当剩余的模板什么都不符合时,就说明<
属于文本的一部分。
当判断出<
是属于文本的一部分后,我们需要做的事情是找到下一个<
并将其前面的文本截取出来加到前面截取了一半的文本后面。
这里还用上面的例子,第二个<
之前的字符是<2
,那么把<2
截取出来后,追加到上一次截取出来的1
的后面,此时的结果是:
1<2
复制代码
截取后剩余的模板是:
div >
复制代码
如果剩余的模板依然不符合任何被解析的类型,那么重复此过程。直到所有文本都解析完。
说完了思路,我们看一下具体的实现,伪代码如下:
while (html) {
let text, rest, next
let textEnd = html.indexOf('<' )
if (textEnd >= 0 ) {
rest = html.slice(textEnd)
while (
!endTag.test(rest) &&
!startTagOpen.test(rest) &&
!comment.test(rest) &&
!conditionalComment.test(rest)
) {
next = rest.indexOf('<' , 1 )
if (next < 0 ) break
textEnd += next
rest = html.slice(textEnd)
}
text = html.substring(0 , textEnd)
html = html.substring(textEnd)
}
if (textEnd < 0 ) {
text = html
html = ''
}
if (options.chars && text) {
options.chars(text)
}
}
复制代码
在代码中,我们通过while
来解决这个问题(注意是里面的while
)。如果剩余的模板不符合任何被解析的类型,那么重复解析文本,直到剩余模板符合被解析的类型为止。
在上面的代码中,endTag
、startTagOpen
、comment
和conditionalComment
都是正则表达式,分别匹配结束标签、开始标签、注释和条件注释。
在Vue.js源码中,截取文本的逻辑和其他的实现思路一致。
9.3.8 纯文本内容元素的处理
什么是纯文本内容元素呢?script
、style
和textarea
这三种元素叫作纯文本内容元素。解析它们的时候,会把这三种标签内包含的所有内容都当作文本处理。那么,具体该如何处理呢?
前面介绍开始标签、结束标签、文本、注释的截取时,其实都是默认当前需要截取的元素的父级元素不是纯文本内容元素 。事实上,如果要截取元素的父级元素是纯文本内容元素的话,处理逻辑将完全不一样。
事实上,在while
循环中,最外层的判断条件就是父级元素是不是纯文本内容元素。例如下面的伪代码:
while (html) {
if (!lastTag || !isPlainTextElement(lastTag)) {
} else {
}
}
复制代码
在上面的代码中,lastTag
代表父元素。可以看到,在while
中,首先进行判断,如果父元素不存在或者不是纯文本内容元素,那么进行正常的处理逻辑,也就是前面介绍的逻辑。
而当父元素是script
这种纯文本内容元素时,会进入到else
这个语句里面。由于纯文本内容元素都被视作文本处理,所以我们的处理逻辑就变得很简单,只需要把这些文本截取出来并触发钩子函数chars
,然后再将结束标签截取出来并触发钩子函数end
。
也就是说,如果父标签是纯文本内容元素,那么本轮循环会一次性将这个父标签给处理完毕。
伪代码如下:
while (html) {
if (!lastTag || !isPlainTextElement(lastTag)) {
} else {
const stackedTag = lastTag.toLowerCase()
const reStackedTag = reCache[stackedTag] || (reCache[stackedTag] = new RegExp ('([\\s\\S]*?)( + stackedTag + '[^>]*>)' , 'i' ))
const rest = html.replace(reStackedTag, function (all, text ) {
if (options.chars) {
options.chars(text)
}
return ''
})
html = rest
options.end(stackedTag)
}
}
复制代码
上面代码中的正则表达式可以匹配结束标签前包括结束标签自身在内的所有文本。
我们可以给replace
方法的第二个参数传递一个函数。在这个函数中,我们得到了参数text
(代表结束标签前的所有内容),触发了钩子函数chars
并把text
放到钩子函数的参数中传出去。最后,返回了一个空字符串,代表将匹配到的内容都截掉了。注意,这里的截掉会将内容和结束标签一起截取掉。
最后,调用钩子函数end
并将标签名放到参数中传出去,代表本轮循环中的所有逻辑都已处理完毕。
假如我们现在有这样一个模板:
<div id ="el" >
<script > console .log(1 )script >
div >
复制代码
当解析到script
中的内容时,模板是下面的样子:
console.log(1)script >
div >
复制代码
此时父元素为script
,所以会进入到else
中的逻辑进行处理。在其处理过程中,会触发钩子函数chars
和end
。
钩子函数chars
的参数为script
中的所有内容,本例中大概是下面的样子:
chars('console.log(1)' )
复制代码
钩子函数end
的参数为标签名,本例中是script
。
处理后的剩余模板如下:
div >
复制代码
9.3.9 使用栈维护DOM层级
通过前面几节的介绍,特别是9.3.8节中的介绍,你一定会感到很奇怪,如何知道父元素是谁?
在前面几节中,我们并没有介绍HTML解析器内部其实也有一个栈来维护DOM层级关系,其逻辑与9.2.1节相同:就是每解析到开始标签,就向栈中推进去一个;每解析到标签结束,就弹出来一个。因此,想取到父元素并不难,只需要拿到栈中的最后一项即可。
同时,HTML解析器中的栈还有另一个作用,它可以检测出HTML标签是否正确闭合。例如:
<div > <p > div >
复制代码
在上面的代码中,p
标签忘记写结束标签,那么当HTML解析器解析到div
的结束标签时,栈顶的元素却是p
标签。这个时候从栈顶向栈底循环找到div
标签,在找到div
标签之前遇到的所有其他标签都是忘记了闭合的标签,而Vue.js会在非生产环境下在控制台打印警告提示。
关于使用栈来维护DOM层级关系的具体实现思路,9.2.1节已经详细介绍过,这里不再重复介绍。
9.3.10 整体逻辑
前面我们把开始标签、结束标签、注释、文本、纯文本内容元素等的截取方式拆分开,单独进行了详细介绍。本节中,我们就来介绍如何将这些解析方式组装起来完成HTML解析器的功能。
首先,HTML解析器是一个函数。就像9.2节介绍的那样,HTML解析器最终的目的是实现这样的功能:
parseHTML(template, {
start (tag, attrs, unary) {
},
end () {
},
chars (text) {
},
comment (text) {
}
})
复制代码
所以HTML解析器在实现上肯定是一个函数,它有两个参数——模板和选项:
export function parseHTML (html, options ) {
}
复制代码
我们的模板是一小段一小段去截取与解析的,所以需要一个循环来不断截取,直到全部截取完毕:
export function parseHTML (html, options ) {
while (html) {
}
}
复制代码
在循环中,首先要判断父元素是不是纯文本内容元素,因为不同类型父节点的解析方式将完全不同:
export function parseHTML (html, options ) {
while (html) {
if (!lastTag || !isPlainTextElement(lastTag)) {
} else {
}
}
}
复制代码
在上面的代码中,我们发现这里已经把整体逻辑分成了两部分,一部分是父标签是正常标签的逻辑,另一部分是父标签是script
、style
、textarea
这种纯文本内容元素的逻辑。
如果父标签为正常的元素,那么有几种情况需要分别处理,比如需要分辨出当前要解析的一小段模板到底是什么类型。是开始标签?还是结束标签?又或者是文本?
我们把所有需要处理的情况都列出来,有下面几种情况:
文本
注释
条件注释
DOCTYPE
结束标签
开始标签
我们会发现,在这些需要处理的类型中,除了文本之外,其他都是以标签形式存在的,而标签是以<
开头的。
所以逻辑就很清晰了,我们先根据<
来判断需要解析的字符是文本还是其他的:
export function parseHTML (html, options ) {
while (html) {
if (!lastTag || !isPlainTextElement(lastTag)) {
let textEnd = html.indexOf('<' )
if (textEnd === 0 ) {
}
let text, rest, next
if (textEnd >= 0 ) {
}
if (textEnd < 0 ) {
text = html
html = ''
}
if (options.chars && text) {
options.chars(text)
}
} else {
}
}
}
复制代码
在上面的代码中,我们可以通过<
来分辨是否需要进行文本解析。关于文本解析的内容,详见9.3.7节。
如果通过<
分辨出即将解析的这一小部分字符不是文本而是标签类,那么标签类有那么多类型,我们需要进一步分辨具体是哪种类型:
export function parseHTML (html, options ) {
while (html) {
if (!lastTag || !isPlainTextElement(lastTag)) {
let textEnd = html.indexOf('<' )
if (textEnd === 0 ) {
if (comment.test(html)) {
continue
}
if (conditionalComment.test(html)) {
continue
}
const doctypeMatch = html.match(doctype)
if (doctypeMatch) {
continue
}
const endTagMatch = html.match(endTag)
if (endTagMatch) {
continue
}
const startTagMatch = parseStartTag()
if (startTagMatch) {
continue
}
}
let text, rest, next
if (textEnd >= 0 ) {
}
if (textEnd < 0 ) {
text = html
html = ''
}
if (options.chars && text) {
options.chars(text)
}
} else {
}
}
}
复制代码
关于不同类型的具体处理方式,前面已经详细介绍过,这里不再重复。
9.4 文本解析器
文本解析器的作用是解析文本。你可能会觉得很奇怪,文本不是在HTML解析器中被解析出来了么?准确地说,文本解析器是对HTML解析器解析出来的文本进行二次加工。为什么要进行二次加工?
文本其实分两种类型,一种是纯文本,另一种是带变量的文本。例如下面这样的文本是纯文本:
Hello Berwin
复制代码
而下面这样的是带变量的文本:
Hello {{name}}
复制代码
在Vue.js模板中,我们可以使用变量来填充模板。而HTML解析器在解析文本时,并不会区分文本是否是带变量的文本。如果是纯文本,不需要进行任何处理;但如果是带变量的文本,那么需要使用文本解析器进一步解析。因为带变量的文本在使用虚拟DOM进行渲染时,需要将变量替换成变量中的值。
我们在9.2节中介绍过,每当HTML解析器解析到文本时,都会触发chars
函数,并且从参数中得到解析出的文本。在chars
函数中,我们需要构建文本类型的AST,并将它添加到父节点的children
属性中。
而在构建文本类型的AST时,纯文本和带变量的文本是不同的处理方式。如果是带变量的文本,我们需要借助文本解析器对它进行二次加工,其代码如下:
parseHTML(template, {
start (tag, attrs, unary) {
},
end () {
},
chars (text) {
text = text.trim()
if (text) {
const children = currentParent.children
let expression
if (expression = parseText(text)) {
children.push({
type : 2 ,
expression,
text
})
} else {
children.push({
type : 3 ,
text
})
}
}
},
comment (text) {
}
})
复制代码
在chars
函数中,如果执行parseText
后有返回结果,则说明文本是带变量的文本,并且已经通过文本解析器(parseText
)二次加工,此时构建一个带变量的文本类型的AST并将其添加到父节点的children
属性中。否则,就直接构建一个普通的文本节点并将其添加到父节点的children
属性中。而代码中的currentParent
是当前节点的父节点,也就是前面介绍的栈中的最后一个节点。
假设chars
函数被触发后,我们得到的text
是一个带变量的文本:
"Hello {{name}}"
复制代码
这个带变量的文本被文本解析器解析之后,得到的expression
变量是这样的:
"Hello " +_s(name)
复制代码
上面代码中的_s
其实是下面这个toString
函数的别名:
function toString (val ) {
return val == null
? ''
: typeof val === 'object'
? JSON .stringify(val, null , 2 )
: String (val)
}
复制代码
假设当前上下文中有一个变量name
,其值为Berwin
,那么expression
中的内容被执行时,它的内容是不是就是Hello Berwin
了?
我们举个例子:
var obj = {name : 'Berwin' }
with (obj) {
function toString (val ) {
return val == null
? ''
: typeof val === 'object'
? JSON .stringify(val, null , 2 )
: String (val)
}
console .log("Hello " +toString(name))
}
复制代码
在上面的代码中,我们打印出来的结果是"Hello Berwin"
。
事实上,最终AST会转换成代码字符串放在with
中执行,这部分内容会在第11章中详细介绍。
接着,我们详细介绍如何加工文本,也就是文本解析器的内部实现原理。
在文本解析器中,第一步要做的事情就是使用正则表达式来判断文本是否是带变量的文本,也就是检查文本中是否包含{{xxx}}
这样的语法。如果是纯文本,则直接返回undefined
;如果是带变量的文本,再进行二次加工。所以我们的代码是这样的:
function parseText (text ) {
const tagRE = /\{\{((?:.|\n)+?)\}\}/g
if (!tagRE(text)) {
return
}
}
复制代码
在上面的代码中,如果是纯文本,则直接返回。如果是带变量的文本,该如何处理呢?
一个解决思路是使用正则表达式匹配出文本中的变量,先把变量左边的文本添加到数组中,然后把变量改成_s(x)
这样的形式也添加到数组中。如果变量后面还有变量,则重复以上动作,直到所有变量都添加到数组中。如果最后一个变量的后面有文本,就将它添加到数组中。
这时我们其实已经有一个数组,数组元素的顺序和文本的顺序是一致的,此时将这些数组元素用+
连起来变成字符串,就可以得到最终想要的效果,如图9-5所示。
图9-5 文本解析过程
在图9-5中,最上面的字符串代表即将解析的文本,中间两个方块代表数组中的两个元素。最后,使用数组方法join
将这两个元素合并成一个字符串。
具体实现代码如下:
function parseText (text ) {
const tagRE = /\{\{((?:.|\n)+?)\}\}/g
if (!tagRE.test(text)) {
return
}
const tokens = []
let lastIndex = tagRE.lastIndex = 0
let match, index
while ((match = tagRE.exec(text))) {
index = match.index
if (index > lastIndex) {
tokens.push(JSON .stringify(text.slice(lastIndex, index)))
}
tokens.push(`_s(${match[1 ].trim()} )` )
lastIndex = index + match[0 ].length
}
if (lastIndex < text.length) {
tokens.push(JSON .stringify(text.slice(lastIndex)))
}
return tokens.join('+' )
}
复制代码
这是文本解析器的全部代码,代码并不多,逻辑也不是很复杂。
这段代码有一个很关键的地方在lastIndex
:每处理完一个变量后,会重新设置lastIndex
的位置,这样可以保证如果后面还有其他变量,那么在下一轮循环时可以从lastIndex
的位置开始向后匹配,而lastIndex
之前的文本将不再被匹配。
下面用文本解析器解析不同的文本看看:
parseText('你好{{name}}' )
parseText('你好Berwin' )
parseText('你好{{name}}, 你今年已经{{age}}岁啦' )
复制代码
从上面代码的打印结果可以看到,文本已经被正确解析了。
9.5 总结
解析器的作用是通过模板得到AST(抽象语法树)。
生成AST的过程需要借助HTML解析器,当HTML解析器触发不同的钩子函数时,我们可以构建出不同的节点。
随后,我们可以通过栈来得到当前正在构建的节点的父节点,然后将构建出的节点添加到父节点的下面。
最终,当HTML解析器运行完毕后,我们就可以得到一个完整的带DOM层级关系的AST。
HTML解析器的内部原理是一小段一小段地截取模板字符串,每截取一小段字符串,就会根据截取出来的字符串类型触发不同的钩子函数,直到模板字符串截空停止运行。
文本分两种类型,不带变量的纯文本和带变量的文本,后者需要使用文本解析器进行二次加工。
更多精彩内容可以观看《深入浅出Vue.js》
关于《深入浅出Vue.js》
本书使用最最容易理解的文笔来描述Vue.js的内部原理,对于想学习Vue.js原理的小伙伴是非常值得入手的一本书。
京东:item.jd.com/12573168.ht…
亚马逊:www.amazon.cn/gp/product/…
当当:product.dangdang.com/26922892.ht…
扫码京东购买
转载于:https://juejin.im/post/5ca44160518825440a4b9fab
你可能感兴趣的:(Vue.js 模板解析器原理)
GMSL max9286应用参考原理图:硬件工程师的利器
杜文岱Igor
GMSLmax9286应用参考原理图:硬件工程师的利器【下载地址】GMSLmax9286应用参考原理图本仓库提供了一个名为“GMSLmax9286应用参考原理图”的资源文件。该文件详细展示了max9286芯片在GMSL(GigabitMultimediaSerialLink)系统中的应用原理图项目地址:https://gitcode.com/Open-source-documentation-tu
OpenGL ES 文字渲染进阶--渲染中文字体
字节流动
OpenGL ES 3.0 OpenGL 文字渲染 C++ Android
旧文OpenGLES文字渲染方式有几种?一文中分别介绍了OpenGL利用Canvas和FreeType绘制文字的方法。无论采用哪种方式进行渲染,本质上原理都是纹理贴图:将带有文字的图像上传到纹理,然后进行贴图。渲染中文字体利用Canvas绘制中文字体和绘制其他字体在操作方式上没有区别,但是使用FreeType绘制中文字体,在编码方式、加载方式以及字体属性上面会有一些坑要踩,这里本人已经踩过,将在本
sort快排
勾魂凉皮
算法 排序算法 c++
当然可以!让我们通过类似的详细步骤来解释快速排序(QuickSort)的原理和实现,就像之前解释a&=(a-1)的原理一样。快速排序(QuickSort)原理快速排序是一种高效的排序算法,其核心思想是分而治之。它通过选择一个“基准值”(pivot),将数组分为两部分:一部分包含所有小于基准值的元素;另一部分包含所有大于基准值的元素。然后,对这两部分分别递归地进行快速排序,最终整个数组变得有序。详细
3G无线技术全面指南:基础、架构、应用与未来
啊湫湫湫丶
本文还有配套的精品资源,点击获取简介:3G无线技术是移动通信领域的一大跃进,提供比2G更高的数据速率和更丰富的服务内容。本资料包旨在全面介绍3G的关键知识点,包括但不限于3G标准、网络架构、数据传输速度、多媒体服务、CDMA原理、移动IP技术、QoS管理、演进至4G、网络部署、终端设备和安全性。学习这些内容有助于深入理解3G技术的发展及其在移动互联网时代的重要作用,并为应对未来通信技术的发展做好准
常用的系统操作日志记录实现方式
程序员蔡徐坤
java 网络 mybatis kafka spring
1.AOP(面向切面编程)实现原理通过拦截方法调用(如Controller层或Service层),在方法执行前后插入日志记录逻辑,实现业务代码与日志逻辑的解耦。技术实现(以SpringAOP为例):@Aspect@ComponentpublicclassLogAspect{@Pointcut("execution(*com.example.service.*.*(..))")publicvoids
Flink-k8s弹性扩缩容原理和部署步骤
spring208208
flink kubernetes 贪心算法
背景和现状目前行内提交flink作业采用Nativekubernetes模式,提交作业时会指定并行度和taskmanager使用的内存及cpu数量。这种情况下会导致在作业运行高峰可能存在资源不足问题运行低峰又会造成资源浪费,这种粗放的使用资源的模式在实时计算业务量不多的时候还可以勉强接受,而随着实时计算业务的增多,则会造成大量的资源浪费和性能瓶颈。为了使存储和计算资源得到更加合理有效的使用,能跟据
DeepSeek生成思维导图
爆爆凯
网盘分享 深度学习
一、准备阶段工具准备安装思维导图软件(推荐XMind/MindMaster/在线工具如ProcessOn)打开DeepSeek官网或集成平台(https://www.deepseek.com/)明确需求确定思维导图核心主题(如"碳中和实施方案")规划预期结构层级(建议3-4级:中心主题→主分支→子分支→细节)二、生成核心结构输入提示词模板请生成关于[XX主题]的思维导图框架,要求:1.包含5-7个
机器学习-33-机理模型和非机理模型
皮皮冰燃
机器学习 机器学习
1建模方法机理模型、经验模型和智能模型是在不同领域中使用的建模方法,它们具有以下特点:1.1机理模型(1)特点:机理模型是基于物理、化学或其他科学原理建立的模型。它们试图通过描述系统的基本原理和关系来解释现象或预测系统的行为。(2)优点:机理模型能够提供深入的理解和解释,并具有较高的预测准确性。它们可以提供对系统内部机制的洞察,从而支持优化、控制和设计决策。(3)缺点:机理模型的建立需要详细的物理
Java整合GPT-3.5和GPT-4,让PPT制作变得更加轻松智能化
GPTCoder
ChatGPT java 人工智能 gpt-3 自然语言处理 chatgpt
在当今的商业环境中,PPT演示文稿已成为一种重要的沟通工具。然而,创建高质量的PPT往往耗时且繁琐。基于这个痛点,本文将介绍如何使用Java整合GPT-3.5/4,根据PPT模板自动生成完整的PPT。我们将使用ApachePOI库操作来PPT文件,同时调用GPT-3.5/4API生成内容。首先,我们需要导入ApachePOI库。在Maven项目中,将以下依赖添加到pom.xml文件中:org.ap
C++ type_case类型转换助手(实现统一接口参数类型转化)
on那
元模板 c++ 开发语言
C++类型转换助手在现代C++编程中,类型转换是一个常见的需求。为了简化这一过程,本文将使用模板和SFINAE(SubstitutionFailureIsNotAnError)技术实现的类型转换助手代码。该代码定义了一个命名空间cast_helper,其中包含多个重载的do_cast函数,能够根据不同的输入类型进行类型转换。代码结构命名空间cast_helper命名空间cast_helper包含多
探索时间的脉络:Vue.js下的Timeline组件——Timeline Vuejs
房耿园Hartley
探索时间的脉络:Vue.js下的Timeline组件——TimelineVuejs项目地址:https://gitcode.com/gh_mirrors/ti/timeline-vuejs在数字时代,将信息以时间轴的形式展示变得日益重要,它帮助我们清晰地追踪事件的发展和变迁。今天,我们要推荐一个精巧且功能强大的Vue.js组件——TimelineVuejs。这款开源项目专为Vue爱好者设计,旨在优
vue框架生命周期详细解析
黑码小帅
自己总结 vue.js javascript 前端 vue typescript 前端框架 js
Vue.js的生命周期钩子函数是理解Vue组件行为的关键。每个Vue实例在创建、更新和销毁过程中都会经历一系列的生命周期阶段,每个阶段都有对应的钩子函数,开发者可以在这些钩子函数中执行特定的操作。Vue生命周期概述Vue的生命周期可以分为以下几个主要阶段:创建阶段(Creation)挂载阶段(Mounting)更新阶段(Updating)销毁阶段(Destruction)每个阶段都有对应的钩子函数
C++循环结构:原理剖析与工程实践优化策略
溟海.
c++ 开发语言
以下是一篇关于C++循环结构的原创技术论文框架及内容示例,包含理论解析与工程实践结合的分析C++循环结构:原理剖析与工程实践优化策略**摘要**本文系统探讨C++语言中循环结构的实现机制、应用场景及优化方法。通过分析for、while、do-while三种基本循环结构在编译器层面的实现差异,结合现代C++11/17标准新增特性,提出面向性能优化和代码可维护性的工程实践方案。实验表明,合理选择循环结
Webpack相关优化总结
问白
前端工程化 webpack webpack 前端 前端工程化
在使用webpack时提供了各种配置,这里结合在业务中常用的配置汇总一下可以进行的一系列的webpack优化缩小文件搜索范围其原理是在构建时,会以用户配置的Entry为开始依次递归遍历每个Module,在遍历每个Module时会调用相应合适的Loader对原模块代码进行“翻译”。优化Loader配置Loader对文件的转换是比较耗时的,我们可以在loader中通过test、include、excl
无线瘦AP部署——Capwap隧道原理及故障:Capwap隧道常见问题-11.X版本
你可知这世上再难遇我
锐捷网络 网络 capwap 隧道 wlan
目录1、capwap隧道建立不成功2、AP和AC的隧道无法建立--AC查看拒绝原因3、AC无法下发配置给AP4、AP和AC跨公网上线,同一个网点的AP,部分可以上线成功,部分无法上线成功。【故障现象】5、AC、AP版本相同,但却无法在AC上正常上线,卡在join状态6、AP掉线后在ac上还是长时间显示在线7、大部分AP无法上线成功,且已经上线的AP经常出现掉线情况,隧道状态反复8、AP故障无法建立
Go 语言的协程(goroutine)
yymagicer
go golang 算法
Go语言的协程(goroutine)是轻量级的并发机制,可以理解为Go中的线程,但它比线程更轻量,且由Go语言的运行时调度器管理。下面详细说明Go协程的原理、使用方法以及应用场景。1.协程原理Go协程(goroutine)在运行时由Go调度器管理,其运行时模型不同于传统的操作系统线程。Go的调度器采用M模型,即多个goroutine由少量的线程管理和调度。它依赖于两个关键组件:M(Machine)
deepseek与gpt,核心原理对比
test猿
gpt
DeepSeek与GPT作为AI大模型,在自然语言处理等领域展现出强大的能力,它们的核心原理对比主要体现在模型架构、训练策略、资源效率以及应用场景优化等方面。一、模型架构DeepSeek混合专家(MoE)框架:DeepSeek采用了混合专家框架,其内部包含多个“专家”子模块,每个子模块专注于不同的任务或数据领域。例如,DeepSeek-R1拥有6710亿参数,但每次仅激活约370亿参数,通过动态选
Golang并发编程-协程goroutine初体验
锅锅来了
Golang实战案例 golang 开发语言 goroutine WaitGroup 案例
文章目录前言一、Goroutine适合的使用场景二、Goroutine的使用1.协程初体验三、WaitGroupWaitGroup案例一WaitGroup案例二总结前言学习Golang一段时间了,一直没有使用过goroutine来提高程序执行效率,在一些特殊场景下,还是有必须开启协程提升体验的,打算整理几篇关于协程的原理的文章和案例,结合工作场景将协程使用起来。一、Goroutine适合的使用场景
HTML语言的区块链
沈韡蕙
包罗万象 golang 开发语言 后端
区块链技术的崛起与发展区块链是一种新兴的技术,它以其独特的去中心化、透明性和不可篡改性,正在全球范围内改变许多行业的游戏规则。在这篇文章中,我们将深入探讨区块链的基本概念、技术原理、应用场景以及未来的发展趋势。一、区块链的基本概念区块链,顾名思义,是一个由区块(Block)和链(Chain)组成的数据结构。每个区块中包含了一组交易记录,而这些区块通过加密算法和时间戳相互连接,形成一条连续的链条。这
C++栈内存管理:从原理到高性能编程实践
溟海.
c++ c++ 开发语言
以下是一篇关于C++栈机制的原创技术论文框架及内容,结合语言规范、编译器实现与工程实践,包含创新性分析和实验验证:---**C++栈内存管理:从原理到高性能编程实践****摘要**本文深入剖析C++栈内存的分配机制、生命周期管理及优化策略。通过反汇编分析GCC/Clang编译器实现,验证栈帧结构与函数调用约定,提出基于现代C++特性的栈使用优化方案。实验证明,合理控制栈空间可降低30%内存访问延迟
Vulhub靶机 ActiveMQ 反序列化漏洞(CVE-2015-5254)(渗透测试详解)
芜丶湖
activemq web安全 安全性测试 linux 网络 系统安全
一、开启vulhub环境docker-composeup-d启动dockerps查看开放的端口漏洞版本:ApacheActiveMQ5.x~ApacheActiveMQ5.13.0二、访问靶机IP8161端口默认账户密码admin/admin,登录此时qucues事件为空1、使用jmet-0.1.0-all.jar工具将有效负载发送到目标IP的61616端口jmet原理是使用ysoserial生成
有哪些滤波,原理是什么,分别在什么时候用
高力士等十万人
OpenCV 计算机视觉 图像处理 opencv python
均值滤波(AverageFiltering)原理:通过计算像素点邻域内像素值的平均值来作为该像素点滤波后的新值。例如,对于一个3x3的邻域,将9个像素值相加然后除以9得到滤波后的像素值。优点:简单易实现,能够对信号或图像进行一定程度的平滑处理,降低噪声的影响。应用场景:适用于对精度要求不高的图像或信号平滑场景,如视频监控中的简单图像预处理。中值滤波(MedianFiltering)原理:对于一个给
[linux专题]CMakeLists 使用案例详解
AgingMoon
Linux linux cmake CMakefile
目录1.为什么CMake2.案例使用说明2.1简单文件编译2.2多文件多目录编译2.3进阶使用3.CMake常用语法3.1常用模板3.2常用命令1.为什么CMakecmake可用于跨平台、开源的构建系统。它是一个集软件构建、测试、打包于一身的软件。它使用与平台和编译器独立的配置文件来对软件编译过程进行控制。2.案例使用说明2.1简单文件编译/*simple.c*/#include#includei
vue和react的区别
匿名用户888
vue.js react.js javascript
概念Vue是一种渐进式框架,可以逐步应用到现有项目中,也可以作为完整的单页应用开发;React更像是一个视图层库,它只负责应用的视图部分,其他功能如路由、状态管理等需要借助第三方库。1.监听数据变化的实现原理不同Vue通过getter/setter方法以及一些函数的劫持能精确知道数据的变化。React默认是通过比较引用方式diff算法进行的,若不优化,会导致大量不必要的VDom的重新渲染。2.数据
【React Hooks原理 - forwardRef、useImperativeHandle】
宇豪学习录
React Hooks原理 react.js javascript 前端
概述上文我们聊了useRef的使用和实现,主要两个用途:1、用于持久化保存2、用于绑定dom。但是有时候我们需要在父组件中访问子组件的dom或者属性/方法,而React中默认是不允许父组件直接访问子组件的dom的,这时候就可以通过forwardRef将ref传入子组件,并暴露子组件的dom给父组件使用,但是这种方式直接暴露了子组件的dom,处于安全性能考虑,我们希望子组件只暴露我们所希望的属性,由
解决远程桌面连接后没有声音的问题
huanghong6956
1.首先确定被远程主机已安装声卡和驱动,换句话说就是被远程主机可以出声2.在被远程主机上,开始-运行-gpedit.msc,打开组策略计算机配置-管理模板-终端服务-客户端/服务器数据重定向-启用“允许音频重定向3.重启4.欧了
深入理解 C++ 算法之 SPFA
小白布莱克
c++ 算法 开发语言
在图论算法的世界里,单源最短路径问题是一个经典且重要的研究方向。SPFA(ShortestPathFasterAlgorithm)算法作为求解单源最短路径问题的一种高效算法,在C++编程中有着广泛的应用。本文将深入探讨SPFA算法的原理、实现步骤以及在C++中的代码实现。SPFA算法原理SPFA算法本质上是对Bellman-Ford算法的一种优化。Bellman-Ford算法通过对所有边进行多次松
druid mysql读写分离_Spring Boot + Mybatis + Druid 实现MySQL一主多从读写分离
咖啡碎冰冰
druid mysql读写分离
SpringBoot读写分离实现原理实现方式主要是通过扩展SpringAbstractRoutingDataSource这个类充当DataSource路由中介,在运行当中根据自定义KEY值动态切换正真的DataSource。具体实现创建测试库、表:createdatabase`mytest_db`;CREATETABLE`t_user`(`id`int(11)NOTNULLAUTO_INCREME
【HTML5网页设计成品】基于HTML+CSS+JavaScript网上订餐系统(23个页面)
二挡起步
web前端期末大作业 web设计网页规划与设计 html html5 css 课程设计 HTML学生个人网页设计 javascript 网页设计作业
文章目录二、✍️网站描述三、网站介绍四、网站演示五、⚙️网站代码HTML结构代码六、如何让学习不再盲目七、更多干货❤【作者主页——获取更多优质源码】❤【学习资料/简历模板/面试资料/网站设计与制作】❤【web前端期末大作业——毕设项目精品实战案例】#一、网站题目学生管理系统网页设计、OA管理系统、后台管理模板、智能停车系统、等网站的设计与制作。二、✍️网站描述️HTML网页设计,采用DIV+C
ACwing算法备战蓝桥杯——Day3——二分
切勿踌躇不前
算法学习笔记 蓝桥杯 算法 职场和发展
理论知识:二分分为整数二分与浮点数二分,其中整数二分最为常用,它们都有一套固定模板。整数二分:适用于大部分具有二分查找需求的问题,不一定是寻找数字模板:二分的前提是区间具有二段性,典型的例子就是一个单调区间(但是不止步于单调性),单调区间能被任意一个区间内的数x分成两段,第一段是小于x的区间,第二段是大于等于x的区间;通俗来讲,就是某个元素的一边是一种性质,另一边是另一种性质.最后求出的是那个边界
解线性方程组
qiuwanchi
package gaodai.matrix;
import java.util.ArrayList;
import java.util.List;
import java.util.Scanner;
public class Test {
public static void main(String[] args) {
Scanner scanner = new Sc
在mysql内部存储代码
annan211
性能 mysql 存储过程 触发器
在mysql内部存储代码
在mysql内部存储代码,既有优点也有缺点,而且有人倡导有人反对。
先看优点:
1 她在服务器内部执行,离数据最近,另外在服务器上执行还可以节省带宽和网络延迟。
2 这是一种代码重用。可以方便的统一业务规则,保证某些行为的一致性,所以也可以提供一定的安全性。
3 可以简化代码的维护和版本更新。
4 可以帮助提升安全,比如提供更细
Android使用Asynchronous Http Client完成登录保存cookie的问题
hotsunshine
android
Asynchronous Http Client是android中非常好的异步请求工具
除了异步之外还有很多封装比如json的处理,cookie的处理
引用
Persistent Cookie Storage with PersistentCookieStore
This library also includes a PersistentCookieStore whi
java面试题
Array_06
java 面试
java面试题
第一,谈谈final, finally, finalize的区别。
final-修饰符(关键字)如果一个类被声明为final,意味着它不能再派生出新的子类,不能作为父类被继承。因此一个类不能既被声明为 abstract的,又被声明为final的。将变量或方法声明为final,可以保证它们在使用中不被改变。被声明为final的变量必须在声明时给定初值,而在以后的引用中只能
网站加速
oloz
网站加速
前序:本人菜鸟,此文研究总结来源于互联网上的资料,大牛请勿喷!本人虚心学习,多指教.
1、减小网页体积的大小,尽量采用div+css模式,尽量避免复杂的页面结构,能简约就简约。
2、采用Gzip对网页进行压缩;
GZIP最早由Jean-loup Gailly和Mark Adler创建,用于UNⅨ系统的文件压缩。我们在Linux中经常会用到后缀为.gz
正确书写单例模式
随意而生
java 设计模式 单例
单例模式算是设计模式中最容易理解,也是最容易手写代码的模式了吧。但是其中的坑却不少,所以也常作为面试题来考。本文主要对几种单例写法的整理,并分析其优缺点。很多都是一些老生常谈的问题,但如果你不知道如何创建一个线程安全的单例,不知道什么是双检锁,那这篇文章可能会帮助到你。
懒汉式,线程不安全
当被问到要实现一个单例模式时,很多人的第一反应是写出如下的代码,包括教科书上也是这样
单例模式
香水浓
java
懒汉 调用getInstance方法时实例化
public class Singleton {
private static Singleton instance;
private Singleton() {}
public static synchronized Singleton getInstance() {
if(null == ins
安装Apache问题:系统找不到指定的文件 No installed service named "Apache2"
AdyZhang
apache http server
安装Apache问题:系统找不到指定的文件 No installed service named "Apache2"
每次到这一步都很小心防它的端口冲突问题,结果,特意留出来的80端口就是不能用,烦。
解决方法确保几处:
1、停止IIS启动
2、把端口80改成其它 (譬如90,800,,,什么数字都好)
3、防火墙(关掉试试)
在运行处输入 cmd 回车,转到apa
如何在android 文件选择器中选择多个图片或者视频?
aijuans
android
我的android app有这样的需求,在进行照片和视频上传的时候,需要一次性的从照片/视频库选择多条进行上传
但是android原生态的sdk中,只能一个一个的进行选择和上传。
我想知道是否有其他的android上传库可以解决这个问题,提供一个多选的功能,可以使checkbox之类的,一次选择多个 处理方法
官方的图片选择器(但是不支持所有版本的androi,只支持API Level
mysql中查询生日提醒的日期相关的sql
baalwolf
mysql
SELECT sysid,user_name,birthday,listid,userhead_50,CONCAT(YEAR(CURDATE()),DATE_FORMAT(birthday,'-%m-%d')),CURDATE(), dayofyear( CONCAT(YEAR(CURDATE()),DATE_FORMAT(birthday,'-%m-%d')))-dayofyear(
MongoDB索引文件破坏后导致查询错误的问题
BigBird2012
mongodb
问题描述:
MongoDB在非正常情况下关闭时,可能会导致索引文件破坏,造成数据在更新时没有反映到索引上。
解决方案:
使用脚本,重建MongoDB所有表的索引。
var names = db.getCollectionNames();
for( var i in names ){
var name = names[i];
print(name);
Javascript Promise
bijian1013
JavaScript Promise
Parse JavaScript SDK现在提供了支持大多数异步方法的兼容jquery的Promises模式,那么这意味着什么呢,读完下文你就了解了。
一.认识Promises
“Promises”代表着在javascript程序里下一个伟大的范式,但是理解他们为什么如此伟大不是件简
[Zookeeper学习笔记九]Zookeeper源代码分析之Zookeeper构造过程
bit1129
zookeeper
Zookeeper重载了几个构造函数,其中构造者可以提供参数最多,可定制性最多的构造函数是
public ZooKeeper(String connectString, int sessionTimeout, Watcher watcher, long sessionId, byte[] sessionPasswd, boolea
【Java命令三】jstack
bit1129
jstack
jstack是用于获得当前运行的Java程序所有的线程的运行情况(thread dump),不同于jmap用于获得memory dump
[hadoop@hadoop sbin]$ jstack
Usage:
jstack [-l] <pid>
(to connect to running process)
jstack -F
jboss 5.1启停脚本 动静分离部署
ronin47
以前启动jboss,往各种xml配置文件,现只要运行一句脚本即可。start nohup sh /**/run.sh -c servicename -b ip -g clustername -u broatcast jboss.messaging.ServerPeerID=int -Djboss.service.binding.set=p
UI之如何打磨设计能力?
brotherlamp
UI ui教程 ui自学 ui资料 ui视频
在越来越拥挤的初创企业世界里,视觉设计的重要性往往可以与杀手级用户体验比肩。在许多情况下,尤其对于 Web 初创企业而言,这两者都是不可或缺的。前不久我们在《右脑革命:别学编程了,学艺术吧》中也曾发出过重视设计的呼吁。如何才能提高初创企业的设计能力呢?以下是 9 位创始人的体会。
1.找到自己的方式
如果你是设计师,要想提高技能可以去设计博客和展示好设计的网站如D-lists或
三色旗算法
bylijinnan
java 算法
import java.util.Arrays;
/**
问题:
假设有一条绳子,上面有红、白、蓝三种颜色的旗子,起初绳子上的旗子颜色并没有顺序,
您希望将之分类,并排列为蓝、白、红的顺序,要如何移动次数才会最少,注意您只能在绳
子上进行这个动作,而且一次只能调换两个旗子。
网上的解法大多类似:
在一条绳子上移动,在程式中也就意味只能使用一个阵列,而不使用其它的阵列来
警告:No configuration found for the specified action: \'s
chiangfai
configuration
1.index.jsp页面form标签未指定namespace属性。
<!--index.jsp代码-->
<%@taglib prefix="s" uri="/struts-tags"%>
...
<s:form action="submit" method="post"&g
redis -- hash_max_zipmap_entries设置过大有问题
chenchao051
redis hash
使用redis时为了使用hash追求更高的内存使用率,我们一般都用hash结构,并且有时候会把hash_max_zipmap_entries这个值设置的很大,很多资料也推荐设置到1000,默认设置为了512,但是这里有个坑
#define ZIPMAP_BIGLEN 254
#define ZIPMAP_END 255
/* Return th
select into outfile access deny问题
daizj
mysql txt 导出数据到文件
本文转自:http://hatemysql.com/2010/06/29/select-into-outfile-access-deny%E9%97%AE%E9%A2%98/
为应用建立了rnd的帐号,专门为他们查询线上数据库用的,当然,只有他们上了生产网络以后才能连上数据库,安全方面我们还是很注意的,呵呵。
授权的语句如下:
grant select on armory.* to rn
phpexcel导出excel表简单入门示例
dcj3sjt126com
PHP Excel phpexcel
<?php
error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);
if (PHP_SAPI == 'cli')
die('This example should only be run from a Web Brows
美国电影超短200句
dcj3sjt126com
电影
1. I see. 我明白了。2. I quit! 我不干了!3. Let go! 放手!4. Me too. 我也是。5. My god! 天哪!6. No way! 不行!7. Come on. 来吧(赶快)8. Hold on. 等一等。9. I agree。 我同意。10. Not bad. 还不错。11. Not yet. 还没。12. See you. 再见。13. Shut up!
Java访问远程服务
dyy_gusi
httpclient webservice get post
随着webService的崛起,我们开始中会越来越多的使用到访问远程webService服务。当然对于不同的webService框架一般都有自己的client包供使用,但是如果使用webService框架自己的client包,那么必然需要在自己的代码中引入它的包,如果同时调运了多个不同框架的webService,那么就需要同时引入多个不同的clien
Maven的settings.xml配置
geeksun
settings.xml
settings.xml是Maven的配置文件,下面解释一下其中的配置含义:
settings.xml存在于两个地方:
1.安装的地方:$M2_HOME/conf/settings.xml
2.用户的目录:${user.home}/.m2/settings.xml
前者又被叫做全局配置,后者被称为用户配置。如果两者都存在,它们的内容将被合并,并且用户范围的settings.xml优先。
ubuntu的init与系统服务设置
hongtoushizi
ubuntu
转载自:
http://iysm.net/?p=178 init
Init是位于/sbin/init的一个程序,它是在linux下,在系统启动过程中,初始化所有的设备驱动程序和数据结构等之后,由内核启动的一个用户级程序,并由此init程序进而完成系统的启动过程。
ubuntu与传统的linux略有不同,使用upstart完成系统的启动,但表面上仍维持init程序的形式。
运行
跟我学Nginx+Lua开发目录贴
jinnianshilongnian
nginx lua
使用Nginx+Lua开发近一年的时间,学习和实践了一些Nginx+Lua开发的架构,为了让更多人使用Nginx+Lua架构开发,利用春节期间总结了一份基本的学习教程,希望对大家有用。也欢迎谈探讨学习一些经验。
目录
第一章 安装Nginx+Lua开发环境
第二章 Nginx+Lua开发入门
第三章 Redis/SSDB+Twemproxy安装与使用
第四章 L
php位运算符注意事项
home198979
位运算 PHP &
$a = $b = $c = 0;
$a & $b = 1;
$b | $c = 1
问a,b,c最终为多少?
当看到这题时,我犯了一个低级错误,误 以为位运算符会改变变量的值。所以得出结果是1 1 0
但是位运算符是不会改变变量的值的,例如:
$a=1;$b=2;
$a&$b;
这样a,b的值不会有任何改变
Linux shell数组建立和使用技巧
pda158
linux
1.数组定义 [chengmo@centos5 ~]$ a=(1 2 3 4 5) [chengmo@centos5 ~]$ echo $a 1 一对括号表示是数组,数组元素用“空格”符号分割开。
2.数组读取与赋值 得到长度: [chengmo@centos5 ~]$ echo ${#a[@]} 5 用${#数组名[@或
hotspot源码(JDK7)
ol_beta
java HotSpot jvm
源码结构图,方便理解:
├─agent Serviceab
Oracle基本事务和ForAll执行批量DML练习
vipbooks
oracle sql
基本事务的使用:
从账户一的余额中转100到账户二的余额中去,如果账户二不存在或账户一中的余额不足100则整笔交易回滚
select * from account;
-- 创建一张账户表
create table account(
-- 账户ID
id number(3) not null,
-- 账户名称
nam