【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/1835512920797179904.htm"
                           title="element实现动态路由+面包屑" target="_blank">element实现动态路由+面包屑</a>
                        <span class="text-muted">软件技术NINI</span>
<a class="tag" taget="_blank" href="/search/vue%E6%A1%88%E4%BE%8B/1.htm">vue案例</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi</div>
                    </li>
                    <li><a href="/article/1835509897106649088.htm"
                           title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a>
                        <span class="text-muted">igotyback</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div>
                    </li>
                    <li><a href="/article/1835498925755297792.htm"
                           title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a>
                        <span class="text-muted">STU学生网页设计</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a>
                        <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div>
                    </li>
                    <li><a href="/article/1835497792265613312.htm"
                           title="【加密社】Solidity 中的事件机制及其应用" target="_blank">【加密社】Solidity 中的事件机制及其应用</a>
                        <span class="text-muted">加密社</span>
<a class="tag" taget="_blank" href="/search/%E9%97%B2%E4%BE%83/1.htm">闲侃</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E5%90%88%E7%BA%A6/1.htm">智能合约</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a>
                        <div>加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件</div>
                    </li>
                    <li><a href="/article/1835496149843275776.htm"
                           title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a>
                        <span class="text-muted">二挡起步</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a>
                        <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div>
                    </li>
                    <li><a href="/article/1835496148601761792.htm"
                           title="HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动" target="_blank">HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动</a>
                        <span class="text-muted">二挡起步</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div>
                    </li>
                    <li><a href="/article/1835492740536823808.htm"
                           title="node.js学习" target="_blank">node.js学习</a>
                        <span class="text-muted">小猿L</span>
<a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a>
                        <div>node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行</div>
                    </li>
                    <li><a href="/article/1835453535777550336.htm"
                           title="vue3中el-table中点击图片放大时，被表格覆盖" target="_blank">vue3中el-table中点击图片放大时，被表格覆盖</a>
                        <span class="text-muted">叫我小鹏呀</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/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>问题：vue3中el-table中点击图片放大时，被表格覆盖。解决方法：el-image添加preview-teleported</div>
                    </li>
                    <li><a href="/article/1835448238103162880.htm"
                           title="springboot+vue项目实战一-创建SpringBoot简单项目" target="_blank">springboot+vue项目实战一-创建SpringBoot简单项目</a>
                        <span class="text-muted">苹果酱0567</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E9%97%B4%E4%BB%B6/1.htm">中间件</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一</div>
                    </li>
                    <li><a href="/article/1835448239864770560.htm"
                           title="JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）" target="_blank">JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）</a>
                        <span class="text-muted">跳房子的前端</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a>
                        <div>在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数</div>
                    </li>
                    <li><a href="/article/1835437775344726016.htm"
                           title="博客网站制作教程" target="_blank">博客网站制作教程</a>
                        <span class="text-muted">2401_85194651</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a>
                        <div>首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java</div>
                    </li>
                    <li><a href="/article/1835428948339683328.htm"
                           title="JavaScript `Map` 和 `WeakMap`详细解释" target="_blank">JavaScript `Map` 和 `WeakMap`详细解释</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%8E%9F%E7%94%9F%E6%96%B9%E6%B3%95/1.htm">原生方法</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键</div>
                    </li>
                    <li><a href="/article/1835428317084348416.htm"
                           title="最简单将静态网页挂载到服务器上(不用nginx)" target="_blank">最简单将静态网页挂载到服务器上(不用nginx)</a>
                        <span class="text-muted">全能全知者</span>
<a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a>
                        <div>最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl</div>
                    </li>
                    <li><a href="/article/1835427057752961024.htm"
                           title="补充元象二面" target="_blank">补充元象二面</a>
                        <span class="text-muted">Redstone Monstrosity</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a>
                        <div>1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重</div>
                    </li>
                    <li><a href="/article/1835420753252675584.htm"
                           title="微信小程序开发注意事项" target="_blank">微信小程序开发注意事项</a>
                        <span class="text-muted">jun778895</span>
<a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a>
                        <div>微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂</div>
                    </li>
                    <li><a href="/article/1835419870070665216.htm"
                           title="切换淘宝最新npm镜像源是" target="_blank">切换淘宝最新npm镜像源是</a>
                        <span class="text-muted">hai40587</span>
<a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a>
                        <div>切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库</div>
                    </li>
                    <li><a href="/article/1835411044768509952.htm"
                           title="字节二面" target="_blank">字节二面</a>
                        <span class="text-muted">Redstone Monstrosity</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a>
                        <div>1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文</div>
                    </li>
                    <li><a href="/article/1835401975269781504.htm"
                           title="vue render 函数详解 (配参数详解)" target="_blank">vue render 函数详解 (配参数详解)</a>
                        <span class="text-muted">你的眼睛會笑</span>
