布道师小羊

Vue解析器

解析器本质上是一个状态机。但我们也曾提到，正则表达式其实也是一个状态机。因此在编写 parser 的时候，利用正则表达式能够让我们少写不少代码。本章我们将更多地利用正则表达式来实现 HTML 解析器。另外，一个完善的 HTML 解析器远比想象的要复杂。我们知道，浏览器会对 HTML 文本进行解析，那么它是如何做的呢？其实关于 HTML 文本的解析，是有规范可循的，即 WHATWG 关于 HTML 的解析规范，其中定义了完整的错误处理和状态机的状态迁移流程，还提及了一些特殊的状态，例如 DATA、CDATA、RCDATA、RAWTEXT 等。那么，这些状态有什么含义呢？它们对解析器有哪些影响呢？什么是 HTML 实体，以及 Vue.js 模板解析器需要如何处理HTML 实体呢？

1、文本模式及其对解析器的影响

文本模式指的是解析器在工作时所进入的一些特殊状态，在不同的特殊状态下，解析器对文本的解析行为会有所不同。具体来说，当解析器遇到一些特殊标签时，会切换模式，从而影响其对文本的解析行为。这些特殊标签是：

</code> 标签、<code><textarea></code> 标签，当解析器遇到这两个标签时，会切换到 RCDATA 模式；</li> <li><code><style>、<xmp>、<iframe>、<noembed>、<noframes>、<noscript></code> 等标签，当解析器遇到这些标签时，会切换到 RAWTEXT 模式；</li> <li>当解析器遇到 <![CDATA[ 字符串时，会进入 CDATA 模式。</li> </ul> 解析器的初始模式则是 DATA 模式。对于 Vue.js 的模板 DSL 来说，模板中不允许出现 <code><script></code> 标签，因此 Vue.js 模板解析器在遇到 <code><script></code> 标签时也会切换到 RAWTEXT 模式。 解析器的行为会因工作模式的不同而不同。下图出了初始模式下解析器的工作流程： <a href="http://img.e-com-net.com/image/info8/245fc9a943c641d28ae281c0bfe4e85b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/245fc9a943c641d28ae281c0bfe4e85b.jpg" alt="Vue解析器_第1张图片" width="650" height="300" style="border:1px solid black;"></a> 我们对上图做一些必要的解释。在默认的 DATA 模式下，解析器在遇到字符 < 时，会切换到标签开始状态（tag open state）。换句话说，在该模式下，解析器能够解析标签元素。当解析器遇到字符 & 时，会切换到字符引用状态（character reference state），也称 HTML 字符实体状态。也就是说，在DATA 模式下，解析器能够处理 HTML 字符实体。 我们再来看看当解析器处于 RCDATA 状态时，它的工作情况如何。下图给出了 WHATWG 规范第 13.2.5.2 节的内容： <a href="http://img.e-com-net.com/image/info8/5b68419381874bcc9e02dafd82ed287d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5b68419381874bcc9e02dafd82ed287d.jpg" alt="Vue解析器_第2张图片" width="650" height="278" style="border:1px solid black;"></a> 由上图可知，当解析器遇到字符 < 时，不会再切换到标签开始状态，而会切换到 RCDATA less-than sign state 状态。下图给出了 RCDATA less-than sign state 状态下解析器的工作方式： <a href="http://img.e-com-net.com/image/info8/7d5cedd459284b8697ea2b97d410f594.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7d5cedd459284b8697ea2b97d410f594.jpg" alt="Vue解析器_第3张图片" width="650" height="194" style="border:1px solid black;"></a> 由下图可知，在 RCDATA less-than sign state 状态下，如果解析器遇到字符 /，则直接切换到 RCDATA 的结束标签状态，即 RCDATA end tag open state；否则会将当前字符 < 作为普通字符处理，然后继续处理后面的字符。由此可知，在RCDATA 状态下，解析器不能识别标签元素。这其实间接说明了在 <code><textarea></code> 内可以将字符 < 作为普通文本，解析器并不会认为字符 < 是标签开始的标志，如下面的代码所示： <pre><code class="prism language-javascript">01 <textarea> 02 <div>asdf</div>asdfasdf 03 </textarea> </code></pre> 在上面这段 HTML 代码中，<code><textarea></code> 标签内存在一个<code><div></code> 标签。但解析器并不会把 <code><div></code> 解析为标签元素，而是作为普通文本处理。但是，由上上图可知，在 RCDATA 模式下，解析器仍然支持 HTML 实体。因为当解析器遇到字符 &时，会切换到字符引用状态，如下面的代码所示： <pre><code class="prism language-javascript">01 <textarea>&copy;</textarea> </code></pre> 浏览器在渲染这段 HTML 代码时，会在文本框内展示字符 ©。 解析器在 RAWTEXT 模式下的工作方式与在 RCDATA 模式下类似。唯一不同的是，在 RAWTEXT 模式下，解析器将不再支持HTML 实体。下图给出了 WHATWG 规范第 13.2.5.3 节中所定义的 RAWTEXT 模式下状态机的工作方式： <a href="http://img.e-com-net.com/image/info8/b9b577dd507842f5b61dfc7c00028f5d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b9b577dd507842f5b61dfc7c00028f5d.jpg" alt="Vue解析器_第4张图片" width="650" height="244" style="border:1px solid black;"></a> RAWTEXT 模式的确不支持HTML 实体。在该模式下，解析器会将 HTML 实体字符作为普通字符处理。Vue.js 的单文件组件的解析器在遇到 <code><script></code> 标签时就会进入 RAWTEXT 模式，这时它会把 <code><script></code> 标签内的内容全部作为普通文本处理。 CDATA 模式在 RAWTEXT 模式的基础上更进一步。下图给出了 WHATWG 规范第 13.2.5.69 节中所定义的 CDATA 模式下状态机的工作方式： <a href="http://img.e-com-net.com/image/info8/3dca17379d154a0c92a9a8eb0c628198.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3dca17379d154a0c92a9a8eb0c628198.jpg" alt="Vue解析器_第5张图片" width="650" height="307" style="border:1px solid black;"></a> 在 CDATA 模式下，解析器将把任何字符都作为普通字符处理，直到遇到 CDATA 的结束标志为止。 实际上，在 WHATWG 规范中还定义了 PLAINTEXT 模式，该模式与 RAWTEXT 模式类似。不同的是，解析器一旦进入PLAINTEXT 模式，将不会再退出。另外，Vue.js 的模板 DSL 解析器是用不到 PLAINTEXT 模式的，因此我们不会过多介绍它。 下表汇总了不同的模式及各其特性： <a href="http://img.e-com-net.com/image/info8/b193078e90a440bc9013c98fd9f20a26.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b193078e90a440bc9013c98fd9f20a26.jpg" alt="Vue解析器_第6张图片" width="650" height="207" style="border:1px solid black;"></a> 除了上表列出的特性之外，不同的模式还会影响解析器对于终止解析的判断，后文会具体讨论。另外，后续编写解析器代码时，我们会将上述模式定义为状态表，如下面的代码所示： <pre><code class="prism language-javascript">01 const TextModes = { 02 DATA: 'DATA', 03 RCDATA: 'RCDATA', 04 RAWTEXT: 'RAWTEXT', 05 CDATA: 'CDATA' 06 } </code></pre> <h2>2、递归下降算法构造模板 AST</h2> 从本节开始，我们将着手实现一个更加完善的模板解析器。解析器的基本架构模型如下： <pre><code class="prism language-javascript">01 // 定义文本模式，作为一个状态表 02 const TextModes = { 03 DATA: 'DATA', 04 RCDATA: 'RCDATA', 05 RAWTEXT: 'RAWTEXT', 06 CDATA: 'CDATA' 07 } 08 09 // 解析器函数，接收模板作为参数 10 function parse(str) { 11 // 定义上下文对象 12 const context = { 13 // source 是模板内容，用于在解析过程中进行消费 14 source: str, 15 // 解析器当前处于文本模式，初始模式为 DATA 16 mode: TextModes.DATA 17 } 18 // 调用 parseChildren 函数开始进行解析，它返回解析后得到的子节点 19 // parseChildren 函数接收两个参数： 20 // 第一个参数是上下文对象 context 21 // 第二个参数是由父代节点构成的节点栈，初始时栈为空 22 const nodes = parseChildren(context, []) 23 24 // 解析器返回 Root 根节点 25 return { 26 type: 'Root', 27 // 使用 nodes 作为根节点的 children 28 children: nodes 29 } 30 } </code></pre> 在上面这段代码中，我们首先定义了一个状态表 TextModes，它用来描述预定义的文本模式。然后，我们定义了 parse 函数，即解析器函数，在其中定义了上下文对象 context，用来维护解析程序执行过程中程序的各种状态。接着，调用parseChildren 函数进行解析，该函数会返回解析后得到的子节点，并使用这些子节点作为 children 来创建 Root 根节点。最后，parse 函数返回根节点，完成模板 AST 的构建。 在上面这段代码中，parseChildren 函数是整个解析器的核心。后续我们会递归地调用它来不断地消费模板内容。parseChildren 函数会返回解析后得到的子节点。举个例子，假设有如下模板： <pre><code class="prism language-javascript">01 <p>1</p> 02 <p>2</p> </code></pre> 上面这段模板有两个根节点，即两个 <code></code> 标签。parseChildren 函数在解析这段模板后，会得到由这两个 <code></code>节点组成的数组： <pre><code class="prism language-javascript">01 [ 02 { type: 'Element', tag: 'p', children: [/*...*/] }, 03 { type: 'Element', tag: 'p', children: [/*...*/] }, 04 ] </code></pre> 之后，这个数组将作为 Root 根节点的 children。 parseChildren 函数接收两个参数： <ul> <li>第一个参数：上下文对象 context。</li> <li>第二个参数：由父代节点构成的栈，用于维护节点间的父子级关系。</li> </ul> parseChildren 函数本质上也是一个状态机，该状态机有多少种状态取决于子节点的类型数量。在模板中，元素的子节点可以是以下几种： <ul> <li>标签节点，例如 <code><div></code>。</li> <li>文本插值节点，例如 <code>{{ val }}</code>。</li> <li>普通文本节点，例如：text。</li> <li>注释节点，例如 <code></code>。</li> <li>CDATA 节点，例如 <code><![CDATA[ xxx ]]></code>。</li> </ul> 在标准的 HTML 中，节点的类型将会更多，例如 DOCTYPE 节点等。为了降低复杂度，我们仅考虑上述类型的节点。 上图给出了 parseChildren 函数在解析模板过程中的状态迁移过程： <a href="http://img.e-com-net.com/image/info8/0ff720dc8dbb464581f977467fb061aa.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0ff720dc8dbb464581f977467fb061aa.jpg" alt="Vue解析器_第7张图片" width="650" height="499" style="border:1px solid black;"></a> 我们可以把上图所展示的状态迁移过程总结如下： <ul> <li>当遇到字符 < 时，进入临时状态。</li> <li>如果下一个字符匹配正则 /a-z/i，则认为这是一个标签节点，于是调用 parseElement 函数完成标签的解析。注意正则表达式 /a-z/i 中的 i，意思是忽略大小写（case-insensitive）。</li> <li>如果字符串以 </code> 中减号（-）代表空白字符。 有了 advanceBy 和 advanceSpaces 函数后，我们就可以给出parseTag 函数的实现了，如下面的代码所示： <pre><code class="prism language-javascript">01 // 由于 parseTag 既用来处理开始标签，也用来处理结束标签，因此我们设计第二个参数 type， 02 // 用来代表当前处理的是开始标签还是结束标签，type 的默认值为 'start'，即默认作为开始标签处理 03 function parseTag(context, type = 'start') { 04 // 从上下文对象中拿到 advanceBy 函数 05 const { advanceBy, advanceSpaces } = context 06 07 // 处理开始标签和结束标签的正则表达式不同 08 const match = type === 'start' 09 // 匹配开始标签 10 ? /^<([a-z][^\t\r\n\f />]*)/i.exec(context.source) 11 // 匹配结束标签 12 : /^<\/([a-z][^\t\r\n\f />]*)/i.exec(context.source) 13 // 匹配成功后，正则表达式的第一个捕获组的值就是标签名称 14 const tag = match[1] 15 // 消费正则表达式匹配的全部内容，例如 '<div' 这段内容 16 advanceBy(match[0].length) 17 // 消费标签中无用的空白字符 18 advanceSpaces() 19 20 // 在消费匹配的内容后，如果字符串以 '/>' 开头，则说明这是一个自闭合标签 21 const isSelfClosing = context.source.startsWith('/>') 22 // 如果是自闭合标签，则消费 '/>'，否则消费 '>' 23 advanceBy(isSelfClosing ? 2 : 1) 24 25 // 返回标签节点 26 return { 27 type: 'Element', 28 // 标签名称 29 tag, 30 // 标签的属性暂时留空 31 props: [], 32 // 子节点留空 33 children: [], 34 // 是否自闭合 35 isSelfClosing 36 } 37 } </code></pre> 上面这段代码有两个关键点： <ul> <li>由于 parseTag 函数既用于解析开始标签，又用于解析结束标签，因此需要用一个参数来标识当前处理的标签类型，即type。</li> <li>对于开始标签和结束标签，用于匹配它们的正则表达式只有一点不同：结束标签是以字符串 </ 开头的。下图给出了用于匹配开始标签的正则表达式的含义。</li> </ul> <a href="http://img.e-com-net.com/image/info8/7821b721cf4b4aafb323ff7922681015.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7821b721cf4b4aafb323ff7922681015.jpg" alt="Vue解析器_第17张图片" width="650" height="324" style="border:1px solid black;"></a> 下面给出了几个使用上图所示的正则来匹配开始标签的例子： <ul> <li>对于字符串 <code>'<div></code>'，会匹配出字符串 ‘<code><div'，剩余 '></code>’。</li> <li>对于字符串 <code>'<div/>'</code>，会匹配出字符串 <code>'<div'，剩余 '/>'</code>。</li> <li>对于字符串 <code>'<div---->'</code>，其中减号（-）代表空白符，会匹配出字符串 <code>'<div'，剩余 '---->'</code>。</li> </ul> 另外，上图中所示的正则拥有一个捕获组，它用来捕获标签名称。 除了正则表达式外，parseTag 函数的另外几个关键点如下： <ul> <li>在完成正则匹配后，需要调用 advanceBy 函数消费由正则匹配的全部内容。</li> <li>根据上面给出的第三个正则匹配例子可知，由于标签中可能存在无用的空白字符，例如 <code><div----></code>，因此我们需要调用advanceSpaces 函数消费空白字符。</li> <li>在消费由正则匹配的内容后，需要检查剩余模板内容是否以字符串 <code>/></code> 开头。如果是，则说明当前解析的是一个自闭合标签，这时需要将标签节点的 isSelfClosing 属性设置为 true。</li> <li>最后，判断标签是否自闭合。如果是，则调用 advnaceBy 函数消费内容 <code>/></code>，否则只需要消费内容 > 即可。</li> </ul> 在经过上述处理后，parseTag 函数会返回一个标签节点。parseElement 函数在得到由 parseTag 函数产生的标签节点后，需要根据节点的类型完成文本模式的切换，如下面的代码所示： <pre><code class="prism language-javascript">01 function parseElement(context, ancestors) { 02 const element = parseTag(context) 03 if (element.isSelfClosing) return element 04 05 // 切换到正确的文本模式 06 if (element.tag === 'textarea' || element.tag === 'title') { 07 // 如果由 parseTag 解析得到的标签是 <textarea> 或 <title>，则切换到 RCDATA 模式 08 context.mode = TextModes.RCDATA 09 } else if (/style|xmp|iframe|noembed|noframes|noscript/.test(element.tag)) { 10 // 如果由 parseTag 解析得到的标签是： 11 // <style>、<xmp>、<iframe>、<noembed>、<noframes>、<noscript> 12 // 则切换到 RAWTEXT 模式 13 context.mode = TextModes.RAWTEXT 14 } else { 15 // 否则切换到 DATA 模式 16 context.mode = TextModes.DATA 17 } 18 19 ancestors.push(element) 20 element.children = parseChildren(context, ancestors) 21 ancestors.pop() 22 23 if (context.source.startsWith(`</${element.tag}`)) { 24 parseTag(context, 'end') 25 } else { 26 console.error(`${element.tag} 标签缺少闭合标签`) 27 } 28 29 return element 30 } </code></pre> 至此，我们就实现了对标签节点的解析。但是目前的实现忽略了节点中的属性和指令，下一节将会讲解。 <h2>5、解析属性</h2> 上一节中介绍的 parseTag 解析函数会消费整个开始标签，这意味着该函数需要有能力处理开始标签中存在的属性与指令，例如： <pre><code class="prism language-javascript">01 <div id="foo" v-show="display"/> </code></pre> 上面这段模板中的 div 标签存在一个 id 属性和一个 v-show 指令。为了处理属性和指令，我们需要在 parseTag 函数中增加parseAttributes 解析函数，如下面的代码所示： <pre><code class="prism language-javascript">01 function parseTag(context, type = 'start') { 02 const { advanceBy, advanceSpaces } = context 03 04 const match = type === 'start' 05 ? /^<([a-z][^\t\r\n\f />]*)/i.exec(context.source) 06 : /^<\/([a-z][^\t\r\n\f />]*)/i.exec(context.source) 07 const tag = match[1] 08 09 advanceBy(match[0].length) 10 advanceSpaces() 11 // 调用 parseAttributes 函数完成属性与指令的解析，并得到 props 数组， 12 // props 数组是由指令节点与属性节点共同组成的数组 13 const props = parseAttributes(context) 14 15 const isSelfClosing = context.source.startsWith('/>') 16 advanceBy(isSelfClosing ? 2 : 1) 17 18 return { 19 type: 'Element', 20 tag, 21 props, // 将 props 数组添加到标签节点上 22 children: [], 23 isSelfClosing 24 } 25 } </code></pre> 上面这段代码的关键点之一是，我们需要在消费标签的“开始部分”和无用的空白字符之后，再调用 parseAttribute 函数。举个例子，假设标签的内容如下： <pre><code class="prism language-javascript">01 <div id="foo" v-show="display" > </code></pre> 标签的“开始部分”指的是字符串 <code><div，所以当消耗标签的“开始部分”</code>以及无用空白字符后，剩下的内容为： <pre><code class="prism language-javascript">01 id="foo" v-show="display" > </code></pre> 上面这段内容才是 parseAttributes 函数要处理的内容。由于该函数只用来解析属性和指令，因此它会不断地消费上面这段模板内容，直到遇到标签的“结束部分”为止。其中，结束部分指的是字符 > 或者字符串 />。据此我们可以给出parseAttributes 函数的整体框架，如下面的代码所示： <pre><code class="prism language-javascript">01 function parseAttributes(context) { 02 // 用来存储解析过程中产生的属性节点和指令节点 03 const props = [] 04 05 // 开启 while 循环，不断地消费模板内容，直至遇到标签的“结束部分”为止 06 while ( 07 !context.source.startsWith('>') && 08 !context.source.startsWith('/>') 09 ) { 10 // 解析属性或指令 11 } 12 // 将解析结果返回 13 return props 14 } </code></pre> 实际上，parseAttributes 函数消费模板内容的过程，就是不断地解析属性名称、等于号、属性值的过程，如下图所示： <a href="http://img.e-com-net.com/image/info8/4955b1f36c964669898793e304a4954e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4955b1f36c964669898793e304a4954e.jpg" alt="Vue解析器_第18张图片" width="650" height="188" style="border:1px solid black;"></a> parseAttributes 函数会按照从左到右的顺序不断地消费字符串。以上图为例，该函数的解析过程如下： 首先，解析出第一个属性的名称 id，并消费字符串 ‘id’。此时剩余模板内容为： <pre><code class="prism language-javascript">01 ="foo" v-show="display" > </code></pre> 在解析属性名称时，除了要消费属性名称之外，还要消费属性名称后面可能存在的空白字符。如下面这段模板中，属性名称和等于号之间存在空白字符： <pre><code class="prism language-javascript">01 id = "foo" v-show="display" > </code></pre> 但无论如何，在属性名称解析完毕之后，模板剩余内容一定是以等于号开头的，即： <pre><code class="prism language-javascript">01 = "foo" v-show="display" > </code></pre> 如果消费属性名称之后，模板内容不以等于号开头，则说明模板内容不合法，我们可以选择性地抛出错误。 接着，我们需要消费等于号字符。由于等于号和属性值之间也可能存在空白字符，所以我们也需要消费对应的空白字符。在这一步操作过后，模板的剩余内容如下： <pre><code class="prism language-javascript">01 "foo" v-show="display" > </code></pre> 接下来，到了处理属性值的环节。模板中的属性值存在三种情况： <ul> <li>属性值被双引号包裹：id=“foo”。</li> <li>属性值被单引号包裹：id=‘foo’。</li> <li>属性值没有引号包裹：id=foo。</li> </ul> 按照上述例子，此时模板的内容一定以双引号（"）开头。因此我们可以通过检查当前模板内容是否以引号开头来确定属性值是否被引用。如果属性值被引号引用，则消费引号。此时模板的剩余内容为： <pre><code class="prism language-javascript">01 foo" v-show="display" > </code></pre> 既然属性值被引号引用了，就意味着在剩余模板内容中，下一个引号之前的内容都应该被解析为属性值。在这个例子中，属性值的内容是字符串 foo。于是，我们消费属性值及其后面的引号。当然，如果属性值没有被引号引用，那么在剩余模板内容中，下一个空白字符之前的所有字符都应该作为属性值。 当属性值和引号被消费之后，由于属性值与下一个属性名称之间可能存在空白字符，所以我们还要消费对应的空白字符。在这一步处理过后，剩余模板内容为： <pre><code class="prism language-javascript">01 v-show="display" > </code></pre> 可以看到，经过上述操作之后，第一个属性就处理完毕了。 此时模板中还剩下一个指令，我们只需重新执行上述步骤，即可完成 v-show 指令的解析。当 v-show 指令解析完毕后，将会遇到标签的“结束部分”，即字符 >。这时，parseAttributes 函数中的 while 循环将会停止，完成属性和指令的解析。 下面的 parseAttributes 函数给出了上述逻辑的具体实现： <pre><code class="prism language-javascript">01 function parseAttributes(context) { 02 const { advanceBy, advanceSpaces } = context 03 const props = [] 04 05 while ( 06 !context.source.startsWith('>') && 07 !context.source.startsWith('/>') 08 ) { 09 // 该正则用于匹配属性名称 10 const match = /^[^\t\r\n\f />][^\t\r\n\f />=]*/.exec(context.source) 11 // 得到属性名称 12 const name = match[0] 13 14 // 消费属性名称 15 advanceBy(name.length) 16 // 消费属性名称与等于号之间的空白字符 17 advanceSpaces() 18 // 消费等于号 19 advanceBy(1) 20 // 消费等于号与属性值之间的空白字符 21 advanceSpaces() 22 23 // 属性值 24 let value = '' 25 26 // 获取当前模板内容的第一个字符 27 const quote = context.source[0] 28 // 判断属性值是否被引号引用 29 const isQuoted = quote === '"' || quote === "'" 30 31 if (isQuoted) { 32 // 属性值被引号引用，消费引号 33 advanceBy(1) 34 // 获取下一个引号的索引 35 const endQuoteIndex = context.source.indexOf(quote) 36 if (endQuoteIndex > -1) { 37 // 获取下一个引号之前的内容作为属性值 38 value = context.source.slice(0, endQuoteIndex) 39 // 消费属性值 40 advanceBy(value.length) 41 // 消费引号 42 advanceBy(1) 43 } else { 44 // 缺少引号错误 45 console.error('缺少引号') 46 } 47 } else { 48 // 代码运行到这里，说明属性值没有被引号引用 49 // 下一个空白字符之前的内容全部作为属性值 50 const match = /^[^\t\r\n\f >]+/.exec(context.source) 51 // 获取属性值 52 value = match[0] 53 // 消费属性值 54 advanceBy(value.length) 55 } 56 // 消费属性值后面的空白字符 57 advanceSpaces() 58 59 // 使用属性名称 + 属性值创建一个属性节点，添加到 props 数组中 60 props.push({ 61 type: 'Attribute', 62 name, 63 value 64 }) 65 66 } 67 // 返回 68 return props 69 } </code></pre> 在上面这段代码中，有两个重要的正则表达式： <ul> <li><code>/^[^\t\r\n\f />][^\t\r\n\f />=]*/</code>，用来匹配属性名称；</li> <li><code>/^[^\t\r\n\f >]+/</code>，用来匹配没有使用引号引用的属性值。</li> </ul> 我们分别来看看这两个正则表达式是如何工作的。下图给出了用于匹配属性名称的正则表达式的匹配原理： <a href="http://img.e-com-net.com/image/info8/f84cd05cfee248d090111053189652fe.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f84cd05cfee248d090111053189652fe.jpg" alt="Vue解析器_第19张图片" width="650" height="227" style="border:1px solid black;"></a> 如上图所示，我们可以将这个正则表达式分为 A、B 两个部分来看： <ul> <li>部分 A 用于匹配一个位置，这个位置不能是空白字符，也不能是字符 / 或字符 >，并且字符串要以该位置开头。</li> <li>部分 B 则用于匹配 0 个或多个位置，这些位置不能是空白字符，也不能是字符 /、>、=。注意，这些位置不允许出现等于号（=）字符，这就实现了只匹配等于号之前的内容，即属性名称。</li> </ul> 下图给出了第二个正则表达式的匹配原理： <a href="http://img.e-com-net.com/image/info8/21ca21a4361b4021a10e2c09fcb9d284.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/21ca21a4361b4021a10e2c09fcb9d284.jpg" alt="Vue解析器_第20张图片" width="650" height="212" style="border:1px solid black;"></a> 该正则表达式从字符串的开始位置进行匹配，并且会匹配一个或多个非空白字符、非字符 >。换句话说，该正则表达式会一直对字符串进行匹配，直到遇到空白字符或字符 > 为止，这就实现了属性值的提取。 配合 parseAttributes 函数，假设给出如下模板： <pre><code class="prism language-javascript">01 <div id="foo" v-show="display"></div> </code></pre> 解析上面这段模板，将会得到如下 AST： <pre><code class="prism language-javascript">01 const ast = { 02 type: 'Root', 03 children: [ 04 { 05 type: 'Element' 06 tag: 'div', 07 props: [ 08 // 属性 09 { type: 'Attribute', name: 'id', value: 'foo' }, 10 { type: 'Attribute', name: 'v-show', value: 'display' } 11 ] 12 } 13 ] 14 } </code></pre> 可以看到，在 div 标签节点的 props 属性中，包含两个类型为Attribute 的节点，这两个节点就是 parseAttributes 函数的解析结果。 我们可以增加更多在 Vue.js 中常见的属性和指令进行测试，如以下模板所示： <pre><code class="prism language-javascript">01 <div :id="dynamicId" @click="handler" v-on:mousedown="onMouseDown" ></div> </code></pre> 上面这段模板经过解析后，得到如下 AST： <pre><code class="prism language-javascript">01 const ast = { 02 type: 'Root', 03 children: [ 04 { 05 type: 'Element' 06 tag: 'div', 07 props: [ 08 // 属性 09 { type: 'Attribute', name: ':id', value: 'dynamicId' }, 10 { type: 'Attribute', name: '@click', value: 'handler' }, 11 { type: 'Attribute', name: 'v-on:mousedown', value: 'onMouseDown' } 12 ] 13 } 14 ] 15 } </code></pre> 可以看到，在类型为 Attribute 的属性节点中，其 name 字段完整地保留着模板中编写的属性名称。我们可以对属性名称做进一步的分析，从而得到更具体的信息。例如，属性名称以字符 @ 开头，则认为它是一个 v-on 指令绑定。我们甚至可以把以 v- 开头的属性看作指令绑定，从而为它赋予不同的节点类型，例如： <pre><code class="prism language-javascript">01 // 指令，类型为 Directive 02 { type: 'Directive', name: 'v-on:mousedown', value: 'onMouseDown' } 03 { type: 'Directive', name: '@click', value: 'handler' } 04 // 普通属性 05 { type: 'Attribute', name: 'id', value: 'foo' } </code></pre> 不仅如此，为了得到更加具体的信息，我们甚至可以进一步分析指令节点的数据，也可以设计更多语法规则，这完全取决于框架设计者在语法层面的设计，以及为框架赋予的能力。 <h2>6、解析文本与解码 HTML 实体</h2> <h3>6.1、解析文本</h3> 本节我们将讨论文本节点的解析。给出如下模板： <pre><code class="prism language-javascript">01 const template = '<div>Text</div>' </code></pre> 解析器在解析上面这段模板时，会先经过 parseTag 函数的处理，这会消费标签的开始部分 ‘ <div> ’。处理完毕后，剩余模板内容为： </div> <pre><code class="prism language-javascript">01 const template = 'Text</div>' </code></pre> 紧接着，解析器会调用 parseChildren 函数，开启一个新的状态机来处理这段模板。我们来回顾一下状态机的状态迁移过程，如下图所示： <a href="http://img.e-com-net.com/image/info8/397e3791e9854495abd17daa260c3b85.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/397e3791e9854495abd17daa260c3b85.jpg" alt="Vue解析器_第21张图片" width="650" height="489" style="border:1px solid black;"></a> 状态机始于“状态 1”。在“状态 1”下，读取模板的第一个字符 T，由于该字符既不是字符 <，也不是插值定界符 {{，因此状态机会进入“状态 7”，即调用 parseText 函数处理文本内容。此时解析器会在模板中寻找下一个 < 字符或插值定界符 {{的位置索引，记为索引 I。然后，解析器会从模板的头部到索引I 的位置截取内容，这段截取出来的字符串将作为文本节点的内容。以下面的模板内容为例： <pre><code class="prism language-javascript">01 const template = 'Text</div>' </code></pre> parseText 函数会尝试在这段模板内容中找到第一个出现的字符< 的位置索引。在这个例子中，字符 < 的索引值为 4。然后，parseText 函数会截取介于索引 [0, 4) 的内容作为文本内容。在这个例子中，文本内容就是字符串 ‘Text’。 假设模板中存在插值，如下面的模板所示： <pre><code class="prism language-javascript">01 const template = 'Text-{{ val }}</div>' </code></pre> 在处理这段模板时，parseText 函数会找到第一个插值定界符 {{出现的位置索引。在这个例子中，定界符的索引为 5。于是，parseText 函数会截取介于索引 [0, 5) 的内容作为文本内容。在这个例子中，文本内容就是字符串 ‘Text-’。 下面的 parseText 函数给出了具体实现： <pre><code class="prism language-javascript">01 function parseText(context) { 02 // endIndex 为文本内容的结尾索引，默认将整个模板剩余内容都作为文本内容 03 let endIndex = context.source.length 04 // 寻找字符 < 的位置索引 05 const ltIndex = context.source.indexOf('<') 06 // 寻找定界符 {{ 的位置索引 07 const delimiterIndex = context.source.indexOf('{{') 08 09 // 取 ltIndex 和当前 endIndex 中较小的一个作为新的结尾索引 10 if (ltIndex > -1 && ltIndex < endIndex) { 11 endIndex = ltIndex 12 } 13 // 取 delimiterIndex 和当前 endIndex 中较小的一个作为新的结尾索引 14 if (delimiterIndex > -1 && delimiterIndex < endIndex) { 15 endIndex = delimiterIndex 16 } 17 18 // 此时 endIndex 是最终的文本内容的结尾索引，调用 slice 函数截取文本内容 19 const content = context.source.slice(0, endIndex) 20 // 消耗文本内容 21 context.advanceBy(content.length) 22 23 // 返回文本节点 24 return { 25 // 节点类型 26 type: 'Text', 27 // 文本内容 28 content 29 } 30 } </code></pre> 如上面的代码所示，由于字符 < 与定界符 {{ 的出现顺序是未知的，所以我们需要取两者中较小的一个作为文本截取的终点。有了截取终点后，只需要调用字符串的 slice 函数对字符串进行截取即可，截取出来的内容就是文本节点的文本内容。最后，我们创建一个类型为 Text 的文本节点，将其作为 parseText 函数的返回值。 配合上述 parseText 函数解析如下模板： <pre><code class="prism language-javascript">01 const ast = parse(`<div>Text</div>`) </code></pre> 得到如下 AST： <pre><code class="prism language-javascript">01 const ast = { 02 type: 'Root', 03 children: [ 04 { 05 type: 'Element', 06 tag: 'div', 07 props: [], 08 isSelfClosing: false, 09 children: [ 10 // 文本节点 11 { type: 'Text', content: 'Text' } 12 ] 13 } 14 ] 15 } </code></pre> 这样，我们就实现了对文本节点的解析。解析文本节点本身并不复杂，复杂点在于，我们需要对解析后的文本内容进行HTML 实体的解码工作。为此，我们有必要先了解什么是HTML 实体。 <h3>6.2、解码命名字符引用</h3> HTML 实体是一段以字符 & 开始的文本内容。实体用来描述HTML 中的保留字符和一些难以通过普通键盘输入的字符，以及一些不可见的字符。例如，在 HTML 中，字符 < 具有特殊含义，如果希望以普通文本的方式来显示字符 <，需要通过实体来表达： <pre><code class="prism language-javascript">01 <div>A&lt;B</div> </code></pre> 其中字符串 <code><</code> 就是一个 HTML 实体，用来表示字符 <。如果我们不用 HTML 实体，而是直接使用字符 <，那么将会产生非法的 HTML 内容： <pre><code class="prism language-javascript">01 <div>A<B</div> </code></pre> 这会导致浏览器的解析结果不符合预期。 HTML 实体总是以字符 & 开头，以字符 ; 结尾。在 Web 诞生的初期，HTML 实体的数量较少，因此允许省略其中的尾分号。但随着 HTML 字符集越来越大，HTML 实体出现了包含的情况，例如 < 和 <cc 都是合法的实体，如果不加分号，浏览器将无法区分它们。因此，WHATWG 规范中明确规定，如果不为实体加分号，将会产生解析错误。但考虑到历史原因（互联网上存在大量省略分号的情况），现代浏览器都能够解析早期规范中定义的那些可以省略分号的 HTML 实体。 HTML 实体有两类，一类叫作命名字符引用（named character reference），也叫命名实体（named entity），顾名思义，这类实体具有特定的名称，例如上文中的 <code><</code>。WHATWG 规范中给出了全部的命名字符引用，有 2000 多个，可以通过命名字符引用表查询。下面列出了部分内容： <pre><code class="prism language-javascript">01 // 共 2000+ 02 { 03 "GT": ">", 04 "gt": ">", 05 "LT": "<", 06 "lt": "<", 07 // 省略部分代码 08 "awint;": "⨑", 09 "bcong;": "≌", 10 "bdquo;": "„", 11 "bepsi;": "϶", 12 "blank;": "␣", 13 "blk12;": "▒", 14 "blk14;": "░", 15 "blk34;": "▓", 16 "block;": "█", 17 "boxDL;": "╗", 18 "boxDl;": "╖", 19 "boxdL;": "╕", 20 // 省略部分代码 21 } </code></pre> 除了命名字符引用之外，还有一类字符引用没有特定的名称，只能用数字表示，这类实体叫作数字字符引用（numeric character reference）。与命名字符引用不同，数字字符引用以字符串 <code>&#</code> 开头，比命名字符引用的开头部分多出了字符#，例如 <code><</code>;。实际上，<code><</code> 对应的字符也是 <，换句话说，<code><</code> 与 <code><</code> 是等价的。数字字符引用既可以用十进制来表示，也可以使用十六进制来表示。例如，十进制数字 60 对应的十六进制值为 3c，因此实体 <code><</code> 也可以表示为 <code><</code>。可以看到，当使用十六进制数表示实体时，需要以字符串 <code>&#x</code> 开头。 理解了 HTML 实体后，我们再来讨论为什么 Vue.js 模板的解析器要对文本节点中的 HTML 实体进行解码。为了理解这个问题，我们需要先明白一个大前提：在 Vue.js 模板中，文本节点所包含的 HTML 实体不会被浏览器解析。这是因为模板中的文本节点最终将通过如 el.textContent 等文本操作方法设置到页面，而通过 el.textContent 设置的文本内容是不会经过 HTML 实体解码的，例如： <pre><code class="prism language-javascript">01 el.textContent = '<' </code></pre> 最终 el 的文本内容将会原封不动地呈现为字符串 '<code><'</code>，而不会呈现字符 <。这就意味着，如果用户在 Vue.js 模板中编写了HTML 实体，而模板解析器不对其进行解码，那么最终渲染到页面的内容将不符合用户的预期。因此，我们应该在解析阶段对文本节点中存在的 HTML 实体进行解码。 模板解析器的解码行为应该与浏览器的行为一致。因此，我们应该按照 WHATWG 规范实现解码逻辑。规范中明确定义了解码 HTML 实体时状态机的状态迁移流程。下图给出了简化版的状态迁移流程，我们会在后文中对其进行补充： <a href="http://img.e-com-net.com/image/info8/ea84f90ffaba4fe9bdccd171eb2a022e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ea84f90ffaba4fe9bdccd171eb2a022e.jpg" alt="Vue解析器_第22张图片" width="650" height="366" style="border:1px solid black;"></a> 假定状态机当前处于初始的 DATA 模式。由上图可知，当解析器遇到字符 & 时，会进入“字符引用状态”，并消费字符&，接着解析下一个字符。如果下一个字符是 ASCII 字母或数字（ASCII alphanumeric），则进入“命名字符引用状态”，其中 ASCII 字母或数字指的是 0~9 这十个数字以及字符集合a~z 再加上字符集合 A~Z。当然，如果下一个字符是 #，则进入“数字字符引用状态”。 一旦状态机进入命名字符引用状态，解析器将会执行比较复杂的匹配流程。我们通过几个例子来直观地感受一下这个过程。假设文本内容为： <pre><code class="prism language-javascript">01 a&ltb </code></pre> 上面这段文本会被解析为： <pre><code class="prism language-javascript">01 a<b </code></pre> 为什么会得到这样的解析结果呢？接下来，我们分析整个解析过程： <ul> <li>首先，当解析器遇到字符 & 时，会进入字符引用状态。接着，解析下一个字符 l，这会使得解析器进入命名字符引用状态，并在命名字符引用表（后文简称“引用表”）中查找以字符 l 开头的项。由于引用表中存在诸多以字符 l 开头的项，例如lt、lg、le 等，因此解析器认为此时是“匹配”的。</li> <li>于是开始解析下一个字符 t，并尝试去引用表中查找以 lt 开头的项。由于引用表中也存在多个以 lt 开头的项，例如 lt、ltcc;、ltri; 等，因此解析器认为此时也是“匹配”的。</li> <li>于是又开始解析下一个字符 b，并尝试去引用表中查找以 ltb 开头的项，结果发现引用表中不存在符合条件的项，至此匹配结束。</li> </ul> 当匹配结束时，解析器会检查最后一个匹配的字符。如果该字符是分号（;），则会产生一个合法的匹配，并渲染对应字符。但在上例中，最后一个匹配的字符是字符 t，并不是分号（;），因此会产生一个解析错误，但由于历史原因，浏览器仍然能够解析它。在这种情况下，浏览器的解析规则是：最短原则。其中“最短”指的是命名字符引用的名称最短。举个例子，假设文本内容为： <pre><code class="prism language-javascript">01 a&ltcc; </code></pre> 我们知道 <code>⪦</code> 是一个合法的命名字符引用，因此上述文本会被渲染为：a⪦。但如果去掉上述文本中的分号，即： <pre><code class="prism language-javascript">01 a&ltcc </code></pre> 解析器在处理这段文本中的实体时，最后匹配的字符将不再是分号，而是字符 c。按照“最短原则”，解析器只会渲染名称更短的字符引用。在字符串 <cc 中，< 的名称要短于 <cc，因此最终会将 < 作为合法的字符引用来渲染，而字符串 cc 将作为普通字符来渲染。所以上面的文本最终会被渲染为：a<cc。 需要说明的是，上述解析过程仅限于不用作属性值的普通文本。换句话说，用作属性值的文本会有不同的解析规则。举例来说，给出如下 HTML 文本： <pre><code class="prism language-javascript">01 <a href="foo.com?a=1<=2">foo.com?a=1&lt=2</a> </code></pre> 可以看到，a 标签的 href 属性值与它的文本子节点具有同样的内容，但它们被解析之后的结果不同。其中属性值中出现的 < 将原封不动地展示，而文本子节点中出现的 < 将会被解析为字符 <。这也是符合期望的，很明显，<=2 将构成链接中的查询参数，如果将其中的 < 解码为字符 <，将会破坏用户的URL。实际上，WHATWG 规范中对此也有完整的定义，出于历史原因的考虑，对于属性值中的字符引用，如果最后一个匹配的字符不是分号，并且该匹配的字符的下一个字符是等于号、ASCII 字母或数字，那么该匹配项将作为普通文本被解析。 明白了原理，我们就着手实现。我们面临的第一个问题是，如何处理省略分号的情况？关于字符引用中的分号，我们可以总结如下： <ul> <li>当存在分号时：执行完整匹配。</li> <li>当省略分号时：执行最短匹配。</li> </ul> 为此，我们需要精心设计命名字符引用表。由于命名字符引用的数量非常多，因此这里我们只取其中一部分作为命名字符引用表的内容，如下面的代码所示： <pre><code class="prism language-javascript">01 const namedCharacterReferences = { 02 "gt": ">", 03 "gt;": ">", 04 "lt": "<", 05 "lt;": "<", 06 "ltcc;": "⪦" 07 } </code></pre> 上面这张表是经过精心设计的。观察namedCharacterReferences 对象可以发现，相同的字符对应的实体会有多个，即带分号的版本和不带分号的版本，例如"gt" 和 “gt;”。另外一些实体则只有带分号的版本，因为这些实体不允许省略分号，例如 “ltcc;”。我们可以根据这张表来实现实体的解码逻辑。假设我们有如下文本内容： <pre><code class="prism language-javascript">01 a&ltccbbb </code></pre> 在解码这段文本时，我们首先根据字符 & 将文本分为两部分： <ul> <li>一部分是普通文本：a。</li> <li>另一部分则是：<ccbbb。</li> </ul> 对于普通文本部分，由于它不需要被解码，因此索引原封不动地保留。而对于可能是字符引用的部分，执行解码工作： <ul> <li>第一步：计算出命名字符引用表中实体名称的最大长度。由于在 namedCharacterReferences 对象中，名称最长的实体是ltcc;，它具有 5 个字符，因此最大长度是 5。</li> <li>第二步：根据最大长度截取字符串 ltccbbb，即’ltccbbb’.slice(0, 5)，最终结果是：‘ltccb’</li> <li>第三步：用截取后的字符串 ‘ltccb’ 作为键去命名字符引用表中查询对应的值，即解码。由于引用表namedCharacterReferences 中不存在键值为 ‘ltccb’ 的项，因此不匹配。</li> <li>第四步：当发现不匹配时，我们将最大长度减 1，并重新执行第二步，直到找到匹配项为止。在上面这个例子中，最终的匹配项将会是 ‘lt’。因此，上述文本最终会被解码为：</li> </ul> <pre><code class="prism language-javascript">01 a<ccbbb </code></pre> 这样，我们就实现了当字符引用省略分号时按照“最短原则”进行解码。 下面的 decodeHtml 函数给出了具体实现： <pre><code class="prism language-javascript">01 // 第一个参数为要被解码的文本内容 02 // 第二个参数是一个布尔值，代表文本内容是否作为属性值 03 function decodeHtml(rawText, asAttr = false) { 04 let offset = 0 05 const end = rawText.length 06 // 经过解码后的文本将作为返回值被返回 07 let decodedText = '' 08 // 引用表中实体名称的最大长度 09 let maxCRNameLength = 0 10 11 // advance 函数用于消费指定长度的文本 12 function advance(length) { 13 offset += length 14 rawText = rawText.slice(length) 15 } 16 17 // 消费字符串，直到处理完毕为止 18 while (offset < end) { 19 // 用于匹配字符引用的开始部分，如果匹配成功，那么 head[0] 的值将有三种可能： 20 // 1. head[0] === '&'，这说明该字符引用是命名字符引用 21 // 2. head[0] === '&#'，这说明该字符引用是用十进制表示的数字字符引用 22 // 3. head[0] === '&#x'，这说明该字符引用是用十六进制表示的数字字符引用 23 const head = /&(?:#x?)?/i.exec(rawText) 24 // 如果没有匹配，说明已经没有需要解码的内容了 25 if (!head) { 26 // 计算剩余内容的长度 27 const remaining = end - offset 28 // 将剩余内容加到 decodedText 上 29 decodedText += rawText.slice(0, remaining) 30 // 消费剩余内容 31 advance(remaining) 32 break 33 } 34 35 // head.index 为匹配的字符 & 在 rawText 中的位置索引 36 // 截取字符 & 之前的内容加到 decodedText 上 37 decodedText += rawText.slice(0, head.index) 38 // 消费字符 & 之前的内容 39 advance(head.index) 40 41 // 如果满足条件，则说明是命名字符引用，否则为数字字符引用 42 if (head[0] === '&') { 43 let name = '' 44 let value 45 // 字符 & 的下一个字符必须是 ASCII 字母或数字，这样才是合法的命名字符引用 46 if (/[0-9a-z]/i.test(rawText[1])) { 47 // 根据引用表计算实体名称的最大长度， 48 if (!maxCRNameLength) { 49 maxCRNameLength = Object.keys(namedCharacterReferences).reduce( 50 (max, name) => Math.max(max, name.length), 51 0 52 ) 53 } 54 // 从最大长度开始对文本进行截取，并试图去引用表中找到对应的项 55 for (let length = maxCRNameLength; !value && length > 0; --length) { 56 // 截取字符 & 到最大长度之间的字符作为实体名称 57 name = rawText.substr(1, length) 58 // 使用实体名称去索引表中查找对应项的值 59 value = (namedCharacterReferences)[name] 60 } 61 // 如果找到了对应项的值，说明解码成功 62 if (value) { 63 // 检查实体名称的最后一个匹配字符是否是分号 64 const semi = name.endsWith(';') 65 // 如果解码的文本作为属性值，最后一个匹配的字符不是分号， 66 // 并且最后一个匹配字符的下一个字符是等于号（=）、ASCII 字母或数字， 67 // 由于历史原因，将字符 & 和实体名称 name 作为普通文本 68 if ( 69 asAttr && 70 !semi && 71 /[=a-z0-9]/i.test(rawText[name.length + 1] || '') 72 ) { 73 decodedText += '&' + name 74 advance(1 + name.length) 75 } else { 76 // 其他情况下，正常使用解码后的内容拼接到 decodedText 上 77 decodedText += value 78 advance(1 + name.length) 79 } 80 } else { 81 // 如果没有找到对应的值，说明解码失败 82 decodedText += '&' + name 83 advance(1 + name.length) 84 } 85 } else { 86 // 如果字符 & 的下一个字符不是 ASCII 字母或数字，则将字符 & 作为普通文本 87 decodedText += '&' 88 advance(1) 89 } 90 } 91 } 92 return decodedText 93 } </code></pre> 有了 decodeHtml 函数之后，我们就可以在解析文本节点时通过它对文本内容进行解码： <pre><code class="prism language-javascript">01 function parseText(context) { 02 // 省略部分代码 03 04 return { 05 type: 'Text', 06 content: decodeHtml(content) // 调用 decodeHtml 函数解码内容 07 } 08 } </code></pre> <h3>6.3、解码数字字符引用</h3> 在上一节中，我们使用下面的正则表达式来匹配一个文本中字符引用的开始部分： <pre><code class="prism language-javascript">01 const head = /&(?:#x?)?/i.exec(rawText) </code></pre> 我们可以根据该正则的匹配结果，来判断字符引用的类型： -如果 <code>head[0] === '&'，则说明匹配的是命名字符引用。●如果 head[0] === '&#'</code>，则说明匹配的是以十进制表示的数字字符引用。 -如果 <code>head[0] === '&#x'</code>，则说明匹配的是以十六进制表示的数字字符引用。 <ul> <li>如果 <code>head[0] === '&#x</code>’，则说明匹配的是以十六进制表示的数字字符引用。</li> </ul> 数字字符引用的格式是：前缀 + Unicode 码点。解码数字字符引用的关键在于，如何提取字符引用中的 Unicode 码点。考虑到数字字符引用的前缀可以是以十进制表示（&#），也可以是以十六进制表示（&#x），所以我们使用下面的代码来完成码点的提取： <pre><code class="prism language-javascript">01 // 判断是以十进制表示还是以十六进制表示 02 const hex = head[0] === '&#x' 03 // 根据不同进制表示法，选用不同的正则 04 const pattern = hex ? /^&#x([0-9a-f]+);?/i : /^&#([0-9]+);?/ 05 // 最终，body[1] 的值就是 Unicode 码点 06 const body = pattern.exec(rawText) </code></pre> 有了 Unicode 码点之后，只需要调用 String.fromCodePoint 函数即可将其解码为对应的字符： <pre><code class="prism language-javascript">01 if (body) { 02 // 根据对应的进制，将码点字符串转换为数字 03 const cp = parseInt(body[1], hex ? 16 : 10) 04 // 解码 05 const char = String.fromCodePoint(cp) 06 } </code></pre> 不过，在真正进行解码前，需要对码点的值进行合法性检查。WHATWG 规范中对此也有明确的定义: <ul> <li>如果码点值为 0x00，即十进制的数字 0，它在 Unicode 中代表空字符（NULL），这将是一个解析错误，解析器会将码点值替换为 0xFFFD。</li> <li>如果码点值大于 0x10FFFF（0x10FFFF 为 Unicode 的最大值），这也是一个解析错误，解析器会将码点值替换为0xFFFD。</li> <li>如果码点值处于代理对（surrogate pair）范围内，这也是一个解析错误，解析器会将码点值替换为 0xFFFD，其中surrogate pair 是预留给 UTF-16 的码位，其范围是：[0xD800, 0xDFFF]。</li> <li>如果码点值是 noncharacter，这也是一个解析错误，但什么都不需要做。这里的 noncharacter 代表 Unicode 永久保留的码点，用于 Unicode 内部，它的取值范围是：[0xFDD0,0xFDEF]，还包括：0xFFFE、0xFFFF、0x1FFFE、0x1FFFF、0x2FFFE、0x2FFFF、0x3FFFE、0x3FFFF、0x4FFFE、0x4FFFF、0x5FFFE、0x5FFFF、0x6FFFE、0x6FFFF、0x7FFFE、0x7FFFF、0x8FFFE、0x8FFFF、0x9FFFE、0x9FFFF、0xAFFFE、0xAFFFF、0xBFFFE、0xBFFFF、0xCFFFE、0xCFFFF、0xDFFFE、0xDFFFF、0xEFFFE、0xEFFFF、0xFFFFE、0xFFFFF、0x10FFFE、0x10FFFF。</li> </ul> 如果码点值对应的字符是回车符（0x0D），或者码点值为控制字符集（control character）中的非 ASCII 空白符（ASCII whitespace），则是一个解析错误。这时需要将码点作为索引，在下表中查找对应的替换码点： <pre><code class="prism language-javascript">01 const CCR_REPLACEMENTS = { 02 0x80: 0x20ac, 03 0x82: 0x201a, 04 0x83: 0x0192, 05 0x84: 0x201e, 06 0x85: 0x2026, 07 0x86: 0x2020, 08 0x87: 0x2021, 09 0x88: 0x02c6, 10 0x89: 0x2030, 11 0x8a: 0x0160, 12 0x8b: 0x2039, 13 0x8c: 0x0152, 14 0x8e: 0x017d, 15 0x91: 0x2018, 16 0x92: 0x2019, 17 0x93: 0x201c, 18 0x94: 0x201d, 19 0x95: 0x2022, 20 0x96: 0x2013, 21 0x97: 0x2014, 22 0x98: 0x02dc, 23 0x99: 0x2122, 24 0x9a: 0x0161, 25 0x9b: 0x203a, 26 0x9c: 0x0153, 27 0x9e: 0x017e, 28 0x9f: 0x0178 29 } </code></pre> 如果存在对应的替换码点，则渲染该替换码点对应的字符，否则直接渲染原码点对应的字符。 上述关于码点合法性检查的具体实现如下： <pre><code class="prism language-javascript">01 if (body) { 02 // 根据对应的进制，将码点字符串转换为数字 03 const cp = parseInt(body[1], hex ? 16 : 10) 04 // 检查码点的合法性 05 if (cp === 0) { 06 // 如果码点值为 0x00，替换为 0xfffd 07 cp = 0xfffd 08 } else if (cp > 0x10ffff) { 09 // 如果码点值超过 Unicode 的最大值，替换为 0xfffd 10 cp = 0xfffd 11 } else if (cp >= 0xd800 && cp <= 0xdfff) { 12 // 如果码点值处于 surrogate pair 范围内，替换为 0xfffd 13 cp = 0xfffd 14 } else if ((cp >= 0xfdd0 && cp <= 0xfdef) || (cp & 0xfffe) === 0xfffe) { 15 // 如果码点值处于 noncharacter 范围内，则什么都不做，交给平台处理 16 // noop 17 } else if ( 18 // 控制字符集的范围是：[0x01, 0x1f] 加上 [0x7f, 0x9f] 19 // 去掉 ASICC 空白符：0x09(TAB)、0x0A(LF)、0x0C(FF) 20 // 0x0D(CR) 虽然也是 ASICC 空白符，但需要包含 21 (cp >= 0x01 && cp <= 0x08) || 22 cp === 0x0b || 23 (cp >= 0x0d && cp <= 0x1f) || 24 (cp >= 0x7f && cp <= 0x9f) 25 ) { 26 // 在 CCR_REPLACEMENTS 表中查找替换码点，如果找不到，则使用原码点 27 cp = CCR_REPLACEMENTS[cp] || cp 28 } 29 // 最后进行解码 30 const char = String.fromCodePoint(cp) 31 } </code></pre> 在上面这段代码中，我们完整地还原了码点合法性检查的逻辑，它有如下几个关键点: <ul> <li>其中控制字符集（control character）的码点范围是：[0x01,0x1f] 和 [0x7f, 0x9f]。这个码点范围包含了 ASCII 空白符：0x09(TAB)、0x0A(LF)、0x0C(FF) 和 0x0D(CR)，但WHATWG 规范中要求包含 0x0D(CR)。</li> <li>码点 0xfffd 对应的符号是 �。你一定在出现“乱码”的情况下见过这个字符，它是 Unicode 中的替换字符，通常表示在解码过程中出现“错误”，例如使用了错误的解码方式等。</li> </ul> 最后，我们将上述代码整合到 decodeHtml 函数中，这样就实现一个完善的 HTML 文本解码函数： <pre><code class="prism language-javascript">01 function decodeHtml(rawText, asAttr = false) { 02 // 省略部分代码 03 04 // 消费字符串，直到处理完毕为止 05 while (offset < end) { 06 // 省略部分代码 07 08 // 如果满足条件，则说明是命名字符引用，否则为数字字符引用 09 if (head[0] === '&') { 10 // 省略部分代码 11 } else { 12 // 判断是十进制表示还是十六进制表示 13 const hex = head[0] === '&#x' 14 // 根据不同进制表示法，选用不同的正则 15 const pattern = hex ? /^&#x([0-9a-f]+);?/i : /^&#([0-9]+);?/ 16 // 最终，body[1] 的值就是 Unicode 码点 17 const body = pattern.exec(rawText) 18 19 // 如果匹配成功，则调用 String.fromCodePoint 函数进行解码 20 if (body) { 21 // 根据对应的进制，将码点字符串转换为数字 22 const cp = Number.parseInt(body[1], hex ? 16 : 10) 23 // 码点的合法性检查 24 if (cp === 0) { 25 // 如果码点值为 0x00，替换为 0xfffd 26 cp = 0xfffd 27 } else if (cp > 0x10ffff) { 28 // 如果码点值超过 Unicode 的最大值，替换为 0xfffd 29 cp = 0xfffd 30 } else if (cp >= 0xd800 && cp <= 0xdfff) { 31 // 如果码点值处于 surrogate pair 范围内，替换为 0xfffd 32 cp = 0xfffd 33 } else if ((cp >= 0xfdd0 && cp <= 0xfdef) || (cp & 0xfffe) === 0xfffe) { 34 // 如果码点值处于 noncharacter 范围内，则什么都不做，交给平台处理 35 // noop 36 } else if ( 37 // 控制字符集的范围是：[0x01, 0x1f] 加上 [0x7f, 0x9f] 38 // 去掉 ASICC 空白符：0x09(TAB)、0x0A(LF)、0x0C(FF) 39 // 0x0D(CR) 虽然也是 ASICC 空白符，但需要包含 40 (cp >= 0x01 && cp <= 0x08) || 41 cp === 0x0b || 42 (cp >= 0x0d && cp <= 0x1f) || 43 (cp >= 0x7f && cp <= 0x9f) 44 ) { 45 // 在 CCR_REPLACEMENTS 表中查找替换码点，如果找不到，则使用原码点 46 cp = CCR_REPLACEMENTS[cp] || cp 47 } 48 // 解码后追加到 decodedText 上 49 decodedText += String.fromCodePoint(cp) 50 // 消费整个数字字符引用的内容 51 advance(body[0].length) 52 } else { 53 // 如果没有匹配，则不进行解码操作，只是把 head[0] 追加到 decodedText 上并消费 54 decodedText += head[0] 55 advance(head[0].length) 56 } 57 } 58 } 59 return decodedText 60 } </code></pre> <h2>7、解析插值与注释</h2> 文本插值是 Vue.js 模板中用来渲染动态数据的常用方法： <pre><code class="prism language-javascript">01 {{ count }} </code></pre> 默认情况下，插值以字符串 {{ 开头，并以字符串 }} 结尾。我们通常将这两个特殊的字符串称为定界符。定界符中间的内容可以是任意合法的 JavaScript 表达式，例如： <pre><code class="prism language-javascript">01 {{ obj.foo }} </code></pre> 或 <pre><code class="prism language-javascript">01 {{ obj.fn() }} </code></pre> 解析器在遇到文本插值的起始定界符({{)时，会进入文本“插值状态 6”，并调用 parseInterpolation 函数来解析插值内容，如下图所示： <a href="http://img.e-com-net.com/image/info8/ce8c18a2cf8a4a27a7307ea2f8a1b6b8.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ce8c18a2cf8a4a27a7307ea2f8a1b6b8.jpg" alt="Vue解析器_第23张图片" width="650" height="513" style="border:1px solid black;"></a> 解析器在解析插值时，只需要将文本插值的开始定界符与结束定界符之间的内容提取出来，作为 JavaScript 表达式即可，具体实现如下： <pre><code class="prism language-javascript">01 function parseInterpolation(context) { 02 // 消费开始定界符 03 context.advanceBy('{{'.length) 04 // 找到结束定界符的位置索引 05 closeIndex = context.source.indexOf('}}') 06 if (closeIndex < 0) { 07 console.error('插值缺少结束定界符') 08 } 09 // 截取开始定界符与结束定界符之间的内容作为插值表达式 10 const content = context.source.slice(0, closeIndex) 11 // 消费表达式的内容 12 context.advanceBy(content.length) 13 // 消费结束定界符 14 context.advanceBy('}}'.length) 15 16 // 返回类型为 Interpolation 的节点，代表插值节点 17 return { 18 type: 'Interpolation', 19 // 插值节点的 content 是一个类型为 Expression 的表达式节点 20 content: { 21 type: 'Expression', 22 // 表达式节点的内容则是经过 HTML 解码后的插值表达式 23 content: decodeHtml(content) 24 } 25 } 26 } </code></pre> 配合上面的 parseInterpolation 函数，解析如下模板内容： <pre><code class="prism language-javascript">01 const ast = parse(`<div>foo {{ bar }} baz</div>`) </code></pre> 最终将得到如下 AST： <pre><code class="prism language-javascript">01 const ast = { 02 type: 'Root', 03 children: [ 04 { 05 type: 'Element', 06 tag: 'div', 07 isSelfClosing: false, 08 props: [], 09 children: [ 10 { type: 'Text', content: 'foo ' }, 11 // 插值节点 12 { 13 type: 'Interpolation', 14 content: [ 15 type: 'Expression', 16 content: ' bar ' 17 ] 18 }, 19 { type: 'Text', content: ' baz' } 20 ] 21 } 22 ] 23 } </code></pre> 解析注释的思路与解析插值非常相似，如下面的parseComment 函数所示： <pre><code class="prism language-javascript">01 function parseComment(context) { 02 // 消费注释的开始部分 03 context.advanceBy('') 06 // 截取注释节点的内容 07 const content = context.source.slice(0, closeIndex) 08 // 消费内容 09 context.advanceBy(content.length) 10 // 消费注释的结束部分 11 context.advanceBy('-->'.length) 12 // 返回类型为 Comment 的节点 13 return { 14 type: 'Comment', 15 content 16 } 17 } </code></pre> 配合 parseComment 函数，解析如下模板内容： <pre><code class="prism language-javascript">01 const ast = parse(`<div></div>`) </code></pre> 最终得到如下 AST： <pre><code class="prism language-javascript">01 const ast = { 02 type: 'Root', 03 children: [ 04 { 05 type: 'Element', 06 tag: 'div', 07 isSelfClosing: false, 08 props: [], 09 children: [ 10 { type: 'Comment', content: ' comments ' } 11 ] 12 } 13 ] 14 } </code></pre> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1728020491224035328"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(#,Vue+TypeScript,Web,vue.js,flutter,前端,javascript,开发语言)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835512920797179904.htm" title="element实现动态路由+面包屑" target="_blank">element实现动态路由+面包屑</a> 软件技术NINI <a class="tag" taget="_blank" href="/search/vue%E6%A1%88%E4%BE%8B/1.htm">vue案例</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi</div> </li> <li><a href="/article/1835511912843014144.htm" title="理解Gunicorn：Python WSGI服务器的基石" target="_blank">理解Gunicorn：Python WSGI服务器的基石</a> 范范0825 <a class="tag" taget="_blank" href="/search/ipython/1.htm">ipython</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico</div> </li> <li><a href="/article/1835509897106649088.htm" title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a> igotyback <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div> </li> <li><a href="/article/1835504218178416640.htm" title="Google earth studio 简介" target="_blank">Google earth studio 简介</a> 陟彼高冈yu <a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a> <div>GoogleEarthStudio是一个基于Web的动画工具，专为创作使用GoogleEarth数据的动画和视频而设计。它利用了GoogleEarth强大的三维地图和卫星影像数据库，使用户能够轻松地创建逼真的地球动画、航拍视频和动态地图可视化。网址为https://www.google.com/earth/studio/。GoogleEarthStudio是一个基于Web的动画工具，专为创作使用G</div> </li> <li><a href="/article/1835502578050363392.htm" title="PHP环境搭建详细教程" target="_blank">PHP环境搭建详细教程</a> 好看资源平台 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a> <div>PHP是一个流行的服务器端脚本语言，广泛用于Web开发。为了使PHP能够在本地或服务器上运行，我们需要搭建一个合适的PHP环境。本教程将结合最新资料，介绍在不同操作系统上搭建PHP开发环境的多种方法，包括Windows、macOS和Linux系统的安装步骤，以及本地和Docker环境的配置。1.PHP环境搭建概述PHP环境的搭建主要分为以下几类：集成开发环境：例如XAMPP、WAMP、MAMP，这</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a> STU学生网页设计 <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835497792265613312.htm" title="【加密社】Solidity 中的事件机制及其应用" target="_blank">【加密社】Solidity 中的事件机制及其应用</a> 加密社 <a class="tag" taget="_blank" href="/search/%E9%97%B2%E4%BE%83/1.htm">闲侃</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E5%90%88%E7%BA%A6/1.htm">智能合约</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a> <div>加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> 二挡起步 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动" target="_blank">HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动</a> 二挡起步 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835495170972413952.htm" title="git - Webhook让部署自动化" target="_blank">git - Webhook让部署自动化</a> 大猪大猪 <div>我们现在有一个需求，将项目打包上传到gitlab或者github后，程序能自动部署，不用手动地去服务器中进行项目更新并运行，如何做到？这里我们可以使用gitlab与github的挂钩，挂钩的原理就是，每当我们有请求到gitlab与github服务器时，这时他俩会根据我们配置的挂钩地扯进行访问，webhook挂钩程序会一直监听着某个端口请求，一但收到他们发过来的请求，这时就知道用户有请求提交了，这时</div> </li> <li><a href="/article/1835493267907637248.htm" title="webpack图片等资源的处理" target="_blank">webpack图片等资源的处理</a> dmengmeng <div>需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p</div> </li> <li><a href="/article/1835492740536823808.htm" title="node.js学习" target="_blank">node.js学习</a> 小猿L <a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a> <div>node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行</div> </li> <li><a href="/article/1835470931783413760.htm" title="「豆包Marscode体验官」 | 云端 IDE 启动 & Rust 体验" target="_blank">「豆包Marscode体验官」 | 云端 IDE 启动 & Rust 体验</a> 张风捷特烈 <a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a><a class="tag" taget="_blank" href="/search/rust/1.htm">rust</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>theme:cyanosis我正在参加「豆包MarsCode初体验」征文活动MarsCode可以看作一个运行在服务端的远程VSCode开发环境。对于我这种想要学习体验某些语言，但不想在电脑里装环境的人来说非常友好。本文就来介绍一下在MarsCode里，我的体验rust开发体验。一、MarsCode是什么它的本质是:提供代码助手和云端IDE服务的web网站，可通过下面的链接访问https://www</div> </li> <li><a href="/article/1835455048277127168.htm" title="Python神器！WEB自动化测试集成工具 DrissionPage" target="_blank">Python神器！WEB自动化测试集成工具 DrissionPage</a> 亚丁号 <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>一、前言用requests做数据采集面对要登录的网站时，要分析数据包、JS源码，构造复杂的请求，往往还要应付验证码、JS混淆、签名参数等反爬手段，门槛较高。若数据是由JS计算生成的，还须重现计算过程，体验不好，开发效率不高。使用浏览器，可以很大程度上绕过这些坑，但浏览器运行效率不高。因此，这个库设计初衷，是将它们合而为一，能够在不同须要时切换相应模式，并提供一种人性化的使用方法，提高开发和运行效率</div> </li> <li><a href="/article/1835454921990828032.htm" title="Java爬虫框架（一）--架构设计" target="_blank">Java爬虫框架（一）--架构设计</a> 狼图腾-狼之传说 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%BB%BB%E5%8A%A1/1.htm">任务</a><a class="tag" taget="_blank" href="/search/html%E8%A7%A3%E6%9E%90%E5%99%A8/1.htm">html解析器</a><a class="tag" taget="_blank" href="/search/%E5%AD%98%E5%82%A8/1.htm">存储</a><a class="tag" taget="_blank" href="/search/%E7%94%B5%E5%AD%90%E5%95%86%E5%8A%A1/1.htm">电子商务</a> <div>一、架构图那里搜网络爬虫框架主要针对电子商务网站进行数据爬取，分析，存储，索引。爬虫：爬虫负责爬取，解析，处理电子商务网站的网页的内容数据库：存储商品信息索引：商品的全文搜索索引Task队列：需要爬取的网页列表Visited表：已经爬取过的网页列表爬虫监控平台：web平台可以启动，停止爬虫，管理爬虫，task队列，visited表。二、爬虫1.流程1)Scheduler启动爬虫器，TaskMast</div> </li> <li><a href="/article/1835454543471669248.htm" title="Java：爬虫框架" target="_blank">Java：爬虫框架</a> dingcho <a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a> <div>一、ApacheNutch2【参考地址】Nutch是一个开源Java实现的搜索引擎。它提供了我们运行自己的搜索引擎所需的全部工具。包括全文搜索和Web爬虫。Nutch致力于让每个人能很容易,同时花费很少就可以配置世界一流的Web搜索引擎.为了完成这一宏伟的目标,Nutch必须能够做到:每个月取几十亿网页为这些网页维护一个索引对索引文件进行每秒上千次的搜索提供高质量的搜索结果简单来说Nutch支持分</div> </li> <li><a href="/article/1835451016456269824.htm" title="MongoDB知识概括" target="_blank">MongoDB知识概括</a> GeorgeLin98 <a class="tag" taget="_blank" href="/search/%E6%8C%81%E4%B9%85%E5%B1%82/1.htm">持久层</a><a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a> <div>MongoDB知识概括MongoDB相关概念单机部署基本常用命令索引-IndexSpirngDataMongoDB集成副本集分片集群安全认证MongoDB相关概念业务应用场景：传统的关系型数据库（如MySQL），在数据操作的“三高”需求以及应对Web2.0的网站需求面前，显得力不从心。解释：“三高”需求：①Highperformance-对数据库高并发读写的需求。②HugeStorage-对海量数</div> </li> <li><a href="/article/1835448238103162880.htm" title="springboot+vue项目实战一-创建SpringBoot简单项目" target="_blank">springboot+vue项目实战一-创建SpringBoot简单项目</a> 苹果酱0567 <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E9%97%B4%E4%BB%B6/1.htm">中间件</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一</div> </li> <li><a href="/article/1835448239864770560.htm" title="JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）" target="_blank">JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）</a> 跳房子的前端 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数</div> </li> <li><a href="/article/1835443823287824384.htm" title="Python实现下载当前年份的谷歌影像" target="_blank">Python实现下载当前年份的谷歌影像</a> sand&wich <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>在GIS项目和地图应用中，获取最新的地理影像数据是非常重要的。本文将介绍如何使用Python代码从Google地图自动下载当前年份的影像数据，并将其保存为高分辨率的TIFF格式文件。这个过程涉及地理坐标转换、多线程下载和图像处理。关键功能该脚本的核心功能包括：坐标转换：支持WGS-84与WebMercator投影之间转换，以及处理中国GCJ-02偏移。自动化下载：多线程下载地图瓦片，提高效率。图像</div> </li> <li><a href="/article/1835443569968640000.htm" title="Spring MVC 全面指南：从入门到精通的详细解析" target="_blank">Spring MVC 全面指南：从入门到精通的详细解析</a> 一杯梅子酱 <a class="tag" taget="_blank" href="/search/%E6%8A%80%E6%9C%AF%E6%A0%88%E5%AD%A6%E4%B9%A0/1.htm">技术栈学习</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>引言：SpringMVC，作为Spring框架的一个重要模块，为构建Web应用提供了强大的功能和灵活性。无论是初学者还是有一定经验的开发者，掌握SpringMVC都将显著提升你的Web开发技能。本文旨在为初学者提供一个全面且易于理解的学习路径，通过详细的知识点分析和实际案例，帮助你快速上手SpringMVC，让学习过程既深刻又高效。一、SpringMVC简介1.1什么是SpringMVC？Spri</div> </li> <li><a href="/article/1835438028768768000.htm" title="Spring Boot中实现跨域请求" target="_blank">Spring Boot中实现跨域请求</a> BABA8891 <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>在SpringBoot中实现跨域请求（CORS，Cross-OriginResourceSharing）可以通过多种方式，以下是几种常见的方法：1.使用@CrossOrigin注解在SpringBoot中，你可以在控制器或者具体的请求处理方法上使用@CrossOrigin注解来允许跨域请求。在控制器上应用：importorg.springframework.web.bind.annotation.</div> </li> <li><a href="/article/1835438028009598976.htm" title="WebMagic：强大的Java爬虫框架解析与实战" target="_blank">WebMagic：强大的Java爬虫框架解析与实战</a> Aaron_945 <a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>文章目录引言官网链接WebMagic原理概述基础使用1.添加依赖2.编写PageProcessor高级使用1.自定义Pipeline2.分布式抓取优点结论引言在大数据时代，网络爬虫作为数据收集的重要工具，扮演着不可或缺的角色。Java作为一门广泛使用的编程语言，在爬虫开发领域也有其独特的优势。WebMagic是一个开源的Java爬虫框架，它提供了简单灵活的API，支持多线程、分布式抓取，以及丰富的</div> </li> <li><a href="/article/1835437775344726016.htm" title="博客网站制作教程" target="_blank">博客网站制作教程</a> 2401_85194651 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java</div> </li> <li><a href="/article/1835435506645692416.htm" title="00. 这里整理了最全的爬虫框架（Java + Python）" target="_blank">00. 这里整理了最全的爬虫框架（Java + Python）</a> 有一只柴犬 <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB%E7%B3%BB%E5%88%97/1.htm">爬虫系列</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2</div> </li> <li><a href="/article/1835428948339683328.htm" title="JavaScript `Map` 和 `WeakMap`详细解释" target="_blank">JavaScript `Map` 和 `WeakMap`详细解释</a> 跳房子的前端 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%8E%9F%E7%94%9F%E6%96%B9%E6%B3%95/1.htm">原生方法</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键</div> </li> <li><a href="/article/1835428317084348416.htm" title="最简单将静态网页挂载到服务器上(不用nginx)" target="_blank">最简单将静态网页挂载到服务器上(不用nginx)</a> 全能全知者 <a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl</div> </li> <li><a href="/article/1835427057752961024.htm" title="补充元象二面" target="_blank">补充元象二面</a> Redstone Monstrosity <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重</div> </li> <li><a href="/article/1835420753252675584.htm" title="微信小程序开发注意事项" target="_blank">微信小程序开发注意事项</a> jun778895 <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂</div> </li> <li><a href="/article/1835419870070665216.htm" title="切换淘宝最新npm镜像源是" target="_blank">切换淘宝最新npm镜像源是</a> hai40587 <a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库</div> </li> <li><a href="/article/103.htm" title="SAX解析xml文件" target="_blank">SAX解析xml文件</a> 小猪猪08 <a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a> <div>1.创建SAXParserFactory实例 2.通过SAXParserFactory对象获取SAXParser实例 3.创建一个类SAXParserHander继续DefaultHandler，并且实例化这个类 4.SAXParser实例的parse来获取文件 public static void main(String[] args) { //</div> </li> <li><a href="/article/230.htm" title="为什么mysql里的ibdata1文件不断的增长？" target="_blank">为什么mysql里的ibdata1文件不断的增长？</a> brotherlamp <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/linux%E8%BF%90%E7%BB%B4/1.htm">linux运维</a><a class="tag" taget="_blank" href="/search/linux%E8%B5%84%E6%96%99/1.htm">linux资料</a><a class="tag" taget="_blank" href="/search/linux%E8%A7%86%E9%A2%91/1.htm">linux视频</a><a class="tag" taget="_blank" href="/search/linux%E8%BF%90%E7%BB%B4%E8%87%AA%E5%AD%A6/1.htm">linux运维自学</a> <div>我们在 Percona 支持栏目经常收到关于 MySQL 的 ibdata1 文件的这个问题。当监控服务器发送一个关于 MySQL 服务器存储的报警时，恐慌就开始了 —— 就是说磁盘快要满了。一番调查后你意识到大多数地盘空间被 InnoDB 的共享表空间 ibdata1 使用。而你已经启用了 innodbfileper_table，所以问题是： ibdata1存了什么？当你启用了 i</div> </li> <li><a href="/article/357.htm" title="Quartz-quartz.properties配置" target="_blank">Quartz-quartz.properties配置</a> eksliang <a class="tag" taget="_blank" href="/search/quartz/1.htm">quartz</a> <div>其实Quartz JAR文件的org.quartz包下就包含了一个quartz.properties属性配置文件并提供了默认设置。如果需要调整默认配置，可以在类路径下建立一个新的quartz.properties，它将自动被Quartz加载并覆盖默认的设置。下面是这些默认值的解释 #-----集群的配置 org.quartz.scheduler.instanceName =</div> </li> <li><a href="/article/484.htm" title="informatica session的使用" target="_blank">informatica session的使用</a> 18289753290 <a class="tag" taget="_blank" href="/search/workflow/1.htm">workflow</a><a class="tag" taget="_blank" href="/search/session/1.htm">session</a><a class="tag" taget="_blank" href="/search/log/1.htm">log</a><a class="tag" taget="_blank" href="/search/Informatica/1.htm">Informatica</a> <div>如果希望workflow存储最近20次的log，在session里的Config Object设置，log options做配置，save session log :sessions run ;savesessio log for these runs:20 session下面的source 里面有个tracing </div> </li> <li><a href="/article/611.htm" title="Scrapy抓取网页时出现CRC check failed 0x471e6e9a != 0x7c07b839L的错误" target="_blank">Scrapy抓取网页时出现CRC check failed 0x471e6e9a != 0x7c07b839L的错误</a> 酷的飞上天空 <a class="tag" taget="_blank" href="/search/scrapy/1.htm">scrapy</a> <div>Scrapy版本0.14.4 出现问题现象： ERROR: Error downloading <GET http://xxxxx CRC check failed 解决方法 1.设置网络请求时的header中的属性'Accept-Encoding': '*;q=0' 明确表示不支持任何形式的压缩格式，避免程序的解压</div> </li> <li><a href="/article/738.htm" title="java Swing小集锦" target="_blank">java Swing小集锦</a> 永夜-极光 <a class="tag" taget="_blank" href="/search/java+swing/1.htm">java swing</a> <div>1.关闭窗体弹出确认对话框 1.1 this.setDefaultCloseOperation (JFrame.DO_NOTHING_ON_CLOSE); 1.2 this.addWindowListener ( new WindowAdapter () { public void windo</div> </li> <li><a href="/article/865.htm" title="强制删除.svn文件夹" target="_blank">强制删除.svn文件夹</a> 随便小屋 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> 在windows上，从别处复制的项目中可能带有.svn文件夹，手动删除太麻烦，并且每个文件夹下都有。所以写了个程序进行删除。因为.svn文件夹在windows上是只读的，所以用File中的delete()和deleteOnExist()方法都不能将其删除，所以只能采用windows命令方式进行删除</div> </li> <li><a href="/article/992.htm" title="GET和POST有什么区别？及为什么网上的多数答案都是错的。" target="_blank">GET和POST有什么区别？及为什么网上的多数答案都是错的。</a> aijuans <a class="tag" taget="_blank" href="/search/get+post/1.htm">get post</a> <div> 如果有人问你，GET和POST，有什么区别？你会如何回答？我的经历前几天有人问我这个问题。我说GET是用于获取数据的，POST，一般用于将数据发给服务器之用。这个答案好像并不是他想要的。于是他继续追问有没有别的区别？我说这就是个名字而已，如果服务器支持，他完全可以把G</div> </li> <li><a href="/article/1119.htm" title="谈谈新浪微博背后的那些算法" target="_blank">谈谈新浪微博背后的那些算法</a> aoyouzi <a class="tag" taget="_blank" href="/search/%E8%B0%88%E8%B0%88%E6%96%B0%E6%B5%AA%E5%BE%AE%E5%8D%9A%E8%83%8C%E5%90%8E%E7%9A%84%E9%82%A3%E4%BA%9B%E7%AE%97%E6%B3%95/1.htm">谈谈新浪微博背后的那些算法</a> <div>本文对微博中常见的问题的对应算法进行了简单的介绍，在实际应用中的算法比介绍的要复杂的多。当然，本文覆盖的主题并不全，比如好友推荐、热点跟踪等就没有涉及到。但古人云“窥一斑而见全豹”，希望本文的介绍能帮助大家更好的理解微博这样的社交网络应用。微博是一个很多人都在用的社交应用。天天刷微博的人每天都会进行着这样几个操作：原创、转发、回复、阅读、关注、@等。其中，前四个是针对短博文，最后的关注和@则针</div> </li> <li><a href="/article/1246.htm" title="Connection reset 连接被重置的解决方法" target="_blank">Connection reset 连接被重置的解决方法</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%AD%97%E7%AC%A6%E6%B5%81/1.htm">字符流</a><a class="tag" taget="_blank" href="/search/%E8%BF%9E%E6%8E%A5%E8%A2%AB%E9%87%8D%E7%BD%AE/1.htm">连接被重置</a> <div>流是java的核心部分,,昨天在做android服务器连接服务器的时候出了问题,就将代码放到java中执行,结果还是一样连接被重置被重置的代码如下; 客户端代码; package 通信软件服务器; import java.io.BufferedWriter; import java.io.OutputStream; import java.io.O</div> </li> <li><a href="/article/1373.htm" title="web.xml配置详解之filter" target="_blank">web.xml配置详解之filter</a> bijian1013 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/web.xml/1.htm">web.xml</a><a class="tag" taget="_blank" href="/search/filter/1.htm">filter</a> <div>一.定义 <filter> <filter-name>encodingfilter</filter-name> <filter-class>com.my.app.EncodingFilter</filter-class> <init-param> <param-name>encoding<</div> </li> <li><a href="/article/1500.htm" title="Heritrix" target="_blank">Heritrix</a> Bill_chen <a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%88%B6%E9%80%A0/1.htm">制造</a><a class="tag" taget="_blank" href="/search/%E9%85%8D%E7%BD%AE%E7%AE%A1%E7%90%86/1.htm">配置管理</a> <div>作为纯Java语言开发的、功能强大的网络爬虫Heritrix，其功能极其强大，且扩展性良好，深受热爱搜索技术的盆友们的喜爱，但它配置较为复杂，且源码不好理解，最近又使劲看了下，结合自己的学习和理解，跟大家分享Heritrix的点点滴滴。 Heritrix的下载（http://sourceforge.net/projects/archive-crawler/）安装、配置，就不罗嗦了，可以自己找找资</div> </li> <li><a href="/article/1627.htm" title="【Zookeeper】FAQ" target="_blank">【Zookeeper】FAQ</a> bit1129 <a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a> <div>1.脱离IDE，运行简单的Java客户端程序 #ZkClient是简单的Zookeeper~$ java -cp "./:zookeeper-3.4.6.jar:./lib/*" ZKClient 1. Zookeeper是的Watcher回调是同步操作，需要添加异步处理的代码 2. 如果Zookeeper集群跨越多个机房，那么Leader/</div> </li> <li><a href="/article/1754.htm" title="The user specified as a definer ('aaa'@'localhost') does not exist" target="_blank">The user specified as a definer ('aaa'@'localhost') does not exist</a> 白糖_ <a class="tag" taget="_blank" href="/search/localhost/1.htm">localhost</a> <div>今天遇到一个客户BUG，当前的jdbc连接用户是root，然后部分删除操作都会报下面这个错误：The user specified as a definer ('aaa'@'localhost') does not exist 最后找原因发现删除操作做了触发器，而触发器里面有这样一句 /*!50017 DEFINER = ''aaa@'localhost' */ 原来最初</div> </li> <li><a href="/article/1881.htm" title="javascript中showModelDialog刷新父页面" target="_blank">javascript中showModelDialog刷新父页面</a> bozch <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%88%B7%E6%96%B0%E7%88%B6%E9%A1%B5%E9%9D%A2/1.htm">刷新父页面</a><a class="tag" taget="_blank" href="/search/showModalDialog/1.htm">showModalDialog</a> <div>在页面中使用showModalDialog打开模式子页面窗口的时候，如果想在子页面中操作父页面中的某个节点，可以通过如下的进行： window.showModalDialog('url',self,‘status...’); // 首先中间参数使用self 在子页面使用w</div> </li> <li><a href="/article/2008.htm" title="编程之美-买书折扣" target="_blank">编程之美-买书折扣</a> bylijinnan <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E4%B9%8B%E7%BE%8E/1.htm">编程之美</a> <div> import java.util.Arrays; public class BookDiscount { /**编程之美买书折扣书上的贪心算法的分析很有意思，我看了半天看不懂，结果作者说，贪心算法在这个问题上是不适用的。。下面用动态规划实现。哈利波特这本书一共有五卷，每卷都是8欧元，如果读者一次购买不同的两卷可扣除5%的折扣，三卷10%，四卷20%，五卷</div> </li> <li><a href="/article/2135.htm" title="关于struts2.3.4项目跨站执行脚本以及远程执行漏洞修复概要" target="_blank">关于struts2.3.4项目跨站执行脚本以及远程执行漏洞修复概要</a> chenbowen00 <a class="tag" taget="_blank" href="/search/struts/1.htm">struts</a><a class="tag" taget="_blank" href="/search/WEB%E5%AE%89%E5%85%A8/1.htm">WEB安全</a> <div>因为近期负责的几个银行系统软件，需要交付客户，因此客户专门请了安全公司对系统进行了安全评测，结果发现了诸如跨站执行脚本，远程执行漏洞以及弱口令等问题。下面记录下本次解决的过程以便后续 1、首先从最简单的开始处理，服务器的弱口令问题，首先根据安全工具提供的测试描述中发现应用服务器中存在一个匿名用户，默认是不需要密码的，经过分析发现服务器使用了FTP协议，而使用ftp协议默认会产生一个匿名用</div> </li> <li><a href="/article/2262.htm" title="[电力与暖气]煤炭燃烧与电力加温" target="_blank">[电力与暖气]煤炭燃烧与电力加温</a> comsci <div> 在宇宙中,用贝塔射线观测地球某个部分,看上去,好像一个个马蜂窝,又像珊瑚礁一样,原来是某个国家的采煤区..... 不过,这个采煤区的煤炭看来是要用完了.....那么依赖将起燃烧并取暖的城市,在极度严寒的季节中...该怎么办呢? &nbs</div> </li> <li><a href="/article/2389.htm" title="oracle O7_DICTIONARY_ACCESSIBILITY参数" target="_blank">oracle O7_DICTIONARY_ACCESSIBILITY参数</a> daizj <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div>O7_DICTIONARY_ACCESSIBILITY参数控制对数据字典的访问.设置为true,如果用户被授予了如select any table等any table权限,用户即使不是dba或sysdba用户也可以访问数据字典.在9i及以上版本默认为false,8i及以前版本默认为true.如果设置为true就可能会带来安全上的一些问题.这也就为什么O7_DICTIONARY_ACCESSIBIL</div> </li> <li><a href="/article/2516.htm" title="比较全面的MySQL优化参考" target="_blank">比较全面的MySQL优化参考</a> dengkane <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>本文整理了一些MySQL的通用优化方法，做个简单的总结分享，旨在帮助那些没有专职MySQL DBA的企业做好基本的优化工作，至于具体的SQL优化，大部分通过加适当的索引即可达到效果，更复杂的就需要具体分析了，可以参考本站的一些优化案例或者联系我，下方有我的联系方式。这是上篇。 1、硬件层相关优化 1.1、CPU相关在服务器的BIOS设置中，可</div> </li> <li><a href="/article/2643.htm" title="C语言homework2，有一个逆序打印数字的小算法" target="_blank">C语言homework2，有一个逆序打印数字的小算法</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/c/1.htm">c</a> <div>#h1# 0、完成课堂例子 1、将一个四位数逆序打印 1234 ==> 4321 实现方法一： # include <stdio.h> int main(void) { int i = 1234; int one = i%10; int two = i / 10 % 10; int three = i / 100 % 10; </div> </li> <li><a href="/article/2770.htm" title="apacheBench对网站进行压力测试" target="_blank">apacheBench对网站进行压力测试</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/apachebench/1.htm">apachebench</a> <div> ab 的全称是 ApacheBench ，是 Apache 附带的一个小工具，专门用于 HTTP Server 的 benchmark testing ，可以同时模拟多个并发请求。前段时间看到公司的开发人员也在用它作一些测试，看起来也不错，很简单，也很容易使用，所以今天花一点时间看了一下。通过下面的一个简单的例子和注释，相信大家可以更容易理解这个工具的使用。 </div> </li> <li><a href="/article/2897.htm" title="2种办法让HashMap线程安全" target="_blank">2种办法让HashMap线程安全</a> flyfoxs <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a><a class="tag" taget="_blank" href="/search/jni/1.htm">jni</a> <div>多线程之--2种办法让HashMap线程安全多线程之--synchronized 和reentrantlock的优缺点多线程之--2种JAVA乐观锁的比较( NonfairSync VS. FairSync) HashMap不是线程安全的,往往在写程序时需要通过一些方法来回避.其实JDK原生的提供了2种方法让HashMap支持线程安全. </div> </li> <li><a href="/article/3024.htm" title="Spring Security（04）——认证简介" target="_blank">Spring Security（04）——认证简介</a> 234390216 <a class="tag" taget="_blank" href="/search/Spring+Security/1.htm">Spring Security</a><a class="tag" taget="_blank" href="/search/%E8%AE%A4%E8%AF%81/1.htm">认证</a><a class="tag" taget="_blank" href="/search/%E8%BF%87%E7%A8%8B/1.htm">过程</a> <div>认证简介目录 1.1 认证过程 1.2 Web应用的认证过程 1.2.1 ExceptionTranslationFilter 1.2.2 在request之间共享SecurityContext 1</div> </li> <li><a href="/article/3151.htm" title="Java 位运算" target="_blank">Java 位运算</a> Javahuhui <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%BD%8D%E8%BF%90%E7%AE%97/1.htm">位运算</a> <div>// 左移( << ) 低位补0 // 0000 0000 0000 0000 0000 0000 0000 0110 然后左移2位后，低位补0： // 0000 0000 0000 0000 0000 0000 0001 1000 System.out.println(6 << 2);// 运行结果是24 // 右移( >> ) 高位补"</div> </li> <li><a href="/article/3278.htm" title="mysql免安装版配置" target="_blank">mysql免安装版配置</a> ldzyz007 <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>1、my-small.ini是为了小型数据库而设计的。不应该把这个模型用于含有一些常用项目的数据库。 2、my-medium.ini是为中等规模的数据库而设计的。如果你正在企业中使用RHEL,可能会比这个操作系统的最小RAM需求(256MB)明显多得多的物理内存。由此可见，如果有那么多RAM内存可以使用，自然可以在同一台机器上运行其它服务。 3、my-large.ini是为专用于一个SQL数据</div> </li> <li><a href="/article/3405.htm" title="MFC和ado数据库使用时遇到的问题" target="_blank">MFC和ado数据库使用时遇到的问题</a> 你不认识的休道人 <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/mfc/1.htm">mfc</a> <div>=================================================================== 第一个 =================================================================== try{ CString sql; sql.Format("select * from p</div> </li> <li><a href="/article/3532.htm" title="表单重复提交Double Submits" target="_blank">表单重复提交Double Submits</a> rensanning <a class="tag" taget="_blank" href="/search/double/1.htm">double</a> <div>可能发生的场景： *多次点击提交按钮 *刷新页面 *点击浏览器回退按钮 *直接访问收藏夹中的地址 *重复发送HTTP请求（Ajax）（1）点击按钮后disable该按钮一会儿，这样能避免急躁的用户频繁点击按钮。这种方法确实有些粗暴，友好一点的可以把按钮的文字变一下做个提示，比如Bootstrap的做法： http://getbootstrap.co</div> </li> <li><a href="/article/3659.htm" title="Java String 十大常见问题" target="_blank">Java String 十大常见问题</a> tomcat_oracle <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">正则表达式</a> <div>　1.字符串比较，使用“==”还是equals()? 　　"=="判断两个引用的是不是同一个内存地址(同一个物理对象)。　　equals()判断两个字符串的值是否相等。　　除非你想判断两个string引用是否同一个对象，否则应该总是使用equals()方法。　　如果你了解字符串的驻留(String Interning)则会更好地理解这个问题。　　</div> </li> <li><a href="/article/3786.htm" title="SpringMVC 登陆拦截器实现登陆控制" target="_blank">SpringMVC 登陆拦截器实现登陆控制</a> xp9802 <a class="tag" taget="_blank" href="/search/springMVC/1.htm">springMVC</a> <div>思路，先登陆后，将登陆信息存储在session中，然后通过拦截器，对系统中的页面和资源进行访问拦截，同时对于登陆本身相关的页面和资源不拦截。实现方法： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 </div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> 按字母分类： <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>