【Vue3】源码探索之旅：compiler-core之parseChildren函数（二）

简言

parseChildren函数是在baseParse函数中作为createRoot函数的子节点参数传入的，今天来探索下parseChildren函数。
parseChildren在 compiler-core/src/parse.ts文件内。

parseChildren

这个函数就是用来解析模板字符串内容的 ，里面有个while循环以栈的形式不断读取模板字符串进行解析，直到解析完毕，然后进行空白处理并返回对应的节点数据。

传参：

• context ---- 解析上下文（createParserContext函数根据模板字符串和配置得到的）。
• mode ---- 文本模式 。vue将模板字符串分为5个类型（见下面：DATA代表普通的元素标签，RCDATA代表textarea标签，RAWTEXT代表文本）。
• ancestors — 祖先节点，类型为元素节点数组。

文本模式：

export const enum TextModes {
  //          | Elements | Entities | End sign              | Inside of
  DATA, //    | ✔        | ✔        | End tags of ancestors |
  RCDATA, //  | ✘        | ✔        | End tag of the parent | </span>
  <span class="token constant">RAWTEXT</span><span class="token punctuation">,</span> <span class="token comment">// | ✘        | ✘        | End tag of the parent | <style>,<script></span>
  <span class="token constant">CDATA</span><span class="token punctuation">,</span>
  <span class="token constant">ATTRIBUTE_VALUE</span>
<span class="token punctuation">}</span>
</code></pre> 
  <h3>源码</h3> 
  <pre><code class="prism language-typescript"><span class="token keyword">function</span> <span class="token function">parseChildren</span><span class="token punctuation">(</span>
  context<span class="token operator">:</span> ParserContext<span class="token punctuation">,</span>
  mode<span class="token operator">:</span> TextModes<span class="token punctuation">,</span>
  ancestors<span class="token operator">:</span> ElementNode<span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token punctuation">)</span><span class="token operator">:</span> TemplateChildNode<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> parent <span class="token operator">=</span> <span class="token function">last</span><span class="token punctuation">(</span>ancestors<span class="token punctuation">)</span>
  <span class="token keyword">const</span> ns <span class="token operator">=</span> parent <span class="token operator">?</span> parent<span class="token punctuation">.</span>ns <span class="token operator">:</span> Namespaces<span class="token punctuation">.</span><span class="token constant">HTML</span>
  <span class="token keyword">const</span> nodes<span class="token operator">:</span> TemplateChildNode<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>

  <span class="token keyword">while</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token function">isEnd</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> mode<span class="token punctuation">,</span> ancestors<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    __TEST__ <span class="token operator">&&</span> <span class="token function">assert</span><span class="token punctuation">(</span>context<span class="token punctuation">.</span>source<span class="token punctuation">.</span>length <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span>
    <span class="token keyword">const</span> s <span class="token operator">=</span> context<span class="token punctuation">.</span>source
    <span class="token keyword">let</span> node<span class="token operator">:</span> TemplateChildNode <span class="token operator">|</span> TemplateChildNode<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">|</span> <span class="token keyword">undefined</span> <span class="token operator">=</span> <span class="token keyword">undefined</span>

    <span class="token keyword">if</span> <span class="token punctuation">(</span>mode <span class="token operator">===</span> TextModes<span class="token punctuation">.</span><span class="token constant">DATA</span> <span class="token operator">||</span> mode <span class="token operator">===</span> TextModes<span class="token punctuation">.</span><span class="token constant">RCDATA</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>context<span class="token punctuation">.</span>inVPre <span class="token operator">&&</span> <span class="token function">startsWith</span><span class="token punctuation">(</span>s<span class="token punctuation">,</span> context<span class="token punctuation">.</span>options<span class="token punctuation">.</span>delimiters<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">// '{{'</span>
        node <span class="token operator">=</span> <span class="token function">parseInterpolation</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> mode<span class="token punctuation">)</span>
      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>mode <span class="token operator">===</span> TextModes<span class="token punctuation">.</span><span class="token constant">DATA</span> <span class="token operator">&&</span> s<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">===</span> <span class="token string">'<'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">// https://html.spec.whatwg.org/multipage/parsing.html#tag-open-state</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>s<span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token function">emitError</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> ErrorCodes<span class="token punctuation">.</span><span class="token constant">EOF_BEFORE_TAG_NAME</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>s<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">===</span> <span class="token string">'!'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token comment">// https://html.spec.whatwg.org/multipage/parsing.html#markup-declaration-open-state</span>
          <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">startsWith</span><span class="token punctuation">(</span>s<span class="token punctuation">,</span> <span class="token string">'<!--'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            node <span class="token operator">=</span> <span class="token function">parseComment</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span>
          <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">startsWith</span><span class="token punctuation">(</span>s<span class="token punctuation">,</span> <span class="token string">'<!DOCTYPE'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token comment">// Ignore DOCTYPE by a limitation.</span>
            node <span class="token operator">=</span> <span class="token function">parseBogusComment</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span>
          <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">startsWith</span><span class="token punctuation">(</span>s<span class="token punctuation">,</span> <span class="token string">'<![CDATA['</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>ns <span class="token operator">!==</span> Namespaces<span class="token punctuation">.</span><span class="token constant">HTML</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
              node <span class="token operator">=</span> <span class="token function">parseCDATA</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> ancestors<span class="token punctuation">)</span>
            <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
              <span class="token function">emitError</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> ErrorCodes<span class="token punctuation">.</span><span class="token constant">CDATA_IN_HTML_CONTENT</span><span class="token punctuation">)</span>
              node <span class="token operator">=</span> <span class="token function">parseBogusComment</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span>
            <span class="token punctuation">}</span>
          <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
            <span class="token function">emitError</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> ErrorCodes<span class="token punctuation">.</span><span class="token constant">INCORRECTLY_OPENED_COMMENT</span><span class="token punctuation">)</span>
            node <span class="token operator">=</span> <span class="token function">parseBogusComment</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>s<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">===</span> <span class="token string">'/'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token comment">// https://html.spec.whatwg.org/multipage/parsing.html#end-tag-open-state</span>
          <span class="token keyword">if</span> <span class="token punctuation">(</span>s<span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token function">emitError</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> ErrorCodes<span class="token punctuation">.</span><span class="token constant">EOF_BEFORE_TAG_NAME</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span>
          <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>s<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span> <span class="token operator">===</span> <span class="token string">'>'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token function">emitError</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> ErrorCodes<span class="token punctuation">.</span><span class="token constant">MISSING_END_TAG_NAME</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span>
            <span class="token function">advanceBy</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span>
            <span class="token keyword">continue</span>
          <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">[a-z]</span><span class="token regex-delimiter">/</span><span class="token regex-flags">i</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>s<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token function">emitError</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> ErrorCodes<span class="token punctuation">.</span><span class="token constant">X_INVALID_END_TAG</span><span class="token punctuation">)</span>
            <span class="token function">parseTag</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> TagType<span class="token punctuation">.</span>End<span class="token punctuation">,</span> parent<span class="token punctuation">)</span>
            <span class="token keyword">continue</span>
          <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
            <span class="token function">emitError</span><span class="token punctuation">(</span>
              context<span class="token punctuation">,</span>
              ErrorCodes<span class="token punctuation">.</span><span class="token constant">INVALID_FIRST_CHARACTER_OF_TAG_NAME</span><span class="token punctuation">,</span>
              <span class="token number">2</span>
            <span class="token punctuation">)</span>
            node <span class="token operator">=</span> <span class="token function">parseBogusComment</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">[a-z]</span><span class="token regex-delimiter">/</span><span class="token regex-flags">i</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>s<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          node <span class="token operator">=</span> <span class="token function">parseElement</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> ancestors<span class="token punctuation">)</span>

          <span class="token comment">// 2.x <template> with no directive compat</span>
          <span class="token keyword">if</span> <span class="token punctuation">(</span>
            __COMPAT__ <span class="token operator">&&</span>
            <span class="token function">isCompatEnabled</span><span class="token punctuation">(</span>
              CompilerDeprecationTypes<span class="token punctuation">.</span><span class="token constant">COMPILER_NATIVE_TEMPLATE</span><span class="token punctuation">,</span>
              context
            <span class="token punctuation">)</span> <span class="token operator">&&</span>
            node <span class="token operator">&&</span>
            node<span class="token punctuation">.</span>tag <span class="token operator">===</span> <span class="token string">'template'</span> <span class="token operator">&&</span>
            <span class="token operator">!</span>node<span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span>
              p <span class="token operator">=></span>
                p<span class="token punctuation">.</span>type <span class="token operator">===</span> NodeTypes<span class="token punctuation">.</span><span class="token constant">DIRECTIVE</span> <span class="token operator">&&</span>
                <span class="token function">isSpecialTemplateDirective</span><span class="token punctuation">(</span>p<span class="token punctuation">.</span>name<span class="token punctuation">)</span>
            <span class="token punctuation">)</span>
          <span class="token punctuation">)</span> <span class="token punctuation">{</span>
            __DEV__ <span class="token operator">&&</span>
              <span class="token function">warnDeprecation</span><span class="token punctuation">(</span>
                CompilerDeprecationTypes<span class="token punctuation">.</span><span class="token constant">COMPILER_NATIVE_TEMPLATE</span><span class="token punctuation">,</span>
                context<span class="token punctuation">,</span>
                node<span class="token punctuation">.</span>loc
              <span class="token punctuation">)</span>
            node <span class="token operator">=</span> node<span class="token punctuation">.</span>children
          <span class="token punctuation">}</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>s<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">===</span> <span class="token string">'?'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token function">emitError</span><span class="token punctuation">(</span>
            context<span class="token punctuation">,</span>
            ErrorCodes<span class="token punctuation">.</span><span class="token constant">UNEXPECTED_QUESTION_MARK_INSTEAD_OF_TAG_NAME</span><span class="token punctuation">,</span>
            <span class="token number">1</span>
          <span class="token punctuation">)</span>
          node <span class="token operator">=</span> <span class="token function">parseBogusComment</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
          <span class="token function">emitError</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> ErrorCodes<span class="token punctuation">.</span><span class="token constant">INVALID_FIRST_CHARACTER_OF_TAG_NAME</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>node<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      node <span class="token operator">=</span> <span class="token function">parseText</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> mode<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">isArray</span><span class="token punctuation">(</span>node<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> node<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token function">pushNode</span><span class="token punctuation">(</span>nodes<span class="token punctuation">,</span> node<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
      <span class="token function">pushNode</span><span class="token punctuation">(</span>nodes<span class="token punctuation">,</span> node<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>

  <span class="token comment">// Whitespace handling strategy like v2</span>
  <span class="token keyword">let</span> removedWhitespace <span class="token operator">=</span> <span class="token boolean">false</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>mode <span class="token operator">!==</span> TextModes<span class="token punctuation">.</span><span class="token constant">RAWTEXT</span> <span class="token operator">&&</span> mode <span class="token operator">!==</span> TextModes<span class="token punctuation">.</span><span class="token constant">RCDATA</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> shouldCondense <span class="token operator">=</span> context<span class="token punctuation">.</span>options<span class="token punctuation">.</span>whitespace <span class="token operator">!==</span> <span class="token string">'preserve'</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> nodes<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> node <span class="token operator">=</span> nodes<span class="token punctuation">[</span>i<span class="token punctuation">]</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>node<span class="token punctuation">.</span>type <span class="token operator">===</span> NodeTypes<span class="token punctuation">.</span><span class="token constant">TEXT</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>context<span class="token punctuation">.</span>inPre<span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">[^\t\r\n\f ]</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>node<span class="token punctuation">.</span>content<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">const</span> prev <span class="token operator">=</span> nodes<span class="token punctuation">[</span>i <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span>
            <span class="token keyword">const</span> next <span class="token operator">=</span> nodes<span class="token punctuation">[</span>i <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">]</span>
            <span class="token comment">// Remove if:</span>
            <span class="token comment">// - the whitespace is the first or last node, or:</span>
            <span class="token comment">// - (condense mode) the whitespace is between twos comments, or:</span>
            <span class="token comment">// - (condense mode) the whitespace is between comment and element, or:</span>
            <span class="token comment">// - (condense mode) the whitespace is between two elements AND contains newline</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>
              <span class="token operator">!</span>prev <span class="token operator">||</span>
              <span class="token operator">!</span>next <span class="token operator">||</span>
              <span class="token punctuation">(</span>shouldCondense <span class="token operator">&&</span>
                <span class="token punctuation">(</span><span class="token punctuation">(</span>prev<span class="token punctuation">.</span>type <span class="token operator">===</span> NodeTypes<span class="token punctuation">.</span><span class="token constant">COMMENT</span> <span class="token operator">&&</span>
                  next<span class="token punctuation">.</span>type <span class="token operator">===</span> NodeTypes<span class="token punctuation">.</span><span class="token constant">COMMENT</span><span class="token punctuation">)</span> <span class="token operator">||</span>
                  <span class="token punctuation">(</span>prev<span class="token punctuation">.</span>type <span class="token operator">===</span> NodeTypes<span class="token punctuation">.</span><span class="token constant">COMMENT</span> <span class="token operator">&&</span>
                    next<span class="token punctuation">.</span>type <span class="token operator">===</span> NodeTypes<span class="token punctuation">.</span><span class="token constant">ELEMENT</span><span class="token punctuation">)</span> <span class="token operator">||</span>
                  <span class="token punctuation">(</span>prev<span class="token punctuation">.</span>type <span class="token operator">===</span> NodeTypes<span class="token punctuation">.</span><span class="token constant">ELEMENT</span> <span class="token operator">&&</span>
                    next<span class="token punctuation">.</span>type <span class="token operator">===</span> NodeTypes<span class="token punctuation">.</span><span class="token constant">COMMENT</span><span class="token punctuation">)</span> <span class="token operator">||</span>
                  <span class="token punctuation">(</span>prev<span class="token punctuation">.</span>type <span class="token operator">===</span> NodeTypes<span class="token punctuation">.</span><span class="token constant">ELEMENT</span> <span class="token operator">&&</span>
                    next<span class="token punctuation">.</span>type <span class="token operator">===</span> NodeTypes<span class="token punctuation">.</span><span class="token constant">ELEMENT</span> <span class="token operator">&&</span>
                    <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">[\r\n]</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>node<span class="token punctuation">.</span>content<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
            <span class="token punctuation">)</span> <span class="token punctuation">{</span>
              removedWhitespace <span class="token operator">=</span> <span class="token boolean">true</span>
              nodes<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token keyword">null</span> <span class="token keyword">as</span> <span class="token builtin">any</span>
            <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
              <span class="token comment">// Otherwise, the whitespace is condensed into a single space</span>
              node<span class="token punctuation">.</span>content <span class="token operator">=</span> <span class="token string">' '</span>
            <span class="token punctuation">}</span>
          <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>shouldCondense<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token comment">// in condense mode, consecutive whitespaces in text are condensed</span>
            <span class="token comment">// down to a single space.</span>
            node<span class="token punctuation">.</span>content <span class="token operator">=</span> node<span class="token punctuation">.</span>content<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">[\t\r\n\f ]+</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> <span class="token string">' '</span><span class="token punctuation">)</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
          <span class="token comment">// #6410 normalize windows newlines in <pre>:</span>
          <span class="token comment">// in SSR, browsers normalize server-rendered \r\n into a single \n</span>
          <span class="token comment">// in the DOM</span>
          node<span class="token punctuation">.</span>content <span class="token operator">=</span> node<span class="token punctuation">.</span>content<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\r\n</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> <span class="token string">'\n'</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
      <span class="token comment">// Remove comment nodes if desired by configuration.</span>
      <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>node<span class="token punctuation">.</span>type <span class="token operator">===</span> NodeTypes<span class="token punctuation">.</span><span class="token constant">COMMENT</span> <span class="token operator">&&</span> <span class="token operator">!</span>context<span class="token punctuation">.</span>options<span class="token punctuation">.</span>comments<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        removedWhitespace <span class="token operator">=</span> <span class="token boolean">true</span>
        nodes<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token keyword">null</span> <span class="token keyword">as</span> <span class="token builtin">any</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>context<span class="token punctuation">.</span>inPre <span class="token operator">&&</span> parent <span class="token operator">&&</span> context<span class="token punctuation">.</span>options<span class="token punctuation">.</span><span class="token function">isPreTag</span><span class="token punctuation">(</span>parent<span class="token punctuation">.</span>tag<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// remove leading newline per html spec</span>
      <span class="token comment">// https://html.spec.whatwg.org/multipage/grouping-content.html#the-pre-element</span>
      <span class="token keyword">const</span> first <span class="token operator">=</span> nodes<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>first <span class="token operator">&&</span> first<span class="token punctuation">.</span>type <span class="token operator">===</span> NodeTypes<span class="token punctuation">.</span><span class="token constant">TEXT</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        first<span class="token punctuation">.</span>content <span class="token operator">=</span> first<span class="token punctuation">.</span>content<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^\r?\n</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> <span class="token string">''</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">return</span> removedWhitespace <span class="token operator">?</span> nodes<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>Boolean<span class="token punctuation">)</span> <span class="token operator">:</span> nodes
<span class="token punctuation">}</span>

</code></pre> 
  <blockquote> 
   <p>下面的流程只描述大致的流程信息，若有误请联系作者改正。</p> 
  </blockquote> 
  <p>流程:</p> 
  <ul> 
   <li>创建nodes数组用来承载解析的数据，进入while循环。</li> 
   <li>执行isEnd函数判断是否读取完毕，是则跳出while循环。</li> 
   <li>创建node用于承载此次循环解析的数据，并获取当前读取的内容。</li> 
   <li>TextModes.DATA和TextModes.RCDATA下进行特定的分类解析。</li> 
   <li>若是是否是以{{开头，parseInterpolation函数进行文本插值解析。</li> 
   <li>若是TextModes.DATA下且以<开头，进行标签解析，进入标签类型的解析。</li> 
   <li>若以<开头且下一个字符是！，说明是注释标签、文档声明标签、<![CDATA[]]>标签（忽略xml的转义）;分别进行对应的解析。</li> 
   <li>若以<开头且下一个字符是/,有可能是闭合标签，则进行parseTag函数标签解析。</li> 
   <li>若以<开头且下一个字符是a-z任意字符（不分大小写），进行parseElement函数解析。</li> 
   <li>若node还没值，执行parseText函数按文本进行解析。</li> 
   <li>将node的值添加到nodes中，执行第2步</li> 
   <li>将nodes值按照配置的空白策略进行空白处理</li> 
   <li>返回nodes。</li> 
  </ul> 
  <h3>使用到的一些函数</h3> 
  <p>只挑选用到的一些函数进行分析。</p> 
  <h4>isEnd</h4> 
  <p>判断是否读取完毕。<br> 参考：</p> 
  <ul> 
   <li>startsWith函数是 以什么开头。</li> 
   <li>startsWithEndTagOpen 是否是完整的相匹配的闭合标签。<br> true的情况：</li> 
   <li>TextModes.DATA下以</开头且是匹配的闭合标签，返回true</li> 
   <li>TextModes.RCDATA(textarea)和TextModes.RAWTEXT(文本)下，存在父节点，且匹配父节点的闭合标签，返回true。</li> 
   <li>TextModes.CDATA（xml中的忽略转义的写法）下，以]]>开头，返回true。</li> 
   <li>s 为假值，返回true</li> 
  </ul> 
  <pre><code class="prism language-typescript"><span class="token keyword">function</span> <span class="token function">isEnd</span><span class="token punctuation">(</span>
  context<span class="token operator">:</span> ParserContext<span class="token punctuation">,</span>
  mode<span class="token operator">:</span> TextModes<span class="token punctuation">,</span>
  ancestors<span class="token operator">:</span> ElementNode<span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">boolean</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> s <span class="token operator">=</span> context<span class="token punctuation">.</span>source

  <span class="token keyword">switch</span> <span class="token punctuation">(</span>mode<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">case</span> TextModes<span class="token punctuation">.</span><span class="token constant">DATA</span><span class="token operator">:</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">startsWith</span><span class="token punctuation">(</span>s<span class="token punctuation">,</span> <span class="token string">'</'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">// TODO: probably bad performance</span>
        <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> ancestors<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span> i <span class="token operator">>=</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token operator">--</span>i<span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">startsWithEndTagOpen</span><span class="token punctuation">(</span>s<span class="token punctuation">,</span> ancestors<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>tag<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token boolean">true</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">break</span>

    <span class="token keyword">case</span> TextModes<span class="token punctuation">.</span><span class="token constant">RCDATA</span><span class="token operator">:</span>
    <span class="token keyword">case</span> TextModes<span class="token punctuation">.</span><span class="token constant">RAWTEXT</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> parent <span class="token operator">=</span> <span class="token function">last</span><span class="token punctuation">(</span>ancestors<span class="token punctuation">)</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>parent <span class="token operator">&&</span> <span class="token function">startsWithEndTagOpen</span><span class="token punctuation">(</span>s<span class="token punctuation">,</span> parent<span class="token punctuation">.</span>tag<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token boolean">true</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">break</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">case</span> TextModes<span class="token punctuation">.</span><span class="token constant">CDATA</span><span class="token operator">:</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">startsWith</span><span class="token punctuation">(</span>s<span class="token punctuation">,</span> <span class="token string">']]>'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token boolean">true</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">break</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">return</span> <span class="token operator">!</span>s
<span class="token punctuation">}</span>
</code></pre> 
  <h4>parseInterpolation</h4> 
  <p>解析文本插值内容，也就是{{表达式}}这种，最后返回文本插值类型的结构数据节点。<br> 参考：</p> 
  <ul> 
   <li>parseTextData ---- 处理 {{表达式}}内的表达式。</li> 
   <li>getCursor — 获取当前读取位置</li> 
   <li>advanceBy — 改变上下文中的source</li> 
   <li>advancePositionWithMutation ---- 修正读取位置信息描述的函数。</li> 
  </ul> 
  <p>文本插值大家都知道，它是vue的数据在模板显示的主要方式之一，里面可以填表达式或者静态字符串，所以{{}}里面的内容使用parseTextData函数解析，这个函数要返回文本字符串，要么返回一个解析好后的html实体。</p> 
  <pre><code class="prism language-typescript"><span class="token keyword">function</span> <span class="token function">parseInterpolation</span><span class="token punctuation">(</span>
  context<span class="token operator">:</span> ParserContext<span class="token punctuation">,</span>
  mode<span class="token operator">:</span> TextModes
<span class="token punctuation">)</span><span class="token operator">:</span> InterpolationNode <span class="token operator">|</span> <span class="token keyword">undefined</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token punctuation">[</span>open<span class="token punctuation">,</span> close<span class="token punctuation">]</span> <span class="token operator">=</span> context<span class="token punctuation">.</span>options<span class="token punctuation">.</span>delimiters
  __TEST__ <span class="token operator">&&</span> <span class="token function">assert</span><span class="token punctuation">(</span><span class="token function">startsWith</span><span class="token punctuation">(</span>context<span class="token punctuation">.</span>source<span class="token punctuation">,</span> open<span class="token punctuation">)</span><span class="token punctuation">)</span>

  <span class="token keyword">const</span> closeIndex <span class="token operator">=</span> context<span class="token punctuation">.</span>source<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>close<span class="token punctuation">,</span> open<span class="token punctuation">.</span>length<span class="token punctuation">)</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>closeIndex <span class="token operator">===</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">emitError</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> ErrorCodes<span class="token punctuation">.</span><span class="token constant">X_MISSING_INTERPOLATION_END</span><span class="token punctuation">)</span>
    <span class="token keyword">return</span> <span class="token keyword">undefined</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">const</span> start <span class="token operator">=</span> <span class="token function">getCursor</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span>
  <span class="token function">advanceBy</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> open<span class="token punctuation">.</span>length<span class="token punctuation">)</span>
  <span class="token keyword">const</span> innerStart <span class="token operator">=</span> <span class="token function">getCursor</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span>
  <span class="token keyword">const</span> innerEnd <span class="token operator">=</span> <span class="token function">getCursor</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span>
  <span class="token keyword">const</span> rawContentLength <span class="token operator">=</span> closeIndex <span class="token operator">-</span> open<span class="token punctuation">.</span>length
  <span class="token keyword">const</span> rawContent <span class="token operator">=</span> context<span class="token punctuation">.</span>source<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> rawContentLength<span class="token punctuation">)</span>
  <span class="token keyword">const</span> preTrimContent <span class="token operator">=</span> <span class="token function">parseTextData</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> rawContentLength<span class="token punctuation">,</span> mode<span class="token punctuation">)</span>
  <span class="token keyword">const</span> content <span class="token operator">=</span> preTrimContent<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token keyword">const</span> startOffset <span class="token operator">=</span> preTrimContent<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>content<span class="token punctuation">)</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>startOffset <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">advancePositionWithMutation</span><span class="token punctuation">(</span>innerStart<span class="token punctuation">,</span> rawContent<span class="token punctuation">,</span> startOffset<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">const</span> endOffset <span class="token operator">=</span>
    rawContentLength <span class="token operator">-</span> <span class="token punctuation">(</span>preTrimContent<span class="token punctuation">.</span>length <span class="token operator">-</span> content<span class="token punctuation">.</span>length <span class="token operator">-</span> startOffset<span class="token punctuation">)</span>
  <span class="token function">advancePositionWithMutation</span><span class="token punctuation">(</span>innerEnd<span class="token punctuation">,</span> rawContent<span class="token punctuation">,</span> endOffset<span class="token punctuation">)</span>
  <span class="token function">advanceBy</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> close<span class="token punctuation">.</span>length<span class="token punctuation">)</span>

  <span class="token keyword">return</span> <span class="token punctuation">{</span>
    type<span class="token operator">:</span> NodeTypes<span class="token punctuation">.</span><span class="token constant">INTERPOLATION</span><span class="token punctuation">,</span>
    content<span class="token operator">:</span> <span class="token punctuation">{</span>
      type<span class="token operator">:</span> NodeTypes<span class="token punctuation">.</span><span class="token constant">SIMPLE_EXPRESSION</span><span class="token punctuation">,</span>
      isStatic<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
      <span class="token comment">// Set `isConstant` to false by default and will decide in transformExpression</span>
      constType<span class="token operator">:</span> ConstantTypes<span class="token punctuation">.</span><span class="token constant">NOT_CONSTANT</span><span class="token punctuation">,</span>
      content<span class="token punctuation">,</span>
      loc<span class="token operator">:</span> <span class="token function">getSelection</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> innerStart<span class="token punctuation">,</span> innerEnd<span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    loc<span class="token operator">:</span> <span class="token function">getSelection</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> start<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> 
  <h4>parseComment</h4> 
  <p>解析注释的函数，返回注释类型的结构数据节点。<br> 参考：</p> 
  <ul> 
   <li>emitError 触发报错的函数。</li> 
   <li>getSelection 返回包含目标内容的位置信息对象。</li> 
  </ul> 
  <pre><code class="prism language-typescript"><span class="token keyword">function</span> <span class="token function">parseComment</span><span class="token punctuation">(</span>context<span class="token operator">:</span> ParserContext<span class="token punctuation">)</span><span class="token operator">:</span> CommentNode <span class="token punctuation">{</span>
  __TEST__ <span class="token operator">&&</span> <span class="token function">assert</span><span class="token punctuation">(</span><span class="token function">startsWith</span><span class="token punctuation">(</span>context<span class="token punctuation">.</span>source<span class="token punctuation">,</span> <span class="token string">'<!--'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>

  <span class="token keyword">const</span> start <span class="token operator">=</span> <span class="token function">getCursor</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span>
  <span class="token keyword">let</span> content<span class="token operator">:</span> <span class="token builtin">string</span>

  <span class="token comment">// Regular comment.</span>
  <span class="token keyword">const</span> match <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">--(\!)?></span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span>context<span class="token punctuation">.</span>source<span class="token punctuation">)</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>match<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    content <span class="token operator">=</span> context<span class="token punctuation">.</span>source<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span>
    <span class="token function">advanceBy</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> context<span class="token punctuation">.</span>source<span class="token punctuation">.</span>length<span class="token punctuation">)</span>
    <span class="token function">emitError</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> ErrorCodes<span class="token punctuation">.</span><span class="token constant">EOF_IN_COMMENT</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>match<span class="token punctuation">.</span>index <span class="token operator"><=</span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">emitError</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> ErrorCodes<span class="token punctuation">.</span><span class="token constant">ABRUPT_CLOSING_OF_EMPTY_COMMENT</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>match<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">emitError</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> ErrorCodes<span class="token punctuation">.</span><span class="token constant">INCORRECTLY_CLOSED_COMMENT</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    content <span class="token operator">=</span> context<span class="token punctuation">.</span>source<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">,</span> match<span class="token punctuation">.</span>index<span class="token punctuation">)</span>

    <span class="token comment">// Advancing with reporting nested comments.</span>
    <span class="token keyword">const</span> s <span class="token operator">=</span> context<span class="token punctuation">.</span>source<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> match<span class="token punctuation">.</span>index<span class="token punctuation">)</span>
    <span class="token keyword">let</span> prevIndex <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">,</span>
      nestedIndex <span class="token operator">=</span> <span class="token number">0</span>
    <span class="token keyword">while</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>nestedIndex <span class="token operator">=</span> s<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'<!--'</span><span class="token punctuation">,</span> prevIndex<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">advanceBy</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> nestedIndex <span class="token operator">-</span> prevIndex <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>nestedIndex <span class="token operator">+</span> <span class="token number">4</span> <span class="token operator"><</span> s<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token function">emitError</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> ErrorCodes<span class="token punctuation">.</span><span class="token constant">NESTED_COMMENT</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
      prevIndex <span class="token operator">=</span> nestedIndex <span class="token operator">+</span> <span class="token number">1</span>
    <span class="token punctuation">}</span>
    <span class="token function">advanceBy</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> match<span class="token punctuation">.</span>index <span class="token operator">+</span> match<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>length <span class="token operator">-</span> prevIndex <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">return</span> <span class="token punctuation">{</span>
    type<span class="token operator">:</span> NodeTypes<span class="token punctuation">.</span><span class="token constant">COMMENT</span><span class="token punctuation">,</span>
    content<span class="token punctuation">,</span>
    loc<span class="token operator">:</span> <span class="token function">getSelection</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> start<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> 
  <h4>parseElement</h4> 
  <p>解析元素内容的函数，返回元素类型的结构数据节点。<br> 一个普通的元素包含： 开标签 + 子内容 + 闭标签；所以parseElement就是按这个顺序处理的，parseTag处理标签，parseChildren函数处理子内容。<br> 参考：</p> 
  <ul> 
   <li>parseTag — 解析标签的函数。</li> 
   <li>checkCompatEnabled — 判断是否可以进行兼容处理。</li> 
  </ul> 
  <pre><code class="prism language-typescript"><span class="token keyword">function</span> <span class="token function">parseElement</span><span class="token punctuation">(</span>
  context<span class="token operator">:</span> ParserContext<span class="token punctuation">,</span>
  ancestors<span class="token operator">:</span> ElementNode<span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token punctuation">)</span><span class="token operator">:</span> ElementNode <span class="token operator">|</span> <span class="token keyword">undefined</span> <span class="token punctuation">{</span>
  __TEST__ <span class="token operator">&&</span> <span class="token function">assert</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^<[a-z]</span><span class="token regex-delimiter">/</span><span class="token regex-flags">i</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>context<span class="token punctuation">.</span>source<span class="token punctuation">)</span><span class="token punctuation">)</span>

  <span class="token comment">// Start tag.</span>
  <span class="token keyword">const</span> wasInPre <span class="token operator">=</span> context<span class="token punctuation">.</span>inPre
  <span class="token keyword">const</span> wasInVPre <span class="token operator">=</span> context<span class="token punctuation">.</span>inVPre
  <span class="token keyword">const</span> parent <span class="token operator">=</span> <span class="token function">last</span><span class="token punctuation">(</span>ancestors<span class="token punctuation">)</span>
  <span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token function">parseTag</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> TagType<span class="token punctuation">.</span>Start<span class="token punctuation">,</span> parent<span class="token punctuation">)</span>
  <span class="token keyword">const</span> isPreBoundary <span class="token operator">=</span> context<span class="token punctuation">.</span>inPre <span class="token operator">&&</span> <span class="token operator">!</span>wasInPre
  <span class="token keyword">const</span> isVPreBoundary <span class="token operator">=</span> context<span class="token punctuation">.</span>inVPre <span class="token operator">&&</span> <span class="token operator">!</span>wasInVPre

  <span class="token keyword">if</span> <span class="token punctuation">(</span>element<span class="token punctuation">.</span>isSelfClosing <span class="token operator">||</span> context<span class="token punctuation">.</span>options<span class="token punctuation">.</span><span class="token function">isVoidTag</span><span class="token punctuation">(</span>element<span class="token punctuation">.</span>tag<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// #4030 self-closing <pre> tag</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>isPreBoundary<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      context<span class="token punctuation">.</span>inPre <span class="token operator">=</span> <span class="token boolean">false</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>isVPreBoundary<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      context<span class="token punctuation">.</span>inVPre <span class="token operator">=</span> <span class="token boolean">false</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> element
  <span class="token punctuation">}</span>

  <span class="token comment">// Children.</span>
  ancestors<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>element<span class="token punctuation">)</span>
  <span class="token keyword">const</span> mode <span class="token operator">=</span> context<span class="token punctuation">.</span>options<span class="token punctuation">.</span><span class="token function">getTextMode</span><span class="token punctuation">(</span>element<span class="token punctuation">,</span> parent<span class="token punctuation">)</span>
  <span class="token keyword">const</span> children <span class="token operator">=</span> <span class="token function">parseChildren</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> mode<span class="token punctuation">,</span> ancestors<span class="token punctuation">)</span>
  ancestors<span class="token punctuation">.</span><span class="token function">pop</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

  <span class="token comment">// 2.x inline-template compat</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>__COMPAT__<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> inlineTemplateProp <span class="token operator">=</span> element<span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span>
      p <span class="token operator">=></span> p<span class="token punctuation">.</span>type <span class="token operator">===</span> NodeTypes<span class="token punctuation">.</span><span class="token constant">ATTRIBUTE</span> <span class="token operator">&&</span> p<span class="token punctuation">.</span>name <span class="token operator">===</span> <span class="token string">'inline-template'</span>
    <span class="token punctuation">)</span> <span class="token keyword">as</span> AttributeNode
    <span class="token keyword">if</span> <span class="token punctuation">(</span>
      inlineTemplateProp <span class="token operator">&&</span>
      <span class="token function">checkCompatEnabled</span><span class="token punctuation">(</span>
        CompilerDeprecationTypes<span class="token punctuation">.</span><span class="token constant">COMPILER_INLINE_TEMPLATE</span><span class="token punctuation">,</span>
        context<span class="token punctuation">,</span>
        inlineTemplateProp<span class="token punctuation">.</span>loc
      <span class="token punctuation">)</span>
    <span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> loc <span class="token operator">=</span> <span class="token function">getSelection</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> element<span class="token punctuation">.</span>loc<span class="token punctuation">.</span>end<span class="token punctuation">)</span>
      inlineTemplateProp<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token punctuation">{</span>
        type<span class="token operator">:</span> NodeTypes<span class="token punctuation">.</span><span class="token constant">TEXT</span><span class="token punctuation">,</span>
        content<span class="token operator">:</span> loc<span class="token punctuation">.</span>source<span class="token punctuation">,</span>
        loc
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>

  element<span class="token punctuation">.</span>children <span class="token operator">=</span> children

  <span class="token comment">// End tag.</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">startsWithEndTagOpen</span><span class="token punctuation">(</span>context<span class="token punctuation">.</span>source<span class="token punctuation">,</span> element<span class="token punctuation">.</span>tag<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">parseTag</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> TagType<span class="token punctuation">.</span>End<span class="token punctuation">,</span> parent<span class="token punctuation">)</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    <span class="token function">emitError</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> ErrorCodes<span class="token punctuation">.</span><span class="token constant">X_MISSING_END_TAG</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> element<span class="token punctuation">.</span>loc<span class="token punctuation">.</span>start<span class="token punctuation">)</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>context<span class="token punctuation">.</span>source<span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">0</span> <span class="token operator">&&</span> element<span class="token punctuation">.</span>tag<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token string">'script'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> first <span class="token operator">=</span> children<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>first <span class="token operator">&&</span> <span class="token function">startsWith</span><span class="token punctuation">(</span>first<span class="token punctuation">.</span>loc<span class="token punctuation">.</span>source<span class="token punctuation">,</span> <span class="token string">'<!--'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token function">emitError</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> ErrorCodes<span class="token punctuation">.</span><span class="token constant">EOF_IN_SCRIPT_HTML_COMMENT_LIKE_TEXT</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>

  element<span class="token punctuation">.</span>loc <span class="token operator">=</span> <span class="token function">getSelection</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> element<span class="token punctuation">.</span>loc<span class="token punctuation">.</span>start<span class="token punctuation">)</span>

  <span class="token keyword">if</span> <span class="token punctuation">(</span>isPreBoundary<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    context<span class="token punctuation">.</span>inPre <span class="token operator">=</span> <span class="token boolean">false</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>isVPreBoundary<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    context<span class="token punctuation">.</span>inVPre <span class="token operator">=</span> <span class="token boolean">false</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> element
<span class="token punctuation">}</span>
</code></pre> 
  <h4>parseText</h4> 
  <p>解析文本内容，返回文本类型的结构数据节点。</p> 
  <pre><code class="prism language-typescript"><span class="token keyword">function</span> <span class="token function">parseText</span><span class="token punctuation">(</span>context<span class="token operator">:</span> ParserContext<span class="token punctuation">,</span> mode<span class="token operator">:</span> TextModes<span class="token punctuation">)</span><span class="token operator">:</span> TextNode <span class="token punctuation">{</span>
  __TEST__ <span class="token operator">&&</span> <span class="token function">assert</span><span class="token punctuation">(</span>context<span class="token punctuation">.</span>source<span class="token punctuation">.</span>length <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span>

  <span class="token keyword">const</span> endTokens <span class="token operator">=</span>
    mode <span class="token operator">===</span> TextModes<span class="token punctuation">.</span><span class="token constant">CDATA</span> <span class="token operator">?</span> <span class="token punctuation">[</span><span class="token string">']]>'</span><span class="token punctuation">]</span> <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'<'</span><span class="token punctuation">,</span> context<span class="token punctuation">.</span>options<span class="token punctuation">.</span>delimiters<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">]</span>

  <span class="token keyword">let</span> endIndex <span class="token operator">=</span> context<span class="token punctuation">.</span>source<span class="token punctuation">.</span>length
  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> endTokens<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> index <span class="token operator">=</span> context<span class="token punctuation">.</span>source<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>endTokens<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">!==</span> <span class="token operator">-</span><span class="token number">1</span> <span class="token operator">&&</span> endIndex <span class="token operator">></span> index<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      endIndex <span class="token operator">=</span> index
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>

  __TEST__ <span class="token operator">&&</span> <span class="token function">assert</span><span class="token punctuation">(</span>endIndex <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span>

  <span class="token keyword">const</span> start <span class="token operator">=</span> <span class="token function">getCursor</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span>
  <span class="token keyword">const</span> content <span class="token operator">=</span> <span class="token function">parseTextData</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> endIndex<span class="token punctuation">,</span> mode<span class="token punctuation">)</span>

  <span class="token keyword">return</span> <span class="token punctuation">{</span>
    type<span class="token operator">:</span> NodeTypes<span class="token punctuation">.</span><span class="token constant">TEXT</span><span class="token punctuation">,</span>
    content<span class="token punctuation">,</span>
    loc<span class="token operator">:</span> <span class="token function">getSelection</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> start<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> 
  <h4>parseBogusComment</h4> 
  <p>解析伪注释内容，返回注释类型的结构数据节点。<br> 一些内容会被这个函数当作注释解析，并会给出警告信息。</p> 
  <pre><code class="prism language-typescript"><span class="token keyword">function</span> <span class="token function">parseBogusComment</span><span class="token punctuation">(</span>context<span class="token operator">:</span> ParserContext<span class="token punctuation">)</span><span class="token operator">:</span> CommentNode <span class="token operator">|</span> <span class="token keyword">undefined</span> <span class="token punctuation">{</span>
  __TEST__ <span class="token operator">&&</span> <span class="token function">assert</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^<(?:[\!\?]|\/[^a-z>])</span><span class="token regex-delimiter">/</span><span class="token regex-flags">i</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>context<span class="token punctuation">.</span>source<span class="token punctuation">)</span><span class="token punctuation">)</span>

  <span class="token keyword">const</span> start <span class="token operator">=</span> <span class="token function">getCursor</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span>
  <span class="token keyword">const</span> contentStart <span class="token operator">=</span> context<span class="token punctuation">.</span>source<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">===</span> <span class="token string">'?'</span> <span class="token operator">?</span> <span class="token number">1</span> <span class="token operator">:</span> <span class="token number">2</span>
  <span class="token keyword">let</span> content<span class="token operator">:</span> <span class="token builtin">string</span>

  <span class="token keyword">const</span> closeIndex <span class="token operator">=</span> context<span class="token punctuation">.</span>source<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'>'</span><span class="token punctuation">)</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>closeIndex <span class="token operator">===</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    content <span class="token operator">=</span> context<span class="token punctuation">.</span>source<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span>contentStart<span class="token punctuation">)</span>
    <span class="token function">advanceBy</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> context<span class="token punctuation">.</span>source<span class="token punctuation">.</span>length<span class="token punctuation">)</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    content <span class="token operator">=</span> context<span class="token punctuation">.</span>source<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span>contentStart<span class="token punctuation">,</span> closeIndex<span class="token punctuation">)</span>
    <span class="token function">advanceBy</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> closeIndex <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">return</span> <span class="token punctuation">{</span>
    type<span class="token operator">:</span> NodeTypes<span class="token punctuation">.</span><span class="token constant">COMMENT</span><span class="token punctuation">,</span>
    content<span class="token punctuation">,</span>
    loc<span class="token operator">:</span> <span class="token function">getSelection</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> start<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> 
  <h2>结语</h2> 
  <p>上篇：【vue3】vue3源码探索之旅：compiler-core（一）</p> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC和WAP自适应版-->
                    <div id="SOHUCS" sid="1753591742537416704"></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">
                        <!-- 文章页-右侧1 动态广告位 -->
                        <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>
                        <!-- 文章页-右侧2 动态广告位 -->
                        <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>
                        <!-- 文章页-右侧3 动态广告位 -->
                        <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">你可能感兴趣的:(vue3,javascript,前端,vue.js)</h4>
        <div id="paradigm-article-related">
            <div class="recommend-post mb30">
                <ul class="widget-links">
                    <li><a href="/article/1833374017902440448.htm"
                           title=".NetCore+vue3上传图片 Multipart body length limit 16384 exceeded." target="_blank">.NetCore+vue3上传图片 Multipart body length limit 16384 exceeded.</a>
                        <span class="text-muted">鱼是一只鱼啊</span>
<a class="tag" taget="_blank" href="/search/Vue/1.htm">Vue</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/.netcore/1.htm">.netcore</a><a class="tag" taget="_blank" href="/search/%E5%9B%BE%E7%89%87%E4%B8%8A%E4%BC%A0/1.htm">图片上传</a><a class="tag" taget="_blank" href="/search/vue3/1.htm">vue3</a><a class="tag" taget="_blank" href="/search/el-upload/1.htm">el-upload</a>
                        <div>实现目标。点击图片上传头像效果图前端部分图片上传关键代码更换头像上传js部分import{ref,reactive,onMounted}from"vue";import{uploadAvatar}from"../../api/auth";import{ElMessage}from"element-plus";exportdefault{setup(){constfit=ref("cover");c</div>
                    </li>
                    <li><a href="/article/1833331796041887744.htm"
                           title="判断PDF与图片是否可以预览" target="_blank">判断PDF与图片是否可以预览</a>
                        <span class="text-muted">马优晨</span>
<a class="tag" taget="_blank" href="/search/%E5%88%A4%E6%96%ADPDF%E6%98%AF%E5%90%A6%E5%8F%AF%E4%BB%A5%E9%A2%84%E8%A7%88/1.htm">判断PDF是否可以预览</a><a class="tag" taget="_blank" href="/search/%E5%88%A4%E6%96%AD%E5%9B%BE%E7%89%87%E6%98%AF%E5%90%A6%E5%8F%AF%E4%BB%A5%E9%A2%84%E8%A7%88/1.htm">判断图片是否可以预览</a><a class="tag" taget="_blank" href="/search/PDF%E6%98%AF%E5%90%A6%E5%8F%AF%E4%BB%A5%E9%A2%84%E8%A7%88/1.htm">PDF是否可以预览</a><a class="tag" taget="_blank" href="/search/%E5%9B%BE%E7%89%87%E6%98%AF%E5%90%A6%E5%8F%AF%E4%BB%A5%E9%A2%84%E8%A7%88/1.htm">图片是否可以预览</a><a class="tag" taget="_blank" href="/search/js%E5%88%A4%E6%96%ADPDF%E6%98%AF%E5%90%A6%E5%8F%AF%E4%BB%A5%E9%A2%84%E8%A7%88/1.htm">js判断PDF是否可以预览</a>
                        <div>一、判断图片是否可以预览在JavaScript中，可以使用Image对象来判断一个图片URL是否可以访问。如果图片可以被加载，那么load事件会被触发；如果图片无法访问，error事件会被触发。functioncheckImageAccessibility(url,callback){varimg=newImage();img.onload=function(){callback(true);//</div>
                    </li>
                    <li><a href="/article/1833321507116380160.htm"
                           title="随笔记录git提交出错和原生js以JSON格式请求接口导出Excel" target="_blank">随笔记录git提交出错和原生js以JSON格式请求接口导出Excel</a>
                        <span class="text-muted">山丘lemon</span>

                        <div>GIT提交代码出错Fileexists.原文链接https://www.cnblogs.com/sweetbullet/p/9889997.html前端js导出,参数以json格式发送post请求原文链接https://www.cnblogs.com/sweetbullet/p/9843178.html</div>
                    </li>
                    <li><a href="/article/1833316669963988992.htm"
                           title="jswebrtc 支持 SRS 的 Webrtc 播放器" target="_blank">jswebrtc 支持 SRS 的 Webrtc 播放器</a>
                        <span class="text-muted">王小工</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/webrtc/1.htm">webrtc</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a>
                        <div>WebRTCWebRTC（WebReal-TimeCommunication）是一项实时通讯技术，它允许网络应用或站点在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流、音频流或其他任意数据的传输。WebRTC整体架构从上到下一共分为三层：WebAPI层：暴露给开发人员的用于开发WebRTC应用的JavaScriptAPI，如RTCPeerConnecti</div>
                    </li>
                    <li><a href="/article/1833314776994902016.htm"
                           title="ECMAScript简介" target="_blank">ECMAScript简介</a>
                        <span class="text-muted">老四点COM</span>
<a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</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>前言ECMAScript（通常简称为ES）由ECMA国际标准化组织制定的一种脚本语言标准，Netscape最初开发的JavaScript演变而来。ECMAScript为JavaScript提供了基础语言结构和功能。最初设计成一种脚本语言，用来服务Web。作为脚本语言ES同时具备其他脚本语言一样的性质。一、发展历史ECMAScript的历史可以追溯到1995年12月，当时升阳与网景联合推出了Java</div>
                    </li>
                    <li><a href="/article/1833284518669283328.htm"
                           title="JS中const有没有变量提升" target="_blank">JS中const有没有变量提升</a>
                        <span class="text-muted">北原_春希</span>
<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中，const关键字用于声明一个只读的常量，其值在初始化后不能被重新赋值。关于变量提升（Hoisting），它是JavaScript中一个重要的概念，指的是无论变量或函数声明在何处，它们都会被“提升”到其所在作用域的最顶部。但是，这个规则不完全适用于const和let声明的变量。变量提升（Hoisting）的传统理解在ES6之前，JavaScript只有var关键字用于声明变</div>
                    </li>
                    <li><a href="/article/1833279602898857984.htm"
                           title="js知识总结" target="_blank">js知识总结</a>
                        <span class="text-muted">软件技术NINI</span>
<a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</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>JavaScript（JS）是一种广泛使用的编程语言，主要用于网页开发，但也适用于非浏览器环境（如Node.js）。它支持面向对象、命令式、声明式（如通过函数式编程）和事件驱动式编程风格。以下是对JavaScript核心知识的一个总结：1.基础语法变量：使用var、let、const声明变量。let和const具有块级作用域，而var具有函数作用域或全局作用域。数据类型：包括原始类型（如Strin</div>
                    </li>
                    <li><a href="/article/1833279602013859840.htm"
                           title="vue3知识总结" target="_blank">vue3知识总结</a>
                        <span class="text-muted">软件技术NINI</span>
<a class="tag" taget="_blank" href="/search/vue%E7%AC%94%E8%AE%B0/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><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>Vue3是Vue.js的最新版本，相较于Vue2，它在性能、API设计、类型支持等多个方面都有显著的改进和创新。以下是对Vue3知识的总结：一、性能优化响应式系统升级：Vue3使用Proxy替代了Vue2中的Object.defineProperty，实现了对对象变化的更广泛监测，包括对象的添加和删除，以及数组的长度和索引变化。这使得Vue3的响应式系统更加高效和准确。虚拟DOM优化：Vue3优化</div>
                    </li>
                    <li><a href="/article/1833272472464617472.htm"
                           title="Springboot+vue.js+协同过滤推荐+余弦相似度算法实现新闻推荐系统" target="_blank">Springboot+vue.js+协同过滤推荐+余弦相似度算法实现新闻推荐系统</a>
                        <span class="text-muted">计算机程序优异哥</span>

                        <div>针对海量的新闻资讯数据，如何快速的根据用户的检索需要，完成符合用户阅读需求的新闻资讯推荐？本篇文章主要采用余弦相似度及基于用户协同过滤算法实现新闻推荐，通过余弦相似度算法完成针对不同新闻数据之间的相似性计算，实现分类标签。通过协同过滤算法发现具备相似阅读习惯的用户，展开个性化推荐。本次新闻推荐系统：主要包含技术：springboot，mybatis，mysql，javascript，vue.js，</div>
                    </li>
                    <li><a href="/article/1833270524688560128.htm"
                           title="Dojo-CodeLab: JavaScript与Dojo框架学习与实践指南" target="_blank">Dojo-CodeLab: JavaScript与Dojo框架学习与实践指南</a>
                        <span class="text-muted">陈马登Morden</span>

                        <div>本文还有配套的精品资源，点击获取简介：Dojo-CodeLab是一个提供学习和实践JavaScript及其Dojo框架的项目，专注于为初学者提供无需特定环境限制的编程平台。通过开发一个简单的计算器应用，学习者将掌握JavaScript基础语法和Dojo工具集的使用，涵盖变量、数据类型、控制结构、函数、对象、数学运算、事件处理和DOM操作等关键概念。本项目通过实际编码练习帮助学习者加深对前端开发的理</div>
                    </li>
                    <li><a href="/article/1833268382229688320.htm"
                           title="2023前端面试时遇到的面试题" target="_blank">2023前端面试时遇到的面试题</a>
                        <span class="text-muted">No regrets, no return</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a>
                        <div>2023前端面试时遇到的面试题1.数组有哪些方法push、pop、unshift、shift、join、forEach、filter、map、find…2.filter和some返回的分别是一个什么filter返回的是一个数组，some返回的是一个布尔值3.es6新增了哪些方法let和cconst、模板字符串（）、扩展运算符、for…of、解构、箭头函数、symbol数据类型、Set和Map方法等</div>
                    </li>
                    <li><a href="/article/1833263837659361280.htm"
                           title="Qt Creator" target="_blank">Qt Creator</a>
                        <span class="text-muted">morcake</span>
<a class="tag" taget="_blank" href="/search/qt/1.htm">qt</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>QtCreator是一个跨平台的C++、JavaScript和QML集成开发环境，它简化了GUI应用的开发。支持用户在Linux、Mac以及Windows系统上使用，它是QtGUI应用开发框架的SDK的一部分。该编辑器具有语法高亮和自动补全等功能。Qt（/ˈkjuːt/，发音同“cute”[4][5][6]）是一个跨平台的C++应用程序开发框架。广泛用于开发GUI程序，这种情况下又被称为部件工具箱</div>
                    </li>
                    <li><a href="/article/1833257537026224128.htm"
                           title="利用PHP和Selenium自动化采集数据、实现爬虫抓取" target="_blank">利用PHP和Selenium自动化采集数据、实现爬虫抓取</a>
                        <span class="text-muted">IT大数据小助手</span>
<a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/selenium/1.htm">selenium</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E5%8C%96/1.htm">自动化</a>
                        <div>随着互联网时代的到来，抓取互联网上的数据成为越来越重要的工作。在web前端开发领域，我们经常需要获取页面中的数据来完成一系列的交互操作，为了提高效率，我们可以将这个工作自动化。本文将介绍如何利用PHP和Selenium进行自动化数据采集和爬虫抓取。一、什么是SeleniumSelenium是一个免费的开源自动化测试工具，主要用于自动化测试Web应用程序，可以模拟真实的用户行为，实现自动交互。使用S</div>
                    </li>
                    <li><a href="/article/1833252619339001856.htm"
                           title="【Uniapp】前端面试题" target="_blank">【Uniapp】前端面试题</a>
                        <span class="text-muted">菜鸟una</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%85%AB%E8%82%A1%E6%96%87%E9%9D%A2%E8%AF%95%E9%A2%98/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/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>Uniapp部分文章目录Uniapp部分1.Uniapp的页面生命周期和Vue的生命周期有何区别？1）Vue的生命周期2）Uniapp的页面生命周期3）区别2.Uniapp的rpx转换px的公式？3.Uniapp的tabbar自定义，怎么实现突起home标？1）配置自定义tabBar2）创建自定义tabBar组件3）突出显示“home”标4.Uniapp的tabbar自定义，怎么实现隐藏原生tab</div>
                    </li>
                    <li><a href="/article/1833245435347693568.htm"
                           title="「CSS思维」组件化VS原子化" target="_blank">「CSS思维」组件化VS原子化</a>
                        <span class="text-muted">weixin_33810006</span>
<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/ViewUI/1.htm">ViewUI</a>
                        <div>废话从我两个月前，在掘金发第一篇文章到现在，关注数每天都在以至少20个人数的量持续增长，现在马上就要突破1000大关了。可是自己却断更了很久了，想想很对不起我的粉丝们（我是想当前端网红想疯了哈哈）。于是逼迫自己写了一篇这篇，我一直想写的文章。我是一个爱折腾设计的前端，我进公司的职位也是“偏体验的前端”。从这些标签可以看到我是一个以重构（“切图仔”）出道的前端。我喜欢的是所见即所得的代码体验，而不是</div>
                    </li>
                    <li><a href="/article/1833243541623631872.htm"
                           title="【前端】 如何在 Vue.js 中使用 Mock 数据：教程与技巧" target="_blank">【前端】 如何在 Vue.js 中使用 Mock 数据：教程与技巧</a>
                        <span class="text-muted">帅比九日</span>
<a class="tag" taget="_blank" href="/search/%E8%B8%A9%E8%BF%87%E7%9A%84%E5%9D%91/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/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>如何在Vue.js中使用Mock数据：教程与技巧在开发过程中，为了测试和开发前端功能，你常常需要用到模拟（mock）数据。Vue.js提供了灵活的方式来处理数据请求和更新，但在没有真实后端的情况下，我们可以使用Mock数据来代替真实API请求。本文将介绍如何在Vue.js项目中设置和使用Mock数据。1.使用Mock数据的必要性Mock数据在以下场景中非常有用：前端开发阶段：在后端API尚未完成时</div>
                    </li>
                    <li><a href="/article/1833242407018262528.htm"
                           title="项目架构设计" target="_blank">项目架构设计</a>
                        <span class="text-muted">先熬半个月</span>

                        <div>架构概述：架构共分为5层，访问层，接入层，网关层，服务层，数据层服务架构涉及26个技术点，部署架构7个技术点服务架构1.LVS：四层负载均衡，将用户分发到不同Nginx服务器上2.Nginx:是一个高性能的HTTP和反向代理的web服务器，用于部署前端应用3.Keepalived:高可用，此处指的是集群4.JWT:全称：JavaWebToken，用户身份校验，鉴权5.SpringCloudGetw</div>
                    </li>
                    <li><a href="/article/1833232572784668672.htm"
                           title="基于Spring的消息推送实战（Websocket和前端轮询实现）" target="_blank">基于Spring的消息推送实战（Websocket和前端轮询实现）</a>
                        <span class="text-muted">星月梦瑾</span>
<a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/websocket/1.htm">websocket</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>基于Spring的消息推送实战（Websocket和前端轮询实现）本文介绍了基于Spring的消息推送实现方法，主要介绍了websocket实时消息推送方法（ServerEndpoint方式实现），以及前端客户端轮询方式的消息推送。一、消息推送常见的消息推送方式有轮询、websocket、jpush等。传统http协议需要客户端发起请求，不能服务端进行推送，且建立tcp连接需要多次握手（tcp三次</div>
                    </li>
                    <li><a href="/article/1833214546563657728.htm"
                           title="Yarn：一个快速、可靠且安全的JavaScript包管理工具" target="_blank">Yarn：一个快速、可靠且安全的JavaScript包管理工具</a>
                        <span class="text-muted">小周不想卷</span>
<a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AFnode.js%E5%85%A5%E9%97%A8/1.htm">前端node.js入门</a><a class="tag" taget="_blank" href="/search/yarn/1.htm">yarn</a>
                        <div>(创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，还请三连支持一波哇ヾ(＠^∇^＠)ノ）目录一、Yarn简介二、Yarn的安装1.使用npm安装Yarn2.在macOS上使用Homebrew安装Yarn3.在Windows上使用Chocolatey安装Yarn4.在Linux上使用包管理器安装Yarn三、Yarn的配置1.全局配置2.项目配置四、Yarn的基本用法1.初始化</div>
                    </li>
                    <li><a href="/article/1833214420331884544.htm"
                           title="JSON：轻量级的数据交换格式" target="_blank">JSON：轻量级的数据交换格式</a>
                        <span class="text-muted">Tsingfeng.</span>
<a class="tag" taget="_blank" href="/search/%E5%9F%BA%E7%A1%80%E9%87%8A%E7%96%91/1.htm">基础释疑</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a>
                        <div>JSON（JavaScriptObjectNotation,JS对象简谱）是一种轻量级的数据交换格式。它基于ECMAScript（EuropeanComputerManufacturersAssociation,欧洲计算机协会制定的js规范）的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生</div>
                    </li>
                    <li><a href="/article/1833214167637651456.htm"
                           title="Vue2组件间通信的14种方式详解" target="_blank">Vue2组件间通信的14种方式详解</a>
                        <span class="text-muted">SqCheese</span>
<a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a>
                        <div>（本篇以Vue2为主，Vue3在写啦）开始（引用一张举例图，全文依据下图关系进行举例说明）A组件==1.props/$emit//父向子传值importaaafrom'./aaa.vue'{{msg}}---------------------------------//子向父组件传值send(val){val为接收的参}改变字符串change(){this.$emit('send','我是参数'</div>
                    </li>
                    <li><a href="/article/1833211264680161280.htm"
                           title="Vue 中的 Vuex：全面解析与使用教程" target="_blank">Vue 中的 Vuex：全面解析与使用教程</a>
                        <span class="text-muted">NMY112</span>
<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><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>什么是Vuex？Vuex是Vue.js官方提供的状态管理模式，专为Vue.js应用设计。它通过集中式存储管理应用中所有的组件状态，允许组件之间更方便地共享数据，并提供了一套规则来确保状态以可预测的方式发生变化。Vuex对大型应用尤其有用，因为它将组件中的状态提取到外部，并通过全局状态管理器进行集中管理。Vuex提供了响应式的数据存储，与Vue组件深度集成，这意味着当状态发生变化时，所有依赖该状态的</div>
                    </li>
                    <li><a href="/article/1833211264197816320.htm"
                           title="Vue.js 路由守卫详解" target="_blank">Vue.js 路由守卫详解</a>
                        <span class="text-muted">NMY112</span>
<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><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>Vue.js是一个用于构建用户界面的渐进式框架。在大型应用中，路由是管理页面间导航的关键部分。VueRouter提供了一系列的路由守卫，帮助开发者在用户导航到新页面时执行特定逻辑。本文将详细介绍Vue.js中的全部路由守卫，包括如何使用、适用场景以及一些补充说明。一、路由守卫分类VueRouter中的路由守卫主要分为以下几类：全局守卫beforeEachbeforeResolveafterEach</div>
                    </li>
                    <li><a href="/article/1833210508648476672.htm"
                           title="【前端小技巧】不同组件中如何实现点击空白关闭自定义的弹窗" target="_blank">【前端小技巧】不同组件中如何实现点击空白关闭自定义的弹窗</a>
                        <span class="text-muted">Luxine.</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%88%86%E4%BA%AB/1.htm">前端分享</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>直接上代码吧处理函数closest的参数是弹窗的类名consthandleClickOutside=(event:MouseEvent)=>{consttarget=event.targetasHTMLElement;if(!target.closest('.popUpClassName')){//控制弹窗显示隐藏的变量ispopup.value=false;}};绑定到document上docu</div>
                    </li>
                    <li><a href="/article/1833207862239784960.htm"
                           title="vue+jsonrpc+mongoDB文件传输解决方案（任意格式文件）" target="_blank">vue+jsonrpc+mongoDB文件传输解决方案（任意格式文件）</a>
                        <span class="text-muted">weideng_san</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%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/%E6%96%87%E4%BB%B6%E4%BC%A0%E8%BE%93/1.htm">文件传输</a><a class="tag" taget="_blank" href="/search/jsonrpc/1.htm">jsonrpc</a><a class="tag" taget="_blank" href="/search/mongoDB/1.htm">mongoDB</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a>
                        <div>环境及需求：前端采用vue；后端采用spring，但是只用到了spring的对象注入功能，未使用springweb相关功能。前后端通信采用jsonrpc，现需要在前端选中文件（格式未知，上传到后端，后端将其存储在mongoDB中）。背景：springweb可以直接使用controller接受MultipartFile对象；但是jsonrpc不能直接传输文件类型，jsonrpc是轻量级通信框架，擅长</div>
                    </li>
                    <li><a href="/article/1833205339332374528.htm"
                           title="【华为OD统一考试B卷 | 100分】 快递运输（C++ Java JavaScript Python）" target="_blank">【华为OD统一考试B卷 | 100分】 快递运输（C++ Java JavaScript Python）</a>
                        <span class="text-muted">她与残局皆遗憾..</span>
<a class="tag" taget="_blank" href="/search/%E5%9B%BE%E7%81%B5%E5%AD%A6%E9%99%A2/1.htm">图灵学院</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/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>华为OD统一考试A卷+B卷新题库说明2023年5月份，华为官方已经将的2022/0223Q(1/2/3/4)统一修改为OD统一考试（A卷）和OD统一考试（B卷）。你收到的链接上面会标注A卷还是B卷。请注意：根据反馈，目前大部分收到的都是B卷。但是仍有概率抽到A卷。A卷对应2023的新题库（2022Q420223Q1）B卷对应20022部分考题以及新出的题目专栏：2023华为OD机试(A卷+B卷)（</div>
                    </li>
                    <li><a href="/article/1833203696817762304.htm"
                           title="vue3+tesseract 图片文字提取" target="_blank">vue3+tesseract 图片文字提取</a>
                        <span class="text-muted">妙明元心</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a>
                        <div>github:https://github.com/naptha/tesseract.js可实现多语言识别，中英文混合识别demo如下：importTesseractfrom"tesseract.js"//方式1：Tesseract.recognize('http://localhost:5173/vue.jpg','eng+chi_sim',).then((d)=>{console.log(d.</div>
                    </li>
                    <li><a href="/article/1833203697232998400.htm"
                           title="vue3 watch监听响应式数组失效问题" target="_blank">vue3 watch监听响应式数组失效问题</a>
                        <span class="text-muted">妙明元心</span>
<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/vue.js/1.htm">vue.js</a>
                        <div>constpageData=reactive({checkedNodeList:[]})constcolspanDisabled=ref(false);watch(()=>{returnpageData.checkedNodeList},(newValue,oldValue)=>{if(newValue.length>0){colspanDisabled.value=true;}else{cols</div>
                    </li>
                    <li><a href="/article/1833202561855877120.htm"
                           title="基于微前端qiankun的多页签缓存方案实践" target="_blank">基于微前端qiankun的多页签缓存方案实践</a>
                        <span class="text-muted">JavaMonsterr</span>
<a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E6%9C%BA/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/%E7%BC%93%E5%AD%98/1.htm">缓存</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a>
                        <div>本文梳理了基于阿里开源微前端框架qiankun，实现多页签及子应用缓存的方案，同时还类比了多个不同方案之间的区别及优劣势，为使用微前端进行多页签开发的同学，提供一些参考。一、多页签是什么？我们常见的浏览器多页签、编辑器多页签，从产品角度来说，就是为了能够实现用户访问可记录，快速定位工作区等作用；那对于单页应用，可以通过实现多页签，对用户的访问记录进行缓存，从而提供更好的用户体验。前端可以通过多种方</div>
                    </li>
                    <li><a href="/article/1833198183547760640.htm"
                           title="测试平台系列(32) 编写环境配置页面(中)" target="_blank">测试平台系列(32) 编写环境配置页面(中)</a>
                        <span class="text-muted">米洛丶</span>

                        <div>回顾大家好呀，又见面了！上期我们已经完整地编写了环境管理CRUD的接口，但是光有接口是不行的，我们需要为之编写一个web页面，使用户能够在页面上管理环境数据。这是前端系列文章的第一篇，包含了部分教程在里面，所以本来是下篇的它，变成了中篇。image原型设计我们在实现某个功能的时候，就算不画出原型，心中也一定设计好大概的结构。以我们的环境管理为例子，用户可以通过table查看当前已有的环境，也提供i</div>
                    </li>
                                <li><a href="/article/107.htm"
                                       title="web报表工具FineReport常见的数据集报错错误代码和解释" target="_blank">web报表工具FineReport常见的数据集报错错误代码和解释</a>
                                    <span class="text-muted">老A不折腾</span>
<a class="tag" taget="_blank" href="/search/web%E6%8A%A5%E8%A1%A8/1.htm">web报表</a><a class="tag" taget="_blank" href="/search/finereport/1.htm">finereport</a><a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%A0%81/1.htm">代码</a><a class="tag" taget="_blank" href="/search/%E5%8F%AF%E8%A7%86%E5%8C%96%E5%B7%A5%E5%85%B7/1.htm">可视化工具</a>
                                    <div>在使用finereport制作报表，若预览发生错误，很多朋友便手忙脚乱不知所措了，其实没什么，只要看懂报错代码和含义，可以很快的排除错误，这里我就分享一下finereport的数据集报错错误代码和解释，如果有说的不准确的地方，也请各位小伙伴纠正一下。 
  
NS-war-remote=错误代码\:1117 压缩部署不支持远程设计 
NS_LayerReport_MultiDs=错误代码</div>
                                </li>
                                <li><a href="/article/234.htm"
                                       title="Java的WeakReference与WeakHashMap" target="_blank">Java的WeakReference与WeakHashMap</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%B1%E5%BC%95%E7%94%A8/1.htm">弱引用</a>
                                    <div>首先看看 WeakReference 
 
wiki 上 Weak reference 的一个例子： 
 
 

	public class ReferenceTest {
	public static void main(String[] args) throws InterruptedException {
 
            WeakReference r = new Wea</div>
                                </li>
                                <li><a href="/article/361.htm"
                                       title="Linux——（hostname）主机名与ip的映射" target="_blank">Linux——（hostname）主机名与ip的映射</a>
                                    <span class="text-muted">eksliang</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/hostname/1.htm">hostname</a>
                                    <div>一、 什么是主机名 
无论在局域网还是INTERNET上，每台主机都有一个IP地址，是为了区分此台主机和彼台主机，也就是说IP地址就是主机的门牌号。但IP地址不方便记忆，所以又有了域名。域名只是在公网（INtERNET)中存在，每个域名都对应一个IP地址，但一个IP地址可有对应多个域名。域名类型 linuxsir.org 这样的； 
主机名是用于什么的呢？ 
答：在一个局域网中，每台机器都有一个主</div>
                                </li>
                                <li><a href="/article/488.htm"
                                       title="oracle 常用技巧" target="_blank">oracle 常用技巧</a>
                                    <span class="text-muted">18289753290</span>

                                    <div>oracle常用技巧   ①复制表结构和数据     create table  temp_clientloginUser   as     select distinct userid from tbusrtloginlog   ②仅复制数据   如果表结构一样   insert into  mytable  select  * &nb</div>
                                </li>
                                <li><a href="/article/615.htm"
                                       title="使用c3p0数据库连接池时出现com.mchange.v2.resourcepool.TimeoutException" target="_blank">使用c3p0数据库连接池时出现com.mchange.v2.resourcepool.TimeoutException</a>
                                    <span class="text-muted">酷的飞上天空</span>
<a class="tag" taget="_blank" href="/search/exception/1.htm">exception</a>
                                    <div>有一个线上环境使用的是c3p0数据库，为外部提供接口服务。最近访问压力增大后台tomcat的日志里面频繁出现 
com.mchange.v2.resourcepool.TimeoutException: A client timed out while waiting to acquire a resource from com.mchange.v2.resourcepool.BasicResou</div>
                                </li>
                                <li><a href="/article/742.htm"
                                       title="IT系统分析师如何学习大数据" target="_blank">IT系统分析师如何学习大数据</a>
                                    <span class="text-muted">蓝儿唯美</span>
<a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a>
                                    <div>我是一名从事大数据项目的IT系统分析师。在深入这个项目前需要了解些什么呢？学习大数据的最佳方法就是先从了解信息系统是如何工作着手，尤其是数据库和基础设施。同样在开始前还需要了解大数据工具，如Cloudera、Hadoop、Spark、Hive、Pig、Flume、Sqoop与Mesos。系 统分析师需要明白如何组织、管理和保护数据。在市面上有几十款数据管理产品可以用于管理数据。你的大数据数据库可能</div>
                                </li>
                                <li><a href="/article/869.htm"
                                       title="spring学习——简介" target="_blank">spring学习——简介</a>
                                    <span class="text-muted">a-john</span>
<a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a>
                                    <div>Spring是一个开源框架，是为了解决企业应用开发的复杂性而创建的。Spring使用基本的JavaBean来完成以前只能由EJB完成的事情。然而Spring的用途不仅限于服务器端的开发，从简单性，可测试性和松耦合的角度而言，任何Java应用都可以从Spring中受益。其主要特征是依赖注入、AOP、持久化、事务、SpringMVC以及Acegi Security 
 
为了降低Java开发的复杂性，</div>
                                </li>
                                <li><a href="/article/996.htm"
                                       title="自定义颜色的xml文件" target="_blank">自定义颜色的xml文件</a>
                                    <span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a>
                                    <div><?xml version="1.0" encoding="utf-8"?> <resources> <color name="white">#FFFFFF</color> <color name="black">#000000</color> &</div>
                                </li>
                                <li><a href="/article/1123.htm"
                                       title="运营到底是做什么的？" target="_blank">运营到底是做什么的？</a>
                                    <span class="text-muted">aoyouzi</span>
<a class="tag" taget="_blank" href="/search/%E8%BF%90%E8%90%A5%E5%88%B0%E5%BA%95%E6%98%AF%E5%81%9A%E4%BB%80%E4%B9%88%E7%9A%84%EF%BC%9F/1.htm">运营到底是做什么的？</a>
                                    <div>文章来源：夏叔叔（微信号：woshixiashushu），欢迎大家关注！很久没有动笔写点东西，近些日子，由于爱狗团产品上线，不断面试，经常会被问道一个问题。问：爱狗团的运营主要做什么？答：带着用户一起嗨。为什么是带着用户玩起来呢？究竟什么是运营？运营到底是做什么的？那么，我们先来回答一个更简单的问题——互联网公司对运营考核什么？以爱狗团为例，绝大部分的移动互联网公司，对运营部门的考核分为三块——用</div>
                                </li>
                                <li><a href="/article/1250.htm"
                                       title="js面向对象类和对象" target="_blank">js面向对象类和对象</a>
                                    <span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1/1.htm">面向对象</a><a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0%E5%88%9B%E5%BB%BA%E7%B1%BB%E5%92%8C%E5%AF%B9%E8%B1%A1/1.htm">函数创建类和对象</a>
                                    <div>接触js已经有几个月了,但是对js的面向对象的一些概念根本就是模糊的,js是一种面向对象的语言 但又不像java一样有class,js不是严格的面向对象语言 ,js在java web开发的地位和java不相上下  ,其中web的数据的反馈现在主流的使用json,json的语法和js的类和属性的创建相似 
  
下面介绍一些js的类和对象的创建的技术 
  
一:类和对</div>
                                </li>
                                <li><a href="/article/1377.htm"
                                       title="web.xml之资源管理对象配置 resource-env-ref" target="_blank">web.xml之资源管理对象配置 resource-env-ref</a>
                                    <span class="text-muted">bijian1013</span>
<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/servlet/1.htm">servlet</a>
                                    <div>resource-env-ref元素来指定对管理对象的servlet引用的声明，该对象与servlet环境中的资源相关联 
<resource-env-ref>
    <resource-env-ref-name>资源名</resource-env-ref-name>
    <resource-env-ref-type>查找资源时返回的资源类</div>
                                </li>
                                <li><a href="/article/1504.htm"
                                       title="Create a composite component with a custom namespace" target="_blank">Create a composite component with a custom namespace</a>
                                    <span class="text-muted">sunjing</span>

                                    <div>https://weblogs.java.net/blog/mriem/archive/2013/11/22/jsf-tip-45-create-composite-component-custom-namespace 
  
When you developed a composite component the namespace you would be seeing would </div>
                                </li>
                                <li><a href="/article/1631.htm"
                                       title="【MongoDB学习笔记十二】Mongo副本集服务器角色之Arbiter" target="_blank">【MongoDB学习笔记十二】Mongo副本集服务器角色之Arbiter</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a>
                                    <div> 一、复本集为什么要加入Arbiter这个角色   回答这个问题，要从复本集的存活条件和Aribter服务器的特性两方面来说。   什么是Artiber？   An arbiter does 
not have a copy of data set and 
cannot become a primary. Replica sets may have arbiters to add a </div>
                                </li>
                                <li><a href="/article/1758.htm"
                                       title="Javascript开发笔记" target="_blank">Javascript开发笔记</a>
                                    <span class="text-muted">白糖_</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a>
                                    <div> 
 获取iframe内的元素 
 
通常我们使用window.frames["frameId"].document.getElementById("divId").innerHTML这样的形式来获取iframe内的元素，这种写法在IE、safari、chrome下都是通过的，唯独在fireforx下不通过。其实jquery的contents方法提供了对if</div>
                                </li>
                                <li><a href="/article/1885.htm"
                                       title="Web浏览器Chrome打开一段时间后，运行alert无效" target="_blank">Web浏览器Chrome打开一段时间后，运行alert无效</a>
                                    <span class="text-muted">bozch</span>
<a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/chorme/1.htm">chorme</a><a class="tag" taget="_blank" href="/search/alert/1.htm">alert</a><a class="tag" taget="_blank" href="/search/%E6%97%A0%E6%95%88/1.htm">无效</a>
                                    <div>今天在开发的时候，突然间发现alert在chrome浏览器就没法弹出了，很是怪异。 
试了试其他浏览器，发现都是没有问题的。 
开始想以为是chorme浏览器有啥机制导致的，就开始尝试各种代码让alert出来。尝试结果是仍然没有显示出来。 
这样开发的结果，如果客户在使用的时候没有提示，那会带来致命的体验。哎，没啥办法了 就关闭浏览器重启。 
  
结果就好了，这也太怪异了。难道是cho</div>
                                </li>
                                <li><a href="/article/2012.htm"
                                       title="编程之美-高效地安排会议 图着色问题 贪心算法" target="_blank">编程之美-高效地安排会议 图着色问题 贪心算法</a>
                                    <span class="text-muted">bylijinnan</span>
<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.ArrayList;
import java.util.Collections;
import java.util.List;
import java.util.Random;

public class GraphColoringProblem {

	/**编程之美 高效地安排会议 图着色问题 贪心算法
	 * 假设要用很多个教室对一组</div>
                                </li>
                                <li><a href="/article/2139.htm"
                                       title="机器学习相关概念和开发工具" target="_blank">机器学习相关概念和开发工具</a>
                                    <span class="text-muted">chenbowen00</span>
<a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/matlab/1.htm">matlab</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a>
                                    <div>基本概念： 
机器学习(Machine Learning, ML)是一门多领域交叉学科，涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为，以获取新的知识或技能，重新组织已有的知识结构使之不断改善自身的性能。 
它是人工智能的核心，是使计算机具有智能的根本途径，其应用遍及人工智能的各个领域，它主要使用归纳、综合而不是演绎。 
 
开发工具 
M</div>
                                </li>
                                <li><a href="/article/2266.htm"
                                       title="[宇宙经济学]关于在太空建立永久定居点的可能性" target="_blank">[宇宙经济学]关于在太空建立永久定居点的可能性</a>
                                    <span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E7%BB%8F%E6%B5%8E/1.htm">经济</a>
                                    <div> 
       大家都知道,地球上的房地产都比较昂贵,而且土地证经常会因为新的政府的意志而变幻文本格式........ 
 
       所以,在地球议会尚不具有在太空行使法律和权力的力量之前,我们外太阳系统的友好联盟可以考虑在地月系的某些引力平衡点上面,修建规模较大的定居点</div>
                                </li>
                                <li><a href="/article/2393.htm"
                                       title="oracle 11g database control 证书错误" target="_blank">oracle 11g database control 证书错误</a>
                                    <span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E8%AF%81%E4%B9%A6%E9%94%99%E8%AF%AF/1.htm">证书错误</a><a class="tag" taget="_blank" href="/search/oracle+11G+%E5%AE%89%E8%A3%85/1.htm">oracle 11G 安装</a>
                                    <div>oracle 11g database control 证书错误  
 
win7 安装完oracle11后打开 Database control 后，会打开em管理页面，提示证书错误，点“继续浏览此网站”，还是会继续停留在证书错误页面 
 
解决办法： 
 
是 KB2661254 这个更新补丁引起的，它限制了 RSA 密钥位长度少于 1024 位的证书的使用。具体可以看微软官方公告：</div>
                                </li>
                                <li><a href="/article/2520.htm"
                                       title="Java I/O之用FilenameFilter实现根据文件扩展名删除文件" target="_blank">Java I/O之用FilenameFilter实现根据文件扩展名删除文件</a>
                                    <span class="text-muted">游其是你</span>
<a class="tag" taget="_blank" href="/search/FilenameFilter/1.htm">FilenameFilter</a>
                                    <div>在Java中，你可以通过实现FilenameFilter类并重写accept(File dir, String name) 方法实现文件过滤功能。 
在这个例子中，我们向你展示在“c:\\folder”路径下列出所有“.txt”格式的文件并删除。        1   2   3   4   5   6   7   8   9   10   11   12   13   14   15   16 </div>
                                </li>
                                <li><a href="/article/2647.htm"
                                       title="C语言数组的简单以及一维数组的简单排序算法示例，二维数组简单示例" target="_blank">C语言数组的简单以及一维数组的简单排序算法示例，二维数组简单示例</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/array/1.htm">array</a>
                                    <div># include <stdio.h>

int main(void)
{
	
	int a[5] = {1, 2, 3, 4, 5};
		//a 是数组的名字 5是表示数组元素的个数，并且这五个元素分别用a[0], a[1]...a[4]
	
	int i;

	for (i=0; i<5; ++i)
		printf("%d\n",</div>
                                </li>
                                <li><a href="/article/2774.htm"
                                       title="PRIMARY, INDEX, UNIQUE 这3种是一类 PRIMARY 主键。 就是 唯一 且 不能为空。 INDEX 索引，普通的 UNIQUE 唯一索引" target="_blank">PRIMARY, INDEX, UNIQUE 这3种是一类 PRIMARY 主键。 就是 唯一 且 不能为空。 INDEX 索引，普通的 UNIQUE 唯一索引</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/primary/1.htm">primary</a>
                                    <div>PRIMARY, INDEX, UNIQUE 这3种是一类PRIMARY 主键。 就是 唯一 且 不能为空。INDEX 索引，普通的UNIQUE 唯一索引。 不允许有重复。FULLTEXT 是全文索引，用于在一篇文章中，检索文本信息的。举个例子来说，比如你在为某商场做一个会员卡的系统。这个系统有一个会员表有下列字段：会员编号   INT会员姓名  </div>
                                </li>
                                <li><a href="/article/2901.htm"
                                       title="java集合辅助类 Collections、Arrays" target="_blank">java集合辅助类 Collections、Arrays</a>
                                    <span class="text-muted">shuizhaosi888</span>
<a class="tag" taget="_blank" href="/search/Collections/1.htm">Collections</a><a class="tag" taget="_blank" href="/search/Arrays/1.htm">Arrays</a><a class="tag" taget="_blank" href="/search/HashCode/1.htm">HashCode</a>
                                    <div>  
Arrays、Collections 
  
1 ）数组集合之间转换 
    public static <T> List<T> asList(T... a) {
        return new ArrayList<>(a);
    } 
     a）Arrays.asL</div>
                                </li>
                                <li><a href="/article/3028.htm"
                                       title="Spring Security（10）——退出登录logout" target="_blank">Spring Security（10）——退出登录logout</a>
                                    <span class="text-muted">234390216</span>
<a class="tag" taget="_blank" href="/search/logout/1.htm">logout</a><a class="tag" taget="_blank" href="/search/Spring+Security/1.htm">Spring Security</a><a class="tag" taget="_blank" href="/search/%E9%80%80%E5%87%BA%E7%99%BB%E5%BD%95/1.htm">退出登录</a><a class="tag" taget="_blank" href="/search/logout-url/1.htm">logout-url</a><a class="tag" taget="_blank" href="/search/LogoutFilter/1.htm">LogoutFilter</a>
                                    <div>       要实现退出登录的功能我们需要在http元素下定义logout元素，这样Spring Security将自动为我们添加用于处理退出登录的过滤器LogoutFilter到FilterChain。当我们指定了http元素的auto-config属性为true时logout定义是会自动配置的，此时我们默认退出登录的URL为“/j_spring_secu</div>
                                </li>
                                <li><a href="/article/3155.htm"
                                       title="透过源码学前端 之 Backbone 三 Model" target="_blank">透过源码学前端 之 Backbone 三 Model</a>
                                    <span class="text-muted">逐行分析JS源代码</span>
<a class="tag" taget="_blank" href="/search/backbone/1.htm">backbone</a><a class="tag" taget="_blank" href="/search/%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90/1.htm">源码分析</a><a class="tag" taget="_blank" href="/search/js%E5%AD%A6%E4%B9%A0/1.htm">js学习</a>
                                    <div>Backbone 分析第三部分  Model 
概述： Model 提供了数据存储，将数据以JSON的形式保存在 Model的 attributes里， 
但重点功能在于其提供了一套功能强大，使用简单的存、取、删、改数据方法，并在不同的操作里加了相应的监听事件， 
如每次修改添加里都会触发 change，这在据模型变动来修改视图时很常用，并且与collection建立了关联。 </div>
                                </li>
                                <li><a href="/article/3282.htm"
                                       title="SpringMVC源码总结（七）mvc:annotation-driven中的HttpMessageConverter" target="_blank">SpringMVC源码总结（七）mvc:annotation-driven中的HttpMessageConverter</a>
                                    <span class="text-muted">乒乓狂魔</span>
<a class="tag" taget="_blank" href="/search/springMVC/1.htm">springMVC</a>
                                    <div>这一篇文章主要介绍下HttpMessageConverter整个注册过程包含自定义的HttpMessageConverter，然后对一些HttpMessageConverter进行具体介绍。 
 
HttpMessageConverter接口介绍： 
 

public interface HttpMessageConverter<T> {

	/**
	 * Indicate</div>
                                </li>
                                <li><a href="/article/3409.htm"
                                       title="分布式基础知识和算法理论" target="_blank">分布式基础知识和算法理论</a>
                                    <span class="text-muted">bluky999</span>
<a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a><a class="tag" taget="_blank" href="/search/%E4%B8%80%E8%87%B4%E6%80%A7%E5%93%88%E5%B8%8C/1.htm">一致性哈希</a><a class="tag" taget="_blank" href="/search/paxos/1.htm">paxos</a>
                                    <div>   
分布式基础知识和算法理论 
BY NODEXY@2014.8.12 
本文永久链接：http://nodex.iteye.com/blog/2103218 
  
在大数据的背景下，不管是做存储，做搜索，做数据分析，或者做产品或服务本身，面向互联网和移动互联网用户，已经不可避免地要面对分布式环境。笔者在此收录一些分布式相关的基础知识和算法理论介绍，在完善自我知识体系的同</div>
                                </li>
                                <li><a href="/article/3536.htm"
                                       title="Android Studio的.gitignore以及gitignore无效的解决" target="_blank">Android Studio的.gitignore以及gitignore无效的解决</a>
                                    <span class="text-muted">bell0901</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/gitignore/1.htm">gitignore</a>
                                    <div>　　github上.gitignore模板合集，里面有各种.gitignore ： https://github.com/github/gitignore 
　　自己用的Android Studio下项目的.gitignore文件，对github上的android.gitignore添加了 
　　　　　　# OSX files　　　　　　//mac os下　　　　　　.DS_Store </div>
                                </li>
                                <li><a href="/article/3663.htm"
                                       title="成为高级程序员的10个步骤" target="_blank">成为高级程序员的10个步骤</a>
                                    <span class="text-muted">tomcat_oracle</span>
<a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a>
                                    <div>What 
软件工程师的职业生涯要历经以下几个阶段：初级、中级，最后才是高级。这篇文章主要是讲如何通过 10 个步骤助你成为一名高级软件工程师。 
  
Why 
 
  得到更多的报酬！因为你的薪水会随着你水平的提高而增加  
  提升你的职业生涯。成为了高级软件工程师之后，就可以朝着架构师、团队负责人、CTO 等职位前进  
  历经更大的挑战。随着你的成长，各种影响力也会提高。  </div>
                                </li>
                                <li><a href="/article/3790.htm"
                                       title="mongdb在linux下的安装" target="_blank">mongdb在linux下的安装</a>
                                    <span class="text-muted">xtuhcy</span>
<a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
                                    <div>一、查询linux版本号： 
lsb_release -a  
LSB Version:    :base-4.0-amd64:base-4.0-noarch:core-4.0-amd64:core-4.0-noarch:graphics-4.0-amd64:graphics-4.0-noarch:printing-4.0-amd64:printing-4.0-noa</div>
                                </li>
                </ul>
            </div>
        </div>
    </div>

<div>
    <div class="container">
        <div class="indexes">
            <strong>按字母分类：</strong>
            <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.
<!--            <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>-->
        </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>