<a class="tag" taget="_blank" href="/search/vue2/1.htm">vue2</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><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>vuerender函数详解(配参数详解)在Vue3中，`render`函数被用来代替Vue2中的模板语法。它接收一个h函数（或者是`createElement`函数的别名），并且返回一个虚拟DOM。render函数的语法结构如下：render(h){returnh('div',{class:'container'},'Hello,World!')}在上面的示例中，我们使用h函数创建了一个div元素</div>
                    </li>
                    <li><a href="/article/1835398064727224320.htm"
                           title="前端代码上传文件" target="_blank">前端代码上传文件</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/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i</div>
                    </li>
                    <li><a href="/article/1835393400380157952.htm"
                           title="VUE3 + xterm + nestjs实现web远程终端 或 连接开启SSH登录的路由器和交换机。" target="_blank">VUE3 + xterm + nestjs实现web远程终端 或 连接开启SSH登录的路由器和交换机。</a>
                        <span class="text-muted">焚木灵</span>
<a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a>
                        <div>可远程连接系统终端或开启SSH登录的路由器和交换机。相关资料：xtermjs/xterm.js:Aterminalfortheweb(github.com)后端实现(NestJS)：1、安装依赖：npminstallnode-ssh@nestjs/websockets@nestjs/platform-socket.io2、我们将创建一个名为RemoteControlModule的NestJS模块，</div>
                    </li>
                    <li><a href="/article/1835385458356482048.htm"
                           title="uniapp实现动态标记效果详细步骤【前端开发】" target="_blank">uniapp实现动态标记效果详细步骤【前端开发】</a>
                        <span class="text-muted">2401_85123349</span>
<a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a>
                        <div>第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。</div>
                    </li>
                    <li><a href="/article/1835383919906746368.htm"
                           title="高性能javascript--算法和流程控制" target="_blank">高性能javascript--算法和流程控制</a>
                        <span class="text-muted">海淀萌狗</span>

                        <div>-for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i</div>
                    </li>
                    <li><a href="/article/1835373236217540608.htm"
                           title="360前端星计划-动画可以这么玩" target="_blank">360前端星计划-动画可以这么玩</a>
                        <span class="text-muted">马小蜗</span>

                        <div>动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能</div>
                    </li>
                    <li><a href="/article/1835370074102394880.htm"
                           title="【vite 自动配置路由】" target="_blank">【vite 自动配置路由】</a>
                        <span class="text-muted">CODER-V</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><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E6%9E%84%E5%BB%BA/1.htm">软件构建</a>
                        <div>手动配置路由，是一个没有技术含量又浪费时间的工作。本文将介绍vite构建的vue3项目如何编写一个自动配置路由的脚本。约定大于配置要想使用脚本完成路由的自动配置，我们就需要遵循以下目录规则：每一个页面对应一个包，当前包下的主页面命名为index.vue；每个包里必须配置一个page.js；在每一个page.js里边配置，额外的路由信息，比如：exportdefault{title:'商品',men</div>
                    </li>
                    <li><a href="/article/1835368019430305792.htm"
                           title="Vue + Express实现一个表单提交" target="_blank">Vue + Express实现一个表单提交</a>
                        <span class="text-muted">九旬大爷的梦</span>

                        <div>最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo</div>
                    </li>
                    <li><a href="/article/1835365412099944448.htm"
                           title="Vue3 vant组件库自动导入" target="_blank">Vue3 vant组件库自动导入</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/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><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a>
                        <div>实现：完整使用vant组件库文档安装：#Vue3项目，安装最新版Vantnpmivant#通过yarn安装yarnaddvant#通过pnpm安装pnpmaddvant【一】按需引入：https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart#fang-fa-er.-an-xu-yin-ru-zu-jian-yang-shi【二】批量引入在基于vit</div>
                    </li>
                    <li><a href="/article/1835360244646113280.htm"
                           title="JavaScript中秋快乐！" target="_blank">JavaScript中秋快乐！</a>
                        <span class="text-muted">Q_w7742</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a>
                        <div>我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh</div>
                    </li>
                    <li><a href="/article/1835359727924637696.htm"
                           title="Nginx从入门到实践(三)" target="_blank">Nginx从入门到实践(三)</a>
                        <span class="text-muted">听你讲故事啊</span>

                        <div>动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin</div>
                    </li>
                    <li><a href="/article/1835354700392787968.htm"
                           title="Nginx的使用场景：构建高效、可扩展的Web架构" target="_blank">Nginx的使用场景：构建高效、可扩展的Web架构</a>
                        <span class="text-muted">张某布响丸辣</span>
<a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a>
                        <div>Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin</div>
                    </li>
                    <li><a href="/article/1835354447627251712.htm"
                           title="前端知识点" target="_blank">前端知识点</a>
                        <span class="text-muted">ZhangTao_zata</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/css/1.htm">css</a>
                        <div>下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage</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>