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/1773610251875057664.htm" title="Android和IOS应用开发-Flutter应用让屏幕在 app 运行期间保持常亮的方法" target="_blank">Android和IOS应用开发-Flutter应用让屏幕在 app 运行期间保持常亮的方法</a> 江上清风山间明月 <a class="tag" taget="_blank" href="/search/Flutter/1.htm">Flutter</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a><a class="tag" taget="_blank" href="/search/flutter/1.htm">flutter</a><a class="tag" taget="_blank" href="/search/KeepAlive/1.htm">KeepAlive</a><a class="tag" taget="_blank" href="/search/%E5%B1%8F%E5%B9%95%E5%B8%B8%E4%BA%AE/1.htm">屏幕常亮</a><a class="tag" taget="_blank" href="/search/wakelock/1.htm">wakelock</a><a class="tag" taget="_blank" href="/search/%E7%86%84%E5%B1%8F/1.htm">熄屏</a> <div>文章目录Flutter应用让屏幕在app运行期间保持常亮的方法方法一：使用系统插件方法二：使用Widgets注意事项Flutter应用让屏幕在app运行期间保持常亮的方法在Flutter开发中，可以使用以下两种方法让屏幕在app运行期间保持常亮：方法一：使用系统插件Flutter社区中已经有很多相关插件可供使用，比如wakelock:https://pub.dev/packages/wakeloc</div> </li> <li><a href="/article/1773602697044361216.htm" title="浪潮 M5系列服务器IPMI无法监控存储RAID卡问题." target="_blank">浪潮 M5系列服务器IPMI无法监控存储RAID卡问题.</a> Songxwn <a class="tag" taget="_blank" href="/search/%E7%A1%AC%E4%BB%B6%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">硬件服务器</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/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>简介浪潮的M5代服务器，可能有WebBMC无法查看存储RAID/SAS卡状态的情况，可以通过以下方式修改。修改完成后重启BMC即可生效。ESXiIPMITools使用：https://songxwn.com/ESXi8_IPMI/（Linux也可以直接使用）Linux/ESXiIPMITool下载：https://songxwn.com/file/ipmitoolWindows下载：https:/</div> </li> <li><a href="/article/1773510684068347904.htm" title="请简单介绍一下Shiro框架是什么？Shiro在Java安全领域的主要作用是什么？Shiro主要提供了哪些安全功能？" target="_blank">请简单介绍一下Shiro框架是什么？Shiro在Java安全领域的主要作用是什么？Shiro主要提供了哪些安全功能？</a> AaronWang94 <a class="tag" taget="_blank" href="/search/shiro/1.htm">shiro</a><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/%E5%AE%89%E5%85%A8/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>请简单介绍一下Shiro框架是什么？Shiro框架是一个强大且灵活的开源安全框架，为Java应用程序提供了全面的安全解决方案。它主要用于身份验证、授权、加密和会话管理等功能，可以轻松地集成到任何JavaWeb应用程序中，并提供了易于理解和使用的API，使开发人员能够快速实现安全特性。Shiro的核心组件包括Subject、SecurityManager和Realms。Subject代表了当前与应用</div> </li> <li><a href="/article/1773504513622212608.htm" title="大前端-postcss安装使用指南" target="_blank">大前端-postcss安装使用指南</a> 黑夜照亮前行的路 <a class="tag" taget="_blank" href="/search/postcss/1.htm">postcss</a> <div>PostCSS是一款强大的CSS处理工具，可以用来自动添加浏览器前缀、代码合并、代码压缩等，提升代码的可读性，并支持使用最新的CSS语法。以下是一份简化的PostCSS安装使用指南：一、安装PostCSS在你的项目目录中，通过npm（NodePackageManager）来安装PostCSS。打开命令行窗口，输入以下命令：bash复制代码npminstallpostcss--save-dev这将把</div> </li> <li><a href="/article/1773504261557125120.htm" title="谷歌浏览器驱动Chromedriver（114-120版本）文件以及驱动下载教程" target="_blank">谷歌浏览器驱动Chromedriver（114-120版本）文件以及驱动下载教程</a> pigerr杨 <a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/chrome/1.htm">chrome</a><a class="tag" taget="_blank" href="/search/drivers/1.htm">drivers</a> <div>ChromeDriver官方网站GitHub||GoogleChromeLabs/chrome-for-testingChromeDriver113-125_JSONChromeforTestingavailability123-125zip白月黑羽Python基础|进阶|Qt图形界面|Django|自动化测试|性能测试|JS语言|JS前端|原理与安装</div> </li> <li><a href="/article/1773501994674225152.htm" title="虚拟 DOM 的优缺点有哪些" target="_blank">虚拟 DOM 的优缺点有哪些</a> 咕噜签名分发 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/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> <div>虚拟DOM（VirtualDOM）技术作为现代前端开发中的重要组成部分，已经成为了众多流行前端框架的核心特性。它的引入为前端开发带来了诸多优势，同时也需要我们认真思考其潜在的考量。下面简单的介绍一下虚拟DOM技术的优势与缺点，深入探讨其在实际应用中的影响。提升性能虚拟DOM的最大优势之一是提升页面性能。通过比较前后两次虚拟DOM树的差异，最小化实际DOM操作，从而减少页面重渲染时的性能消耗。这种优</div> </li> <li><a href="/article/1773495574226599936.htm" title="3、JavaWeb-Ajax/Axios-前端工程化-Element" target="_blank">3、JavaWeb-Ajax/Axios-前端工程化-Element</a> 所谓远行Misnearch <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/JavaWeb/1.htm">JavaWeb</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>P34Ajax介绍Ajax:AsynchroousJavaScriptAndXML，异步的JS和XMLJS网页动作，XML一种标记语言，存储数据，作用：数据交换：通过Ajax给服务器发送请求，并获取服务器响应的数据异步交互：在不重新加载整个页面的情况下，与服务器交换数据并实现更新部分网页的技术，例如：搜索联想、用户名是否可用的校验等等。同步与异步：同步：服务器在处理中客户端要处于等待状态，输入域名</div> </li> <li><a href="/article/1773495447948689408.htm" title="docker怎么端口映射" target="_blank">docker怎么端口映射</a> Lance_mu <a class="tag" taget="_blank" href="/search/docker/1.htm">docker</a><a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8/1.htm">容器</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>1、默认固定的端口#Web服务器：WebApache或Nginx通常使用80端口HTTP：80HTTPS：443#数据库服务器MySQL：3306PostgreSQL：5432MongoDB：27017Redis：6379#邮件服务器SMTP：25POP3：110IMAP：143#其他服务SSH：22FTP：21DNS（域名解析）：53代理服务器Squid：3128版本控制系统Git：9418(S</div> </li> <li><a href="/article/1773482608366256128.htm" title="Flutter运行flutter doctor 命令长时间未响应如何解决" target="_blank">Flutter运行flutter doctor 命令长时间未响应如何解决</a> 咕噜签名分发-淼淼 <a class="tag" taget="_blank" href="/search/flutter/1.htm">flutter</a> <div>Hello大家好！我是咕噜铁蛋！在移动应用开发领域，Flutter以其高效、跨平台的特性吸引了众多开发者的关注。然而，在使用Flutter进行项目开发时，开发者可能会遇到各种问题，其中之一就是运行flutterdoctor命令时长时间未响应。今天铁蛋将深入探讨这一问题的成因、解决方案以及相关的Flutter环境配置知识。一、Flutter与flutterdoctor命令简介Flutter是Goog</div> </li> <li><a href="/article/1773471029155397632.htm" title="网络安全（黑客）——自学2024" target="_blank">网络安全（黑客）——自学2024</a> 小言同学喜欢挖漏洞 <a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a><a class="tag" taget="_blank" href="/search/%E4%BF%A1%E6%81%AF%E5%AE%89%E5%85%A8/1.htm">信息安全</a><a class="tag" taget="_blank" href="/search/%E6%B8%97%E9%80%8F%E6%B5%8B%E8%AF%95/1.htm">渗透测试</a> <div>01什么是网络安全网络安全可以基于攻击和防御视角来分类，我们经常听到的“红队”、“渗透测试”等就是研究攻击技术，而“蓝队”、“安全运营”、“安全运维”则研究防御技术。无论网络、Web、移动、桌面、云等哪个领域，都有攻与防两面性，例如Web安全技术，既有Web渗透，也有Web防御技术（WAF）。作为一个合格的网络安全工程师，应该做到攻守兼备，毕竟知己知彼，才能百战百胜。02怎样规划网络安全如果你是一</div> </li> <li><a href="/article/1773470776930926592.htm" title="黑客（网络安全）技术自学30天" target="_blank">黑客（网络安全）技术自学30天</a> 一个迷人的黑客 <a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a><a class="tag" taget="_blank" href="/search/%E4%BF%A1%E6%81%AF%E5%AE%89%E5%85%A8/1.htm">信息安全</a><a class="tag" taget="_blank" href="/search/%E6%B8%97%E9%80%8F%E6%B5%8B%E8%AF%95/1.htm">渗透测试</a> <div>01什么是网络安全网络安全可以基于攻击和防御视角来分类，我们经常听到的“红队”、“渗透测试”等就是研究攻击技术，而“蓝队”、“安全运营”、“安全运维”则研究防御技术。无论网络、Web、移动、桌面、云等哪个领域，都有攻与防两面性，例如Web安全技术，既有Web渗透，也有Web防御技术（WAF）。作为一个合格的网络安全工程师，应该做到攻守兼备，毕竟知己知彼，才能百战百胜。02怎样规划网络安全如果你是一</div> </li> <li><a href="/article/1773469895019790336.htm" title="flutter boost 如何从native跳转到flutter页面" target="_blank">flutter boost 如何从native跳转到flutter页面</a> Icarus_ <a class="tag" taget="_blank" href="/search/flutter/1.htm">flutter</a><a class="tag" taget="_blank" href="/search/flutter/1.htm">flutter</a> <div>FlutterBoost是一个Flutter插件，它可以帮助开发者在原生应用和Flutter应用之间无缝跳转。以下是一些基本步骤，展示了如何使用FlutterBoost从原生（Native）页面跳转到Flutter页面。1.配置FlutterBoost在你的Flutter项目中集成FlutterBoost插件。这通常涉及到修改`pubspec.yaml`文件来添加依赖项，并根据FlutterBoo</div> </li> <li><a href="/article/1773468510236770304.htm" title="flutter 修改app名字和图标" target="_blank">flutter 修改app名字和图标</a> 肥肥呀呀呀 <a class="tag" taget="_blank" href="/search/flutter/1.htm">flutter</a> <div>一、修改名字在Android中修改应用程序名称：在AndroidManifest.xml文件中修改应用程序名称：打开Flutter项目中的android/app/src/main/AndroidManifest.xml文件。找到标签，然后在android:label属性中修改应用程序的名称，例如：android:label="YourNewAppName"。在strings.xml文件中修改应用程</div> </li> <li><a href="/article/1773467628816367616.htm" title="掌握Flutter底部导航栏：畅游导航之旅" target="_blank">掌握Flutter底部导航栏：畅游导航之旅</a> 繁依Fanyi <a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/flutter/1.htm">flutter</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%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/git/1.htm">git</a> <div>1.引言在移动应用开发中，底部导航栏是一种常见且非常实用的用户界面元素。它提供了快速导航至不同功能模块或页面的便捷方式，使用户可以轻松访问应用程序的各个部分。在Flutter中，底部导航栏也是一项强大的功能，开发者可以利用Flutter框架提供的丰富组件和灵活性，轻松实现各种样式和交互效果的底部导航栏。本文将深入探讨Flutter中底部导航栏的实现方法，从基础的结构搭建到高级功能的应用，带领读者逐</div> </li> <li><a href="/article/1773408210510741504.htm" title="webpack.prod.js（webpack生产环境配置文件）" target="_blank">webpack.prod.js（webpack生产环境配置文件）</a> 门板_ <a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</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> <div>生产环境：只打包不运行本地服务器对于在config目录下的webpack.prod.js1.在根目录下运行npxwebpack--config./config/webpack.prod.js2.在package.json文件中配置"build":"npxwebpack--config./config/webpack.prod.js"constpath=require('path')constESL</div> </li> <li><a href="/article/1773403175781466112.htm" title="Python dict字符串转json对象，小数精度丢失问题" target="_blank">Python dict字符串转json对象，小数精度丢失问题</a> 朝如青丝暮成雪 <a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>一前言JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式，dict是Python的一种数据格式。本篇介绍一个float数据转换时精度丢失的案例。二问题描述importjsontest_str1='{"π":3.1415926535897932384626433832795028841971}'test_str2='{"value":10.00000}'print</div> </li> <li><a href="/article/1773389331080216576.htm" title="VUE 页面禁止缩放（华为平板浏览器可能失效）" target="_blank">VUE 页面禁止缩放（华为平板浏览器可能失效）</a> 唐屁屁儿 <a class="tag" taget="_blank" href="/search/JS/1.htm">JS</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/webview/1.htm">webview</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>h5页面移动端禁止缩放、web页面禁止浏览器缩放移动端优先，可禁止用户缩放和双击放大；在App.vue中的script内的方法里加入以下代码：window.onload=function(){document.addEventListener('touchstart',function(event){if(event.touches.length>1){event.preventDefault()</div> </li> <li><a href="/article/1773382031552610304.htm" title="java实体中返回前端的double类型四舍五入（格式化）" target="_blank">java实体中返回前端的double类型四舍五入（格式化）</a> 婲落ヽ紅顏誶 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>根据业务，需要通过后端给前端返回部分double类型的数值，一般需要保留两位小数，使用jackson转换对象packagecom.ruoyi.common.core.config;importcom.fasterxml.jackson.core.JsonGenerator;importcom.fasterxml.jackson.databind.JsonSerializer;importcom.f</div> </li> <li><a href="/article/1773360885226602496.htm" title="Django forms组件" target="_blank">Django forms组件</a> 在飞行-米龙 <a class="tag" taget="_blank" href="/search/Django/1.htm">Django</a><a class="tag" taget="_blank" href="/search/django/1.htm">django</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>【一】引入【1】实现登陆验证功能（1）需求分析登陆验证需要前后端交互，采用form表单提交数据对数据进行校验用户名必须以英文大写字母开头密码必须大于三位数反馈给用户错误的信息除了反馈错误的信息还有保留原始输入内容（2）后端代码使用user_info_dict字典每次刷新存储存储前端发送的信息存储后端进行验证的信息defhome(request):#每次后刷新这个信息字典user_info_dict</div> </li> <li><a href="/article/1773347793847517184.htm" title="UNDERSTANDING HTML WITH LARGE LANGUAGE MODELS" target="_blank">UNDERSTANDING HTML WITH LARGE LANGUAGE MODELS</a> liferecords <a class="tag" taget="_blank" href="/search/LLM/1.htm">LLM</a><a class="tag" taget="_blank" href="/search/%E8%AF%AD%E8%A8%80%E6%A8%A1%E5%9E%8B/1.htm">语言模型</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E7%84%B6%E8%AF%AD%E8%A8%80%E5%A4%84%E7%90%86/1.htm">自然语言处理</a> <div>UNDERSTANDINGHTMLWITHLARGELANGUAGEMODELS相关链接：arXiv关键字：大型语言模型、HTML理解、Web自动化、自然语言处理、机器学习摘要大型语言模型（LLMs）在各种自然语言任务上表现出色。然而，它们在HTML理解方面的能力——即解析网页的原始HTML，对于自动化基于Web的任务、爬取和浏览器辅助检索等应用——尚未被充分探索。我们为HTML理解模型（经过微调</div> </li> <li><a href="/article/1773347164047605760.htm" title="自学黑客（网络安全）技术——2024最新" target="_blank">自学黑客（网络安全）技术——2024最新</a> 九九归二 <a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a><a class="tag" taget="_blank" href="/search/%E4%BF%A1%E6%81%AF%E5%AE%89%E5%85%A8/1.htm">信息安全</a> <div>01什么是网络安全网络安全可以基于攻击和防御视角来分类，我们经常听到的“红队”、“渗透测试”等就是研究攻击技术，而“蓝队”、“安全运营”、“安全运维”则研究防御技术。无论网络、Web、移动、桌面、云等哪个领域，都有攻与防两面性，例如Web安全技术，既有Web渗透，也有Web防御技术（WAF）。作为一个合格的网络安全工程师，应该做到攻守兼备，毕竟知己知彼，才能百战百胜。02怎样规划网络安全如果你是一</div> </li> <li><a href="/article/1773344429185236992.htm" title="Webpack构建优化——区分环境" target="_blank">Webpack构建优化——区分环境</a> oWSQo <div>为什么需要区分环境在开发网页的时候，一般都会有多套运行环境，例如：在开发过程中方便开发调试的环境。发布到线上给用户使用的运行环境。这两套不同的环境虽然都是由同一套源代码编译而来，但是代码内容却不一样，差异包括：线上代码被特殊压缩过。开发用的代码包含一些用于提示开发者的提示日志，这些日志普通用户不可能去看它。开发用的代码所连接的后端数据接口地址也可能和线上环境不同，因为要避免开发过程中造成对线上数据</div> </li> <li><a href="/article/1773308900838277120.htm" title="Web前端Html的表单" target="_blank">Web前端Html的表单</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> <div>表单的关键字：form标签表示一个表单区域action=“后端地址”method=“提交数据方式:get/post”input单行输入框type=“text”文本name=“定义名称名字自定义”向后端提交的键readonly=“readonly”只读，不可修改，但是可以提交disabled=“disabled”禁用组件不可修改，不能提交type=“password”密码框type=“radio”单</div> </li> <li><a href="/article/1773279695408791552.htm" title="Thinkphp - 详细实现网站系统登录功能，附带 Mysql 数据库设置、Web 前端展示界面、信息校验等（详细代码，即设计过程）" target="_blank">Thinkphp - 详细实现网站系统登录功能，附带 Mysql 数据库设置、Web 前端展示界面、信息校验等（详细代码，即设计过程）</a> 王佳斌 <a class="tag" taget="_blank" href="/search/%2B/1.htm">+</a><a class="tag" taget="_blank" href="/search/Thinkphp/1.htm">Thinkphp</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>前言登录功能，是我们几乎开发每个系统都必须的模块。登录功能设计思路，主要包括几个方面。用户输入网址展示登录页面用户输入用户名，密码等点击登录进行信息校验校验通过之后，记录用户登录信息，跳转指定页面用户校验失败，提示失败信息页面目录具体功能实现为了快速搭建可用、美观的页面，我们采用一个比较成熟的前端框架Bootstrap。下面我们到Bootstrap的官网Bootsrap官网下载bootstrap。</div> </li> <li><a href="/article/1773256158274977792.htm" title="javascript 日期转换为时间戳，时间戳转换为日期的函数" target="_blank">javascript 日期转换为时间戳，时间戳转换为日期的函数</a> cdcdhj <a class="tag" taget="_blank" href="/search/javascript%E5%AD%A6%E4%B9%A0%E6%97%A5%E8%AE%B0/1.htm">javascript学习日记</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>日期转化为时间戳，主要用valueOf()来进行转化为毫秒时间戳，getTime()IOS系统无法解析转换，所以都有valueOf()letgetTimestampOrDate=function(timestamp){lettimeStamp='';constregex=/^\d{4}(-|\/)\d{2}(-|\/)\d{2}$/;constregex2=/^\d{4}(-|\/)\d{2}(-</div> </li> <li><a href="/article/1773198631940194304.htm" title="COMP315 JavaScript Cloud Computing for E Commerce" target="_blank">COMP315 JavaScript Cloud Computing for E Commerce</a> zhuyu0206girl <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>Assignment1:Javascript1IntroductionAcommontaskincloudcomputingisdatacleaning,whichistheprocessoftakinganinitialdatasetthatmaycontainerroneousorincompletedata,andremovingorfixingthoseelementsbeforeform</div> </li> <li><a href="/article/1773191331473063936.htm" title="JSON与AJAX：网页交互的利器" target="_blank">JSON与AJAX：网页交互的利器</a> 入冉心 <a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>在现代Web开发中，JSON（JavaScriptObjectNotation）和AJAX（AsynchronousJavaScriptandXML）是两项不可或缺的技术。它们共同为网页提供了动态、实时的数据交互能力，为用户带来了更加流畅和丰富的体验。本文将详细介绍JSON和AJAX的概念、原理，并通过代码示例展示它们在实际开发中的应用。一、JSON：轻量级的数据交换格式JSON是一种轻量级的数据</div> </li> <li><a href="/article/1772795036136701952.htm" title="程序员开发技术整理" target="_blank">程序员开发技术整理</a> laizhixue <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>前端技术：vue-前端框架element-前端框架bootstrap-前端框架echarts-图标组件C#后端技术：webservice：soap架构：简单的通信协议，用于服务通信ORM框架：对象关系映射，如EF：对象实体模型，是ado.net中的应用技术soap服务通讯：xml通讯ado.net：OAuth2:登录授权认证：Token认证：JWT：jsonwebtokenJava后端技术：便捷工</div> </li> <li><a href="/article/1772775523957669888.htm" title="centos7 安装influxdb+telegraf+grafana 监控服务器" target="_blank">centos7 安装influxdb+telegraf+grafana 监控服务器</a> 吕吕-lvlv <a class="tag" taget="_blank" href="/search/grafana/1.htm">grafana</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/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>influxdbinfluxdb是一个时间序列数据库,所有数据记录都会打上时间戳,适合存储数字类型的内容telegraftelegraf可以用于收集系统和服务的统计数据并发送到influxdbgrafanagrafana是一个界面非常漂亮,可直接读取influxdb数据展示成各种图表的开源可视化web软件安装并启动influxdb数据库vim/etc/yum.repos.d/influxdb.re</div> </li> <li><a href="/article/1772773132000624640.htm" title="【前端学习——js篇】7.函数缓存" target="_blank">【前端学习——js篇】7.函数缓存</a> 笔下无竹墨下有鱼 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0/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/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>具体见：https://github.com/febobo/web-interview7.函数缓存函数缓存，就是将函数运算过的结果进行缓存本质上就是用空间（缓存存储）换时间（计算过程）常用于缓存数据计算结果和缓存对象。其实现主要通过闭包、柯里化和高阶函数。下面主要介绍下柯里化：①柯里化柯里化（currying)是一种函数式编程的概念，指的是将一个带有多个参数的函数转换成一系列只接受一个参数的函数的</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>