search.xml

<?xml version="1.0" encoding="utf-8"?>
<search> 
  
  
    
    <entry>
      <title>常用正则表达式集锦</title>
      <link href="/2019/09/01/chang-yong-zheng-ze-biao-da-shi-ji-jin/"/>
      <url>/2019/09/01/chang-yong-zheng-ze-biao-da-shi-ji-jin/</url>
      
        <content type="html"><![CDATA[<p>@<a href="https://github.com/danygitgit/document-library/blob/master/other-library/%E6%AD%A3%E5%88%99/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%E9%9B%86%E9%94%A6%20.md" target="_blank" rel="noopener">常用正则表达式集锦</a>  </p><blockquote><p>create by <strong>db</strong> on <strong>2019-5-13 09:45:24</strong><br>Recently revised in <strong>2019-6-21 11:30:54</strong>  </p></blockquote><p>&emsp;<strong>Hello 小伙伴们，如果觉得本文还不错，麻烦点个赞或者给个 star，你们的赞和 star 是我前进的动力！<a href="https://github.com/danygitgit/document-library/blob/master/other-library/%E6%AD%A3%E5%88%99/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%E9%9B%86%E9%94%A6%20.md" target="_blank" rel="noopener">GitHub 地址</a></strong>  </p><h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><blockquote><p>I hear and I fogorget.  </p></blockquote><blockquote><p>I see and I remember.  </p></blockquote><blockquote><p>I do and I understand.  </p></blockquote><p>&emsp;作为一个前端码农，总是避免不了使用正则来检验数据或者截取字符串。然而对于这些“火星文”总是记不牢靠。因此，把工作中常用的一些正则表达式整理存档，给自己留个底，也给朋友们做个参考。</p><p>&emsp;此文档不做正则科普详解，仅供查阅。如果不是太清楚正则是啥，烦请移步参考文献。</p><p>&emsp;参考文献：</p><ul><li><p><a href="https://www.cnblogs.com/chenmeng0818/p/6370819.html" target="_blank" rel="noopener">js中的正则表达式入门 | 博客园-陈水水的个人博客</a></p></li><li><p><a href="https://juejin.im/post/5cdcd42551882568651554e6#comment" target="_blank" rel="noopener">正则表达式不要背 | 掘金-scq000</a></p></li></ul><h1 id="正文"><a href="#正文" class="headerlink" title="正文"></a>正文</h1><h2 id="正则表达式常用操作符"><a href="#正则表达式常用操作符" class="headerlink" title="正则表达式常用操作符"></a>正则表达式常用操作符</h2><table><thead><tr><th>操作符</th><th>说明</th><th>实例</th></tr></thead><tbody><tr><td>.</td><td>表示任何单个字符</td><td></td></tr><tr><td>[ ]</td><td>字符集，对单个字符给出范围</td><td><code>[abc]</code>表示 a、b、c,[a-z]表示 a-z 的单个字符</td></tr><tr><td>[^ ]</td><td>非字符集，对单个字符给出排除范围</td><td><code>[^abc]</code>表示非a或b或c的单个字符</td></tr><tr><td>_</td><td>前一个字符零次或无限次扩展</td><td><code>abc_</code>表示 ab、abc、abcc、abccc 等</td></tr><tr><td>`</td><td>`</td><td>左右表达式的任意一个</td></tr><tr><td>$</td><td>匹配字符串结尾</td><td><code>abc$</code>表示 abc 且在一个字符串结尾</td></tr><tr><td>( )</td><td>分组标记内部只能使用</td><td><code>(abc)</code>表示 abc,`(abc</td></tr><tr><td>\D</td><td>非数字</td><td></td></tr><tr><td>\d</td><td>数字，等价于0-9</td><td></td></tr><tr><td>\S</td><td>可见字符</td><td></td></tr><tr><td>\s</td><td>空白字符</td><td></td></tr><tr><td>\W</td><td>非单词字符</td><td></td></tr><tr><td>\w</td><td>单词字符，等价于[a-z0-9A-Z_]</td><td></td></tr><tr><td>^</td><td>匹配字符串开头</td><td><code>^abc</code>表示 abc 且在一个字符串的开头</td></tr><tr><td>{m,n}</td><td>扩展前一个字符 m 到 n 次</td><td><code>ab{1,2}c</code>表示 abc、abbc</td></tr><tr><td>{m}</td><td>扩展前一个字符 m 次</td><td><code>ab{2}c</code>表示 abbc</td></tr><tr><td>？</td><td>前一个字符 0 次或 1 次扩展</td><td><code>abc?</code> 表示 ab、abc</td></tr><tr><td>undefined</td><td></td><td></td></tr></tbody></table><h2 id="常用正则表达式集锦"><a href="#常用正则表达式集锦" class="headerlink" title="常用正则表达式集锦"></a>常用正则表达式集锦</h2><h3 id="一、校验数字的表达式"><a href="#一、校验数字的表达式" class="headerlink" title="一、校验数字的表达式"></a>一、校验数字的表达式</h3><p> 数字：<code>^[0-9]*$</code></p><p>n位的数字：<code>^d{n}$</code></p><p>至少n位的数字：<code>^d{n,}$</code></p><p>m-n位的数字：<code>^d{m,n}$</code></p><p>零和非零开头的数字：<code>^(0|[1-9][0-9]*)$</code></p><p>非零开头的最多带两位小数的数字：<code>^([1-9][0-9]*)+(.[0-9]{1,2})?$</code></p><p>带1-2位小数的正数或负数：<code>^(-)?d+(.d{1,2})?$</code></p><p>正数、负数、和小数：<code>^(-|+)?d+(.d+)?$</code></p><p>有两位小数的正实数：<code>^[0-9]+(.[0-9]{2})?$</code></p><p>有1~3位小数的正实数：<code>^[0-9]+(.[0-9]{1,3})?$</code></p><p>非零的正整数：<code>^[1-9]d*$</code> 或 <code>^([1-9][0-9]*){1,3}$</code> 或 <code>^+?[1-9][0-9]*$</code></p><p>非零的负整数：<code>^-[1-9][]0-9&quot;*$</code> 或 <code>^-[1-9]d*$</code></p><p>非负整数：<code>^d+$</code> 或 <code>^[1-9]d*|0$</code></p><p>非正整数：<code>^-[1-9]d*|0$</code> 或 <code>^((-d+)|(0+))$</code></p><p>非负浮点数：<code>^d+(.d+)?$</code> 或 <code>^[1-9]d*.d*|0.d*[1-9]d*|0?.0+|0$</code></p><p>非正浮点数：<code>^((-d+(.d+)?)|(0+(.0+)?))$</code> 或 <code>^(-([1-9]d*.d*|0.d*[1-9]d*))|0?.0+|0$</code></p><p>正浮点数：<code>^[1-9]d*.d*|0.d*[1-9]d*$</code> 或 <code>^(([0-9]+.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*.[0-9]+)|([0-9]*[1-9][0-9]*))$</code></p><p>负浮点数：<code>^-([1-9]d*.d*|0.d*[1-9]d*)$</code> 或 <code>^(-(([0-9]+.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*.[0-9]+)|([0-9]*[1-9][0-9]*)))$</code></p><p>浮点数：<code>^(-?d+)(.d+)?$</code> 或 <code>^-?([1-9]d*.d*|0.d*[1-9]d*|0?.0+|0)$</code></p><h3 id="二、校验字符的表达式"><a href="#二、校验字符的表达式" class="headerlink" title="二、校验字符的表达式"></a>二、校验字符的表达式</h3><p>汉字：<code>^[\u4e00-\u9fa5]+$</code></p><p>英文和数字：<code>^[A-Za-z0-9]+$</code> 或 <code>^[A-Za-z0-9]{4,40}$</code></p><p>长度为3-20的所有字符：<code>^.{3,20}$</code></p><p>由26个英文字母组成的字符串：<code>^[A-Za-z]+$</code></p><p>由26个大写英文字母组成的字符串：<code>^[A-Z]+$</code></p><p>由26个小写英文字母组成的字符串：<code>^[a-z]+$</code></p><p>由数字和26个英文字母组成的字符串：<code>^[A-Za-z0-9]+$</code></p><p>由数字、26个英文字母或者下划线组成的字符串：<code>^w+$</code> 或 <code>^w{3,20}$</code></p><h3 id="三、特殊需求表达式"><a href="#三、特殊需求表达式" class="headerlink" title="三、特殊需求表达式"></a>三、特殊需求表达式</h3><p>去掉左右空格:<br><code>str.replace(/(^\s*)|(\s*$)/g, &#39;&#39;)</code></p><p>去掉所有空格:<br><code>str.replace(/\s+/g, &#39;&#39;)</code></p><p>密码需由8位以上大写字母、小写字母、数字及特殊符号组成: <code>/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!.,@$%^&amp;*-]).{8,}$/</code></p><p>Email地址：<code>^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$</code></p><p>域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?</p><p>InternetURL：[a-zA-z]+://[<code>^s]* 或</code>^http://([w-]+.)+[w-]+(/[w-./?%&amp;=]*)?$`</p><p>手机号码：<code>^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])d{8}$</code></p><p>电话号码(“XXX-XXXXXXX”、”XXXX-XXXXXXXX”、”XXX-XXXXXXX”、”XXX-XXXXXXXX”、”XXXXXXX”和”XXXXXXXX)：<code>^((d{3,4}-)|d{3.4}-)?d{7,8}$</code></p><p>国内电话号码<code>(0511-4405222、021-87888822)：d{3}-d{8}|d{4}-d{7}</code></p><p>身份证号(15位、18位数字)：<code>^d{15}|d{18}$</code></p><p>短身份证号码(数字、字母x结尾)：<code>^([0-9]){7,18}(x|X)?$</code> 或 <code>^d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$</code></p><p>帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：<code>^[a-zA-Z][a-zA-Z0-9_]{4,15}$</code></p><p>密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)：<code>^[a-zA-Z]w{5,17}$</code></p><p>强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)：<code>^(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$</code></p><p>日期格式：<code>^d{4}-d{1,2}-d{1,2}</code></p><p>一年的12个月(01～09和1～12)：<code>^(0?[1-9]|1[0-2])$</code></p><p>一个月的31天(01～09和1～31)：<code>^((0?[1-9])|((1|2)[0-9])|30|31)$</code><br>xml文件：<code>^([a-zA-Z]+-?)+[a-zA-Z0-9]+\.[x|X][m|M][l|L]$</code></p><p>空白行的正则表达式：<code>s*</code> (可以用来删除空白行)</p><p>HTML标记的正则表达式：<code>&lt;(S*?)[`^&gt;]*&gt;.*?&lt;/&gt;|&lt;.*? /&gt;</code> (网上流传的版本太糟糕，上面这个也仅仅能部分，对于复杂的嵌套标记依旧无能为力)</p><p>首尾空白字符的正则表达式：<code>^s*|s*$</code>或(<code>^s*)|(s*$</code>) (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式)</p><p>腾讯QQ号：<code>[1-9][0-9]{4,}</code> (腾讯QQ号从10000开始)</p><p>中国邮政编码：<code>[1-9]d{5}(?!d)</code> (中国邮政编码为6位数字)</p><p>IP地址：<code>d+.d+.d+.d+</code> (提取IP地址时有用)</p><p>IP地址：<code>((?:(?:25[0-5]|2[0-4]\d|[01]?\d?\d)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d?\d))</code></p><h3 id="钱的输入格式："><a href="#钱的输入格式：" class="headerlink" title="钱的输入格式："></a>钱的输入格式：</h3><ol><li><p>有四种钱的表示形式我们可以接受:”10000.00” 和 “10,000.00”, 和没有 “分” 的 “10000” 和 “10,000”：<code>^[1-9][0-9]*$</code></p></li><li><p>这表示任意一个不以0开头的数字,但是,这也意味着一个字符”0”不通过,所以我们采用下面的形式：<code>^(0|[1-9][0-9]*)$</code></p></li><li><p>一个0或者一个不以0开头的数字.我们还可以允许开头有一个负号：<code>^(0|-?[1-9][0-9]*)$</code></p></li><li><p>这表示一个0或者一个可能为负的开头不为0的数字.让用户以0开头好了.把负号的也去掉,因为钱总不能是负的吧.下面我们要加的是说明可能的小数部分：<code>^[0-9]+(.[0-9]+)?$</code></p></li><li><p>必须说明的是,小数点后面至少应该有1位数,所以”10.”是不通过的,但是 “10” 和 “10.2” 是通过的：<code>^[0-9]+(.[0-9]{2})?$</code></p></li><li><p>这样我们规定小数点后面必须有两位,如果你认为太苛刻了,可以这样：<code>^[0-9]+(.[0-9]{1,2})?$</code></p></li><li><p>这样就允许用户只写一位小数.下面我们该考虑数字中的逗号了,我们可以这样：<code>^[0-9]{1,3}(,[0-9]{3})*(.[0-9]{1,2})?$</code></p></li><li><p>1到3个数字,后面跟着任意个 逗号+3个数字,逗号成为可选,而不是必须：<code>^([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,2})?$</code></p></li></ol><!-- **备注：*** 这就是最终结果了,别忘了”+”可以用”*”替代如果你觉得空字符串也可以接受的话(奇怪,为什么?)最后,别忘了在用函数时去掉去掉那个反斜杠,一般的错误都在这里 --><h3 id="正则表达式的简单使用方法"><a href="#正则表达式的简单使用方法" class="headerlink" title="正则表达式的简单使用方法"></a>正则表达式的简单使用方法</h3><p>&emsp;以判断是否为中文字符为例，使用JavaScript的<code>test()</code>方法，写一个函数。</p><ul><li><code>test()</code> 方法用于检测一个字符串是否匹配某个模式.如果字符串中有匹配的值返回 true ，否则返回 false。</li></ul><pre class=" language-JavaScript"><code class="language-JavaScript">//是否含有中文（也包含日文和韩文）function isChineseChar(str){      var reg = /[\u4E00-\u9FA5\uF900-\uFA2D]/;   return reg.test(str);}isChineseChar('122') //falseisChineseChar('一二三') //true</code></pre><h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>&emsp;作为一只前端菜鸟，本篇文章旨在记录自己的学习心得，如有不足，还请多多指教。其中大部分是拷贝的，如有错误，慢慢用，慢慢改。谢谢大家。  </p><p>&emsp;路漫漫其修远兮，与诸君共勉。  </p><p><strong>后记：Hello 小伙伴们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更丰富文章的动力！<a href="https://github.com/danygitgit/document-library/blob/master/other-library/%E6%AD%A3%E5%88%99/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%E9%9B%86%E9%94%A6%20.md" target="_blank" rel="noopener">GitHub 地址</a></strong>  </p><blockquote><p><a rel="noopener" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank"><img alt="知识共享许可协议" style="border-width:0" src="https://user-gold-cdn.xitu.io/2018/12/23/167d9537f3e29c99?w=88&h=31&f=png&s=1888"></a><br><a xmlns:dct="http://purl.org/dc/terms/" property="dct:title"><strong>db</strong> 的文档库</a> 由 <a xmlns:cc="http://creativecommons.org/ns#" href="db" property="cc:attributionName" rel="cc:attributionURL">db</a> 采用 <a rel="noopener" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议</a>进行许可。<br>基于<a xmlns:dct="http://purl.org/dc/terms/" href="https://github.com/danygitgit" rel="noopener" target="_blank">https://github.com/danygitgit</a>上的作品创作。<br>本许可协议授权之外的使用权限可以从 <a xmlns:cc="http://creativecommons.org/ns#" href="https://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel="noopener" target="_blank">https://creativecommons.org/licenses/by-nc-sa/2.5/cn/</a> 处获得。  </p></blockquote>]]></content>
      
      
      <categories>
          
          <category> Regex </category>
          
      </categories>
      
      
        <tags>
            
            <tag> regex </tag>
            
            <tag> RE </tag>
            
            <tag> 正则 </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>键盘快捷键笔记</title>
      <link href="/2019/08/26/jian-pan-kuai-jie-jian-bi-ji/"/>
      <url>/2019/08/26/jian-pan-kuai-jie-jian-bi-ji/</url>
      
        <content type="html"><![CDATA[<p>@<a href="https://github.com/danygitgit/document-library/blob/master/other-library/%E9%94%AE%E7%9B%98%E5%BF%AB%E6%8D%B7%E9%94%AE%E7%AC%94%E8%AE%B0.md" target="_blank" rel="noopener">键盘快捷键笔记</a></p><blockquote><p>create by <strong>db</strong> on <strong>2018-12-30 15:42:36</strong><br>Recently revised in <strong>2018-12-31 03:42:31</strong></p></blockquote><p>&emsp;<strong>Hello 小伙伴们，如果觉得本文还不错，麻烦点个赞或者给个 star，你们的赞和 star 是我前进的动力！<a href="https://github.com/danygitgit/document-library/blob/master/other-library/%E9%94%AE%E7%9B%98%E5%BF%AB%E6%8D%B7%E9%94%AE%E7%AC%94%E8%AE%B0.md" target="_blank" rel="noopener">GitHub 地址</a></strong></p><p>&emsp;最近在网易云课堂看了小黑老师讲的关于键盘快捷键的课程，写下这篇学习笔记，以记录自己的学习心得。现分享给大家，以供参考。</p><p>&emsp;如果大家有兴趣，可以戳这里观看原视频：<a href="https://study.163.com/course/courseLearn.htm?courseId=1003046004#/learn/video?lessonId=1003509078&courseId=1003046004" target="_blank" rel="noopener">提高办公效率必学的键盘操作技巧</a></p><p>&emsp;作为一只菜鸟，这是我掘金分享的第二篇文章。如有不足，还请多多指教，谢谢大家。</p><h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><h2 id="关于键盘"><a href="#关于键盘" class="headerlink" title="关于键盘"></a>关于键盘</h2><p>&emsp;什么是键盘？————我就不啰嗦了。马上9012了，也许你没见过猪跑，但估计不会没敲过键盘。</p><p>&emsp;当然，如果你非要问个究竟，那我只能说：</p><h3 id="这——就是键盘！"><a href="#这——就是键盘！" class="headerlink" title="这——就是键盘！"></a><strong>这——就是键盘！</strong></h3><p><img src="../public-repertory/img/keyboard-img/Varmilo.png" alt></p><p>————有木有流口水呢~~反正我在流……</p><h2 id="键盘前生今世"><a href="#键盘前生今世" class="headerlink" title="键盘前生今世"></a>键盘前生今世</h2><h3 id="没图说个"><a href="#没图说个" class="headerlink" title="没图说个 * *"></a>没图说个 * *</h3><p><img src="../public-repertory/img/keyboard-img/Keyboard.jpg" alt></p><p>&emsp;当然，此文并非介绍键盘史的，如有需要请左转百度，走好您嘞。。。</p><h1 id="正文"><a href="#正文" class="headerlink" title="正文"></a>正文</h1><p>&emsp;如果你是一个程序员，键盘是是我们必备的生存工具（之一）；如果你是个吃鸡大神，键盘是你最犀利的武器；如果你是个宠妻狂魔，那么键盘更是搓衣板的最好替代品……所以，你该如何挑选一块优秀的键盘呢~~</p><p>&emsp;呸，又跑题了。选购键盘请右转淘宝，不送。</p><h2 id="正题之前"><a href="#正题之前" class="headerlink" title="正题之前"></a>正题之前</h2><p>&emsp;你每天敲多久的键盘？</p><p>&emsp;8个小时？</p><p>&emsp;10个小时？</p><p>&emsp;12个小时？</p><p>&emsp;16个小时~~</p><p>&emsp;作为我们最重要的生产力工具，作为手中最锋利的战刀，作为每天相伴的合作伙伴，键盘陪你的时间比女朋友都长（前提是你有女朋友）。不过，对于你的键盘，是否足够熟悉，是否足够了解，是否……</p><h2 id="更高！更快！更强！"><a href="#更高！更快！更强！" class="headerlink" title="更高！更快！更强！"></a>更高！更快！更强！</h2><p>&emsp;在很多情况下，键盘操作比鼠标操作更便捷，更灵活，也更能装 X。。。与其羡慕大神的神技，不如自己成为大神，接受大家的膜拜。</p><p>&emsp;废话不多说了，开始我们的键盘侠之旅。</p><h2 id="键盘分区"><a href="#键盘分区" class="headerlink" title="键盘分区"></a>键盘分区</h2><p><img src="../public-repertory/img/keyboard-img/KeyboardPartition.jpg" alt></p><p>如上图所示，一个标准键盘（104键）主要分为五个区:</p><ul><li><p>主键盘区</p><ul><li>主键区是进行信息录入的最主要键位区，主键区又分为数字符号键、26个字母键和功能键。</li></ul></li><li><p>功能键区</p><ul><li>功能键区位千键盘的最上方，共有16个键，包括<kbd>Esc</kbd>、<kbd>Sleep</kbd>、F1～F12键、<kbd>WakeUp</kbd>和<kbd>Power</kbd>。</li></ul></li><li><p>控制键区</p><ul><li>编辑控制键区共有13个键，其主要作用是:在编辑文档时控制光标的移动。</li></ul></li><li><p>数字键区</p><ul><li>数字键区位于键盘右侧的17个键属于数字键区。数字键区主要是为了方便输入数字而设置的，同时也有编辑和控制光标位置的功能。</li></ul></li><li><p>状态指示区</p><ul><li>状态指示区具有<kbd>CapsLock</kbd>（字母大键盘小写锁定）、<kbd>NumLock</kbd>（数字小键盘锁定）、<kbd>ScrollLock</kbd>（滚动锁定键）三个指示灯。</li></ul></li></ul><p>下面我们逐一介绍这些键区中常用的快捷键。</p><h2 id="功能键区"><a href="#功能键区" class="headerlink" title="功能键区"></a>功能键区</h2><table><thead><tr><th>快捷键</th><th>功能</th></tr></thead><tbody><tr><td><font color="red"><kbd>ESC</kbd></font></td><td>退出程序/全屏</td></tr><tr><td><kbd>F2</kbd></td><td>文件重命名</td></tr><tr><td><kbd>F4</kbd></td><td>重复上一步操作</td></tr><tr><td><font color="red"><kbd>F5</kbd></font></td><td>刷新</td></tr><tr><td><font color="red"><kbd>F11</kbd></font></td><td>全屏/退出全屏</td></tr><tr><td><kbd>F12</kbd></td><td>进入网页开发者工具</td></tr></tbody></table><h2 id="主键区"><a href="#主键区" class="headerlink" title="主键区"></a>主键区</h2><h3 id="标点符号"><a href="#标点符号" class="headerlink" title="标点符号"></a>标点符号</h3><table><thead><tr><th>快捷键组合</th><th>功能</th></tr></thead><tbody><tr><td><kbd>Shift</kbd> + <kbd>6</kbd></td><td>（中文）省略号 ……</td></tr><tr><td><kbd>Shift</kbd> + <kbd>-</kbd></td><td>（中文）破折号 ——</td></tr></tbody></table><h3 id="上档转换键-Shift"><a href="#上档转换键-Shift" class="headerlink" title="上档转换键 Shift"></a>上档转换键 <kbd>Shift</kbd></h3><table><thead><tr><th>快捷键</th><th>功能</th></tr></thead><tbody><tr><td><kbd>Shift</kbd> + 单击</td><td>连续选择</td></tr></tbody></table><h3 id="控制键-Ctrl"><a href="#控制键-Ctrl" class="headerlink" title="控制键 Ctrl"></a>控制键 <kbd>Ctrl</kbd></h3><table><thead><tr><th>快捷键</th><th>功能</th></tr></thead><tbody><tr><td><font color="red"><kbd>Ctrl1</kbd> + <kbd>A</kbd></font></td><td>全选</td></tr><tr><td><font color="red"><kbd>Ctrl</kbd> + <kbd>S</kbd></font></td><td>保存</td></tr><tr><td><font color="red"><kbd>Ctrl</kbd> + <kbd>Z</kbd></font></td><td>撤销</td></tr><tr><td><font color="red"><kbd>Ctrl</kbd> + <kbd>Y</kbd></font></td><td>反撤销</td></tr><tr><td><font color="red"><kbd>Ctrl</kbd> + <kbd>C</kbd></font></td><td>复制</td></tr><tr><td><font color="red"><kbd>Ctrl</kbd> + <kbd>X</kbd></font></td><td>剪切</td></tr><tr><td><font color="red"><kbd>Ctrl</kbd> + <kbd>V</kbd></font></td><td>粘贴</td></tr><tr><td><kbd>Ctrl</kbd> + <kbd>Shift</kbd></td><td>切换输入法</td></tr><tr><td><kbd>Ctrl</kbd> + <kbd>。</kbd></td><td>切换中英文标点</td></tr><tr><td><font color="red"><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>N</kbd></font></td><td>新建文件夹</td></tr></tbody></table><p>在world文档中：</p><table><thead><tr><th>快捷键</th><th>功能</th></tr></thead><tbody><tr><td><kbd>Ctrl</kbd> + <kbd>E</kbd></td><td>居中</td></tr><tr><td><kbd>Ctrl</kbd> + <kbd>R</kbd></td><td>右对齐</td></tr><tr><td><kbd>Ctrl</kbd> + <kbd>]</kbd></td><td>放大</td></tr><tr><td><kbd>Ctrl</kbd> + <kbd>[</kbd></td><td>缩小</td></tr></tbody></table><h3 id="换挡键-Alt"><a href="#换挡键-Alt" class="headerlink" title="换挡键 Alt"></a>换挡键 <kbd>Alt</kbd></h3><table><thead><tr><th>快捷键</th><th>功能</th></tr></thead><tbody><tr><td><kbd>Alt</kbd> + <kbd>Tab</kbd></td><td>切换程序</td></tr><tr><td><kbd>Alt</kbd> + <kbd>F4</kbd></td><td>快速关闭程序</td></tr><tr><td><kbd>Alt</kbd> + 单击拖动</td><td>矩形选择（word内）</td></tr></tbody></table><h3 id="窗口键-Win"><a href="#窗口键-Win" class="headerlink" title="窗口键 Win"></a>窗口键 <kbd>Win</kbd></h3><table><thead><tr><th>快捷键</th><th>功能</th></tr></thead><tbody><tr><td><kbd>Win</kbd></td><td>打开<code>开始</code>菜单</td></tr><tr><td><font color="red"><kbd>Win</kbd> + <kbd>D</kbd></font></td><td>快速回到桌面</td></tr><tr><td><font color="red"><kbd>Win</kbd> + <kbd>E</kbd></font></td><td>打开<code>文件资源管理器</code></td></tr><tr><td><font color="red"><kbd>Win</kbd> + <kbd>L</kbd></font></td><td>快速锁定电脑</td></tr><tr><td><kbd>Win</kbd> + <kbd>U</kbd></td><td>打开电脑设置</td></tr><tr><td><kbd>Win</kbd> + <kbd>R</kbd></td><td>打开<code>运行</code></td></tr><tr><td><font color="red"><kbd>Win</kbd> + <kbd>Tab</kbd></font></td><td>快速切换窗口</td></tr><tr><td><font color="red"><kbd>Win</kbd> + <kbd>←</kbd></font></td><td>电脑屏幕左半边显示</td></tr><tr><td><font color="red"><kbd>Win</kbd> + <kbd>→</kbd></font></td><td>电脑屏幕右半边显示</td></tr></tbody></table><h3 id="任务管理器"><a href="#任务管理器" class="headerlink" title="任务管理器"></a>任务管理器</h3><table><thead><tr><th>快捷键</th><th>功能</th></tr></thead><tbody><tr><td><font color="red"><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Esc</kbd></font></td><td>打开任务管理器</td></tr><tr><td><font color="red"><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Delete</kbd></font></td><td>打开任务管理器</td></tr></tbody></table><h2 id="编辑区域"><a href="#编辑区域" class="headerlink" title="编辑区域"></a>编辑区域</h2><table><thead><tr><th>快捷键</th><th>功能</th></tr></thead><tbody><tr><td><kbd>PrintSctreenSysRq</kbd></td><td>截取满屏</td></tr><tr><td><kbd>Insert</kbd></td><td>改写（光标吃掉后面的字）</td></tr><tr><td><kbd>Home</kbd></td><td>光标移到行首</td></tr><tr><td><kbd>End</kbd></td><td>光标移到行尾</td></tr><tr><td><kbd>Ctrl</kbd> + <kbd>Home</kbd></td><td>光标移到文章头部</td></tr><tr><td><kbd>Ctrl</kbd> + <kbd>End</kbd></td><td>光标移到文章尾部</td></tr><tr><td><font color="red"><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>A</kbd></font></td><td>快速QQ截屏(登录QQ)</td></tr><tr><td><font color="red"><kbd>Ctrl</kbd> + <kbd>F1</kbd></font></td><td>快速系统截图(可自定义快捷键)</td></tr></tbody></table><h2 id="附加小技巧"><a href="#附加小技巧" class="headerlink" title="附加小技巧"></a>附加小技巧</h2><p>自定义系统程序快捷键；</p><blockquote><p>开始 → 程序 → 属性 → 快捷键</p></blockquote><p>PPT设置撤销次数：</p><blockquote><p>文件 → 选项 → 高级 → 设置最多可取消次数<code>150</code>次</p></blockquote><p>word设置自动保存时间：</p><blockquote><p>文件 → 选项 → 保存 → 设置保存自动回复信息时间间隔<code>1</code>分钟</p></blockquote><h1 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h1><p>&emsp;键盘敲得好，对象找得早。这样不用多久，你就会升职加薪、当上总经理、出任CEO、迎娶白富美、走上人生巅峰，想想是不是还有点小激动呢？</p><p>&emsp;不扯淡了，练盲打去喽……</p><p><strong>后记：Hello 小伙伴们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更丰富文章的动力！<a href="https://github.com/danygitgit/document-library/blob/master/other-library/Git%E7%AC%94%E8%AE%B0/Git%E5%91%BD%E4%BB%A4%E5%85%A5%E9%97%A8.md" target="_blank" rel="noopener">GitHub 地址</a></strong></p><blockquote><p><a rel="noopener" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank"><img alt="知识共享许可协议" style="border-width:0" src="https://user-gold-cdn.xitu.io/2018/12/23/167d9537f3e29c99?w=88&h=31&f=png&s=1888"></a><br><a xmlns:dct="http://purl.org/dc/terms/" property="dct:title"><strong>db</strong> 的文档库</a> 由 <a xmlns:cc="http://creativecommons.org/ns#" href="db" property="cc:attributionName" rel="cc:attributionURL">db</a> 采用 <a rel="noopener" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议</a>进行许可。<br>基于<a xmlns:dct="http://purl.org/dc/terms/" href="https://github.com/danygitgit" rel="noopener" target="_blank">https://github.com/danygitgit</a>上的作品创作。<br>本许可协议授权之外的使用权限可以从 <a xmlns:cc="http://creativecommons.org/ns#" href="https://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel="noopener" target="_blank">https://creativecommons.org/licenses/by-nc-sa/2.5/cn/</a> 处获得。</p></blockquote>]]></content>
      
      
      <categories>
          
          <category> 快捷键 </category>
          
      </categories>
      
      
        <tags>
            
            <tag> 快捷键 </tag>
            
            <tag> 效率 </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>浏览器本地存储漫谈</title>
      <link href="/2019/08/20/liu-lan-qi-ben-di-cun-chu-man-tan/"/>
      <url>/2019/08/20/liu-lan-qi-ben-di-cun-chu-man-tan/</url>
      
        <content type="html"><![CDATA[<p>@<a href="https://github.com/danygitgit/document-library/blob/master/other-library/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9F%BA%E7%A1%80/%E6%B5%8F%E8%A7%88%E5%99%A8%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8%E6%BC%AB%E8%B0%88.md" target="_blank" rel="noopener">浏览器本地存储漫谈</a>  </p><blockquote><p>create by <strong>db</strong> on <strong>2019-6-21 11:30:54</strong><br>Recently revised in <strong>2019-7-6 22:50:24</strong>  </p></blockquote><p>&emsp;<strong>Hello 小伙伴们，如果觉得本文还不错，麻烦点个赞或者给个 star，你们的赞和 star 是我前进的动力！<a href="https://github.com/danygitgit/document-library/blob/master/other-library/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9F%BA%E7%A1%80/%E6%B5%8F%E8%A7%88%E5%99%A8%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8%E6%BC%AB%E8%B0%88.md" target="_blank" rel="noopener">GitHub 地址</a></strong>  </p><h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><blockquote><p>I hear and I fogorget. </p></blockquote><blockquote><p>I see and I remember.  </p></blockquote><blockquote><p>I do and I understand.  </p></blockquote><p>&emsp;作为一个前端码农，每天都在跟浏览器打交道，大家有对浏览器的数据存储方案有多少了解呢？</p><p>&emsp;参考文献：</p><ul><li><p><a href="https://github.com/ljianshu/Blog/issues/25" target="_blank" rel="noopener">浏览器存储 | Github-ljianshu</a></p></li><li><p><a href="https://www.liangzl.com/get-article-detail-123263.html" target="_blank" rel="noopener">深入了解浏览器存储</a></p></li><li><p><a href="https://www.cnblogs.com/belove8013/p/8134067.html" target="_blank" rel="noopener">前端常用缓存技术 | 博客园-醉盏</a></p></li><li><p><a href="http://www.sohu.com/a/288324635_575744" target="_blank" rel="noopener">漫话前端缓存 | 谢子琼</a></p></li><li><p><a href="https://blog.csdn.net/weixin_38639882/article/details/79791786" target="_blank" rel="noopener">说说几种常用的前端缓存 | CSDN-blank</a></p></li></ul><h1 id="正文"><a href="#正文" class="headerlink" title="正文"></a>正文</h1><h2 id="前端缓存一览"><a href="#前端缓存一览" class="headerlink" title="前端缓存一览"></a>前端缓存一览</h2><p>&emsp;前端缓存主要分为浏览器缓存和http缓存。大致分类如下图所示：</p><p><img src="../../public-repertory/img/webcache-img/cacheClassification.png" alt></p><h2 id="浏览器的本地存储"><a href="#浏览器的本地存储" class="headerlink" title="浏览器的本地存储"></a>浏览器的本地存储</h2><p>&emsp;在浏览器端存储数据对我们是很有用，这相当于赋予浏览器记忆的功能，可以纪录用户的所有状态信息，增强用户体验。比如当纪录用户的登陆状态时，可以让用户能够更快的进行访问，而不是每次登陆时都需要去进行繁琐的操作。</p><p>&emsp;我们就浅聊一下浏览器的本地存储机制。</p><p>&emsp;打开谷歌浏览器，按<code>F12</code>打开开发者工具，选择<code>Application</code>，我们就能看到自己浏览器的缓存了。如下图所示：</p><p><img src="../../public-repertory/img/webcache-img/browserCache.jpg" alt></p><p>&emsp;该图很清晰的可以看到浏览器的缓存分类。总的来说,在平时的开发过程中，现在市面上最常见的数据存储方案是以下三种：</p><ul><li><code>Cookie</code></li><li>web存储 (<code>localStorage</code>和<code>seesionStorage</code>)</li><li><code>IndexedDB</code></li></ul><p>如下图所示：</p><p><img src="../../public-repertory/img/webcache-img/browserLSClassification.webp" alt></p><p>&emsp;那么这几种缓存有什么区别呢？</p><h3 id="Cookie"><a href="#Cookie" class="headerlink" title="Cookie"></a>Cookie</h3><p><strong>Cookie使用教程–&gt;<a href="https://www.runoob.com/js/js-cookies.html" target="_blank" rel="noopener">菜鸟教程</a></strong></p><h4 id="什么是Cookie"><a href="#什么是Cookie" class="headerlink" title="什么是Cookie"></a>什么是Cookie</h4><p>&emsp; <code>JavaScript</code>是运行在客户端的脚本，因此一般是不能够设置<code>Session</code>的，因为<code>Session</code>是运行在服务器端的。而<code>cookie</code>是运行在客户端的，所以可以用JS来设置<code>cookie</code>。</p><p>&emsp; <code>cookie</code>是浏览器提供的一种机制，它将<code>document</code>对象的<code>cookie</code>属性提供给<code>JavaScript</code>。可以由<code>JavaScript</code>对其进行控制，而并不是<code>JavaScript</code>本身的性质。cookie是存于用户硬盘的一个文件，这个文件通常对应于一个域名，当浏览器再次访问这个域名时，便使这个<code>cookie</code>可用。因此，<code>cookie</code>可以跨越一个域名下的多个网页，但不能跨越多个域名使用。 </p><h4 id="Cookie的优点"><a href="#Cookie的优点" class="headerlink" title="Cookie的优点"></a>Cookie的优点</h4><p><code>cookie</code>机制将信息存储于用户硬盘，因此可以作为全局变量，这是它最大的一个优点。它可以用于以下几种场合。 </p><ol><li>保存用户登录状态。</li><li>跟踪用户行为。</li><li>定制页面。</li><li>创建购物车，例如淘宝网就使用<code>cookie</code>记录了用户曾经浏览过的商品，方便随时进行比较。</li></ol><h4 id="Cookie的缺点"><a href="#Cookie的缺点" class="headerlink" title="Cookie的缺点"></a>Cookie的缺点</h4><p><code>cookie</code>能完成的部分应用，还有更多的功能需要全局变量。<code>cookie</code>的缺点主要集中于安全性和隐私保护。主要包括以下几种： </p><ol><li><code>cookie</code>可能被禁用。当用户非常注重个人隐私保护时，他很可能禁用浏览器的<code>cookie</code>功能； </li><li><code>cookie</code>是与浏览器相关的。这意味着即使访问的是同一个页面，不同浏览器之间所保存的<code>cookie</code>也是不能互相访问的； </li><li><code>cookie</code>可能被删除。因为每个<code>cookie</code>都是硬盘上的一个文件，因此很有可能被用户删除； </li><li><code>cookie</code>安全性不够高。所有的<code>cookie</code>都是以纯文本的形式记录于文件中，因此如果要保存用户名密码等信息时，最好事先经过加密处理。</li></ol><h4 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h4><p>&emsp;cookie是比较老的前端缓存技术了。</p><p>&emsp;想要使用它前端必须要有服务（静态网页是不行的），而且存储大小限制在<code>4kb</code>。那么为什么必须要有服务才能使用<code>cookie</code>呢？因为只要有请求涉及，<code>cookie</code>就要在服务器和浏览器之间来回传送。而且由于浏览器的跨域限制，客户端和服务端必须要保证同源的原则才能使用，但是由于cookie是存放在前端的，所以安全问题一直是个大问题。</p><p>&emsp;因此一般重要的信息不建议放在cookie中存放。</p><h3 id="localStorage"><a href="#localStorage" class="headerlink" title="localStorage"></a>localStorage</h3><h4 id="什么是localstorage？"><a href="#什么是localstorage？" class="headerlink" title="什么是localstorage？"></a>什么是localstorage？</h4><p>&emsp;在HTML5中，新加入了一个<code>localStorage</code>特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为<code>4k</code>)，<code>localStorage</code>中一般浏览器支持的是<code>5M</code>大小，这个在不同的浏览器中<code>localStorage</code>会有所不同。</p><h4 id="localStorage的优势与局限"><a href="#localStorage的优势与局限" class="headerlink" title="localStorage的优势与局限"></a>localStorage的优势与局限</h4><p><strong>优势</strong></p><ol><li><p><code>localStorage</code>拓展了cookie的4K限制</p></li><li><p><code>localStorage</code>会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的</p></li></ol><p><strong>局限</strong></p><ol><li><p>浏览器的大小不统一，并且在IE8以上的IE版本才支持<code>localStorage</code>这个属性</p></li><li><p>目前所有的浏览器中都会把<code>localStorage</code>的值类型限定为<code>string</code>类型，这个在对我们日常比较常见的<code>JSON</code>对象类型需要一些转换</p></li><li><p><code>localStorage</code>在浏览器的隐私模式下面是不可读取的</p></li><li><p><code>localStorage</code>本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡</p></li><li><p><code>localStorage</code>不能被爬虫抓取到</p></li></ol><p>&emsp;<code>localStorage</code>与<code>SessionStorage</code>的唯一一点区别就是<code>localStorage</code>属于永久性存储，而<code>SessionStorage</code>属于当会话结束的时候，<code>SessionStorage</code>中的键值对会被清空</p><h4 id="localStorage的使用方法"><a href="#localStorage的使用方法" class="headerlink" title="localStorage的使用方法"></a>localStorage的使用方法</h4><p>&emsp;localStorage特点就是“持久” ——一旦通过保存，不通过手动清除的话，就会一直保存在前端。它的保存格式是键值对的方式也就是“key-value”的方式保存的，以下是它的一些使用方法：</p><pre class=" language-JavaScript"><code class="language-JavaScript">localStorage.length    //获得storage中的个数localStorage.key(n)    //获得storage中第n个元素对的键值（第一个元素是0）localStorage.getItem(key)    //获取键值key对应的值localStorage.key    //获取键值key对应的值localStorage.setItem(key, value)    //添加数据，键值为key，值为valuelocalStorage.removeItem(key)    //移除键值为key的数据localStorage.clear()    //清除所有数据</code></pre><h4 id="localstorage的其他注意事项"><a href="#localstorage的其他注意事项" class="headerlink" title="localstorage的其他注意事项"></a>localstorage的其他注意事项</h4><p>&emsp;一般我们会将JSON存入localStorage中，但是在localStorage会自动将localStorage转换成为字符串形式。</p><p>&emsp;这个时候我们可以使用<code>JSON.stringify()</code>这个方法，来将JSON对象转换成为JSON字符串</p><p>示例：</p><pre class=" language-JavaScript"><code class="language-JavaScript">if(!window.localStorage){   alert("浏览器支持localstorage");}else{   var storage=window.localStorage;   var data={      name:'xiecanyong',      sex:'man',      hobby:'program'   };   //将JSON字对象转换成为JSON字符串输入   var d = JSON.stringify(data);   storage.setItem("data",d);   console.log(storage.data);}</code></pre><p>读取之后要将JSON字符串转换成为JSON对象，使用JSON.parse()方法</p><pre class=" language-JavaScript"><code class="language-JavaScript">var storage=window.localStorage;   var data={         name:'xiecanyong',         sex:'man',         hobby:'program'   };   var d=JSON.stringify(data);   storage.setItem("data",d);   //将JSON字符串转换成为JSON对象输出   var json=storage.getItem("data");   var jsonObj=JSON.parse(json);   console.log(typeof jsonObj);</code></pre><h3 id="SessionStorage"><a href="#SessionStorage" class="headerlink" title="SessionStorage"></a>SessionStorage</h3><h4 id="什么是SessionStorage？"><a href="#什么是SessionStorage？" class="headerlink" title="什么是SessionStorage？"></a>什么是SessionStorage？</h4><p>&emsp;<code>SessionStorage</code>用于本地存储一个会话（Session）中的数据，它的作用域是窗口级别的，也就是说不同窗口间的sessionStorage数据不能共享的。这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此<code>SessionStorage</code>不是一种持久化的本地存储，仅仅是会话级别的存储。</p><h4 id="SessionStorage的特点"><a href="#SessionStorage的特点" class="headerlink" title="SessionStorage的特点"></a>SessionStorage的特点</h4><p>&emsp;这个和<code>localStorage</code>有什么区别呢？作为一种会话级别的本地存储，一旦关闭浏览器<code>SessionStorage</code>就会消失，而<code>localStorage</code>是很“持久”的，即使你关闭一万次浏览器也没事，所以差距还是很大的。因为现在都是前后端分离的开发模式，前端工程师都很青睐这两种前端缓存方式。</p><h4 id="SessionStorage的基本用法："><a href="#SessionStorage的基本用法：" class="headerlink" title="SessionStorage的基本用法："></a>SessionStorage的基本用法：</h4><pre class=" language-JavaScript"><code class="language-JavaScript">sessionStorage.length    //获得storage中的个数sessionStorage.key(n)    //获得storage中第n个元素对的键值（第一个元素是0）sessionStorage.getItem(key)    //获取键值key对应的值sessionStorage.key    //获取键值key对应的值sessionStorage.setItem(key, value)    //添加数据，键值为key，值为valuesessionStorage.removeItem(key)    //移除键值为key的数据sessionStorage.clear()    //清除所有数据</code></pre><h3 id="indexDB"><a href="#indexDB" class="headerlink" title="indexDB"></a>indexDB</h3><p>&emsp;随着浏览器的功能不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数据。</p><p>&emsp;现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引。所以，需要一种新的解决方案，这就是 IndexedDB 诞生的背景。</p><p>&emsp;通俗地说，IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。</p><p>关于indexDB的知识可以查看这篇文章<a href="http://www.ruanyifeng.com/blo" target="_blank" rel="noopener">浏览器数据库 IndexedDB 入门教程</a></p><h2 id="总结-1"><a href="#总结-1" class="headerlink" title="总结"></a>总结</h2><h3 id="WebStorage、cookie-和-IndexedDB之间的区别"><a href="#WebStorage、cookie-和-IndexedDB之间的区别" class="headerlink" title="WebStorage、cookie 和 IndexedDB之间的区别"></a>WebStorage、cookie 和 IndexedDB之间的区别</h3><table><thead><tr><th>存储方式</th><th>cookie</th><th>localStorge</th><th>sessionStorge</th><th>indexDB</th></tr></thead><tbody><tr><td>数据的生命周期</td><td>一般由服务器生成，可以设置过期时间</td><td>除非被清理，否则一直存在</td><td>页面关闭就清理</td><td>除非被清理，否则一直存在</td></tr><tr><td>数据存储大小</td><td>4M</td><td>5M</td><td>5M</td><td>无限</td></tr><tr><td>与服务算通信</td><td>每次都会携带在header中，对请求性能影响</td><td>不参与</td><td>不参与</td><td>不参与</td></tr></tbody></table><p>&emsp;从上表可以看到，cookie 已经不建议用于存储。如果没有大量数据存储需求的话，可以使用 localStorage 和 sessionStorage 。对于不怎么改变的数据尽量使用 localStorage 存储，否则可以用 sessionStorage 存储。</p><p>&emsp;作为一只前端菜鸟，本篇文章旨在记录自己的学习心得，如有不足，还请多多指教。</p><p>&emsp;路漫漫其修远兮，与诸君共勉。  </p><p><strong>后记：Hello 小伙伴们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更丰富文章的动力！<a href="https://github.com/danygitgit/document-library/blob/master/other-library/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9F%BA%E7%A1%80/%E6%B5%8F%E8%A7%88%E5%99%A8%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8%E6%BC%AB%E8%B0%88.md" target="_blank" rel="noopener">GitHub 地址</a></strong>  </p><blockquote><p><a rel="noopener" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank"><img alt="知识共享许可协议" style="border-width:0" src="https://user-gold-cdn.xitu.io/2018/12/23/167d9537f3e29c99?w=88&h=31&f=png&s=1888"></a><br><a xmlns:dct="http://purl.org/dc/terms/" property="dct:title"><strong>db</strong> 的文档库</a> 由 <a xmlns:cc="http://creativecommons.org/ns#" href="db" property="cc:attributionName" rel="cc:attributionURL">db</a> 采用 <a rel="noopener" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议</a>进行许可。<br>基于<a xmlns:dct="http://purl.org/dc/terms/" href="https://github.com/danygitgit" rel="noopener" target="_blank">https://github.com/danygitgit</a>上的作品创作。<br>本许可协议授权之外的使用权限可以从 <a xmlns:cc="http://creativecommons.org/ns#" href="https://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel="noopener" target="_blank">https://creativecommons.org/licenses/by-nc-sa/2.5/cn/</a> 处获得。  </p></blockquote>]]></content>
      
      
      <categories>
          
          <category> vue </category>
          
      </categories>
      
      
        <tags>
            
            <tag> 浏览器 </tag>
            
            <tag> Cookie </tag>
            
            <tag> localStorage </tag>
            
            <tag> SessionStorage </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>命令行笔记</title>
      <link href="/2019/08/14/ming-ling-xing-bi-ji/"/>
      <url>/2019/08/14/ming-ling-xing-bi-ji/</url>
      
        <content type="html"><![CDATA[<p>@<a href="https://github.com/danygitgit/document-library/blob/master/other-library/%E9%94%AE%E7%9B%98%E5%BF%AB%E6%8D%B7%E9%94%AE%E7%AC%94%E8%AE%B0.md" target="_blank" rel="noopener">命令行笔记</a></p><blockquote><p>create by <strong>db</strong> on <strong>2018-12-30 15:42:36</strong><br>Recently revised in <strong>2018-12-31 03:42:31</strong></p></blockquote><p>&emsp;<strong>Hello 小伙伴们，如果觉得本文还不错，麻烦点个赞或者给个 star，你们的赞和 star 是我前进的动力！<a href="https://github.com/danygitgit/document-library/blob/master/other-library/%E9%94%AE%E7%9B%98%E5%BF%AB%E6%8D%B7%E9%94%AE%E7%AC%94%E8%AE%B0.md" target="_blank" rel="noopener">GitHub 地址</a></strong></p><p>&emsp;最近在网易云课堂看了米斯特吴老师讲的关于命令行的课程，写下这篇学习笔记，以记录自己的学习心得。现分享给大家，以供参考。</p><p>&emsp;如果大家有兴趣，可以戳这里观看原视频：<a href="https://study.163.com/course/courseMain.htm?courseId=1005224008" target="_blank" rel="noopener">提高办公效率必学的键盘操作技巧</a></p><p>&emsp;作为一只菜鸟，这是我掘金分享的第三篇文章。如有不足，还请多多指教，谢谢大家。</p><h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><h2 id="关于键盘"><a href="#关于键盘" class="headerlink" title="关于键盘"></a>关于键盘</h2><p>&emsp;什么是键盘？————我就不啰嗦了。马上9012了，也许你没见过猪跑，但估计不会没敲过键盘。</p><p>&emsp;当然，如果你非要问个究竟，那我只能说：</p><h3 id="这——就是键盘！"><a href="#这——就是键盘！" class="headerlink" title="这——就是键盘！"></a><strong>这——就是键盘！</strong></h3><p><img src="../public-repertory/img/keyboard-img/Varmilo.png" alt></p><p>————有木有流口水呢~~反正我在流……</p><ol><li>Mac系统下使用的是termainal是命令行运行工具</li><li>Windows系统下使用的cmd是命令行工具<br>问题：两者之前的命令不通用，所以需要统一（powershell）</li></ol><h1 id="正文"><a href="#正文" class="headerlink" title="正文"></a>正文</h1><h2 id="命令一览"><a href="#命令一览" class="headerlink" title="命令一览"></a>命令一览</h2><table><thead><tr><th>命令</th><th>英文全称</th><th>功能</th><th>备注</th></tr></thead><tbody><tr><td><strong>pwd</strong></td><td>Print Working Directory</td><td>显示指定路径上所有文件或目录的信息</td><td></td></tr><tr><td><strong>cd</strong></td><td>Change Directory</td><td>更改目录</td><td></td></tr><tr><td><strong>ls</strong></td><td>List</td><td>列出当前路径下的内容</td><td></td></tr><tr><td><strong>mkdir</strong></td><td>Make Directory</td><td>新建文件夹</td><td></td></tr><tr><td><strong>open</strong></td><td>open</td><td>打开文件</td><td>只能在Mac使用</td></tr><tr><td><strong>touch</strong></td><td></td><td>新建文件</td><td>只能在Mac使用</td></tr><tr><td><strong>mv</strong></td><td>move</td><td>移动/重命名文件</td><td></td></tr><tr><td><strong>rm</strong></td><td>remove</td><td>删除文件</td><td>直接删除，不会放入回收站</td></tr></tbody></table><h2 id="命令详解"><a href="#命令详解" class="headerlink" title="命令详解"></a>命令详解</h2><h3 id="dir"><a href="#dir" class="headerlink" title=" dir "></a><font color="red"> dir </font></h3><ul><li>显示指定路径上所有文件或目录的信息</li></ul><p>它的格式为”dir [盘符：][路径][文件名] [参数]”，<br>比如<br><code>DIR E:\FF.M3U</code><br>| 参数   | 功能                                              |<br>| —— | ————————————————- |<br>| 无参数 | ：查看当前所在目录 的文件和文件夹。               |<br>| /s     | ：查看当前目录已经其所有子目录的文件和文件夹。    |<br>| /a     | ：查看包括隐含文件的所有文件。                    |<br>| /ah    | ：只显示出隐含文件。                              |<br>| /w     | ：以紧凑方式（一行显示5个文件）显示文件和文件夹。 |<br>| /p     | ：以分页方式（显示一页之后会自动暂停）显示。      |<br>more：前面那个符号是“\”上面的那个，叫做重定向符号，就是把一个<br>命令的结果输出为另外一个命令的参数。more也是一个命令，dir /w |more<br>得到的结果和dir /w /p的结果是一样的。<br>dir&gt;a.txt   新建文件<br>第一种方法：<br>echo veryhuo.com &gt; A.txt 重定向输出，此时创建文本文件A.txt;<br>echo veryhuo.com &gt;&gt;A.txt 向A.txt文件中追加信息…..; </p><p>第二种方法：<br>copy con A.txt 创建A.txt文本文件;<br>veryhuo.com　　　　　 输入内容;<br>　　　 按CTRL+Z键，之后再回车； </p><p>第三种方法：<br>edit A.txt 编辑A.txt文本文件，调用command.com中创建文本文件的命令，<br>如果A.txt文件不存在，则创建文件<br>. 输入内容，保存。<br>其他的参数大家可以用：dir/?查看。</p><h3 id="md"><a href="#md" class="headerlink" title="md"></a><font color="red">md</font></h3><ul><li>(mkdir)–建立目录</li></ul><p>它的格式为”md [盘符][路径]”，<br>例如<code>md TEMP</code></p><h3 id="rd"><a href="#rd" class="headerlink" title="rd"></a><font color="red">rd</font></h3><ul><li>(rmdir)–删除目录<br>格式为”RD [盘符][路径]”。<br>注意：该命令只能删除空目录，并且不能删除当前目录。<h3 id="cd"><a href="#cd" class="headerlink" title="cd"></a><font color="red">cd</font></h3></li><li>进入指定目录<br>格式为” CD [路径]”<br>例如<code>CD HAPPY</code><br>注意：只能进入当前盘符中的目录。其中”CD&quot;为回到根目录，”CD..”为回到上一层目录。<h3 id="copy"><a href="#copy" class="headerlink" title="copy"></a><font color="red">copy</font></h3></li><li>copy–拷贝文件<br>格式为”COPY [源目录或文件] [目的目录或文件]”，<br>比如<code>COPY C:\*.COM D:\</code><br>注意：使用该命令进行文件拷贝时，目的目录一定要存在。<h3 id="del"><a href="#del" class="headerlink" title="del"></a><font color="red">del</font></h3></li><li>删除文件<br>格式为”DEL [盘符][路径][文件名] [参数]”，<br>比如<code>DEL C:\DATA\*.BAK</code>。<br>它有一个参数：”/P”，可以使用户在删除多个文件时对每个文件都显示删除询问<h3 id="ren"><a href="#ren" class="headerlink" title="ren"></a><font color="red">ren</font></h3></li><li>–改名<br>格式为”REN [原名] [现名]”，7.0以后版本的DOS都支持对文件名和目录名的修改，而以前的DOS只能修改文件名。<h3 id="type"><a href="#type" class="headerlink" title="type"></a><font color="red">type</font></h3></li><li>显示文本文件<br>格式为”TYPE [文件名]”，能对文本文件进行查看。</li></ul><p>1)    discopy–磁盘复制<br>[功能] 复制出一个和原来磁盘内容一模一样的磁盘<br>[格式] diskcopy　源驱动器名　目的驱动器名<br>[说明] 它的主要用途就是用来备份。<br>    1)     deltree–删除目录树<br>[格式] [C:][path]DELTREE [C1:][path1] [[C2:][path2] […]]<br>[说明] 这个命令将整个指定目录树全部消灭，而不管它是否是只读、隐藏与否。<br>    1)  mem–查看你的计算机内存有多少，以及内存的使用情况。<br>[格式] mem</p><p> 12) chkdsk–检查你的磁盘的使用情况。<br>[格式] chkdsk　磁盘名<br>[说明] 例如要检查A盘使用情况，就输入chkdsk　A: ，检查c盘使用情况，就输入chkdsk　C: ，如果直接输入chkdsk，就检查当前磁盘的使用情况。<br>    13) sys–传递系统文件命令。将DOS的两个隐含的系统IO.SYS和MSDOS.SYS传送到目标磁盘的特定位置上，并将COMMAND.COM文件复制过去。完成后，目标盘成为DOS的启动盘。<br>[格式] [C:][path]SYS [C1:][path] d2:<br>[说明] 由于这几个文件需要复制到特定位置上，所以用COPY命令完成的复制未必能够启动机器。能过SYS命令，DOS可以将目标盘已占据特定位置的文件移动，并将系统文件复制到相应位置上。参数C1:path用来指明系统文件所在目录。如不指明，则缺省为当前盘的当前目录。所以这个命令一般要在源盘的根目录进行。<br>14) pass–设定DOS寻找.COM、.EXE、.BAT文件的所在目录<br>[格式] path=[[drive:]path[;…]]或path<br>[说明] 只打path没有参数时，只显示环境变量内容。有参数时，重新设置path变量。在没有指定path环境变量时，用户发出的命令，DOS首先判断其是否为内部命令，再查找当前目录中是否有主文件名是该命令的可执行文件，如果均不是，则显示信息“Bad command or filename”。如果发出了指定路径的命令，则在指定径中依次查找，仍找不到则出现上述提示。<br>          15) cls–清除显示器屏幕上的内容，使DOS提示符到屏幕左上角。<br>[格式] cls<br>16) time–显示和设置DOS的系统时间<br>[格式] time [hh[:mm[:ss[.cc]]]<br>17) date–显示和设置DOS的系统日期<br>[格式] date [MM-DD-YY]<br>18) ver–显示正在运行的DOS系统版本号<br>[格式] ver<br>三、DOS的外部命令<br>DOS的外部命令就是一些应用程序，能够使用户的操作更加方便和深入。这些外部命令都是以文件的形式存在，Windows系统的DOS外部命令保存在Windwos主目录下的”Command”目录中。下面这些是常用的一些DOS外部命令。<br>1）FORMAT（Format.COM）–格式化命令<br>FORMAT命令可以完成对软盘和硬盘的格式化操作<br>格式为”FORMAT [盘符] [参数]”，例如：”FORMAT A: /S”。<br>它有两个常见的参数：</p><p>   /Q：进行快速格式化；<br>   /S：完成格式化，并将系统引导文件拷贝到该磁盘。</p><p>   注意：该命令会清除目的磁盘上的所有数据，一定要小心使用。如果进行了普通的格式化，那磁盘上的数据还有可能恢复，但如果加上了”/Q”，那要恢复就比蹬天还难了。<br>2）  EDIT（Edit.COM）–编辑命令<br>其实它就是一个文本编辑软件，使用它可以在DOS下方便地对文本文件进行编辑，格式为”EDIT [文件名] [参数]”。<br>3）  SYS（Sys.COM）–系统引导文件传输命令<br>它能够将IO.SYS等几个文件传输到目的磁盘，使其可以引导、启动。<br>格式为”SYS [盘符]”<br>4）  ATTRIB（Attrib.EXE）–文件属性设置命令<br>通过该命令，我们可以对文件进行属性的查看和更改。<br>格式为”ATTRIB [路径][文件名] [参数]”，如果不加参数则为显示文件属性。<br>它的参数有”+？”和”-？”两种，”？”代表属性代号，这些代号有：”H”隐藏；”S”系统；”R”只读，”+”表示赋予，”-“表示去除。<br>5）  XCOPY（Xcopy.EXE）–拷贝命令<br>该命令在”COPY”的基础上进行了加强，能够对多个子目录进行拷贝。它的参数比较多，但是最常用的是”/S”，它可以对一个目录下属的多个子目录进行拷贝，另外”/E”可以拷贝空目录。<br>格式为”XCOPY [源路径][源目录/文件名] [目的目录/文件名] [参数]”。<br>6）  SCANDISK（Scandisk.EXE）–磁盘扫描程序<br>这个命令在实际的操作中有很大的用处，它能对磁盘进行扫描并修复，能够解决大部分的磁盘文件损坏问题。格式为”SCANDISK [盘符：] [参数]”下面是它的几个参数：</p><p>/fragment ［驱动器名:\路径\文件名］：使用这个参数可以显示文件是否包含有间断的块，我们可以通过运行磁盘整理程序来解决这个问题；<br>/all：检查并修复所有的本地驱动器；<br>/autofix：自动修复错误，即在修复时不会出现提示；<br>/checkonly：仅仅检查磁盘，并不修复错误；<br>/custom：根据Scandisk.ini文件的内容来运行Scandisk，Scandisk.ini是一个文本文件，它包含了对Scandisk程序的设置，其中的［custom］块是在加上”/custom”参数后才执行的，用户可以根据自己的不同情况来进行不同的设置；<br>/nosave：在检查出有丢失簇后直接删除，并不转化为文件；<br>/nosummary：不显示检查概要，完成检查后将直接退出程序；<br>/surface：在完成初步检查后进行磁盘表面扫描；<br>/mono：以单色形式运行Scandisk。</p><p>我们可以根据不同的情况来加上不同的参数。我们可以执行”scandisk /all /checkonly /nosave /nosummary”来完成对磁盘的检查并且自动退出，另外还可以编辑scandisk.ini文件中设置，再运行”scandisk /custom”。如果被损坏的文件比较多，我们可以使用”/autofix”来进行自动修复，不然会忙死你的。<br>7）  CHKDSK（Chkdsk.EXE）–磁盘检查命令<br>它会检查磁盘，并会显示一个磁盘状态报告。格式为”CHKDSK [盘符：] [参数]”，最常用的参数是”/F”，可以对文件错误进行修复。<br>8）  MOVE（Move.EXE）–文件移动命令<br>使用它可以对文件进行移动。<br>格式为”MOVE [源文件] [目的路径]”。<br>9）  DELTREE（Deltree.EXE）–删除命令<br>DELTREE是DEL命令的超级加强版，它不仅可以删除文件，并且会将指定目录和其下的所有文件和子目录一并删掉。使用它，我们可以很方便的对目录进行彻底的删除。<br>格式”DELTREE [文件/路径] [参数]”，<br>参数有一个”/Y”，使用时系统会对每个文件进行询问，回答”Y”后才删除。</p><p>10) FDISK（Fdisk.EXE）–分区命令<br>更多的DOS命令<br>命令    功能    命令    功能<br>ctty    改变控制设备    attrib    设置文件属性<br>emm386　　    扩展内存管理    defrag    磁盘碎片整理<br>fdisk    硬盘分区    doskey    　调用和建立DOS宏命令<br>lh/loadhigh    将程序装入高端内存    debug    程序调试命令<br>move    移动文件，改目录名    fc　    文件比较<br>prompt　    设置提示符    more    分屏显示<br>smartdrv    设置磁盘加速器    set    设置环境变量<br>subst    路径替换    setver    设置版本<br>xcopy 　　　    拷贝目录和文件    vol    　显示指定的磁盘卷标<br>大家如果感兴趣的话，不妨自己在DOS窗口中打打这些命令试试</p><p>四、关于网络的常用命令 </p><ol><li>ping<br>ping 主机ip或名字：向目标主机发送4个icmp数据包，测试对方主机是否收<br>到并响应，一般常用于做普通网络是否通畅的测试。但是ping不同不代表网<br>络不通，有可能是目标主机装有防火墙并且阻止了icmp响应。<br>ping -t ：不停的发送数据包。当然都很小，不能称作攻击。有些人自己写<br>了一些类似于ping命令的程序，不停的发送很大的数据包，以阻塞目标主机<br>的网络连接。 </li></ol><ol start="2"><li><p>net<br>这个命令是网络命令中最重要的一个，必须透彻掌握它的每一个子命令的用法，因为它的功能实在是太强大了　在这里，我们重点掌握几个常用的子命令。<br>net view<br>使用此命令查看远程主机的所有共享资源。命令格式为net view \IP。<br>net use<br>把远程主机的某个共享资源影射为本地盘符，图形界面方便使用。命令格式为net use x: \IP\sharename。上面一个表示把192.168.0.5IP的共享名为magic的目录影射为本地的Z盘。下面表示和192.168.0.7建立IPC$连接（net use $”&gt;\IP\IPC$ “password” /user:”name”），<br>建立了IPC$连接后，呵呵，就可以上传文件了：copy nc.exe $”&gt;\192.168.0.7\admin$，表示把本地目录下的nc.exe传到远程主机，结合后面要介绍到的其他DOS命令就可以实现入侵了。<br>net start<br>使用它来启动远程主机上的服务。当你和远程主机建立连接后，如果发现它的什么服务没有启动，而你又想利用此服务怎么办？就使用这个命令来启动吧。用法：net start servername，如图9，成功启动了telnet服务。<br>net stop<br>入侵后发现远程主机的某个服务碍手碍脚，怎么办？利用这个命令停掉就ok了，用法和net start同。<br>net user<br>查看和帐户有关的情况，包括新建帐户、删除帐户、查看特定帐户、激活帐户、帐户禁用等。这对我们入侵是很有利的，最重要的，它为我们克隆帐户提供了前提。键入不带参数的net user，可以查看所有用户，包括已经禁用的。下面分别讲解。<br>1，net user abcd 1234 /add，新建一个用户名为abcd，密码为1234的帐户，默认为user组成员。<br>2，net user abcd /del，将用户名为abcd的用户删除。<br>3，net user abcd /active:no，将用户名为abcd的用户禁用。<br>4，net user abcd /active:yes，激活用户名为abcd的用户。<br>5，net user abcd，查看用户名为abcd的用户的情况<br>net localgroup　查看所有和用户组有关的信息和进行相关操作。键入不带参数的net localgroup即列出当前所有的用户组。在入侵过程中，我们一般利用它来把某个帐户提升为administrator组帐户，这样我们利用这个帐户就可以控制整个远程主机了。<br>net time<br>这个命令可以查看远程主机当前的时间。如果你的目标只是进入到远程主机里面，那么也许就用不到这个命令了。但简单的入侵成功了，难道只是看看吗？我们需要进一步渗透。这就连远程主机当前的时间都需要知道，因为利用时间和其他手段（后面会讲到）可以实现某个命令和程序的定时启动，为我们进一步入侵打好基础。用法：net time \IP。</p></li><li><p>netstat<br>netstat 主机：查看主机当前的tcp/ip连接状态，如端口的状态。 </p></li><li><p>nbtstat<br>nbtstat 主机：查看主机使用的NetBIOS name。 </p></li><li><p>tracert<br>tracert 主机：查看从你自己到目标逐机到底经过了那些路径。如：<br>tracert <a href="http://www.ncie.gov.cn" target="_blank" rel="noopener">www.ncie.gov.cn</a> 然后等待。。。就会看到你经过的一个个路由节<br>点，一般大一点的路由器，如电信的主干路由，除了ip以外，都有英文标示<br>的。 </p></li><li><p>pathping<br>pathping 主机：类似tracert，但可以显示一些tracert不能显示出来的信<br>息。可以自己试试。 </p></li><li><p>ftp<br>字符方式的ftp，我喜欢用；）不用装cuteftp了。 </p></li><li><p>telnet<br>字符方式的远程登录程序，是网络人员极其爱用的远程登录程序。我最近常<br>用来调试邮件服务器。 </p></li><li><p>ipconfig<br>非常有用的网络配置、排错。。。命令。<br>不加参数显示当前机器的网络接口状态。<br>/all 先是详细的信息。<br>/release 释放当前ip。<br>/renew 重新申请ip。<br>/flushdns 刷新dns缓存。<br>/registerdns 重新栽dns服务器上注册自己。<br>。。。。。。 </p></li><li><p>arp 操作当前的arp缓存。 </p></li></ol><p>-a 显示arp缓存。<br>-d 删除一条缓存纪录。<br>-s 田家一条缓存纪录。 </p><ol start="11"><li>nslookup 排除dns错误的利器。是一个交互的工具。使用之前请先努力弄清楚dns的作用以及dns的工作原理。 </li></ol><p>xcopy是一个外部命令，也就是说，是一个小程序，有的时候会发现软盘上没有，硬盘上也没有。。。昏倒。。。当然勇气来使比copy好用，我喜欢加/e参数。<br>smartdrv.exe 加载磁盘缓存，参数是缓存的大小，单位是kb。<br>如：smartdrv 32768 就是加载32M的缓存。<br>缓存的作用在你安装WIN2K的时候非常明显！不加缓存装WIN2K PRO要3小时左右，加载8M缓存后，只要30分钟。<br>原理是在内存中划分出一块区域，在安装期间不断地把硬盘上的数据读取到那块缓存区域中，充分利用了内存。 </p><p>AT和任务计划作用一样。<br>以下是使用方法，可以通过在命令提示符下面输入：AT /?获得帮助。 </p><p>AT 命令安排在特定日期和时间运行命令和程序。<br>要使用 AT 命令，计划服务必须已在运行中。 </p><pre><code>AT [\\computername] [ [id] [/DELETE] | /DELETE [/YES]] AT [\\computername] time [/INTERACTIVE] [ /EVERY:date[,...] | /NEXT:date[,...]] &quot;command&quot; \\computername 指定远程计算机。 如果省略这个参数，会计划在本地计算机上运行命令。 \\127.0.0.1代表本机。和不加这个参数意思一样。 id 指定给已计划命令的识别号。 用来识别任务，比如你要添加好几个任务，ID=1就代表第一个喽！ /delete 删除某个已计划的命令。如果省略 id， 计算机上所有已计划的命令都会被删除。 /yes 不需要进一步确认时，跟删除所有作业 的命令一起使用。 time 指定运行命令的时间。 /interactive 允许作业在运行时，与当时登录的用户 桌面进行交互。 /every:date[,...] 每个月或每个星期在指定的日期运行命令。 如果省略日期，则默认为在每月的本日运行。 /next:date[,...] 指定在下一个指定日期(如，下周四)运行命令。 如果省略日期，则默认为在每月的本日运行。 &quot;command&quot; 准备运行的 Windows NT 命令或批处理程序。## 附加小技巧自定义系统程序快捷键；&gt; 开始 → 程序 → 属性 → 快捷键PPT设置撤销次数：&gt; 文件 → 选项 → 高级 → 设置最多可取消次数`150`次word设置自动保存时间：&gt; 文件 → 选项 → 保存 → 设置保存自动回复信息时间间隔`1`分钟# 总结 &amp;emsp;键盘敲得好，对象找得早。这样不用多久，你就会升职加薪、当上总经理、出任CEO、迎娶白富美、走上人生巅峰，想想是不是还有点小激动呢？&amp;emsp;不扯淡了，练盲打去喽……**后记：Hello 小伙伴们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更丰富文章的动力！[GitHub 地址](https://github.com/danygitgit/document-library/blob/master/other-library/Git%E7%AC%94%E8%AE%B0/Git%E5%91%BD%E4%BB%A4%E5%85%A5%E9%97%A8.md)**&gt; &lt;a rel=&quot;license&quot; href=&quot;http://creativecommons.org/licenses/by-nc-sa/4.0/&quot;&gt;&lt;img alt=&quot;知识共享许可协议&quot; style=&quot;border-width:0&quot; src=&quot;https://user-gold-cdn.xitu.io/2018/12/23/167d9537f3e29c99?w=88&amp;h=31&amp;f=png&amp;s=1888&quot; /&gt;&lt;/a&gt;&lt;br /&gt;&lt;a xmlns:dct=&quot;http://purl.org/dc/terms/&quot; property=&quot;dct:title&quot;&gt;**db** 的文档库&lt;/a&gt; 由 &lt;a xmlns:cc=&quot;http://creativecommons.org/ns#&quot; href=&quot;db&quot; property=&quot;cc:attributionName&quot; rel=&quot;cc:attributionURL&quot;&gt;db&lt;/a&gt; 采用 &lt;a rel=&quot;license&quot; href=&quot;http://creativecommons.org/licenses/by-nc-sa/4.0/&quot;&gt;知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议&lt;/a&gt;进行许可。&lt;br /&gt;基于&lt;a xmlns:dct=&quot;http://purl.org/dc/terms/&quot; href=&quot;https://github.com/danygitgit&quot; rel=&quot;dct:source&quot;&gt;https://github.com/danygitgit&lt;/a&gt;上的作品创作。&lt;br /&gt;本许可协议授权之外的使用权限可以从 &lt;a xmlns:cc=&quot;http://creativecommons.org/ns#&quot; href=&quot;https://creativecommons.org/licenses/by-nc-sa/2.5/cn/&quot; rel=&quot;cc:morePermissions&quot;&gt;https://creativecommons.org/licenses/by-nc-sa/2.5/cn/&lt;/a&gt; 处获得。</code></pre>]]></content>
      
      
      <categories>
          
          <category> 命令行 </category>
          
      </categories>
      
      
        <tags>
            
            <tag> 效率 </tag>
            
            <tag> 命令行 </tag>
            
            <tag> cmd </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>Vue小白课（一）——CLI搭建项目（Vue2.x）</title>
      <link href="/2019/08/08/qian-tan-vue-zu-jian-tong-xin/"/>
      <url>/2019/08/08/qian-tan-vue-zu-jian-tong-xin/</url>
      
        <content type="html"><![CDATA[<p>@<a href="https://github.com/danygitgit/document-library/blob/master/JavaScript-library/Vue/Vue-cli%E5%85%A5%E9%97%A8%EF%BC%88%E4%B8%80%EF%BC%89%E2%80%94%E2%80%94%E9%A1%B9%E7%9B%AE%E6%90%AD%E5%BB%BA.md" target="_blank" rel="noopener">vue-cli搭建项目</a></p><blockquote><p>create by <strong>db</strong> on <strong>2019-1-10 16:28:10</strong><br>Recently revised in <strong>2019-1-14 23:19:07</strong></p></blockquote><p>&emsp;<strong>Hello 小伙伴们，如果觉得本文还不错，麻烦点个赞或者给个 star，你们的赞和 star 是我前进的动力！<a href="https://github.com/danygitgit/document-library/blob/master/JavaScript-library/Vue/vue-cli%E6%90%AD%E5%BB%BA%E9%A1%B9%E7%9B%AE.md" target="_blank" rel="noopener">GitHub 地址</a></strong></p><p>&emsp;查阅网上诸多资料，并结合自己的学习经验，写下这篇Vue2.0学习笔记，以记录自己的学习心得。现分享给大家，以供参考。</p><p>&emsp;作为一只前端菜鸟，这是我掘金分享的第四篇文章。如有不足，还请多多指教，谢谢大家。</p><h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>&emsp;作为一款前端框架，Vue 因其易上手，轻量级，受到广泛的应用。</p><p>&emsp;vue-cli作为Vue的脚手架工具，集成了webpack环境及主要依赖，只需要几分钟的时间就可以运行起来一个项目。对于项目的搭建、打包、维护管理等都非常方便快捷。</p><p>&emsp;此笔记旨在帮助Vue小白了解并应用Vue2.0项目搭建过程，希望能帮得到大家。</p><p>&emsp;参考文献：</p><ul><li><a href="https://segmentfault.com/a/1190000015475645" target="_blank" rel="noopener">vue-cli搭建项目 | 思否-villelee</a></li><li><a href="https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000" target="_blank" rel="noopener">windows下搭建vue开发环境 | 充电实践 </a></li><li><a href="https://www.jianshu.com/p/0c6678671635" target="_blank" rel="noopener">十分钟上手-搭建vue开发环境（新手教程） | 简书-祈澈菇凉</a></li><li><a href="https://segmentfault.com/a/1190000009151389" target="_blank" rel="noopener">vue-cli入门（一）——项目搭建 | 思否-Reachel</a></li></ul><p>&emsp;另：个人以为，学习vue最好的途径还是<a href="https://cn.vuejs.org/" target="_blank" rel="noopener">官方文档</a></p><h1 id="正文"><a href="#正文" class="headerlink" title="正文"></a>正文</h1><h2 id="搭建Vue开发环境"><a href="#搭建Vue开发环境" class="headerlink" title="搭建Vue开发环境"></a>搭建Vue开发环境</h2><h3 id="1、安装node"><a href="#1、安装node" class="headerlink" title="1、安装node"></a>1、安装node</h3><p>&emsp;Vue项目通常通过webpack工具来构建，而webpack命令的执行是依赖node.js的环境的，所以首先要安装node.js。node.js的官方地址为：<code>https://nodejs.org/en/download/</code>，下载相应版本<br><img src="/source/images/vue-cli-img/node.png" alt></p><p>安装好node之后，以管理员身份打开cmd管理工具，，输入 <code>node -v</code>，回车，查看node版本号，出现版本号则说明安装成功。</p><blockquote><p>node -v</p></blockquote><h3 id="2、安装淘宝npm镜像"><a href="#2、安装淘宝npm镜像" class="headerlink" title="2、安装淘宝npm镜像"></a>2、安装淘宝npm镜像</h3><p>&emsp;由于npm是国外的，使用起来比较慢，我们这里使用淘宝的cnpm镜像来安装vue.</p><p>&emsp;淘宝的cnpm命令管理工具可以代替默认的npm管理工具。</p><p>输入以下命令，回车；</p><blockquote><p>npm install -g cnpm –registry=<a href="https://registry.npm.taobao.org" target="_blank" rel="noopener">https://registry.npm.taobao.org</a></p></blockquote><h3 id="3、安装全局vue-cli脚手架"><a href="#3、安装全局vue-cli脚手架" class="headerlink" title="3、安装全局vue-cli脚手架"></a>3、安装全局vue-cli脚手架</h3><p>&emsp;vue-cli是vue官方提供的一个命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。</p><p>&emsp;淘宝镜像安装成功之后，我们就可以安装全局vue-cli脚手架。</p><p>输入以下命令，回车；</p><blockquote><p>cnpm install –global vue-cli</p></blockquote><p>&emsp;验证是否安装成功，在命令行输入<code>vue -V</code>，出来vue的版本号，则说明安装成功；</p><h2 id="创建vue项目"><a href="#创建vue项目" class="headerlink" title="创建vue项目"></a>创建vue项目</h2><h3 id="1、通过vue-cli创建一个vue项目"><a href="#1、通过vue-cli创建一个vue项目" class="headerlink" title="1、通过vue-cli创建一个vue项目"></a>1、通过vue-cli创建一个vue项目</h3><p>&emsp;进入你需要创建在项目的文件夹，打开命令行。</p><p>输入以下命令，回车</p><blockquote><p><font color="red"> vue init webpack</font> test</p></blockquote><p>&emsp;这里test指的是项目名，该命令执行后会创建一个名为test的目录，也就是我们所搭建的项目。</p><p>接下来会要求你进行一些选项设置，其实就是初始化项目：</p><pre><code>? Project name (test)        // 项目名称，按Enter确定就好 ? Project name test? Project description (A Vue.js project)        // 项目描述，按Enter确定就好 ? Project description A Vue.js project? Author (villelee)        // 作者，按Enter确定就好 ? Author villelee? Vue build (Use arrow keys)        // 开始选项设置，按Enter确定就好 ? Vue build standalone? Install vue-router? (Y/n) Y        // 安装路由，需要的话可以选Y，不需要就选n? Install vue-router? Yes? Use ESLint to lint your code? (Y/n) Y        // 是否使用ESlint统一代码风格，编码规范，建议选Y? Use ESLint to lint your code? Yes? Pick an ESLint preset (Use arrow keys)&gt; Standard (https://github.com/standard/standard)? Pick an ESLint preset Airbnb? Set up unit tests (Y/n) n        // 是否安装单元测试? Set up unit tests No? Setup e2e tests with Nightwatch? (Y/n) n        // 是否安装e2e测试编码规范? Setup e2e tests with Nightwatch? No? Should we run `npm install` for you after the project has been created? (recom? Should we run `npm install` for you after the project has been created? (recommended) npm   vue-cli · Generated &quot;test&quot;.</code></pre><p>&emsp;最后出现如下代码</p><pre><code>To get started:  cd test  npm run dev</code></pre><p>&emsp;说明已经初始化成功，vue-cli已经将项目搭建完成。</p><h3 id="2、进入你的项目文件夹"><a href="#2、进入你的项目文件夹" class="headerlink" title="2、进入你的项目文件夹"></a>2、进入你的项目文件夹</h3><p>&emsp;项目搭建好了，现在就可以进入项目文件夹。</p><p>输入以下命令，回车进入新建的项目。</p><blockquote><p><font color="red">cd</font> test</p></blockquote><h3 id="3、通过cnpm在项目里安装依赖"><a href="#3、通过cnpm在项目里安装依赖" class="headerlink" title="3、通过cnpm在项目里安装依赖"></a>3、通过cnpm在项目里安装依赖</h3><p>&emsp;因为各个模板之间都是相互依赖的，所以现在我们要安装依赖。</p><p>输入以下命令，回车安装依赖</p><blockquote><p><font color="red">cnpm install</font></p></blockquote><h3 id="4、启动项目"><a href="#4、启动项目" class="headerlink" title="4、启动项目"></a>4、启动项目</h3><p>&emsp;一切环境依赖安装准备就绪，我们来测试一下自己新建的vue项目的运行情况。</p><p>输入以下命令，回车启动项目</p><blockquote><p><font color="red">npm run dev</font></p></blockquote><p>结果会弹出一个浏览器访问地址默认为localhost:8080，如下：</p><pre><code>$ npm run dev&gt; test@1.0.0 dev D:\ptest\test&gt; webpack-dev-server --inline --progress --config build/webpack.dev.conf.js 95% emitting DONE  Compiled successfully in 5547ms11:59:13 I  Your application is running here: http://localhost:8080</code></pre><p>&emsp;在浏览器中打开<code>http://localhost:8080</code>，就能看到你的项目了<br><img src="/source/images/vue-cli-img/vue-cli.png" alt></p><h3 id="项目打包"><a href="#项目打包" class="headerlink" title="项目打包"></a>项目打包</h3><p>运行<code>npm run build</code></p><p>运行后打包成功会在项目中生成dist文件夹</p><p>部署服务器是把文件夹中的文件丢上服务器即可</p><h1 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h1><p>&emsp;至此，我们的Vue项目就搭建完成了。万里长征第一步，加油！</p><p>&emsp;如需进一步了解关于vue项目结构的基础知识，请戳<a href="https://github.com/danygitgit/document-library/blob/master/JavaScript-library/Vue/Vue%E5%B0%8F%E7%99%BD%E8%AF%BE%EF%BC%88%E4%BA%8C%EF%BC%89%E2%80%94%E2%80%94%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84%E8%A7%A3%E6%9E%90%EF%BC%88Vue2.x%EF%BC%89.md" target="_blank" rel="noopener">Vue小白课（二）——项目结构解析（Vue2.x）</a></p><p>&emsp;路漫漫其修远兮，与诸君共勉。</p><p>&emsp;祝大家2019更上一层楼！</p><p><strong>后记：Hello 小伙伴们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更丰富文章的动力！<a href="https://github.com/danygitgit/document-library/blob/master/JavaScript-library/Vue/Vue-cli%E5%85%A5%E9%97%A8%EF%BC%88%E4%B8%80%EF%BC%89%E2%80%94%E2%80%94%E9%A1%B9%E7%9B%AE%E6%90%AD%E5%BB%BA.md" target="_blank" rel="noopener">GitHub 地址</a></strong></p><blockquote><p><a rel="noopener" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank"><img alt="知识共享许可协议" style="border-width:0" src="https://user-gold-cdn.xitu.io/2018/12/23/167d9537f3e29c99?w=88&h=31&f=png&s=1888"></a><br><a xmlns:dct="http://purl.org/dc/terms/" property="dct:title"><strong>db</strong> 的文档库</a> 由 <a xmlns:cc="http://creativecommons.org/ns#" href="db" property="cc:attributionName" rel="cc:attributionURL">db</a> 采用 <a rel="noopener" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议</a>进行许可。<br>基于<a xmlns:dct="http://purl.org/dc/terms/" href="https://github.com/danygitgit" rel="noopener" target="_blank">https://github.com/danygitgit</a>上的作品创作。<br>本许可协议授权之外的使用权限可以从 <a xmlns:cc="http://creativecommons.org/ns#" href="https://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel="noopener" target="_blank">https://creativecommons.org/licenses/by-nc-sa/2.5/cn/</a> 处获得。</p></blockquote>]]></content>
      
      
      <categories>
          
          <category> vue </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Vue </tag>
            
            <tag> VueCLI </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>Vue项目实战（一）——ToDoList</title>
      <link href="/2019/08/02/vue-xiang-mu-shi-zhan-yi-todolist/"/>
      <url>/2019/08/02/vue-xiang-mu-shi-zhan-yi-todolist/</url>
      
        <content type="html"><![CDATA[<p>@<a href="https://github.com/danygitgit/document-library/blob/master/JavaScript-library/Vue/Vue%E9%A1%B9%E7%9B%AE%E5%AE%9E%E6%88%98%EF%BC%88%E4%B8%80%EF%BC%89%E2%80%94%E2%80%94ToDoList.md" target="_blank" rel="noopener">vue-cli2搭建待办事项项目</a></p><blockquote><p>create by <strong>db</strong> on <strong>2019-3-10 16:28:10</strong><br>Recently revised in <strong>2019-4-1 17:06:13</strong></p></blockquote><p>&emsp;<strong>Hello 小伙伴们，如果觉得本文还不错，麻烦点个赞或者给个 star，你们的赞和 star 是我前进的动力！<a href="https://github.com/danygitgit/document-library/blob/master/JavaScript-library/Vue/Vue%E9%A1%B9%E7%9B%AE%E5%AE%9E%E6%88%98%EF%BC%88%E4%B8%80%EF%BC%89%E2%80%94%E2%80%94ToDoList.md" target="_blank" rel="noopener">GitHub 地址</a></strong></p><p>&emsp;查阅网上诸多资料，并结合自己的学习经验，写下这篇Vue学习笔记，以记录自己的学习心得。现分享给大家，以供参考。</p><p>&emsp;作为一只前端菜鸟，本篇文章旨在记录自己的学习心得，如有不足，还请多多指教，谢谢大家。</p><h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><blockquote><p>I hear and I fogorget.</p></blockquote><blockquote><p>I see and I remember.</p></blockquote><blockquote><p>I do and I understand.</p></blockquote><p>&emsp;小白课系列告一段落，下面开始我们的实战课程吧！</p><ul><li>注：本项目基于VueCLI2框架实现搭建</li></ul><p>&emsp;参考文献：</p><ul><li><a href="https://blog.csdn.net/wu__di/article/details/54918454" target="_blank" rel="noopener">Vue之ToDoList实战 | CSDN -充电实践 </a></li><li><a href="https://segmentfault.com/a/1190000010487690#vue" target="_blank" rel="noopener">简单实现一个todo-list | FatDong1 </a></li><li><a href="https://cn.vuejs.org/v2/examples/todomvc.html" target="_blank" rel="noopener">TodoMVC Example | Vue官网</a></li></ul><h1 id="正文"><a href="#正文" class="headerlink" title="正文"></a>正文</h1><p>&emsp;如果看完了《Vue小白课》，那么对Vue项目的整体情况有了一定了解，并且搭建好了vue的环境。本篇我们就来练习一下Vue，实现ToDoList项目。</p><p>&emsp;倘若对VueCLI项目不是特别了解，请先参考：</p><ul><li><a href="https://juejin.im/post/5c3d46b76fb9a04a053fecc9" target="_blank" rel="noopener">Vue小白课（一）——CLI搭建项目（Vue2.x）</a></li><li><a href="https://juejin.im/post/5c3d65df518825258604df96" target="_blank" rel="noopener">Vue小白课（二）——项目结构解析（Vue2.x）</a></li></ul><p>以下是我们的搭建好的项目目录结构：</p><p><img src="/source/images/vue-todolist-img/%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84.png" alt></p><p>&emsp;在这个ToDoList当中，涉及到知识点包括以下内容:</p><h2 id="一、创建Vue实例："><a href="#一、创建Vue实例：" class="headerlink" title="一、创建Vue实例："></a>一、创建Vue实例：</h2><p>&emsp;在 main.js 中，我们看到vue-cli默认的</p><pre class=" language-javascript"><code class="language-javascript"><span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>  el<span class="token punctuation">:</span> <span class="token string">'#ToDoList'</span><span class="token punctuation">,</span>  router<span class="token punctuation">,</span>  components<span class="token punctuation">:</span> <span class="token punctuation">{</span> ToDoList <span class="token punctuation">}</span><span class="token punctuation">,</span>  template<span class="token punctuation">:</span> <span class="token string">'&lt;ToDoList/>'</span><span class="token punctuation">}</span></code></pre><p>&emsp;其中，<code>el</code>是Vue实例化的选项，提供一个在页面上已存在的 DOM 元素（#ToDoList）作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。</p><p>&emsp;<code>router</code>是Vue的路由。vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系。</p><p>&emsp;至于我们为啥不能用a标签，这是因为用Vue做的都是单页应用，就相当于只有一个主的index.html页面，所以你写的<a></a>标签是不起作用的，你必须使用vue-router来进行管理。</p><p>&emsp;<code>components</code>，组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 js 特性扩展。</p><p>&emsp;<code>template</code>，模板,作为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发 slot。</p><h2 id="二、配置路由"><a href="#二、配置路由" class="headerlink" title="二、配置路由"></a>二、配置路由</h2><p>&emsp;<code>/src/router</code>中的<code>index.js</code>文件是Vue项目的路由配置文件。</p><p>&emsp;要使用路由我们首先要在<code>router/index.js</code>文件中创建路由并配置路由映射。我们可以将vue-cli默认的<code>HelloWorld</code>组件改名为<code>ToDoList</code>,如下：</p><pre class=" language-javascript"><code class="language-javascript"><span class="token comment" spellcheck="true">// 引入路由模块并使用它</span><span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token keyword">import</span> Router <span class="token keyword">from</span> <span class="token string">'vue-router'</span><span class="token keyword">import</span> ToDoList <span class="token keyword">from</span> <span class="token string">'@/components/ToDoList'</span>Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Router<span class="token punctuation">)</span><span class="token comment" spellcheck="true">// 创建路由实例并配置路由映射  </span><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">new</span> <span class="token class-name">Router</span><span class="token punctuation">(</span><span class="token punctuation">{</span>  routes<span class="token punctuation">:</span> <span class="token punctuation">[</span>    <span class="token punctuation">{</span>      path<span class="token punctuation">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span>      name<span class="token punctuation">:</span> <span class="token string">'ToDoList'</span><span class="token punctuation">,</span>      component<span class="token punctuation">:</span> ToDoList    <span class="token punctuation">}</span>  <span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre><h2 id="三、编写页面"><a href="#三、编写页面" class="headerlink" title="三、编写页面"></a>三、编写页面</h2><h3 id="1、创建ToDoList组件"><a href="#1、创建ToDoList组件" class="headerlink" title="1、创建ToDoList组件"></a>1、创建ToDoList组件</h3><p>&emsp;既然我们配置了ToDoList的路由，就必须创建其相对应的组件。</p><p>&emsp;我们可以将<code>/src/components</code>中的<code>HelloWorld.vue</code>文件改名为<code>ToDoList.vue</code>,并且将其<code>&lt;template&gt;</code>标签的内容删除，只需要保留一个div根组件就好。如下，我们在组件模板中新建一个<code>My ToDoList</code>的标题：</p><pre class=" language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">></span></span>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ToDoList<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">></span></span>My ToDoList<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span></code></pre><h3 id="2、绑定数据"><a href="#2、绑定数据" class="headerlink" title="2、绑定数据"></a>2、绑定数据</h3><p>&emsp;Vue是一个MVVM框架，那么最基础的就是数据绑定，怎样实现数据绑定呢？</p><p>&emsp;首先来认识一下<strong>data</strong></p><blockquote><p><code>data</code>就是Vue 实例的数据对象。</p></blockquote><p>&emsp;在 ToDoList.vue 中，Vue 将会递归将 <code>data</code> 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。</p><pre class=" language-javascript"><code class="language-javascript"><span class="token operator">&lt;</span>script<span class="token operator">></span><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>  name<span class="token punctuation">:</span> <span class="token string">'ToDoList'</span><span class="token punctuation">,</span>  data <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>    <span class="token keyword">return</span> <span class="token punctuation">{</span>      title<span class="token punctuation">:</span> <span class="token string">'ToDoList'</span>    <span class="token punctuation">}</span>  <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span></code></pre><p>&emsp;上面的js代码，我们在ToDoList.vue中使用data，来返回title，我们的目的是title能够展现到页面上，那么这条数据如何展现呢？</p><pre class=" language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">></span></span>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ToDoList<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span> <span class="token attr-name">v-text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>My ToDoList<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span></code></pre><p>&emsp;在组件模板的标题h1中，我们使用<code>v-text</code>命令绑定title，这样就会自动替换原本html文本,显示了title。</p><p><img src="/source/images/vue-todolist-img/title1.png" alt></p><p>&emsp;改变title的值，显示的内容也会立即刷新。如果title的内容包含html元素，比如</p><p><code>title: &#39;&lt;span&gt;&lt;/span&gt;this is a todo list&#39;</code></p><p>&emsp;那么使用v-text显示会是：</p><p><img src="/source/images/vue-todolist-img/title2.png" alt></p><p>而使用<code>v-html</code>命令会自动替换html元素：</p><p><img src="/source/images/vue-todolist-img/title3.png" alt></p><h3 id="3、创建并渲染列表"><a href="#3、创建并渲染列表" class="headerlink" title="3、创建并渲染列表"></a>3、创建并渲染列表</h3><p>&emsp;接下来，我们使用v-for指令来实现列表的渲染：</p><pre class=" language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">></span></span>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ToDoList<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span> <span class="token attr-name">v-html</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">></span></span>      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span>      <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item in items<span class="token punctuation">"</span></span>      <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item.id<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>        <span class="token comment" spellcheck="true">&lt;!-- 待办事项 --></span>        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">v-text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item.title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>        <span class="token comment" spellcheck="true">&lt;!-- 完成按钮 --></span>        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span><span class="token punctuation">></span></span>完成<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>  name<span class="token punctuation">:</span> <span class="token string">'ToDoList'</span><span class="token punctuation">,</span>  data <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>    <span class="token keyword">return</span> <span class="token punctuation">{</span>      title<span class="token punctuation">:</span> <span class="token string">'ToDoList'</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true">//标题名称</span>      <span class="token comment" spellcheck="true">//待办事项列表</span>      items<span class="token punctuation">:</span> <span class="token punctuation">[</span>        <span class="token punctuation">{</span>          id<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>          title<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>          id<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span>          title<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>          id<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span>          title<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 punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></code></pre><p><strong>注：</strong></p><p>&emsp;vue中列表循环需加:key=”唯一标识” 唯一标识可以是item里面id、index等，因为vue组件高度复用，增加Key可以标识组件的唯一性。为了更好地区别各个组件， key的作用主要是为了高效的更新虚拟DOM。详情请参考</p><p><a href="https://www.jianshu.com/p/4bd5e745ce95" target="_blank" rel="noopener">VUE中演示v-for为什么要加key</a></p><p>&emsp;在data中，我们又返回了items数组，其中每个元素包括id,title，我们将items使用v-for绑定到列表中，渲染后的结果如下：</p><p><img src="/source/images/vue-todolist-img/%E5%88%97%E8%A1%A8%E6%B8%B2%E6%9F%93.png" alt></p><h3 id="4、绑定删除事件"><a href="#4、绑定删除事件" class="headerlink" title="4、绑定删除事件"></a>4、绑定删除事件</h3><p>接下来我们使用<code>v-on</code>来为按钮绑定事件，目的是点击删除按钮的时候，将列表中相应的选项删除。</p><pre class=" language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name"><span class="token namespace">v-on:</span>click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>toggleFinish(recycleItem)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>完成<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span></code></pre><p>这里我们增加了<code>click</code>方法，方法名为<code>toggleFinish</code>，参数为字符串<code>item</code>。</p><ul><li>methods的使用</li></ul><p>紧接着上面定义的toggleFinish方法，vue使用methods来添加各种不同的事件：</p><pre class=" language-javascript"><code class="language-javascript">methods<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token comment" spellcheck="true">// 点击完成按钮，删除对应事项</span>  toggleFinish <span class="token punctuation">(</span>recycleItem<span class="token punctuation">)</span> <span class="token punctuation">{</span>    <span class="token comment" spellcheck="true">// 使用map遍历</span>    <span class="token keyword">this</span><span class="token punctuation">.</span>items<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>item<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>      <span class="token keyword">if</span> <span class="token punctuation">(</span>item<span class="token punctuation">.</span>id <span class="token operator">===</span> recycleItem<span class="token punctuation">.</span>id<span class="token punctuation">)</span> <span class="token punctuation">{</span>        <span class="token comment" spellcheck="true">// 删除对应事项</span>        <span class="token keyword">this</span><span class="token punctuation">.</span>items<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>index<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 punctuation">}</span><span class="token punctuation">}</span></code></pre><h3 id="5、使用input输入框添加新事项"><a href="#5、使用input输入框添加新事项" class="headerlink" title="5、使用input输入框添加新事项"></a>5、使用input输入框添加新事项</h3><p>&emsp;截至目前我们使用的都是现成的列表，接下来我们使用输入框来动态为列表添加条目：</p><pre class=" language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>newItem<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>addNewItem<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>添加<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></code></pre><p>&emsp;使用指令<code>v-model</code>在表单控件或者组件上创建双向绑定，即绑定newItem，使用<code>@</code>来绑定事件监听器，点击日添加按钮会响应事件<code>addNewItem</code>。</p><p><code>addNewItem</code>同样在<code>methods</code>中编写如下：</p><pre class=" language-javascript"><code class="language-javascript"><span class="token comment" spellcheck="true">// 点击添加按钮，添加新的待办事项</span>addNewItem <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>  <span class="token comment" spellcheck="true">// 使用push为数组添加新元素</span>  <span class="token keyword">this</span><span class="token punctuation">.</span>items<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>    id<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>id<span class="token punctuation">,</span> <span class="token comment" spellcheck="true">// id 唯一且自增</span>    title<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>newItem <span class="token comment" spellcheck="true">// todo 标题</span>  <span class="token punctuation">}</span><span class="token punctuation">)</span>  <span class="token comment" spellcheck="true">// id 自增</span>  <span class="token keyword">this</span><span class="token punctuation">.</span>id<span class="token operator">++</span><span class="token punctuation">;</span>  <span class="token comment" spellcheck="true">// 清空输入框</span>  <span class="token keyword">this</span><span class="token punctuation">.</span>newItem <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">}</span><span class="token punctuation">}</span></code></pre><p>&emsp;在data中，我们声明一个变量<code>id</code>默认为0，<code>items</code>默认为空，<code>newItem</code>也为空。输入框输入内容后，点击添加按钮items中push一条内容，其中包括id与title，然后id自增，并且最后将输入框清空。</p><h2 id="6、总结"><a href="#6、总结" class="headerlink" title="6、总结"></a>6、总结</h2><p>&emsp;通过以上几个关键的知识点，我们最终就实现了ToDoList的基本功能，效果如下：</p><p><img src="/source/images/vue-todolist-img/todolist.gif" alt></p><p>&emsp;如果喜欢，可以再加一些样式。</p><p>&emsp;大家可以在后续的学习过程中加入更多的功能，巩固自己学到的知识。</p><p>&emsp;路漫漫其修远兮，与诸君共勉。</p><p><strong>后记：Hello 小伙伴们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更丰富文章的动力！<a href="https://github.com/danygitgit/document-library/blob/master/JavaScript-library/Vue/Vue%E9%A1%B9%E7%9B%AE%E5%AE%9E%E6%88%98%EF%BC%88%E4%B8%80%EF%BC%89%E2%80%94%E2%80%94ToDoList.md" target="_blank" rel="noopener">GitHub 地址</a></strong></p><blockquote><p><a rel="noopener" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank"><img alt="知识共享许可协议" style="border-width:0" src="https://user-gold-cdn.xitu.io/2018/12/23/167d9537f3e29c99?w=88&h=31&f=png&s=1888"></a><br><a xmlns:dct="http://purl.org/dc/terms/" property="dct:title"><strong>db</strong> 的文档库</a> 由 <a xmlns:cc="http://creativecommons.org/ns#" href="db" property="cc:attributionName" rel="cc:attributionURL">db</a> 采用 <a rel="noopener" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议</a>进行许可。<br>基于<a xmlns:dct="http://purl.org/dc/terms/" href="https://github.com/danygitgit" rel="noopener" target="_blank">https://github.com/danygitgit</a>上的作品创作。<br>本许可协议授权之外的使用权限可以从 <a xmlns:cc="http://creativecommons.org/ns#" href="https://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel="noopener" target="_blank">https://creativecommons.org/licenses/by-nc-sa/2.5/cn/</a> 处获得。</p></blockquote>]]></content>
      
      
      <categories>
          
          <category> vue </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Vue </tag>
            
            <tag> VueCLI </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>玩转GitHub</title>
      <link href="/2019/07/27/wan-zhuan-github/"/>
      <url>/2019/07/27/wan-zhuan-github/</url>
      
        <content type="html"><![CDATA[<p>@<a href="https://github.com/danygitgit/document-library/blob/master/other-library/Git%E7%AC%94%E8%AE%B0/%E7%8E%A9%E8%BD%ACGitHub.md" target="_blank" rel="noopener">玩转GitHub</a></p><blockquote><p>create by <strong>db</strong> on <strong>2019-1-7 13:48:41</strong><br>Recently revised in <strong>2019-7-1 16:47:27</strong></p></blockquote><p>&emsp;<strong>Hello 小伙伴们，如果觉得本文还不错，麻烦点个赞或者给个 star，你们的赞和 star 是我前进的动力！<a href="https://github.com/danygitgit/document-library/blob/master/other-library/Git%E7%AC%94%E8%AE%B0/%E7%8E%A9%E8%BD%ACGitHub.md" target="_blank" rel="noopener">GitHub 地址</a></strong></p><p>&emsp;查阅网上诸多资料，并结合自己的学习经验，写下这篇玩转GitHub，以记录自己的学习心得。现分享给大家，以供参考。</p><p>&emsp;作为一只前端菜鸟，这是我掘金分享的第三篇文章。如有不足，还请多多指教，谢谢大家。</p><h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>&emsp;参考文献：</p><ul><li><a href="https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000" target="_blank" rel="noopener">Git教程 | 廖雪峰的官方网站-廖雪峰 </a></li><li><a href="http://www.zhihu.com/question/20070065/answer/79557687" target="_blank" rel="noopener">如何使用 GitHub？ | 知乎-珊姗是个小太阳</a></li><li><a href="https://www.zhihu.com/question/28976652/answer/322376795" target="_blank" rel="noopener">GitHub 是怎样的一个存在？| 知乎-古土雷柏</a></li><li><a href="https://blog.csdn.net/tichimi3375/article/details/79844514" target="_blank" rel="noopener">两小时学会Git玩转Github | CSDN-唯恋殊雨</a></li><li><a href="https://blog.csdn.net/xc_zhou/article/details/80637759" target="_blank" rel="noopener">GitHub 系列之「怎样使用 GitHub？」| CSDN-周小董</a></li></ul><p>注：有的文章没找到原创，只有转载出处链接，见谅！</p><h2 id="什么是GitHub"><a href="#什么是GitHub" class="headerlink" title="什么是GitHub"></a>什么是GitHub</h2><p>&emsp;“全球最大同性交友网站”</p><div style="text-align: right">——摘自[维基百科](https://zh.wikipedia.org/wiki/GitHub)</div><p>&emsp;github是共产主义在软件开发领域的具体实现样板之一，即以生产资料社会公有制为基础（代码开源），以社会化合作（离散化的个人、组织等社会颗粒）为生产方式，主要采用合作社组织形式（项目组）的技术支撑平台。</p><div style="text-align: right">——摘自[古土雷柏的知乎回答](https://www.zhihu.com/question/28976652/answer/322376795)</div><p>&emsp;简单来说，Git 是一个管理你的「代码的历史记录」的工具。</p><div style="text-align: right">——摘自[珊姗是个小太阳的知乎回答](http://www.zhihu.com/question/20070065/answer/79557687)</div><p>&emsp;<strong>妹子说的对！</strong></p><p>&emsp;github是一个基于git的代码托管平台，付费用户可以建私人仓库，我们一般的免费用户只能使用公共仓库，也就是代码要公开。</p><p>&emsp;Git本身完全可以做到版本控制，但其所有内容以及版本记录只能保存在本机，如果想要将文件内容以及版本记录同时保存在远程，则需要结合GitHub来使用。使用场景：</p><ul><li>无GitHub：在本地 .git 文件夹内维护历时文件</li><li>有GitHub：在本地 .git 文件夹内维护历时文件，同时也将历时文件托管在远程仓库</li></ul><h2 id="我们能用GitHub做什么"><a href="#我们能用GitHub做什么" class="headerlink" title="我们能用GitHub做什么"></a>我们能用GitHub做什么</h2><p>&emsp;我们一直用GitHub作为免费的远程仓库，如果是个人的开源项目，放到GitHub上是完全没有问题的。其实GitHub还是一个开源协作社区，通过GitHub，既可以让别人参与你的开源项目，也可以参与别人的开源项目。</p><p>&emsp;在GitHub出现以前，开源项目开源容易，但让广大人民群众参与进来比较困难，因为要参与，就要提交代码，而给每个想提交代码的群众都开一个账号那是不现实的，因此，群众也仅限于报个bug，即使能改掉bug，也只能把diff文件用邮件发过去，很不方便。</p><p>&emsp;但是在GitHub上，利用Git极其强大的克隆和分支功能，广大人民群众真正可以第一次自由参与各种开源项目了。</p><h3 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h3><ul><li>在GitHub上，可以任意Fork开源仓库；</li><li>自己拥有Fork后的仓库的读写权限；</li><li>可以推送pull request给官方仓库来贡献代码。</li><li>在GitHub上，可以建博客；</li><li>在GitHub上，可以写文档；</li></ul><h1 id="正文"><a href="#正文" class="headerlink" title="正文"></a>正文</h1><h2 id="一、注册-GitHub"><a href="#一、注册-GitHub" class="headerlink" title="一、注册 GitHub"></a>一、注册 GitHub</h2><!-- 1. 先去[GitHub官网](https://github.com)注册（Sign Up）个账号，注册页面如下： --><p>&emsp;请自行<a href="https://www.baidu.com/" target="_blank" rel="noopener">百度</a>。。。</p><h2 id="一些-GitHub-的基本概念"><a href="#一些-GitHub-的基本概念" class="headerlink" title="一些 GitHub 的基本概念"></a>一些 GitHub 的基本概念</h2><h3 id="Overview"><a href="#Overview" class="headerlink" title="Overview"></a>Overview</h3><p>&emsp;概览：包括Popular repositories（公开仓库）、contributions（你的提交记录）等</p><h3 id="Repository"><a href="#Repository" class="headerlink" title="Repository"></a>Repository</h3><p>&emsp;仓库的意思，即你的项目。你想在 GitHub 上开源一个项目，那就必须要新建一个 Repository ，如果你开源的项目多了，你就拥有了多个 Repositories 。</p><h3 id="Star"><a href="#Star" class="headerlink" title="Star"></a>Star</h3><p>&emsp;这个好理解，就是你的项目获得的点赞数。但是在 GitHub 上的点赞远比微博、知乎点赞难的多，如果你有一个项目获得100个star都算很不容易了！</p><h3 id="Pull-Request"><a href="#Pull-Request" class="headerlink" title="Pull Request"></a>Pull Request</h3><p>&emsp;发起请求，这个其实是基于 Fork 的，还是上面那个例子，如果别人在你基础上做了改进，后来觉得改进的很不错，应该要把这些改进让更多的人收益，于是就想把自己的改进合并到原有项目里，这个时候他就可以发起一个 Pull Request（简称PR） ，原有项目创建人就可以收到这个请求，这个时候他会仔细review你的代码，并且测试觉得OK了，就会接受你的PR，这个时候你做的改进原有项目就会拥有了。</p><h3 id="Issue"><a href="#Issue" class="headerlink" title="Issue"></a>Issue</h3><p>&emsp;问题的意思，举个例子，就是你开源了一个项目，别人发现你的项目中有bug，或者哪些地方做的不够好，他就可以给你提个 Issue ，即问题，提的问题多了，也就是 Issues ，然后你看到了这些问题就可以去逐个修复，修复ok了就可以一个个的 Close 掉。</p><h3 id="Watch"><a href="#Watch" class="headerlink" title="Watch"></a>Watch</h3><p>&emsp;这个也好理解就是观察，如果你 Watch 了某个项目，那么以后只要这个项目有任何更新，你都会第一时间收到关于这个项目的通知提醒。</p><h3 id="Fork"><a href="#Fork" class="headerlink" title="Fork"></a>Fork</h3><p>&emsp;这个不好翻译，如果实在要翻译我把他翻译成分叉，什么意思呢？你开源了一个项目，别人想在你这个项目的基础上做些改进，然后应用到自己的项目中，这个时候他就可以 Fork 你的项目，这个时候他的 GitHub 主页上就多了一个项目，只不过这个项目是基于你的项目基础（本质上是在原有项目的基础上新建了一个分支，分支的概念后面会在讲解Git的时候说到），他就可以随心所欲的去改进，但是丝毫不会影响原有项目的代码与结构。</p><h3 id="Gist"><a href="#Gist" class="headerlink" title="Gist"></a>Gist</h3><p>&emsp;有些时候你没有项目可以开源，只是单纯的想分享一些代码片段，那这个时候 Gist 就派上用场了</p><h2 id="如何参与一个开源项目呢？"><a href="#如何参与一个开源项目呢？" class="headerlink" title="如何参与一个开源项目呢？"></a>如何参与一个开源项目呢？</h2><p>&emsp;比如人气极高的bootstrap项目，这是一个非常强大的CSS框架，你可以访问它的项目主页<code>https://github.com/twbs/bootstrap</code>，点“Fork”就在自己的账号下克隆了一个bootstrap仓库，然后，从自己的账号下clone：</p><blockquote><p>clone <a href="mailto:git@github.com" target="_blank" rel="noopener">git@github.com</a>:michaelliao/bootstrap.git</p></blockquote><p>&emsp;一定要从自己的账号下clone仓库，这样你才能推送修改。如果从bootstrap的作者的仓<code>it@github.com:twbs/bootstrap.git</code>克隆，因为没有权限，你将不能推送修改。</p><ul><li><p>如果你想修复bootstrap的一个bug，或者新增一个功能，立刻就可以开始干活，干完后，往自己的仓库推送。</p></li><li><p>如果你希望bootstrap的官方库能接受你的修改，你就可以在GitHub上发起一个pull request。当然，对方是否接受你的pull request就不一定了。</p></li><li><p>如果你没能力修改bootstrap，但又想要试一把pull request，那就Fork一下廖雪峰老师的仓库<code>https://github.com/michaelliao/learngit</code>，创建一个your-github-id.txt的文本文件，写点自己学习Git的心得，然后推送一个pull request给他。</p></li></ul><h3 id="小结-1"><a href="#小结-1" class="headerlink" title="小结"></a>小结</h3><ul><li><p>在GitHub上，可以任意Fork开源仓库；</p></li><li><p>自己拥有Fork后的仓库的读写权限；</p></li><li><p>可以推送pull request给官方仓库来贡献代码。</p></li></ul><h2 id="git-clone和download-zip的区别"><a href="#git-clone和download-zip的区别" class="headerlink" title="git clone和download zip的区别"></a>git clone和download zip的区别</h2><h3 id="git-clone"><a href="#git-clone" class="headerlink" title="git clone"></a>git clone</h3><ul><li>采用git clone的项目包含.git目录，这里面有历史版本信息</li></ul><h3 id="download-zip"><a href="#download-zip" class="headerlink" title="download zip"></a>download zip</h3><ul><li>采用下载zip文件的是没有版本历史信息的。只是当前分支的最新版本</li></ul><h1 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h1><p>&emsp;路漫漫其修远兮，希望Git及GitHub可以帮我们记录每一个脚印，每一步成长。与诸君共勉。</p><p>&emsp;祝大家2019更上一层楼！</p><p><strong>后记：Hello 小伙伴们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更丰富文章的动力！<a href="https://github.com/danygitgit/document-library/blob/master/other-library/Git%E7%AC%94%E8%AE%B0/%E7%8E%A9%E8%BD%ACGitHub.md" target="_blank" rel="noopener">GitHub 地址</a></strong></p><blockquote><p><a rel="noopener" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank"><img alt="知识共享许可协议" style="border-width:0" src="https://user-gold-cdn.xitu.io/2018/12/23/167d9537f3e29c99?w=88&h=31&f=png&s=1888"></a><br><a xmlns:dct="http://purl.org/dc/terms/" property="dct:title"><strong>db</strong> 的文档库</a> 由 <a xmlns:cc="http://creativecommons.org/ns#" href="db" property="cc:attributionName" rel="cc:attributionURL">db</a> 采用 <a rel="noopener" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议</a>进行许可。<br>基于<a xmlns:dct="http://purl.org/dc/terms/" href="https://github.com/danygitgit" rel="noopener" target="_blank">https://github.com/danygitgit</a>上的作品创作。<br>本许可协议授权之外的使用权限可以从 <a xmlns:cc="http://creativecommons.org/ns#" href="https://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel="noopener" target="_blank">https://creativecommons.org/licenses/by-nc-sa/2.5/cn/</a> 处获得。</p></blockquote>]]></content>
      
      
      <categories>
          
          <category> javaScript </category>
          
      </categories>
      
      
        <tags>
            
            <tag> GitHub </tag>
            
            <tag> 版本管理 </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>探秘Promise</title>
      <link href="/2019/07/25/tan-mi-promise/"/>
      <url>/2019/07/25/tan-mi-promise/</url>
      
        <content type="html"><![CDATA[<p>@<a href="https://github.com/danygitgit/document-library/blob/master/JavaScript-library/ES6/%E6%8E%A2%E7%A7%98Promise.md" target="_blank" rel="noopener">探秘Promise</a>  </p><blockquote><p>create by <strong>db</strong> on <strong>2019-8-18 18:54:39</strong><br>Recently revised in <strong>2019-9-2 21:53:12</strong>  </p></blockquote><p>&emsp;<strong>Hello 小伙伴们，如果觉得本文还不错，麻烦点个赞或者给个 star，你们的赞和 star 是我前进的动力！<a href="https://github.com/danygitgit/document-library/blob/master/JavaScript-library/ES6/%E6%8E%A2%E7%A7%98Promise.md" target="_blank" rel="noopener">GitHub 地址</a></strong>  </p><p>&emsp;查阅网上诸多资料，并结合自己的学习经验，写下这篇学习笔记，以记录自己的学习心得。现分享给大家，以供参考。  </p><h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><blockquote><p>I hear and I fogorget.  </p></blockquote><blockquote><p>I see and I remember.  </p></blockquote><blockquote><p>I do and I understand.  </p></blockquote><p>&emsp;我们都知道，js的世界是单线程执行的，也就是说一个任务完成之后才能进行另一个任务，这是因为js是运行在宿主进程多脚本语言，比如浏览器，比如node，宿主进程只会为其分配一个js引擎线程。</p><p>&emsp;那么对于耗时比较长的操作，例如一些ajax异步请求，这些请求之间有一种关系，就是下一次请求的参数是上一次请求的结果——回调地狱。所幸ES6给我们提供了异步编程的一种解决方案——Promise。</p><p>&emsp;参考文献</p><ul><li><a href="https://www.liaoxuefeng.com/wiki/1022910821149312/1023023924160384" target="_blank" rel="noopener">廖雪峰的官方网站 | 廖雪峰 </a> </li><li><a href="https://www.jianshu.com/p/1ec8d1c4e287" target="_blank" rel="noopener">关于ES6的Promise的使用 |简书-紫陌兰溪 </a>  </li></ul><h1 id="正文"><a href="#正文" class="headerlink" title="正文"></a>正文</h1><h2 id="什么是Promise"><a href="#什么是Promise" class="headerlink" title="什么是Promise"></a>什么是Promise</h2><h3 id="Promise的含义"><a href="#Promise的含义" class="headerlink" title="Promise的含义"></a>Promise的含义</h3><p>&emsp;Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。</p><p>&emsp;所谓promise，简单说是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果，从语法上说，promise是一个对象，从它可以获取异步操作的消息，promise提供了统一的API，各种异步操作都可以用同样的方法进行处理。</p><h3 id="Promise对象的特点"><a href="#Promise对象的特点" class="headerlink" title="Promise对象的特点"></a>Promise对象的特点</h3><p><strong>Promise的优点</strong></p><ol><li><p>对象的状态不受外界影响。promise对象代表一个异步操作，有三种状态，<code>pending</code>（进行中）、<code>fulfilled</code>（已成功）、<code>rejected</code>（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态，这也是promise这个名字的由来——“<strong>承诺</strong>”；</p></li><li><p>一旦状态改变就不会再变，任何时候都可以得到这个结果。promise对象的状态改变，只有两种可能：从<code>pending</code>变为<code>fulfilled</code>，从<code>pending</code>变为<code>rejected</code>。这时就称为<code>resolved</code>（已定型）。如果改变已经发生了，你再对promise对象添加回调函数，也会立即得到这个结果。这与事件（event）完全不同，事件的特点是：如果你错过了它，再去监听是得不到结果的。</p></li></ol><p>&emsp;有了Promise对象，就可以将异步操作以同步操作的流程表达出来，可以使用一种链式调用的方式来组织代码，避免了层层嵌套的回调函数。让代码更加的直观。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。</p><p><strong>Promise的缺点</strong></p><ol><li>无法取消Promise，一旦新建它就会立即执行，无法中途取消。</li><li>如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。</li><li>当处于<code>pending</code>状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。</li></ol><h2 id="那我们为什么要使用promise？"><a href="#那我们为什么要使用promise？" class="headerlink" title="那我们为什么要使用promise？"></a>那我们为什么要使用promise？</h2><p>比如我们在工作中经常会碰到这么一个需求，比如我使用ajax发一个A请求后，成功后拿到数据，我们需要把数据传给B请求；那么我们需要如下编写代码：</p><pre class=" language-javaScript"><code class="language-javaScript">$.ajax({    url: '',    dataType:'json',    success: function(data) { // 获取data数据 传给下一个请求      var id = data.id;      $.ajax({        url:'',        data:{"id":id},        success:function(){ // ..... }      });    }});</code></pre><p>&emsp;如上代码；上面的代码有如下几点缺点：</p><ol><li>后一个请求需要依赖于前一个请求成功后，将数据往下传递，会导致多个ajax请求嵌套的情况，代码不够直观。</li><li>如果前后两个请求不需要传递参数的情况下，那么后一个请求也需要前一个请求成功后再执行下一步操作，这种情况下，那么也需要如上编写代码，导致代码不够直观。 <h2 id="如何创建promise对象"><a href="#如何创建promise对象" class="headerlink" title="如何创建promise对象?"></a>如何创建promise对象?</h2></li></ol><p>&emsp;要想创建promise对象，可以使用<code>new</code>来调用promise的构造器来进行实例化。</p><p>如下代码：</p><pre class=" language-javaScript"><code class="language-javaScript">var promise = new Promise(function(resolve,reject){  // ... some code  if(/*异步操作成功*/) {  resolve(value) // 成功调用resolve 往下传递参数 且只接受一个参数  }else {  reject(error)  // 失败调用reject  往下传递参数 且只接受一个参数  }   });</code></pre><p>&emsp;对通过<code>new</code> 生成的<code>promise</code>对象为了设置其值在<code>resolve</code>(成功) / <code>reject</code>(失败) 时调用的回调函数，可以使用<code>promise.then()</code>实例方法。</p><p>如下代码：</p><pre class=" language-javaScript"><code class="language-javaScript">promise.then(onFulfilled, onRejected);</code></pre><p>&emsp;<code>resolve</code>(成功) 时 调用<code>onFulfilled</code> 方法，<code>reject</code>(失败) 时 调用<code>onRejected</code>方法;</p><p>&emsp;<code>Promise.then</code> 成功和失败时都可以使用，如果出现异常的情况下可以采用<code>promise.then(undefined,onRejected)</code> 这种方式，只指定onRejected回调函数即可，不过针对这种情况下我们有更好的选择是使用catch这个方法；代码如下：</p><pre class=" language-javaScript"><code class="language-javaScript">promise.catch(onRejected);</code></pre><p>&emsp;上面啰嗦了这么多，我们来分别来学习相关的promise对象中的方法知识点吧！</p><h2 id="Promise-resolve"><a href="#Promise-resolve" class="headerlink" title="Promise.resolve"></a>Promise.resolve</h2><p>&emsp;一般情况下我们都会使用<code>new Promise()</code>来创建promise对象，但是我们也可以使用<code>promise.resolve</code>和 <code>promise.reject</code>这两个方法；</p><p>&emsp;<code>Promise.resolve(value)</code>的返回值也是一个promise对象，我们可以对返回值进行.then调用；</p><p>如下代码：</p><pre class=" language-javaScript"><code class="language-javaScript">Promise.resolve(11).then(function(value){  console.log(value); // 打印出11});</code></pre><p><code>resolve(11)</code>代码中，会让promise对象进入确定(<code>resolve</code>状态)，并将参数<code>11</code>传递给后面的<code>then</code>所指定的<code>onFulfilled</code> 函数；</p><p>&emsp;我们上面说过创建promise对象，可以使用<code>new Promise</code>的形式创建对象，但是我们这边也可以使用<code>Promise.resolve(value)</code>的形式创建promise对象；</p><h2 id="Promise-reject"><a href="#Promise-reject" class="headerlink" title="Promise.reject"></a>Promise.reject</h2><p>&emsp;<code>Promise.reject</code> 也是<code>new Promise</code>的快捷形式，也创建一个promise对象。</p><p>比如如下代码：</p><pre class=" language-javaScript"><code class="language-javaScript">Promise.reject(new Error(“我错了，请原谅俺！！”));</code></pre><p>就是下面的代码new Promise的简单形式：</p><pre class=" language-javaScript"><code class="language-javaScript">new Promise(function(resolve,reject){   reject(new Error("我错了，请原谅俺！！"));});</code></pre><p>&emsp;下面我们来综合看看使用resolve方法和reject方法。</p><p>demo如下：</p><pre class=" language-javaScript"><code class="language-javaScript">function testPromise(ready) {  return new Promise(function(resolve,reject){    if(ready) {      resolve("hello world");    }else {      reject("No thanks");    }  });};// 方法调用testPromise(true).then(function(msg){  console.log(msg);},function(error){  console.log(error);});</code></pre><p>&emsp;上面的代码的含义是给<code>testPromise</code>方法传递一个参数，返回一个promise对象，如果为<code>true</code>的话，那么调用promise对象中的<code>resolve()</code>方法，并且把其中的参数传递给后面的<code>then</code>第一个函数内，因此打印出 “<code>hello world</code>”, 如果为<code>false</code>的话，会调用promise对象中的<code>reject()</code>方法，则会进入<code>then</code>的第二个函数内，会打印<code>No thanks</code>；</p><h2 id="理解Promise异步调用的操作"><a href="#理解Promise异步调用的操作" class="headerlink" title="理解Promise异步调用的操作"></a>理解Promise异步调用的操作</h2><pre class=" language-javaScript"><code class="language-javaScript">var promise = new Promise(function(resolve){  console.log(1);  resolve(3);});promise.then(function(value){  console.log(value);});console.log(2);</code></pre><p>&emsp;上面的代码输出我们可以看到，结果分别为<code>1,2,3</code>； </p><p>&emsp;首先代码从上往下执行，首先输出<code>1</code>，然后调用<code>resolve(3)</code>这个方法，这时候promise对象变为确定状态，即调用<code>onFulFilled</code>这个方法，从上面了解到，<code>resolve(成功)</code> 时 调用<code>onFulfilled</code> 方法，<code>Promise.then</code> 成功和失败时都可以使用，因此第一个函数是成功调用的，但是Promise对象是以异步方式调用的，所以先执行<code>console.log(2)</code>，输出的是<code>2</code>，然后输出的是<code>3</code>；</p><h3 id="理解是同步调用还是异步调用"><a href="#理解是同步调用还是异步调用" class="headerlink" title="理解是同步调用还是异步调用"></a>理解是同步调用还是异步调用</h3><pre class=" language-javaScript"><code class="language-javaScript">function ready(fn){  var readyState = document.readyState;  if (readyState === 'interactive' || readyState === 'complete') {    fn();  } else {    window.addEventListener('DOMContentLoaded', fn);  }}ready(function(){  console.log("DOM Load Success");});console.log("我是同步输出的");</code></pre><p>&emsp;如上代码；如果在调用<code>ready()</code>方法之前DOM已经载入完成的话，就会对回调函数进行同步调用，先输出<code>DOM Load Success</code>后输出 <code>我是同步输出的</code> ；如果在调用<code>ready()</code>方法之前DOM为未载入完成的话，那么代码先会执行 <code>window.addEventListener(‘DOMContentLoaded’, fn);</code><br>就会异步调用该函数，那么就会先输出 “<code>我是同步输出的</code>”，后输出“<code>DOM Load Success</code>”;<br>为了解决上面的同步或者异步混乱的问题，我们现在可以使用promise对象使用异步的方式来解决；</p><p>如下代码：</p><pre class=" language-javaScript"><code class="language-javaScript">function readyPromise(){  return new Promise(function(resolve,reject){    var readyState = document.readyState;    if (readyState === 'interactive' || readyState === 'complete') {      resolve();    } else {      window.addEventListener('DOMContentLoaded', resolve);    }  });}readyPromise().then(function(){  console.log("DOM Load Success");});console.log("我是同步加载的，先执行我");</code></pre><p>&emsp;输出如下：先输出“<code>我是同步加载的，先执行我</code>” 后输出 “<code>DOM Load Success</code>”。因为promise对象是异步加载的。</p><h2 id="理解promise的三种状态"><a href="#理解promise的三种状态" class="headerlink" title="理解promise的三种状态"></a>理解promise的三种状态</h2><p>Promise 对象有三种状态：</p><ul><li><code>Resolve</code>可以理解为成功的状态；</li><li><code>Rejected</code> 可以理解为失败的状态；</li><li><code>Pending</code>既不是<code>Resolve</code>也不是<code>Rejected</code>状态；可以理解为Promise对象实例创建时候的初始状态；</li></ul><p>&emsp;比如Promise对象中的<code>resolve</code>方法就是调用<code>then</code>对象的第一个函数，也就是成功的状态；而<code>reject</code>方法就是调用then对象的第二个函数，也就是失败的状态；</p><h2 id="理解then"><a href="#理解then" class="headerlink" title="理解then()"></a>理解then()</h2><p>&emsp;还是之前的例子：</p><pre class=" language-javaScript"><code class="language-javaScript">function testPromise(ready) {  return new Promise(function(resolve,reject){    if(ready) {      resolve("hello world");    }else {      reject("No thanks");    }  });};// 方法调用testPromise(true).then(function(msg){  console.log(msg);},function(error){  console.log(error);});</code></pre><p>&emsp;上面的代码就是利用了 <code>then(onFulfilled，onRejected)</code>方法来执行的，第一个方法就是成功状态的标志，第二个方法是失败的状态标志；</p><p>&emsp;当然在多个任务的情况下then方法同样可以使用；比如上面的代码改成如下：</p><pre class=" language-javaScript"><code class="language-javaScript">function testPromise(ready) {  return new Promise(function(resolve,reject){    if(ready) {      resolve("hello world");    }else {      reject("No thanks");    }  });};// 方法调用testPromise(true).then(function(msg){  console.log(msg);}).then(testPromise2)  .then(testPromise3);function testPromise2(){  console.log(2);}function testPromise3(){  console.log(3);}</code></pre><p>输出如下：<code>hello world ，2,3</code></p><p>&emsp;上面的代码是<code>then</code>的链式调用方式，输出是按顺序输出的 分别为 <code>hello world , 2,3;</code> 使用链式调用的原因是每次调用后都会返回promise对象；</p><h2 id="理解Promise-catch-方法"><a href="#理解Promise-catch-方法" class="headerlink" title="理解Promise.catch()方法"></a>理解Promise.catch()方法</h2><p>&emsp;<code>Promise.catch()</code>方法是<code>promise.then(undefined,onRejected)</code>方法的一个别名，该方法用来注册当promise对象状态变为<code>Rejected</code>的回调函数。</p><p>如下代码：</p><pre class=" language-javaScript"><code class="language-javaScript">var promise = Promise.reject(new Error("message"));promise.catch(function(error) {  console.log(error);});</code></pre><!-- 打印如下所示： --><p>&emsp;不管是then还是catch方法调用，都返回一个新的promise对象；</p><p>下面我们来看看这个例子：</p><pre class=" language-javaScript"><code class="language-javaScript">var promise1 = new Promise(function(resolve){  resolve(1);});var thenPromise = promise1.then(function(value){  console.log(value);});var catchPromise = thenPromise.catch(function(error){  console.log(error);});console.log(promise1 !== thenPromise); // trueconsole.log(thenPromise !== catchPromise); //true</code></pre><p>&emsp;如上代码，打印的都是<code>true</code>，这说明不管是<code>then</code>还是<code>catch</code>都返回了和新创建的promise是不同的对象；</p><p>&emsp;如果我们知道了then方法每次都会创建返回一个新的promise对象的话，那么久不难理解下面的代码了；</p><p>如下：</p><pre class=" language-javaScript"><code class="language-javaScript">var promise1 = new Promise(function(resolve){  resolve(1);});promise1.then(function(value){  return value * 2;});promise1.then(function(value){  return value * 2;});promise1.then(function(value){  console.log("1"+value);});</code></pre><p>&emsp;如上的代码；打印出<code>11</code>；因为他们每次调用<code>then</code>方法时，是使用的不同的promise对象；因此最后打印的value还是<code>1</code>；但是如果我们then方法是连续调用的话，那情况就不一样了。</p><p>比如如下代码：</p><pre class=" language-javaScript"><code class="language-javaScript">var promise1 = new Promise(function(resolve){  resolve(2);});promise1.then(function(value){  return value * 2;}).then(function(value){  return value * 2;}).then(function(value){  console.log("1"+value);});</code></pre><p>&emsp;打印出<code>18</code>，即 “1” + 2 * 2 * 2 = 18;</p><p>&emsp;上面第一种方法没有使用方法链的调用，上面第一种那种写法<code>then</code> 调用几乎是同时开始进行的，且传给每个<code>then</code>的value都是<code>1</code>；</p><p>&emsp;第二种方式是使用方法链的<code>then</code>，使多个<code>then</code>方法连接在一起了，因此函数会严格执行 <code>resolve – then — then – then</code>的顺序执行，并且传递每个<code>then</code>方法的value的值都是前一个promise对象中return的值；因此最后的结果就是<code>18</code>了；</p><p>&emsp;现在我们再回过头一刚开始我们讨论的为什么要使用promise的原因的问题了，比如2个ajax请求，后一个ajax请求需要获取到前一个ajax请求的数据，我们之前在使用jquery写代码是如下的：</p><pre class=" language-javaScript"><code class="language-javaScript">$.ajax({   url: '',   dataType:'json',   success: function(data) {  // 获取data数据 传给下一个请求  var id = data.id;  $.ajax({    url:'',    data:{"id":id},    success:function(){      // .....    }  });  }});</code></pre><p>&emsp;现在我们学习了<code>then</code>方法后，我们可以重新编写上面的代码变成如下：</p><pre class=" language-javaScript"><code class="language-javaScript">var ajaxPromise = new Promise(function(resolve){  resolve();});ajaxPromise.then(function(){  $.ajax({    url:'',    dataType:'json',    success: function(data) {      var id = data.id;      return id;    }  })}).then(function(id){  $.ajax({    url:'',    dataType:'json',    data:{"id":id},    success: function(data){      console.log(data);    }  })});</code></pre><h2 id="理解Promise-all"><a href="#理解Promise-all" class="headerlink" title="理解Promise.all"></a>理解Promise.all</h2><p>&emsp;<code>Promise.all</code>方法用于将多个Promise实例包装成一个新的Promise实例。</p><p>&emsp;Promise.all可以接受一个元素为Promise对象的<strong>数组</strong>作为参数，当这个数组里面所有的promise对象都变为resolve时，该方法才会返回。</p><p>如下代码：</p><pre class=" language-javaScript"><code class="language-javaScript">var promise1 = new Promise(function(resolve){  setTimeout(function(){    resolve(1);  },3000);});var promise2 = new Promise(function(resolve){  setTimeout(function(){    resolve(2);  },1000);});Promise.all([promise1,promise2]).then(function(value){  console.log(value); // 打印[1,2]});</code></pre><p>&emsp;如上代码 打印的是<code>[1,2]</code>; 如上我们看到<code>promise1</code>对象中的setTimeout是3秒的时间，而<code>promise2</code>对象中的setTimeout是1秒的时间，但是在<code>Promise.all</code>方法中会按照数组的原先顺序将结果返回；</p><p>&emsp;在我们平时的需求中，或许有这种情况的需求，比如我们需要发2个ajax请求时，不管他们的先后顺序，当这2个ajax请求都同时成功后，我们需要执行某些操作的情况下，这种情况非常适合。</p><h2 id="理解Promise-race"><a href="#理解Promise-race" class="headerlink" title="理解Promise.race"></a>理解Promise.race</h2><p>&emsp;如上可知：<code>Promise.all</code>在接收到的所有对象promise都变为<code>FulFilled</code>或者 <code>Rejected</code>状态之后才会继续后面的处理，但是<code>Promise.race</code>的含义是只要有一个promise对象进入FulFilled或者Rejected状态的话，程序就会停止，且会继续后面的处理逻辑；</p><p>如下代码：</p><pre class=" language-javaScript"><code class="language-javaScript">// `delay`毫秒后执行resolvefunction timerPromise(delay){  return new Promise(function(resolve){    setTimeout(function(){      resolve(delay);    },delay);  });}// 任何一个promise变为resolve或reject 的话程序就停止运行Promise.race([  timerPromise(1),  timerPromise(32),  timerPromise(64),  timerPromise(128)]).then(function (value) {  console.log(value);  // => 1});</code></pre><p>&emsp;如上代码创建了4个promise对象，这些promise对象分别在1ms,32ms,64ms,128ms后变为确定状态，并且在第一个变为确定状态后1ms后，<code>then</code>函数就会被调用，这时候<code>resolve()</code>方法给传递的值为<code>1</code>，因此执行<code>then</code>的回调函数后，值变为<code>1</code>；</p><p>&emsp;我们再来看看当一个promise对象变为确定状态(FulFiled)的时候，他们后面的promise对象是否还在运行呢？我们继续看如下代码运行：</p><pre class=" language-javaScript"><code class="language-javaScript">var runPromise = new Promise(function(resolve){  setTimeout(function(){    console.log(1);    resolve(2);  },500);});var runPromise2 = new Promise(function(resolve){  setTimeout(function(){    console.log(3);    resolve(4);  },1000);});// 第一个promise变为resolve后程序停止Promise.race([runPromise,runPromise2]).then(function(value){  console.log(value);});</code></pre><p>&emsp;如上代码是使用定时器调用的，上面是2个promise对象，我们看到第一个promise对象过500毫秒后加入到执行队列里面去，如果执行队列没有其他线程在运行的时候，就执行该定时器，所以第一次打印<code>1</code>，然后调用<code>resolve(2)</code>; 接着调用<code>promise.race</code>方法，该方法只要有一个变为成功状态(FulFiled)的时候，程序就会停止，因此打印出<code>2</code>，同时后面的promise对象接着执行，因此打印出<code>3</code>，但是由于<code>promise.race()</code>该方法已经停止调用了，所以<code>resolve(4)</code>不会有任何输出；因此最后输出的是<code>1,2,3</code>；</p><p>&emsp;由此我们得出结论:当一个promise对象变为(FulFilled)成功状态的时候，后面的promise对象并没有停止运行。</p><!-- ## Deferred和Promise的关系Deferred 包含 Promise；Deferred具备Promise的状态进行操作的特权方法；下面我们来看看使用promise来实现deferred;如下代码：function Deferred(){  this.promise = new Promise(function(resolve,reject){    this._resolve = resolve;    this._reject = reject;  }.bind(this));}Deferred.prototype.resolve = function(value) {  this._resolve.call(this.promise,value);};Deferred.prototype.reject = function(reason) {  this._reject.call(this.promise,reason);};function getURL(URL){  var deferred = new Deferred();  var req = new XMLHttpRequest();  req.open('GET',URL,true);  req.onload = function(){    if(req.status === 200) {      deferred.resolve(req.responseText);    }else {      deferred.reject(new Error(req.statusText));    }  };  req.onerror = function(){    deferred.reject(new Error(req.statusText));  };  req.send();  return deferred.promise;}var URL = 'http://127.0.0.1/promise/promise.php';getURL(URL).then(function onFulfilled(value){  console.log(value);});其中promise.php代码输出的是一个json的数据，代码如下：<?php   $data = json_decode(file_get_contents("php://input"));  header("Content-Type: application/json; charset=utf-8");  echo ('{"id" : ' . $data->id . ', "age" : 24, "sex" : "boy", "name" : "huangxueming"}');?>最后执行打印console的出来是：{“id” : , “age” : 24, “sex” : “boy”, “name” : “huangxueming”}使用promise封装deferred的方法，无非就是使用promise对象中的resolve和Reject等调用方法，下面我们再来看看使用promise对象对ajax请求的封装如下：function getURL(URL){  return new Promise(function (resolve, reject) {    var req = new XMLHttpRequest();    req.open('GET', URL, true);    req.onload = function () {      if (req.status === 200) {        resolve(req.responseText);      } else {        reject(new Error(req.statusText));      }    };    req.onerror = function () {      reject(new Error(req.statusText));    };    req.send();  });}var URL = 'http://127.0.0.1/promise/promise.php';getURL(URL).then(function onFulfilled(value){  console.log(value);});上面分别两种方式使用promise对象实现ajax请求的封装对比如下：Deferred那种方式不需要将promise代码括起来。Promise代表了一个对象，这个对象的状态现在还不确定，但是未来一个时间点它的状态要么变为正常值（FulFilled），要么变为异常值（Rejected）；而Deferred对象表示了一个处理还没有结束的这种事实，在它的处理结束的时候，可以通过Promise来取得处理结果 --><h1 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h1><p>&emsp;作为javascript的新标准，ES6为我们提供了很多新语法及新特性，让我们的代码更加简单与易用。</p><p>&emsp;作为一只前端菜鸟，本篇文章旨在记录自己的学习心得，如有不足，还请多多指教，谢谢大家。</p><p>&emsp;路漫漫其修远兮，与诸君共勉。  </p><p><strong>后记：Hello 小伙伴们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更丰富文章的动力！<a href="https://github.com/danygitgit/document-library/blob/master/JavaScript-library/ES6/%E6%8E%A2%E7%A7%98Promise.md" target="_blank" rel="noopener">GitHub 地址</a></strong>  </p><blockquote><p><a rel="noopener" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank"><img alt="知识共享许可协议" style="border-width:0" src="https://user-gold-cdn.xitu.io/2018/12/23/167d9537f3e29c99?w=88&h=31&f=png&s=1888"></a><br><a xmlns:dct="http://purl.org/dc/terms/" property="dct:title"><strong>db</strong> 的文档库</a> 由 <a xmlns:cc="http://creativecommons.org/ns#" href="db" property="cc:attributionName" rel="cc:attributionURL">db</a> 采用 <a rel="noopener" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议</a>进行许可。<br>基于<a xmlns:dct="http://purl.org/dc/terms/" href="https://github.com/danygitgit" rel="noopener" target="_blank">https://github.com/danygitgit</a>上的作品创作。<br>本许可协议授权之外的使用权限可以从 <a xmlns:cc="http://creativecommons.org/ns#" href="https://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel="noopener" target="_blank">https://creativecommons.org/licenses/by-nc-sa/2.5/cn/</a> 处获得。  </p></blockquote>]]></content>
      
      
      <categories>
          
          <category> javaScript </category>
          
      </categories>
      
      
        <tags>
            
            <tag> ES6 </tag>
            
            <tag> Pomise </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>Vue小白课（四）——项目结构解析（Vue3.x）</title>
      <link href="/2019/07/24/vue-xiao-bai-ke-si-xiang-mu-jie-gou-jie-xi-vue3.x/"/>
      <url>/2019/07/24/vue-xiao-bai-ke-si-xiang-mu-jie-gou-jie-xi-vue3.x/</url>
      
        <content type="html"><![CDATA[<p>@<a href="https://github.com/danygitgit/document-library/blob/master/JavaScript-library/Vue/Vue%E5%B0%8F%E7%99%BD%E8%AF%BE%EF%BC%88%E5%9B%9B%EF%BC%89%E2%80%94%E2%80%94%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84%E8%A7%A3%E6%9E%90%EF%BC%88Vue3.x%EF%BC%89.md" target="_blank" rel="noopener">Vue项目结构解析</a></p><blockquote><p>create by <strong>db</strong> on <strong>2019-1-10 16:28:10</strong><br>Recently revised in <strong>2019-3-9 21:52:41</strong></p></blockquote><p>&emsp;<strong>Hello 小伙伴们，如果觉得本文还不错，麻烦点个赞或者给个 star，你们的赞和 star 是我前进的动力！<a href="https://github.com/danygitgit/document-library/blob/master/JavaScript-library/Vue/Vue%E5%B0%8F%E7%99%BD%E8%AF%BE%EF%BC%88%E5%9B%9B%EF%BC%89%E2%80%94%E2%80%94%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84%E8%A7%A3%E6%9E%90%EF%BC%88Vue3.x%EF%BC%89.md" target="_blank" rel="noopener">GitHub 地址</a></strong></p><p>&emsp;查阅网上诸多资料，并结合自己的学习经验，写下这篇Vue3.0学习笔记，现分享给大家，以供参考。</p><p>&emsp;作为一只前端菜鸟，本篇文章旨在记录自己的学习心得，如有不足，还请多多指教，谢谢大家。</p><h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>&emsp;在上一篇项目搭建文章中，我们已经下载安装了node环境以及Vue-CLI3，并且已经成功构建了一个Vue-CLI3项目——见<a href="https://github.com/danygitgit/document-library/blob/master/JavaScript-library/Vue/Vue%E5%B0%8F%E7%99%BD%E8%AF%BE%EF%BC%88%E4%B8%89%EF%BC%89%E2%80%94%E2%80%94CLI%E6%90%AD%E5%BB%BA%E9%A1%B9%E7%9B%AE%EF%BC%88Vue3.x%EF%BC%89.md" target="_blank" rel="noopener">Vue小白课（三）——CLI搭建项目（Vue3.x）</a>。那么接下来，我们来梳理一下Vue-CLI3项目的结构。</p><p>&emsp;参考文献：</p><ul><li><p><a href="https://cli.vuejs.org/" target="_blank" rel="noopener">Vue3.x官方文档</a></p></li><li><p><a href="https://www.jianshu.com/p/8105d6c16d80" target="_blank" rel="noopener">利用vue-cli3快速搭建vue项目详细过程 | 简书-zhyzhyzz</a></p></li><li><p><a href="https://www.jianshu.com/p/2edcf71f7730" target="_blank" rel="noopener">vue-cli3.0项目结构 | 简书-戴眼镜的松鼠</a></p></li></ul><h1 id="正文"><a href="#正文" class="headerlink" title="正文"></a>正文</h1><p>&emsp;vue-cli3.0默认项目目录与2.0的相比，更加精简:</p><ol><li>移除的配置文件根目录下的，build和config等目录，</li><li>移除了static文件夹，新增了public文件夹，并且index.html移动到public中。</li><li>在src文件夹中新增了views文件夹，用于分类 试图组件 和 公共组件 。</li><li>大部分配置 都集成到 vue.config.js这里,在项目根目录下</li></ol><h2 id="Vue-CLI3项目结构一览"><a href="#Vue-CLI3项目结构一览" class="headerlink" title="Vue-CLI3项目结构一览"></a>Vue-CLI3项目结构一览</h2><p><img src="/source/images/vue-cli-img/vue-cli30.jpg" alt></p><h1 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h1><p>&emsp;路漫漫其修远兮，与诸君共勉。</p><p><strong>后记：Hello 小伙伴们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更丰富文章的动力！<a href="https://github.com/danygitgit/document-library/blob/master/JavaScript-library/Vue/Vue%E5%B0%8F%E7%99%BD%E8%AF%BE%EF%BC%88%E5%9B%9B%EF%BC%89%E2%80%94%E2%80%94%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84%E8%A7%A3%E6%9E%90%EF%BC%88Vue3.x%EF%BC%89.md" target="_blank" rel="noopener">GitHub 地址</a></strong></p><blockquote><p><a rel="noopener" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank"><img alt="知识共享许可协议" style="border-width:0" src="https://user-gold-cdn.xitu.io/2018/12/23/167d9537f3e29c99?w=88&h=31&f=png&s=1888"></a><br><a xmlns:dct="http://purl.org/dc/terms/" property="dct:title"><strong>db</strong> 的文档库</a> 由 <a xmlns:cc="http://creativecommons.org/ns#" href="db" property="cc:attributionName" rel="cc:attributionURL">db</a> 采用 <a rel="noopener" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议</a>进行许可。<br>基于<a xmlns:dct="http://purl.org/dc/terms/" href="https://github.com/danygitgit" rel="noopener" target="_blank">https://github.com/danygitgit</a>上的作品创作。<br>本许可协议授权之外的使用权限可以从 <a xmlns:cc="http://creativecommons.org/ns#" href="https://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel="noopener" target="_blank">https://creativecommons.org/licenses/by-nc-sa/2.5/cn/</a> 处获得。</p></blockquote>]]></content>
      
      
      <categories>
          
          <category> vue </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Vue </tag>
            
            <tag> VueCLI </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>Vue小白课（三）——CLI搭建项目（Vue3.x）</title>
      <link href="/2019/07/23/vue-xiao-bai-ke-san-cli-da-jian-xiang-mu-vue3.x/"/>
      <url>/2019/07/23/vue-xiao-bai-ke-san-cli-da-jian-xiang-mu-vue3.x/</url>
      
        <content type="html"><![CDATA[<p>@<a href="https://github.com/danygitgit/document-library/blob/master/JavaScript-library/Vue/Vue%E5%B0%8F%E7%99%BD%E8%AF%BE%EF%BC%88%E4%B8%89%EF%BC%89%E2%80%94%E2%80%94CLI%E6%90%AD%E5%BB%BA%E9%A1%B9%E7%9B%AE%EF%BC%88Vue3.X%EF%BC%89.md" target="_blank" rel="noopener">Vue-CLI3搭建项目</a></p><blockquote><p>create by <strong>db</strong> on <strong>2019-1-10 16:28:10</strong><br>Recently revised in <strong>2019-3-12 15:59:45</strong></p></blockquote><p>&emsp;<strong>Hello 小伙伴们，如果觉得本文还不错，麻烦点个赞或者给个 star，你们的赞和 star 是我前进的动力！<a href="https://github.com/danygitgit/document-library/blob/master/JavaScript-library/Vue/Vue%E5%B0%8F%E7%99%BD%E8%AF%BE%EF%BC%88%E4%B8%89%EF%BC%89%E2%80%94%E2%80%94CLI%E6%90%AD%E5%BB%BA%E9%A1%B9%E7%9B%AE%EF%BC%88Vue3.x%EF%BC%89.md" target="_blank" rel="noopener">GitHub 地址</a></strong></p><p>&emsp;查阅网上诸多资料，并结合自己的学习经验，写下这篇Vue3.0学习笔记，现分享给大家，以供参考。</p><p>&emsp;作为一只前端菜鸟，本篇文章旨在记录自己的学习心得，如有不足，还请多多指教，谢谢大家。</p><h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>&emsp;Vue-CLI 是 vue 官方团队推出的一款快速开发 vue 项目的构建东西，具有开箱即用并且供给简练的自定义配备等功用。包括三个组件：</p><ul><li><strong>CLI</strong>：@vue/cli 全局安装的 npm 包，提供了终端里的vue命令（如：vue create 、vue serve 、vue ui 等命令）</li><li><strong>CLI</strong> 服务：@vue/cli-service是一个开发环境依赖。构建于 webpack 和 webpack-dev-server 之上（提供 如：serve、build 和 inspect 命令）</li><li><strong>CLI 插件</strong>：给Vue 项目提供可选功能的 npm 包 （如： Babel/TypeScript 转译、ESLint 集成、unit和 e2e测试 等）</li></ul><p>&emsp;Vue-CLI 3.0 正式版于 2018年8月10号发布，大神尤雨溪表示，Vue CLI 3.0与其他的版本完全不同，它经历了重构，目的是：</p><ol><li>尽可能减少现代前端工具在配置上的烦恼，尤其是在开发者将多个工具混合使用时；</li><li>尽可能在工具链中加入最佳实践，并让其成为Vue应用程序的默认实践。</li></ol><p>&emsp;与Vue-CLI 2.0相比，Vue-CLI 3.0发生了很多变化。。。</p><p>&emsp;一言以蔽之，就是<strong>让开发更简单！</strong></p><p>&emsp;此笔记旨在帮助Vue小白了解并应用Vue3项目的命令行搭建过程，希望能帮得到大家。</p><p>&emsp;参考文献：</p><ul><li><p><a href="https://cli.vuejs.org/" target="_blank" rel="noopener">Vue3.x官方文档</a></p></li><li><p><a href="https://blog.csdn.net/xuqipeter/article/details/80452271" target="_blank" rel="noopener">vue cli 3.0快速创建项目 | CSDN-徐子玉</a></p></li><li><p><a href="https://www.jianshu.com/p/8105d6c16d80" target="_blank" rel="noopener">利用vue-cli3快速搭建vue项目详细过程 | 简书-zhyzhyzz</a></p></li></ul><h1 id="正文"><a href="#正文" class="headerlink" title="正文"></a>正文</h1><h2 id="搭建Vue-CLI3-x开发环境"><a href="#搭建Vue-CLI3-x开发环境" class="headerlink" title="搭建Vue-CLI3.x开发环境"></a>搭建Vue-CLI3.x开发环境</h2><h3 id="1、更新npm到最新版本"><a href="#1、更新npm到最新版本" class="headerlink" title="1、更新npm到最新版本"></a>1、更新npm到最新版本</h3><p>&emsp;Vue CLI 3需要 nodeJs ≥ 8.9 (官方推荐 8.11.0+，你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本）。</p><p>&emsp;命令运行</p><blockquote><p>npm install -g npm</p></blockquote><p>&emsp;npm就自动为我们更新到最新版本</p><p>&emsp;更新完成之后，以管理员身份打开cmd管理工具，，输入 <code>node -v</code>，回车，可查看node版本号.</p><h3 id="2、安装全局Vue-CLI3-x脚手架"><a href="#2、安装全局Vue-CLI3-x脚手架" class="headerlink" title="2、安装全局Vue-CLI3.x脚手架"></a>2、安装全局Vue-CLI3.x脚手架</h3><p>&emsp;Vue-CLI是vue官方提供的一个命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。</p><p>&emsp;首先查看我们当前vue版本号，在命令行输入</p><blockquote><p>vue -V</p></blockquote><p>&emsp;如果出现<code>2.X.X</code>，则说明我们现在安装的Vue-CLI2；</p><p>然后我们就需要更新升级了，命令行输入以下命令，回车；</p><blockquote><p>npm i -g @vue/cli</p></blockquote><p>&emsp;再次查看Vue的版本号<code>3.x.x</code>，则说明更新成功；</p><h2 id="命令行创建Vue-CLI3项目"><a href="#命令行创建Vue-CLI3项目" class="headerlink" title="命令行创建Vue-CLI3项目"></a>命令行创建Vue-CLI3项目</h2><h3 id="1、通过Vue-CLI3创建一个vue项目"><a href="#1、通过Vue-CLI3创建一个vue项目" class="headerlink" title="1、通过Vue-CLI3创建一个vue项目"></a>1、通过Vue-CLI3创建一个vue项目</h3><p>&emsp;进入你需要创建项目的文件夹，打开命令行。</p><p>输入以下命令，回车</p><blockquote><p><font color="red"> vue create</font> test</p></blockquote><p>&emsp;这里<code>test</code>指的是项目名，该命令执行后会创建一个名为<code>test</code>的目录，也就是我们所搭建的项目。</p><p>此处有两个选择：</p><ul><li><p><code>default (babel, eslint)</code>：默认套餐，提供<code>babel</code>和<code>eslint</code>支持</p></li><li><p><code>Manually select features</code>：自己去选择需要的功能，提供更多的特性选择。比如如果想要支持 <code>TypeScript</code> ，就应该选择这一项。</p></li></ul><p>&emsp;可以使用<kbd>上下方向键</kbd>来切换选项。如果只需要 <code>babel</code> 和 <code>eslint</code> 支持，那么选择第一项，就完事了，静静等待 vue 初始化项目。</p><p>&emsp;Vue-CLI3 内置支持了8个功能特性，可以多选：使用<kbd>方向键</kbd>在特性选项之间切换，使用<kbd>空格键</kbd>选中当前特性，使用<kbd> a </kbd>键切换选择所有，使用<kbd> i </kbd>键翻转选项。</p><p>对于每一项的功能，此处做个简单描述：</p><pre><code>? Check the features needed for your project: (Press &lt;space&gt; to select, &lt;a&gt; to toggle all, &lt;i&gt; to invert selection)&gt;( ) Babel                           //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。                       ( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用 ( ) Progressive Web App (PWA) Support// 渐进式Web应用程序 ( ) Router                           // vue-router（vue路由） ( ) Vuex                             // vuex（vue的状态管理模式） ( ) CSS Pre-processors               // CSS 预处理器（如：less、sass） ( ) Linter / Formatter               // 代码风格检查和格式化（如：ESlint） ( ) Unit Testing                     // 单元测试（unit tests） ( ) E2E Testing                      // e2e（end to end） 测试</code></pre><p>我选择了 <code>Router</code>，<code>Vuex</code>，<code>CSS Pre-processors</code>，<code>Linter / Formatter</code></p><p>按住<code>enter</code>进入下一步，接下来都是对之前每项选项的更详细的选择。</p><ul><li><p>css:选择SCSS/SASS</p></li><li><p>Linter / Formatter:选择prettier</p></li></ul><p>&emsp;这一步就是要选择配置文件的位置了。对于 <code>Babel</code> 、<code>PostCSS</code> 等，都可以有自己的配置文件： <code>.babelrc</code> 、 <code>.postcssrc</code> 等等，同时也可以把配置信息放在 <code>package.json</code> 里面。此处出于对编辑器（ Visual Studio Code ）的友好支持（编辑器一般默认会在项目根目录下寻找配置文件），选择把配置文件放在外面，选择 <code>In dedicated config files</code></p><p><strong>补充</strong></p><p><code>Save this as a preset for future projects?</code>:这个就是问要不要把当前的这一系列选项配置保存起来，方便下一次创建项目时复用。选择y。</p><p>选完之后， Vue-CLI 就根据前面选择的内容，开始初始化项目了。</p><p>&emsp;最后出现如下代码</p><pre><code>🎉  Successfully created project test.👉  Get started with the following commands: $ cd test $ npm run serve</code></pre><p>&emsp;说明已经初始化成功，Vue-CLI3已经将项目搭建完成。</p><h3 id="2、进入你的项目文件夹"><a href="#2、进入你的项目文件夹" class="headerlink" title="2、进入你的项目文件夹"></a>2、进入你的项目文件夹</h3><p>&emsp;项目搭建好了，现在就可以进入项目文件夹。</p><p>输入以下命令，回车进入新建的项目。</p><blockquote><p><font color="red">cd</font> test</p></blockquote><h3 id="3、通过npm在项目里安装依赖"><a href="#3、通过npm在项目里安装依赖" class="headerlink" title="3、通过npm在项目里安装依赖"></a>3、通过npm在项目里安装依赖</h3><p>&emsp;因为各个模板之间都是相互依赖的，所以现在我们要安装依赖。</p><p>输入以下命令，回车安装依赖</p><blockquote><p><font color="red">npm install</font></p></blockquote><h3 id="4、启动项目"><a href="#4、启动项目" class="headerlink" title="4、启动项目"></a>4、启动项目</h3><p>&emsp;一切环境依赖安装准备就绪，我们来测试一下自己新建的vue项目的运行情况。</p><p>输入以下命令，回车启动项目</p><blockquote><p><font color="red">npm run serve</font></p></blockquote><p>结果会弹出一个浏览器访问地址默认为<code>localhost:8080</code>，如下：</p><pre><code> App running at:  - Local:   http://localhost:8080/  - Network: http://***.***.***.***:8080/  Note that the development build is not optimized.  To create a production build, run npm run build.</code></pre><p>&emsp;在浏览器中打开<code>http://localhost:8080</code>或者Network的地址，就能看到你的项目了<br><img src="/source/images/vue-cli-img/vue-cli3.png" alt></p><h2 id="vue-ui-图形化界面创建项目"><a href="#vue-ui-图形化界面创建项目" class="headerlink" title="vue ui 图形化界面创建项目"></a>vue ui 图形化界面创建项目</h2><p>&emsp;Vue-CLI3.x给我们同样提供了图形化界面,用来管理和创建项目</p><p>命令行输入命令</p><blockquote><p>vue ui</p></blockquote><p>然后会自动打浏览器页面：<br><img src="/source/images/vue-cli-img/vue-ui.png" alt></p><p>&emsp;然后就可以按照也页面按钮一步步常见项目了。</p><h2 id="项目打包"><a href="#项目打包" class="headerlink" title="项目打包"></a>项目打包</h2><p>&emsp;在开发完项目之后，就应该打包上线了。 Vue-CLI3 也提供了打包的命令，在项目根目录下执行：</p><blockquote><p>npm run build</p></blockquote><p>&emsp;执行完之后，可以看到在项目根目录下多出了一个 <code>dist</code>目录，该目录下就是打包好的所有静态资源，直接部署到静态资源服务器就好了。</p><p>&emsp;实际上，在部署的时候要注意，假设静态服务器的域名是 <code>http://static.baidu.com</code> ，那么对应到访问 <code>&lt;项目根目录&gt;/dist/index.html</code> 的 URL 一定要是 <code>http://static.baidu.com/index.html</code> ，其他的静态资源以此类推。</p><h1 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h1><p>&emsp;至此，我们的Vue3.0项目就搭建完成了。万里长征第一步，加油！</p><p>&emsp;如需进一步了解关于vue项目结构的基础知识，请戳<a href="https://github.com/danygitgit/document-library/blob/master/JavaScript-library/Vue/Vue%E5%B0%8F%E7%99%BD%E8%AF%BE%EF%BC%88%E5%9B%9B%EF%BC%89%E2%80%94%E2%80%94%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84%E8%A7%A3%E6%9E%90%EF%BC%88Vue3.x%EF%BC%89.md" target="_blank" rel="noopener">Vue小白课（四）——项目结构解析（Vue4.x）</a></p><p>&emsp;路漫漫其修远兮，与诸君共勉。</p><p><strong>后记：Hello 小伙伴们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更丰富文章的动力！<a href="https://github.com/danygitgit/document-library/blob/master/JavaScript-library/Vue/Vue%E5%B0%8F%E7%99%BD%E8%AF%BE%EF%BC%88%E4%B8%89%EF%BC%89%E2%80%94%E2%80%94CLI%E6%90%AD%E5%BB%BA%E9%A1%B9%E7%9B%AE%EF%BC%88Vue3.x%EF%BC%89.md" target="_blank" rel="noopener">GitHub 地址</a></strong></p><blockquote><p><a rel="noopener" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank"><img alt="知识共享许可协议" style="border-width:0" src="https://user-gold-cdn.xitu.io/2018/12/23/167d9537f3e29c99?w=88&h=31&f=png&s=1888"></a><br><a xmlns:dct="http://purl.org/dc/terms/" property="dct:title"><strong>db</strong> 的文档库</a> 由 <a xmlns:cc="http://creativecommons.org/ns#" href="db" property="cc:attributionName" rel="cc:attributionURL">db</a> 采用 <a rel="noopener" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议</a>进行许可。<br>基于<a xmlns:dct="http://purl.org/dc/terms/" href="https://github.com/danygitgit" rel="noopener" target="_blank">https://github.com/danygitgit</a>上的作品创作。<br>本许可协议授权之外的使用权限可以从 <a xmlns:cc="http://creativecommons.org/ns#" href="https://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel="noopener" target="_blank">https://creativecommons.org/licenses/by-nc-sa/2.5/cn/</a> 处获得。</p></blockquote>]]></content>
      
      
      <categories>
          
          <category> vue </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Vue </tag>
            
            <tag> VueCLI </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>Vue小白课（二）——项目结构解析（Vue2.x）</title>
      <link href="/2019/07/22/vue-xiao-bai-ke-er-xiang-mu-jie-gou-jie-xi-vue2.x/"/>
      <url>/2019/07/22/vue-xiao-bai-ke-er-xiang-mu-jie-gou-jie-xi-vue2.x/</url>
      
        <content type="html"><![CDATA[<p>@<a href="https://github.com/danygitgit/document-library/blob/master/JavaScript-library/Vue/Vue%E5%B0%8F%E7%99%BD%E8%AF%BE%EF%BC%88%E4%BA%8C%EF%BC%89%E2%80%94%E2%80%94%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84%E8%A7%A3%E6%9E%90%EF%BC%88Vue2.x%EF%BC%89.md" target="_blank" rel="noopener">Vue项目结构解析</a></p><blockquote><p>create by <strong>db</strong> on <strong>2019-1-10 16:28:10</strong><br>Recently revised in <strong>2019-1-15 11:46:47</strong></p></blockquote><p>&emsp;<strong>Hello 小伙伴们，如果觉得本文还不错，麻烦点个赞或者给个 star，你们的赞和 star 是我前进的动力！<a href="https://github.com/danygitgit/document-library/blob/master/JavaScript-library/Vue/Vue%E5%B0%8F%E7%99%BD%E8%AF%BE%EF%BC%88%E4%BA%8C%EF%BC%89%E2%80%94%E2%80%94%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84%E8%A7%A3%E6%9E%90%EF%BC%88Vue2.x%EF%BC%89.md" target="_blank" rel="noopener">GitHub 地址</a></strong></p><p>&emsp;查阅网上诸多资料，并结合自己的学习经验，写下这篇Vue学习笔记，以记录自己的学习心得。现分享给大家，以供参考。</p><p>&emsp;作为一只前端菜鸟，这是我掘金分享的第五篇文章。如有不足，还请多多指教，谢谢大家。</p><h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>&emsp;在上一篇项目搭建文章中，我们已经下载安装了node环境以及vue-cli，并且已经成功构建了一个vue-cli项目——见<a href="https://github.com/danygitgit/document-library/blob/master/JavaScript-library/Vue/Vue%E5%B0%8F%E7%99%BD%E8%AF%BE%EF%BC%88%E4%B8%80%EF%BC%89%E2%80%94%E2%80%94CLI%E6%90%AD%E5%BB%BA%E9%A1%B9%E7%9B%AE%EF%BC%88Vue2.x%EF%BC%89.md" target="_blank" rel="noopener">Vue小白课（一）——CLI搭建项目（Vue2.x）</a>。那么接下来，我们来梳理一下vue-cli项目的结构。</p><p>&emsp;参考文献：</p><ul><li><a href="https://segmentfault.com/a/1190000009151589" target="_blank" rel="noopener">vue-cli入门（二）——项目结构 | 思否-Reachel</a></li><li><a href="https://segmentfault.com/a/1190000010659925" target="_blank" rel="noopener">Vue-cli创建vue项目以及配置文件梳理 | 思否-AshleyLv</a></li><li><a href="https://www.toutiao.com/i6378822382726939138/?group_id=6378816803061907713&group_flags=0" target="_blank" rel="noopener">Vue系列之WebPack与Eslint | 充电实践 </a></li></ul><h1 id="正文"><a href="#正文" class="headerlink" title="正文"></a>正文</h1><h2 id="Vue项目结构一览"><a href="#Vue项目结构一览" class="headerlink" title="Vue项目结构一览"></a>Vue项目结构一览</h2><pre><code>├── build --------------------------------- 项目构建(webpack)相关配置文件，配置参数什么的，一般不用动 │   ├── build.js --------------------------webpack打包配置文件│   ├── check-versions.js ------------------------------ 检查npm,nodejs版本│   ├── dev-client.js ---------------------------------- 设置环境│   ├── dev-server.js ---------------------------------- 创建express服务器，配置中间件，启动可热重载的服务器，用于开发项目│   ├── utils.js --------------------------------------- 配置资源路径，配置css加载器│   ├── vue-loader.conf.js ----------------------------- 配置css加载器等│   ├── webpack.base.conf.js --------------------------- webpack基本配置│   ├── webpack.dev.conf.js ---------------------------- 用于开发的webpack设置│   ├── webpack.prod.conf.js --------------------------- 用于打包的webpack设置├── config ---------------------------------- 配置目录，包括端口号等。我们初学可以使用默认的。│   ├── dev.env.js -------------------------- 开发环境变量│   ├── index.js ---------------------------- 项目配置文件│   ├── prod.env.js ------------------------- 生产环境变量│   ├── test.env.js ------------------------- 测试环境变量├── node_modules ---------------------------- npm 加载的项目依赖模块├── src ------------------------------------- 我们要开发的目录，基本上要做的事情都在这个目录里。│   ├── assets ------------------------------ 静态文件，放置一些图片，如logo等│   ├── components -------------------------- 组件目录，存放组件文件，可以不用。│   ├── main.js ----------------------------- 主js│   ├── App.vue ----------------------------- 项目入口组件，我们也可以直接将组件写这里，而不使用 components 目录。│   ├── router ------------------------------ 路由├── static ---------------------------- 静态资源目录，如图片、字体等。├── .babelrc--------------------------------- babel配置文件├── .editorconfig---------------------------- 编辑器配置├── .gitignore------------------------------- 配置git可忽略的文件├── index.html ------------------------------     首页入口文件，你可以添加一些 meta 信息或统计代码啥的。├── package.json ---------------------------- node配置文件，记载着一些命令和依赖还有简要的项目描述信息 ├── .README.md------------------------------- 项目的说明文档，markdown 格式。想怎么写怎么写，不会写就参照github上star多的项目，看人家怎么写的</code></pre><h2 id="Vue实现原理"><a href="#Vue实现原理" class="headerlink" title="Vue实现原理"></a>Vue实现原理</h2><p>&emsp;在webpack的配置文件里，设置了main.js是入口文件，我们的项目默认访问index.html，这个文件里面<code>&lt;div id=&quot;app&quot;&gt;&lt;/div&gt;</code>和App.vue组件里面的容器完美的重合了，也就是把组件挂载到了index页面，然后我们只需要去建设其他组件就好了，在App组件中我们也可以引入，注册，应用其他组件，可以通过路由将其他组件渲染在App组件，这样我们就只需要去关注每个组件的功能完善。</p><p>&emsp;就是说vue的默认页面是index.html，index中的<code>&lt;div id=&quot;app&quot;&gt;&lt;/div&gt;</code>挂载了App.vue这个大组件，然后所有的其他子组件（hello.vue等）都归属在App.vue这个主组件下。</p><h2 id="主要文件详解"><a href="#主要文件详解" class="headerlink" title="主要文件详解"></a>主要文件详解</h2><h3 id="src——-项目核心文件"><a href="#src——-项目核心文件" class="headerlink" title="src——[项目核心文件]"></a>src——[项目核心文件]</h3><p>&emsp;在vue-cli的项目中，其中src文件夹是必须要掌握的，因为基本上要做的事情都在这个目录里。</p><h4 id="index-html——-主页"><a href="#index-html——-主页" class="headerlink" title="index.html——[主页]"></a>index.html——[主页]</h4><p>&emsp;index.html如其他html一样，但一般只定义一个空的根节点，在main.js里面定义的实例将挂载在根节点下，内容都通过vue组件来填充</p><pre class=" language-html"><code class="language-html"><span class="token doctype">&lt;!DOCTYPE html></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">></span></span>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>vuedemo<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>      <span class="token comment" spellcheck="true">&lt;!-- 定义的vue实例将挂载在#app节点下 --></span>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>app<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span></code></pre><h4 id="App-vue——-根组件"><a href="#App-vue——-根组件" class="headerlink" title="App.vue——[根组件]"></a>App.vue——[根组件]</h4><p>&emsp;一个vue页面通常由三部分组成:模板(template)、js(script)、样式(style)</p><pre class=" language-html"><code class="language-html"><span class="token comment" spellcheck="true">&lt;!-- 模板 --></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">></span></span>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>app<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>./assets/logo.png<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-view</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-view</span><span class="token punctuation">></span></span>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span><span class="token comment" spellcheck="true">&lt;!-- script --></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>  name<span class="token punctuation">:</span> <span class="token string">'app'</span><span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span><span class="token comment" spellcheck="true">&lt;!-- 样式 --></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style language-css"><span class="token selector"><span class="token id">#app</span> </span><span class="token punctuation">{</span>  <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'Avenir'</span>, Helvetica, Arial, sans-serif<span class="token punctuation">;</span>  <span class="token property">-webkit-font-smoothing</span><span class="token punctuation">:</span> antialiased<span class="token punctuation">;</span>  <span class="token property">-moz-osx-font-smoothing</span><span class="token punctuation">:</span> grayscale<span class="token punctuation">;</span>  <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#2c3e50</span><span class="token punctuation">;</span>  <span class="token property">margin-top</span><span class="token punctuation">:</span> <span class="token number">60</span>px<span class="token punctuation">;</span><span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span></code></pre><p>【template】</p><p>&emsp;其中模板只能包含一个父节点，也就是说顶层的div只能有一个（例如上面代码，父节点为#app的div，其没有兄弟节点）</p><p>&emsp;<code>&lt;router-view&gt;&lt;/router-view&gt;</code>是子路由视图，后面的路由页面都显示在此处</p><p>&emsp;打一个比喻吧,<code>&lt;router-view&gt;</code>类似于一个插槽，跳转某个路由时，该路由下的页面就插在这个插槽中渲染显示</p><p>【script】</p><p>&emsp;vue通常用es6来写，用<code>export default</code>导出，其下面可以包含数据data，生命周期(mounted等)，方法(methods)等，具体语法请看vue.js文档。</p><p>【style】</p><p>&emsp;样式通过style标签<style></style>包裹，默认是影响全局的，如需定义作用域只在该组件下起作用，需在标签上加scoped.</p><p><code>&lt;style scoped&gt;&lt;/style&gt;</code></p><p>&emsp;如要引入外部css文件，首先需给项目安装css-loader依赖包，打开cmd，进入项目目录，输入<code>npm install css-loader</code>,回车。</p><p>&emsp;安装完成后，就可以在style标签下import所需的css文件，例如：</p><pre class=" language-css"><code class="language-css">&lt;style>    import <span class="token string">'./assets/css/public.css'</span>&lt;/style></code></pre><h4 id="main-js——-入口文件"><a href="#main-js——-入口文件" class="headerlink" title="main.js——[入口文件]"></a>main.js——[入口文件]</h4><p>&emsp;main.js主要是引入vue框架，根组件及路由设置，并且定义vue实例，下面的<br><code>components:{App}</code>就是引入的根组件App.vue</p><p>&emsp;后期还可以引入插件，当然首先得安装插件。</p><pre class=" language-javascript"><code class="language-javascript"><span class="token comment" spellcheck="true">/*引入vue框架*/</span><span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token comment" spellcheck="true">/*引入根组件*/</span><span class="token keyword">import</span> App <span class="token keyword">from</span> <span class="token string">'./App'</span><span class="token comment" spellcheck="true">/*引入路由设置*/</span><span class="token keyword">import</span> router <span class="token keyword">from</span> <span class="token string">'./router'</span><span class="token comment" spellcheck="true">/*关闭生产模式下给出的提示*/</span> Vue<span class="token punctuation">.</span>config<span class="token punctuation">.</span>productionTip <span class="token operator">=</span> <span class="token boolean">false</span><span class="token comment" spellcheck="true">/*定义实例*/</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>  el<span class="token punctuation">:</span> <span class="token string">'#app'</span><span class="token punctuation">,</span>  router<span class="token punctuation">,</span>  template<span class="token punctuation">:</span> <span class="token string">'&lt;App/>'</span><span class="token punctuation">,</span>  components<span class="token punctuation">:</span> <span class="token punctuation">{</span> App <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre><h4 id="router——-路由配置"><a href="#router——-路由配置" class="headerlink" title="router——[路由配置]"></a>router——[路由配置]</h4><p>&emsp;vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。</p><p>&emsp;router文件夹下，有一个index.js，即为路由配置文件。</p><pre class=" language-javascript"><code class="language-javascript"><span class="token comment" spellcheck="true">/*引入vue框架*/</span><span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token comment" spellcheck="true">/*引入路由依赖*/</span><span class="token keyword">import</span> Router <span class="token keyword">from</span> <span class="token string">'vue-router'</span><span class="token comment" spellcheck="true">/*引入页面组件，命名为Hello*/</span> <span class="token keyword">import</span> Hello <span class="token keyword">from</span> <span class="token string">'@/components/Hello'</span><span class="token comment" spellcheck="true">/*使用路由依赖*/</span> Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Router<span class="token punctuation">)</span><span class="token comment" spellcheck="true">/*定义路由*/</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">new</span> <span class="token class-name">Router</span><span class="token punctuation">(</span><span class="token punctuation">{</span>  routes<span class="token punctuation">:</span> <span class="token punctuation">[</span>    <span class="token punctuation">{</span>      path<span class="token punctuation">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span>      name<span class="token punctuation">:</span> <span class="token string">'Hello'</span><span class="token punctuation">,</span>      component<span class="token punctuation">:</span> Hello    <span class="token punctuation">}</span>  <span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre><p>&emsp;这里定义了路径为’/‘的路由，该路由对应的页面是Hello组件，所以当我们在浏览器url访问<a href="http://localhost:8080/#/时就渲染的Hello组件" target="_blank" rel="noopener">http://localhost:8080/#/时就渲染的Hello组件</a></p><p>&emsp;类似的，我们可以设置多个路由，‘/index’,’/list’之类的，当然首先得引入该组件，再为该组件设置路由。</p><h3 id="其他配置文件"><a href="#其他配置文件" class="headerlink" title="其他配置文件"></a>其他配置文件</h3><p>&emsp;主要包括webpack的配置，项目配置，项目依赖等等。</p><p>详情可参考以下文章：</p><ul><li><a href="https://segmentfault.com/a/1190000010659925" target="_blank" rel="noopener">Vue-cli创建vue项目以及配置文件梳理 | 思否-AshleyLv</a></li></ul><h3 id="vue-模板文件"><a href="#vue-模板文件" class="headerlink" title="vue 模板文件"></a>vue 模板文件</h3><p>这是我自己做的一个vue模板文件，符合Eslint规则</p><pre class=" language-html"><code class="language-html"><span class="token comment" spellcheck="true">&lt;!--  --></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">></span></span>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript"><span class="token comment" spellcheck="true">// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）</span><span class="token comment" spellcheck="true">// 例如：import 《组件名称》 from '《组件路径》'</span><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>  <span class="token comment" spellcheck="true">// import引入的组件需要注入到对象中才能使用</span>  components<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>    <span class="token comment" spellcheck="true">// 这里存放数据</span>    <span class="token keyword">return</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" spellcheck="true">// 监听属性 类似于data概念</span>  computed<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>  <span class="token comment" spellcheck="true">// 监控data中的数据变化</span>  watch<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>  <span class="token comment" spellcheck="true">// 生命周期 - 创建完成（可以访问当前this实例）</span>  <span class="token function">created</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>  <span class="token comment" spellcheck="true">// 生命周期 - 挂载完成（可以访问DOM元素）</span>  <span class="token function">mounted</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>  <span class="token function">beforeCreate</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> <span class="token comment" spellcheck="true">// 生命周期 - 创建之前</span>  <span class="token function">beforeMount</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> <span class="token comment" spellcheck="true">// 生命周期 - 挂载之前</span>  <span class="token function">beforeUpdate</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> <span class="token comment" spellcheck="true">// 生命周期 - 更新之前</span>  <span class="token function">updated</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> <span class="token comment" spellcheck="true">// 生命周期 - 更新之后</span>  <span class="token function">beforeDestroy</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> <span class="token comment" spellcheck="true">// 生命周期 - 销毁之前</span>  <span class="token function">destroyed</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> <span class="token comment" spellcheck="true">// 生命周期 - 销毁完成</span>  <span class="token function">activated</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> <span class="token comment" spellcheck="true">// 如果页面有keep-alive缓存功能，这个函数会触发</span>  <span class="token comment" spellcheck="true">// 方法集合</span>  methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>  <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>less<span class="token punctuation">'</span></span> <span class="token attr-name">scoped</span><span class="token punctuation">></span></span><span class="token style language-css">//<span class="token atrule"><span class="token rule">@import</span> <span class="token url">url()</span><span class="token punctuation">;</span></span> 引入公共css类</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span></code></pre><h1 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h1><p>&emsp;vue-cli给创建vue项目提供了很大的便利。但是同时大量的第三方库的使用，会让打包后的js变的很大，所以还是要熟悉配置,熟悉第三方插件的使用，才可以开发更高效的开发web应用。这里把vue-cli的一些相关内容给自己做一个总结，便于以后查阅。也是希望对其他开发者有帮助。有不足之处请指正。</p><p>&emsp;路漫漫其修远兮，与诸君共勉。</p><p>&emsp;祝大家2019更上一层楼！</p><p><strong>后记：Hello 小伙伴们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更丰富文章的动力！<a href="https://github.com/danygitgit/document-library/blob/master/JavaScript-library/Vue/Vue%E5%B0%8F%E7%99%BD%E8%AF%BE%EF%BC%88%E4%BA%8C%EF%BC%89%E2%80%94%E2%80%94%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84%E8%A7%A3%E6%9E%90%EF%BC%88Vue2.x%EF%BC%89.md" target="_blank" rel="noopener">GitHub 地址</a></strong></p><blockquote><p><a rel="noopener" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank"><img alt="知识共享许可协议" style="border-width:0" src="https://user-gold-cdn.xitu.io/2018/12/23/167d9537f3e29c99?w=88&h=31&f=png&s=1888"></a><br><a xmlns:dct="http://purl.org/dc/terms/" property="dct:title"><strong>db</strong> 的文档库</a> 由 <a xmlns:cc="http://creativecommons.org/ns#" href="db" property="cc:attributionName" rel="cc:attributionURL">db</a> 采用 <a rel="noopener" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议</a>进行许可。<br>基于<a xmlns:dct="http://purl.org/dc/terms/" href="https://github.com/danygitgit" rel="noopener" target="_blank">https://github.com/danygitgit</a>上的作品创作。<br>本许可协议授权之外的使用权限可以从 <a xmlns:cc="http://creativecommons.org/ns#" href="https://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel="noopener" target="_blank">https://creativecommons.org/licenses/by-nc-sa/2.5/cn/</a> 处获得。</p></blockquote>]]></content>
      
      
      <categories>
          
          <category> vue </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Vue </tag>
            
            <tag> VueCLI </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>Vue小白课（一）——CLI搭建项目（Vue2.x）</title>
      <link href="/2019/07/21/vue-xiao-bai-ke-yi-cli-da-jian-xiang-mu-vue2.x/"/>
      <url>/2019/07/21/vue-xiao-bai-ke-yi-cli-da-jian-xiang-mu-vue2.x/</url>
      
        <content type="html"><![CDATA[<p>@<a href="https://github.com/danygitgit/document-library/blob/master/JavaScript-library/Vue/Vue-cli%E5%85%A5%E9%97%A8%EF%BC%88%E4%B8%80%EF%BC%89%E2%80%94%E2%80%94%E9%A1%B9%E7%9B%AE%E6%90%AD%E5%BB%BA.md" target="_blank" rel="noopener">vue-cli搭建项目</a></p><blockquote><p>create by <strong>db</strong> on <strong>2019-1-10 16:28:10</strong><br>Recently revised in <strong>2019-1-14 23:19:07</strong></p></blockquote><p>&emsp;<strong>Hello 小伙伴们，如果觉得本文还不错，麻烦点个赞或者给个 star，你们的赞和 star 是我前进的动力！<a href="https://github.com/danygitgit/document-library/blob/master/JavaScript-library/Vue/vue-cli%E6%90%AD%E5%BB%BA%E9%A1%B9%E7%9B%AE.md" target="_blank" rel="noopener">GitHub 地址</a></strong></p><p>&emsp;查阅网上诸多资料，并结合自己的学习经验，写下这篇Vue2.0学习笔记，以记录自己的学习心得。现分享给大家，以供参考。</p><p>&emsp;作为一只前端菜鸟，这是我掘金分享的第四篇文章。如有不足，还请多多指教，谢谢大家。</p><h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>&emsp;作为一款前端框架，Vue 因其易上手，轻量级，受到广泛的应用。</p><p>&emsp;vue-cli作为Vue的脚手架工具，集成了webpack环境及主要依赖，只需要几分钟的时间就可以运行起来一个项目。对于项目的搭建、打包、维护管理等都非常方便快捷。</p><p>&emsp;此笔记旨在帮助Vue小白了解并应用Vue2.0项目搭建过程，希望能帮得到大家。</p><p>&emsp;参考文献：</p><ul><li><a href="https://segmentfault.com/a/1190000015475645" target="_blank" rel="noopener">vue-cli搭建项目 | 思否-villelee</a></li><li><a href="https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000" target="_blank" rel="noopener">windows下搭建vue开发环境 | 充电实践 </a></li><li><a href="https://www.jianshu.com/p/0c6678671635" target="_blank" rel="noopener">十分钟上手-搭建vue开发环境（新手教程） | 简书-祈澈菇凉</a></li><li><a href="https://segmentfault.com/a/1190000009151389" target="_blank" rel="noopener">vue-cli入门（一）——项目搭建 | 思否-Reachel</a></li></ul><p>&emsp;另：个人以为，学习vue最好的途径还是<a href="https://cn.vuejs.org/" target="_blank" rel="noopener">官方文档</a></p><h1 id="正文"><a href="#正文" class="headerlink" title="正文"></a>正文</h1><h2 id="搭建Vue开发环境"><a href="#搭建Vue开发环境" class="headerlink" title="搭建Vue开发环境"></a>搭建Vue开发环境</h2><h3 id="1、安装node"><a href="#1、安装node" class="headerlink" title="1、安装node"></a>1、安装node</h3><p>&emsp;Vue项目通常通过webpack工具来构建，而webpack命令的执行是依赖node.js的环境的，所以首先要安装node.js。node.js的官方地址为：<code>https://nodejs.org/en/download/</code>，下载相应版本<br><img src="/source/images/vue-cli-img/node.png" alt></p><p>安装好node之后，以管理员身份打开cmd管理工具，，输入 <code>node -v</code>，回车，查看node版本号，出现版本号则说明安装成功。</p><blockquote><p>node -v</p></blockquote><h3 id="2、安装淘宝npm镜像"><a href="#2、安装淘宝npm镜像" class="headerlink" title="2、安装淘宝npm镜像"></a>2、安装淘宝npm镜像</h3><p>&emsp;由于npm是国外的，使用起来比较慢，我们这里使用淘宝的cnpm镜像来安装vue.</p><p>&emsp;淘宝的cnpm命令管理工具可以代替默认的npm管理工具。</p><p>输入以下命令，回车；</p><blockquote><p>npm install -g cnpm –registry=<a href="https://registry.npm.taobao.org" target="_blank" rel="noopener">https://registry.npm.taobao.org</a></p></blockquote><h3 id="3、安装全局vue-cli脚手架"><a href="#3、安装全局vue-cli脚手架" class="headerlink" title="3、安装全局vue-cli脚手架"></a>3、安装全局vue-cli脚手架</h3><p>&emsp;vue-cli是vue官方提供的一个命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。</p><p>&emsp;淘宝镜像安装成功之后，我们就可以安装全局vue-cli脚手架。</p><p>输入以下命令，回车；</p><blockquote><p>cnpm install –global vue-cli</p></blockquote><p>&emsp;验证是否安装成功，在命令行输入<code>vue -V</code>，出来vue的版本号，则说明安装成功；</p><h2 id="创建vue项目"><a href="#创建vue项目" class="headerlink" title="创建vue项目"></a>创建vue项目</h2><h3 id="1、通过vue-cli创建一个vue项目"><a href="#1、通过vue-cli创建一个vue项目" class="headerlink" title="1、通过vue-cli创建一个vue项目"></a>1、通过vue-cli创建一个vue项目</h3><p>&emsp;进入你需要创建在项目的文件夹，打开命令行。</p><p>输入以下命令，回车</p><blockquote><p><font color="red"> vue init webpack</font> test</p></blockquote><p>&emsp;这里test指的是项目名，该命令执行后会创建一个名为test的目录，也就是我们所搭建的项目。</p><p>接下来会要求你进行一些选项设置，其实就是初始化项目：</p><pre><code>? Project name (test)        // 项目名称，按Enter确定就好 ? Project name test? Project description (A Vue.js project)        // 项目描述，按Enter确定就好 ? Project description A Vue.js project? Author (villelee)        // 作者，按Enter确定就好 ? Author villelee? Vue build (Use arrow keys)        // 开始选项设置，按Enter确定就好 ? Vue build standalone? Install vue-router? (Y/n) Y        // 安装路由，需要的话可以选Y，不需要就选n? Install vue-router? Yes? Use ESLint to lint your code? (Y/n) Y        // 是否使用ESlint统一代码风格，编码规范，建议选Y? Use ESLint to lint your code? Yes? Pick an ESLint preset (Use arrow keys)&gt; Standard (https://github.com/standard/standard)? Pick an ESLint preset Airbnb? Set up unit tests (Y/n) n        // 是否安装单元测试? Set up unit tests No? Setup e2e tests with Nightwatch? (Y/n) n        // 是否安装e2e测试编码规范? Setup e2e tests with Nightwatch? No? Should we run `npm install` for you after the project has been created? (recom? Should we run `npm install` for you after the project has been created? (recommended) npm   vue-cli · Generated &quot;test&quot;.</code></pre><p>&emsp;最后出现如下代码</p><pre><code>To get started:  cd test  npm run dev</code></pre><p>&emsp;说明已经初始化成功，vue-cli已经将项目搭建完成。</p><h3 id="2、进入你的项目文件夹"><a href="#2、进入你的项目文件夹" class="headerlink" title="2、进入你的项目文件夹"></a>2、进入你的项目文件夹</h3><p>&emsp;项目搭建好了，现在就可以进入项目文件夹。</p><p>输入以下命令，回车进入新建的项目。</p><blockquote><p><font color="red">cd</font> test</p></blockquote><h3 id="3、通过cnpm在项目里安装依赖"><a href="#3、通过cnpm在项目里安装依赖" class="headerlink" title="3、通过cnpm在项目里安装依赖"></a>3、通过cnpm在项目里安装依赖</h3><p>&emsp;因为各个模板之间都是相互依赖的，所以现在我们要安装依赖。</p><p>输入以下命令，回车安装依赖</p><blockquote><p><font color="red">cnpm install</font></p></blockquote><h3 id="4、启动项目"><a href="#4、启动项目" class="headerlink" title="4、启动项目"></a>4、启动项目</h3><p>&emsp;一切环境依赖安装准备就绪，我们来测试一下自己新建的vue项目的运行情况。</p><p>输入以下命令，回车启动项目</p><blockquote><p><font color="red">npm run dev</font></p></blockquote><p>结果会弹出一个浏览器访问地址默认为localhost:8080，如下：</p><pre><code>$ npm run dev&gt; test@1.0.0 dev D:\ptest\test&gt; webpack-dev-server --inline --progress --config build/webpack.dev.conf.js 95% emitting DONE  Compiled successfully in 5547ms11:59:13 I  Your application is running here: http://localhost:8080</code></pre><p>&emsp;在浏览器中打开<code>http://localhost:8080</code>，就能看到你的项目了<br><img src="/source/images/vue-cli-img/vue-cli.png" alt></p><h3 id="项目打包"><a href="#项目打包" class="headerlink" title="项目打包"></a>项目打包</h3><p>运行<code>npm run build</code></p><p>运行后打包成功会在项目中生成dist文件夹</p><p>部署服务器是把文件夹中的文件丢上服务器即可</p><h1 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h1><p>&emsp;至此，我们的Vue项目就搭建完成了。万里长征第一步，加油！</p><p>&emsp;如需进一步了解关于vue项目结构的基础知识，请戳<a href="https://github.com/danygitgit/document-library/blob/master/JavaScript-library/Vue/Vue%E5%B0%8F%E7%99%BD%E8%AF%BE%EF%BC%88%E4%BA%8C%EF%BC%89%E2%80%94%E2%80%94%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84%E8%A7%A3%E6%9E%90%EF%BC%88Vue2.x%EF%BC%89.md" target="_blank" rel="noopener">Vue小白课（二）——项目结构解析（Vue2.x）</a></p><p>&emsp;路漫漫其修远兮，与诸君共勉。</p><p>&emsp;祝大家2019更上一层楼！</p><p><strong>后记：Hello 小伙伴们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更丰富文章的动力！<a href="https://github.com/danygitgit/document-library/blob/master/JavaScript-library/Vue/Vue-cli%E5%85%A5%E9%97%A8%EF%BC%88%E4%B8%80%EF%BC%89%E2%80%94%E2%80%94%E9%A1%B9%E7%9B%AE%E6%90%AD%E5%BB%BA.md" target="_blank" rel="noopener">GitHub 地址</a></strong></p><blockquote><p><a rel="noopener" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank"><img alt="知识共享许可协议" style="border-width:0" src="https://user-gold-cdn.xitu.io/2018/12/23/167d9537f3e29c99?w=88&h=31&f=png&s=1888"></a><br><a xmlns:dct="http://purl.org/dc/terms/" property="dct:title"><strong>db</strong> 的文档库</a> 由 <a xmlns:cc="http://creativecommons.org/ns#" href="db" property="cc:attributionName" rel="cc:attributionURL">db</a> 采用 <a rel="noopener" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议</a>进行许可。<br>基于<a xmlns:dct="http://purl.org/dc/terms/" href="https://github.com/danygitgit" rel="noopener" target="_blank">https://github.com/danygitgit</a>上的作品创作。<br>本许可协议授权之外的使用权限可以从 <a xmlns:cc="http://creativecommons.org/ns#" href="https://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel="noopener" target="_blank">https://creativecommons.org/licenses/by-nc-sa/2.5/cn/</a> 处获得。</p></blockquote>]]></content>
      
      
      <categories>
          
          <category> vue </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Vue </tag>
            
            <tag> VueCLI </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>Git踩坑记</title>
      <link href="/2019/07/19/git-cai-keng-ji-chi-xu-geng-xin/"/>
      <url>/2019/07/19/git-cai-keng-ji-chi-xu-geng-xin/</url>
      
        <content type="html"><![CDATA[<p>@<a href="https://github.com/danygitgit/document-library/blob/master/other-library/Git%E7%AC%94%E8%AE%B0/Git%E8%B8%A9%E5%9D%91%E8%AE%B0%EF%BC%88%E6%8C%81%E7%BB%AD%E6%9B%B4%E6%96%B0%EF%BC%89.md" target="_blank" rel="noopener">Git踩坑记</a></p><blockquote><p>create by <strong>db</strong> on <strong>2018-12-25 12:10:36</strong><br>Recently revised in <strong>2019-1-8 09:33:45</strong></p></blockquote><p>&emsp;<strong>Hello 小伙伴们，如果觉得本文还不错，麻烦点个赞或者给个 star，你们的赞和 star 是我前进的动力！<a href="https://github.com/danygitgit/document-library/blob/master/other-library/Git%E7%AC%94%E8%AE%B0/Git%E5%91%BD%E4%BB%A4%E5%85%A5%E9%97%A8.md" target="_blank" rel="noopener">GitHub 地址</a></strong></p><h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>&emsp;成长之路从不是一帆风顺的，作为Git新手，难免会遇到一些小坑。但只要有耐心，没有什么是解决不了的。</p><p>&emsp;在此，记录一下自己遇到的一些小问题以及解决方案。其中有好多方法都是在大神博客汇总的，以免自己以后找不到。在此，向那些大神致以诚挚的谢意。</p><p>&emsp;作为一只前端菜鸟，这是我掘金分享的第三篇文章。如有不足，还请多多指教，谢谢大家。</p><h1 id="正文"><a href="#正文" class="headerlink" title="正文"></a>正文</h1><h2 id="1、使用git在本地创建一个项目的过程"><a href="#1、使用git在本地创建一个项目的过程" class="headerlink" title="1、使用git在本地创建一个项目的过程"></a>1、使用git在本地创建一个项目的过程</h2><ol><li><code>$ makdir ~/hello-world</code> //创建一个项目目录hello-world</li><li><code>$ cd ~/hello-world</code> //进入这个项目目录</li><li><code>$ git init</code> //初始化，创建版本库 </li><li><code>$ touch README</code> //创建README文件</li><li><code>$ git add README</code> //将README文件添加到暂存区</li><li><code>$ git commit -m &#39;first commit&#39;</code> //提交更新到仓库，并注释信息“first commit”</li><li><code>$ git remote add origin git@github.com:dedsf/hello-world.git</code> //连接远程github项目  </li><li><code>$ git push -u origin master</code>  //将本地项目更新到github项目上去</li></ol><h2 id="2、多人多分支协作项目中的大体流程"><a href="#2、多人多分支协作项目中的大体流程" class="headerlink" title="2、多人多分支协作项目中的大体流程"></a>2、多人多分支协作项目中的大体流程</h2><h3 id="1、下载远程仓库代码至本地修改（多人协作）"><a href="#1、下载远程仓库代码至本地修改（多人协作）" class="headerlink" title="1、下载远程仓库代码至本地修改（多人协作）"></a>1、下载远程仓库代码至本地修改（多人协作）</h3><ol><li><code>git clone -b [分支名] [仓库位置]</code> //下载远程仓库代码至本地</li><li><code>git checkout [分支名]</code>  //切换到所需分支</li><li><code>git checkout -b [个人本地分支名]</code> //创建并切换到个人本地分支</li></ol><ul><li>注：更改代码的时候，在个人本地分支进行更改，需上传时再更新并合并</li></ul><h3 id="2、项目中代码上传（多人协作）"><a href="#2、项目中代码上传（多人协作）" class="headerlink" title="2、项目中代码上传（多人协作）"></a>2、项目中代码上传（多人协作）</h3><ol><li><p><code>git add .</code>  //添加代码至暂存区</p></li><li><p><code>git commit -m &quot;注释&quot;</code> //提交更新至仓库</p></li><li><p><code>git checkout [分支名]</code>  //切换到所需分支</p></li><li><p><code>git merge [个人本地分支名]</code> //合并个人本地分支</p></li><li><p><code>git pull origin [分支名]</code> //拉去远程仓库代码刷新分支</p></li><li><p><code>git push origin [分支名]</code> // 上传本地分支至远程仓库</p></li><li><p><code>git branch -d [个人本地分支名]</code> //删除个人本地分支</p><ul><li>注：若5冲突，解决并重复1~7</li></ul></li></ol><h2 id="3、ssh链接不上GitHub"><a href="#3、ssh链接不上GitHub" class="headerlink" title="3、ssh链接不上GitHub"></a>3、ssh链接不上GitHub</h2><p>&emsp;如果输入<code>$ ssh -T git@github.com</code>，出现错误提示：<code>Permission denied (publickey)</code>，因为新生成的key不能加入ssh就会导致连接不上github。</p><ul><li>解决办法如下：</li></ul><ol><li><p>先输入<code>$ ssh-agent</code>，再输入<code>$ ssh-add ~/.ssh/id_key</code>，这样就可以了。</p></li><li><p>如果还是不行的话，输入<code>ssh-add ~/.ssh/id_key</code> 命令后出现报错<code>Could not open a connection to your authentication agent</code>.解决方法是key用Git Gui的ssh工具生成，这样生成的时候key就直接保存在ssh中了，不需要再ssh-add命令加入了，其它的user，token等配置都用命令行来做。</p></li><li><p>最好检查一下在你复制id_rsa.pub文件的内容时有没有产生多余的空格或空行，有些编辑器会帮你添加这些的。</p></li></ol><h2 id="4、提交错误"><a href="#4、提交错误" class="headerlink" title="4、提交错误"></a>4、提交错误</h2><p>&emsp;如果输入<code>$ git push origin master</code>，提示出错信息：<code>error:failed to push som refs to .......</code></p><ul><li>解决办法如下：</li></ul><ol><li>先输入<code>$ git pull origin master</code> //先把远程服务器github上面的文件拉下来</li><li>再输入<code>$ git push origin master</code></li></ol><h2 id="5、删除分支"><a href="#5、删除分支" class="headerlink" title="5、删除分支"></a>5、删除分支</h2><p>删除分支的时候一定要切换到其他分支，再执行</p><ol><li><code>git branch -D &lt;barnchName&gt;</code> //切换分支</li><li><code>git branch -d [branch-name]</code>  //删除分支</li></ol><h2 id="6、-重命名文件件或文件夹，并将此更改上传"><a href="#6、-重命名文件件或文件夹，并将此更改上传" class="headerlink" title="6、 重命名文件件或文件夹，并将此更改上传"></a>6、 重命名文件件或文件夹，并将此更改上传</h2><ol><li><ul><li><code>git mv -f [oldfolder] [newfolder]</code>  //更改文件夹名称</li><li><code>git mv [foldername tempname] &amp;&amp; git mv [tempname folderName]</code>  //<br>在大小写不敏感的系统中，如windows，重命名文件的大小写,使用临时文件名</li><li>更改文件名称，需带路径或进入该文件所在文件夹</li></ul></li><li><code>git add -u [newfolder]</code> //-u选项会只更新已经追踪的文件和文件夹</li><li><code>git commit -m &quot;changed the foldername whaddup&quot;</code> //提交更改</li></ol><h2 id="7、删除文件夹，并将此更改上传"><a href="#7、删除文件夹，并将此更改上传" class="headerlink" title="7、删除文件夹，并将此更改上传"></a>7、删除文件夹，并将此更改上传</h2><ol><li><code>git rm -r --cached [folderName]</code> </li><li><code>git commit -m &#39;删除了folderName&#39;</code>  </li><li><code>git push -u origin [分支名]</code>  </li></ol><h2 id="8、git-add-u与-A-三者的区别"><a href="#8、git-add-u与-A-三者的区别" class="headerlink" title="8、git add -u与-A .三者的区别"></a>8、git add -u与-A .三者的区别</h2><ul><li><p>添加当前目录下的所有存在更改文件到暂存区</p></li><li><p>（包括提交新文件(new)和被修改(modified)文件，不包括被删除(deleted)文件）</p><blockquote><p><font color="red"> $ git add .</font></p></blockquote></li><li><p>添加已经被add的文件且存在更改的文件（Git根路径以下所有文件）到暂存区</p></li><li><p>（提交被修改(modified)和被删除(deleted)文件，不包括新文件(new)）</p><blockquote><p>$ git add -u</p></blockquote></li><li><p>添加所有变化（Git根路径以下所有文件）到暂存区</p></li><li><p>（包括提交新文件(new)、被修改(modified)文件以及被删除(deleted)文件）</p><blockquote><p><font color="red"> $ git add –all</font></p></blockquote></li></ul><blockquote><p><font color="red"> $ git add -A</font> // 简写</p></blockquote><h2 id="9、git回退版本并提交"><a href="#9、git回退版本并提交" class="headerlink" title="9、git回退版本并提交"></a>9、git回退版本并提交</h2><ol><li>直接找到要回退的版本号（这里是：83ff2785），reset之后，强行推送到服务器端</li></ol><blockquote><p>git reset –hard 83ff2785</p></blockquote><blockquote><p>git push –force</p></blockquote><ol start="2"><li>此时如果有人获取了更新的版本，可能拉去不下来，执行以下操作：</li></ol><blockquote><p>git fetch –all</p></blockquote><blockquote><p>git reset –hard origin/branchname</p></blockquote><p>&emsp;&emsp;branchname就是分支的名称，这时候就和服务器端一致了。</p><h2 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h2><ul><li>勇于尝试，善于总结。开启你的Git踩坑之旅吧！</li></ul><h1 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h1><p>&emsp;&emsp;路漫漫其修远兮，希望Git及GitHub可以帮我们记录每一个脚印，每一步成长。与诸君共勉。</p><p>&emsp;祝大家2019更上一层楼！</p><p><strong>后记：Hello 小伙伴们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更丰富文章的动力！<a href="https://github.com/danygitgit/document-library/blob/master/other-library/Git%E7%AC%94%E8%AE%B0/Git%E5%91%BD%E4%BB%A4%E5%85%A5%E9%97%A8.md" target="_blank" rel="noopener">GitHub 地址</a></strong></p><blockquote><p><a rel="noopener" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank"><img alt="知识共享许可协议" style="border-width:0" src="https://user-gold-cdn.xitu.io/2018/12/23/167d9537f3e29c99?w=88&h=31&f=png&s=1888"></a><br><a xmlns:dct="http://purl.org/dc/terms/" property="dct:title"><strong>db</strong> 的文档库</a> 由 <a xmlns:cc="http://creativecommons.org/ns#" href="db" property="cc:attributionName" rel="cc:attributionURL">db</a> 采用 <a rel="noopener" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议</a>进行许可。<br>基于<a xmlns:dct="http://purl.org/dc/terms/" href="https://github.com/danygitgit" rel="noopener" target="_blank">https://github.com/danygitgit</a>上的作品创作。<br>本许可协议授权之外的使用权限可以从 <a xmlns:cc="http://creativecommons.org/ns#" href="https://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel="noopener" target="_blank">https://creativecommons.org/licenses/by-nc-sa/2.5/cn/</a> 处获得。</p></blockquote>]]></content>
      
      
      <categories>
          
          <category> Git </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Git </tag>
            
            <tag> GitHub </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>Git笔记</title>
      <link href="/2019/07/11/git-ming-ling-ru-men/"/>
      <url>/2019/07/11/git-ming-ling-ru-men/</url>
      
        <content type="html"><![CDATA[<p>@<a href="https://github.com/danygitgit/document-library/blob/master/other-library/Git%E7%AC%94%E8%AE%B0/Git%E5%91%BD%E4%BB%A4%E5%85%A5%E9%97%A8.md" target="_blank" rel="noopener">Git笔记</a></p><blockquote><p>create by <strong>db</strong> on <strong>2018-12-25 12:10:36</strong><br>Recently revised in <strong>2019-1-4 15:08:40</strong></p></blockquote><p>&emsp;<strong>Hello 小伙伴们，如果觉得本文还不错，麻烦点个赞或者给个 star，你们的赞和 star 是我前进的动力！<a href="https://github.com/danygitgit/document-library/blob/master/other-library/Git%E7%AC%94%E8%AE%B0/Git%E5%91%BD%E4%BB%A4%E5%85%A5%E9%97%A8.md" target="_blank" rel="noopener">GitHub 地址</a></strong></p><p>&emsp;查阅网上诸多资料，并结合自己的学习经验，写下这篇Git学习笔记，以记录自己的学习心得。现分享给大家，以供参考。</p><p>&emsp;作为一只前端菜鸟，这是我掘金分享的第一篇文章，并希望以此开启自己的2019。如有不足，还请多多指教，谢谢大家。</p><h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>&emsp;参考文献：</p><ul><li><a href="https://blog.csdn.net/damienzhong/article/details/78572043" target="_blank" rel="noopener">Git版本控制管理教程 | CSDN-呆萌钟</a></li><li><a href="https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000" target="_blank" rel="noopener">Git教程 | 廖雪峰的官方网站-廖雪峰 </a></li><li><a href="http://www.cnblogs.com/chenwolong/p/GIT.html" target="_blank" rel="noopener">GIT 常用命令 | 博客园-天才卧龙</a></li></ul><h2 id="版本控制"><a href="#版本控制" class="headerlink" title="版本控制"></a>版本控制</h2><p>&emsp;数据是短暂的，且容易丢失。特别是作为开发人员的我们，需要频繁的对项目代码进行更新，容易产生错误的变更或者是项目文件的丢失。因此，我们需要在整个工作的过程中不断的备份和存档我们的项目文件。</p><p>&emsp;在当下的项目开发环境下，一个项目往往是有多个开发者共同开发维护的，那么意味着他们需要操作同一项目文件，我们需要对文本和项目代码的变更进行记录管理，这些变更就构成了一个版本库，对版本库的管理就是版本控制。</p><p>&emsp;一个可以管理或追踪软件代码的工具通常称为版本控制系统（VCS）。现在流行的版本控制工具很多，当然，我们接下来要说的就是称的上VCS界一哥的Git，它是一款功能强大、灵活且低开销的VCS，它可以让协同开发成为一种乐趣。</p><h2 id="Git的诞生"><a href="#Git的诞生" class="headerlink" title="Git的诞生"></a>Git的诞生</h2><p>&emsp;其实，在Git诞生之前市面上已经有非常多的VCS了，比如当时VCS界的老大哥：SVN（现在在市面上也还有不小的份额）。那为什么还要创造Git这个新工具呢？</p><p>&emsp;这当然得从他的创始人Linus Torvalds说起 ，一个在技术界被千万人顶礼膜拜的男人！为了方便管理Linux内核的开发工作，一个可靠的值得信赖的VCS是不可或缺的，但是，Linus一直痛恨的CVS及SVN都是集中式的版本控制系统，而Git是分布式版本控制系统，集中式和分布式版本控制系统有什么区别呢？</p><h2 id="集中式vs分布式"><a href="#集中式vs分布式" class="headerlink" title="集中式vs分布式"></a>集中式vs分布式</h2><p>&emsp;先说集中式版本控制系统，版本库是集中存放在中央服务器的，而干活的时候，用的都是自己的电脑，所以要先从中央服务器取得最新的版本，然后开始干活，干完活了，再把自己的活推送给中央服务器。中央服务器就好比是一个图书馆，你要改一本书，必须先从图书馆借出来，然后回到家自己改，改完了，再放回图书馆。</p><p>&emsp;集中式版本控制系统最大的毛病就是必须联网才能工作，如果在局域网内还好，带宽够大，速度够快，可如果在互联网上，遇到网速慢的话，可能提交一个10M的文件就需要5分钟，这还不得把人给憋死啊。</p><p>&emsp;那分布式版本控制系统与集中式版本控制系统有何不同呢？首先，分布式版本控制系统根本没有“中央服务器”，每个人的电脑上都是一个完整的版本库，这样，你工作的时候，就不需要联网了，因为版本库就在你自己的电脑上。既然每个人电脑上都有一个完整的版本库，那多个人如何协作呢？比方说你在自己电脑上改了文件A，你的同事也在他的电脑上改了文件A，这时，你们俩之间只需把各自的修改推送给对方，就可以互相看到对方的修改了。</p><p>&emsp;和集中式版本控制系统相比，分布式版本控制系统的安全性要高很多，因为每个人电脑里都有完整的版本库，某一个人的电脑坏掉了不要紧，随便从其他人那里复制一个就可以了。而集中式版本控制系统的中央服务器要是出了问题，所有人都没法干活了。</p><h2 id="git的正确打开方式"><a href="#git的正确打开方式" class="headerlink" title="git的正确打开方式"></a>git的正确打开方式</h2><p>要使用Git，第一步当然是安装Git了。</p><ul><li>在Linux上安装Git</li><li>在Windows上安装Git</li><li>在Mac上安装Git</li></ul><p>详细信息请移步<a href="https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/00137396287703354d8c6c01c904c7d9ff056ae23da865a000" target="_blank" rel="noopener">廖雪峰的官方网站</a></p><h1 id="正文"><a href="#正文" class="headerlink" title="正文"></a>正文</h1><h2 id="Git工作流程"><a href="#Git工作流程" class="headerlink" title="Git工作流程"></a>Git工作流程</h2><p>先上图:<br><img src="https://user-gold-cdn.xitu.io/2018/12/29/167f9d6dcabe764b?w=1172&h=340&f=png&s=18854" alt></p><p>以上包括一些简单而常用的命令，但是先不关心这些，先来了解下面这4个专有名词。</p><ul><li>Workapace : 工作区</li><li>Index/Stage ：暂存区</li><li>Repository ：仓库区（或本地仓库）</li><li>Remote ：远程仓库</li></ul><h3 id="工作区（Workapace）"><a href="#工作区（Workapace）" class="headerlink" title="工作区（Workapace）"></a>工作区（Workapace）</h3><p>&emsp;程序员开发改动的地方，是你当前看到的，也是最新的。</p><p>&emsp;平时开发就是拷贝远程仓库中的一个分支，并基于该分支进行开发。在开发的过程中就是对工作区的操作。</p><h3 id="暂存区（Index-Stage）"><a href="#暂存区（Index-Stage）" class="headerlink" title="暂存区（Index/Stage）"></a>暂存区（Index/Stage）</h3><p>&emsp;.git目录下的index文件，暂存区会记录 <code>git add</code> 添加的文件的相关信息（文件名、大小…）,不保存文件实体。可以使用<code>git status</code>查看暂存区的状态。暂存区标记了你当前工作区中，哪些内容是被Git管理的。</p><p>&emsp;当你完成某个功能需要提交到远程仓库中，那么第一步就是要将更改通过<code>git add</code>提交到暂存区，被Git管理。</p><h3 id="本地仓库（Repository）"><a href="#本地仓库（Repository）" class="headerlink" title="本地仓库（Repository）"></a>本地仓库（Repository）</h3><p>&emsp;保存了对象被提交过的各个版本，比起工作区和暂存区的内容，它更旧一些。</p><p>&emsp;<code>git commit</code>后同步index的目录树到本地仓库，方便从下一步通过<code>git push</code>同步本地仓库与远程仓库。</p><h3 id="远程仓库（Remote）"><a href="#远程仓库（Remote）" class="headerlink" title="远程仓库（Remote）"></a>远程仓库（Remote）</h3><p>&emsp;远程仓库的内容可能被分布在多个地点的处于协作关系的本地仓库修改，因此它可能与本地仓库同步，也可能不同步。我们在提交之前需要<code>git pull</code>使本地仓库拉下代码。</p><h3 id="HEAD"><a href="#HEAD" class="headerlink" title="HEAD"></a>HEAD</h3><p>&emsp;在掌握具体命令前，先理解下HEAD。</p><p>&emsp;HEAD，它始终指向当前所处分支的最新的提交点。你所处的分支变化了，或者产生了新的提交点，HEAD就会跟着改变。</p><p>无图无真相！<br><img src="https://user-gold-cdn.xitu.io/2018/12/29/167f9d77d630d42e?w=635&h=301&f=jpeg&s=21932" alt></p><h3 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h3><ol><li>任何对象都是在工作区诞生和被修改；</li><li>任何修改都是从进入index区才开始被版本控制；</li><li>只有把修改提交到本地仓库，该修改才能在仓库留下足迹；</li><li>与协作者分享本地的更改，需要将更改push到远程仓库</li></ol><h2 id="常用的Git命令"><a href="#常用的Git命令" class="headerlink" title="常用的Git命令"></a>常用的Git命令</h2><p>继续上图!<br><img src="https://user-gold-cdn.xitu.io/2018/12/29/167f9d824eead150?w=2076&h=1466&f=jpeg&s=178854" alt></p><h3 id="一、新建代码库"><a href="#一、新建代码库" class="headerlink" title="一、新建代码库"></a>一、新建代码库</h3><ul><li><p>在当前新目录新建一个git代码库</p><blockquote><p>$ git init</p></blockquote></li><li><p>新建一个目录，将其初始化为First代码库</p><blockquote><p>$ git init [project-name]</p></blockquote></li><li><p>下载一个项目和它的整个代码史</p><blockquote><p><font color="red"> $ git clone [url]</font></p></blockquote></li></ul><h3 id="二、配置"><a href="#二、配置" class="headerlink" title="二、配置"></a>二、配置</h3><p>Git的设置文件为.gitconfig，它可以在用户主目录下（全局配置），也可以在项目目录下（项目配置）</p><ol><li><p>显示当前的Git配置</p><blockquote><p>$git config –list</p></blockquote></li><li><p>编辑Git配置文件</p><blockquote><p>$ git config -e [–global]</p></blockquote></li><li><p>设置提交代码时的用户信息</p><blockquote><p>$ git config [–global] user.name “[name]”</p></blockquote></li></ol><blockquote><p>$ git config [–global] user.email “[email address]”</p></blockquote><h3 id="三、增加-删除文件"><a href="#三、增加-删除文件" class="headerlink" title="三、增加/删除文件"></a>三、增加/删除文件</h3><ul><li><p>添加指定文件到暂存区</p><blockquote><p><font color="red"> $ git add [file1] [file2] …</font></p></blockquote></li><li><p>添加指定类型文件（使用通配符方式批量提交）到暂存区</p><blockquote><p>$ git add *.html</p></blockquote></li><li><p>添加指定目录到暂存区</p><blockquote><p>$ git add [dir]</p></blockquote></li><li><p>添加当前目录下的所有存在更改文件到暂存区</p></li><li><p>（包括提交新文件(new)和被修改(modified)文件，不包括被删除(deleted)文件）</p><blockquote><p><font color="red"> $ git add .</font></p></blockquote></li><li><p>添加已经被add的文件且存在更改的文件（Git根路径以下所有文件）到暂存区</p></li><li><p>（提交被修改(modified)和被删除(deleted)文件，不包括新文件(new)）</p><blockquote><p>$ git add -u</p></blockquote></li><li><p>添加所有变化（Git根路径以下所有文件）到暂存区</p></li><li><p>（包括提交新文件(new)、被修改(modified)文件以及被删除(deleted)文件）</p><blockquote><p><font color="red"> $ git add –all</font></p></blockquote></li></ul><blockquote><p><font color="red"> $ git add -A</font> // 简写</p></blockquote><ul><li><p>添加每个变化前，都会要求确认，对于同一个文件的多处变化，可以实现分次提交</p><blockquote><p>$ git add -p </p></blockquote></li><li><p>删除工作区文件，并且将这次删除放入暂存区</p><blockquote><p>$ git rm [file1] [file2] …</p></blockquote></li><li><p>停止追踪指定文件，但该文件会保留在工作区</p><blockquote><p>$  git rm -cached [file]</p></blockquote></li><li><p>改名文件，并且将这个改名放入暂存区</p><blockquote><p>$ git mv [file-origin] [file-rename]</p></blockquote></li><li><p>改名文件夹，并将此更改上传</p></li></ul><blockquote><p>git mv -f oldfolder newfolder</p></blockquote><blockquote><p>git add -u newfolder (-u选项会更新已经追踪的文件和文件夹)</p></blockquote><blockquote><p>git commit -m “changed the foldername whaddup”</p></blockquote><ul><li>删除文件夹，并将此更改上传<blockquote><p><font color="red">$ git rm -r –cached [dir]</font></p></blockquote></li></ul><blockquote><p><font color="red">$ git commit -m ‘删除了dir’</font></p></blockquote><blockquote><p><font color="red">$ git push -u origin master</font></p></blockquote><h3 id="四、代码提交"><a href="#四、代码提交" class="headerlink" title="四、代码提交"></a>四、代码提交</h3><ul><li><p>提交暂存区到仓库区 </p><blockquote><p><font color="red">$ git commit -m [message] </font></p></blockquote></li><li><p>提交暂存区的指定文件到仓库区</p><blockquote><p><font color="red">$ git commit [file1] [file2] … -m [message] </font></p></blockquote></li><li><p>提交工作区自上次commit之后的变化，直接到仓库区</p><blockquote><p>$ git commit -a </p></blockquote></li><li><p>提交时显示所有的diff信息</p><blockquote><p>$ git commit -v </p></blockquote></li><li><p>使用一次新的commit，替代上一次提交，如果代码没有任何变化，则用来改写上一次commit的提交信息</p><blockquote><p>$ git commit –amend -m [message]</p></blockquote></li><li><p>重做上一次commit，并包括指定文件的新变化</p><blockquote><p>$ git commit -amend [file1] [file2]…</p></blockquote></li></ul><h3 id="五、分支"><a href="#五、分支" class="headerlink" title="五、分支"></a>五、分支</h3><ul><li><p>列出所有本地分支</p><blockquote><p><font color="red"> $git branch</font></p></blockquote></li><li><p>列出所有远程分支</p><blockquote><p>git branch -r </p></blockquote></li><li><p>列出所有本地分支和远程分支</p><blockquote><p><font color="red"> $ git branch -a</font></p></blockquote></li><li><p>新建一个分支，但依然停留在当前分支</p><blockquote><p><font color="red"> $ git branch [branch-name] </font></p></blockquote></li><li><p>新建一个分支，并切换到该分支</p><blockquote><p><font color="red"> $ git branch -b [branch-name] </font></p></blockquote></li><li><p>新建一个分支，指向指定的commit</p><blockquote><p>$ git branch [branch] [commit]</p></blockquote></li><li><p>新建一个分支，与指定远程分支建立追踪关系</p><blockquote><p>$ git branch –track [branch] [remote-branch]</p></blockquote></li><li><p>切换到指定分支，并更新工作区</p><blockquote><p><font color="red"> $ git checkout [branch-name] </font></p></blockquote></li><li><p>切换到上一分支</p><blockquote><p><font color="red"> $ git checkout - </font></p></blockquote></li><li><p>建立追踪关系，在现有分支和指定的远程分支之间</p><blockquote><p>$ git branch –set-up-tream [branch] [remote-branch]</p></blockquote></li><li><p>合并指定分支到当前分支</p><blockquote><p><font color="red">$ git merge [branch] </font></p></blockquote></li><li><p>选择一个commit，合并进当前分支</p><blockquote><p>$ git cherry-pick [commit]</p></blockquote></li><li><p>删除分支</p><blockquote><p><font color="red"> $ git branch -d [branch-name] </font></p></blockquote><ul><li>删除远程分支<blockquote><p>$ git push origin –delete [branch-name]</p></blockquote></li></ul></li></ul><blockquote><p>$ git branch -dr [remote/branch]</p></blockquote><h3 id="六、标签"><a href="#六、标签" class="headerlink" title="六、标签"></a>六、标签</h3><ul><li><p>列出所有tag</p><blockquote><p>$ git tag</p></blockquote></li><li><p>新建一个tag在当前commit</p><blockquote><p>$ git tag [tag]</p></blockquote></li><li><p>新建一个tag在指定commit</p><blockquote><p>$ git tag [tag] [commit]</p></blockquote></li><li><p>删除本地tag</p><blockquote><p>$ git tag -d [tag]</p></blockquote></li><li><p>删除远程tag</p><blockquote><p>$ git push origin :refs/tags/[tagName]</p></blockquote></li><li><p>查看tag信息</p><blockquote><p>$ git show [tag]</p></blockquote></li><li><p>+提交指定tag</p><blockquote><p> $ git push [remote] [tag]</p></blockquote></li><li><p>提交所有tag</p><blockquote><p>$ git push [remote] –tages</p></blockquote></li><li><p>新建一个分支，指向某个teg</p><blockquote><p>$ git checkout -b [branch] [tag]</p></blockquote></li></ul><h3 id="七、查看信息"><a href="#七、查看信息" class="headerlink" title="七、查看信息"></a>七、查看信息</h3><ul><li><p>显示有变更的文件</p><blockquote><p><font color="red">$ git status</font></p></blockquote></li><li><p>显示当前分支的版本历史</p><blockquote><p><font color="red">$ git log</font></p></blockquote></li><li><p>显示某个commit历史，以及每次commit发生变更的文件</p><blockquote><p>$ git log [tag] HEAD –grep feature</p></blockquote></li><li><p>显示某个commit之后的所有变动，其“提交说明”必须符合搜索条件</p><blockquote><p>$ git log [tag] HEAD –grop feature</p></blockquote></li><li><p>显示某个文件的版本历史，包括文件改名</p><blockquote><p>$ git log –follow [file] </p></blockquote></li></ul><blockquote><p>$ git whatchanged [file]</p></blockquote><ul><li><p>显示过去5次的提交</p><blockquote><p>$ git log -5 –pretty –oneline</p></blockquote></li><li><p>显示所有提交过的用户，按提交次数排序</p><blockquote><p>$ git shortlog -sn</p></blockquote></li><li><p>显示指定文件是什么人在什么时间修改过</p><blockquote><p>$ git blame [file]</p></blockquote></li><li><p>显示暂存区和工作区的代码差异</p><blockquote><p><font color="red"> $ git diff </font></p></blockquote></li><li><p>显示暂存区和上一个commit的差异</p><blockquote><p>$ git diff -cached [file]</p></blockquote></li><li><p>显示工作区与当前分支最新commit之间的差异</p><blockquote><p>$ git diff HEAD</p></blockquote></li><li><p>显示两次提交之间的差异</p><blockquote><p>$ git diff [first-btanch]…[second-branch]</p></blockquote></li><li><p>显示某次提交的元素数据和内容变化</p><blockquote><p><font color="red">$ git show [commit]</font></p></blockquote></li><li><p>显示某次提交时，某个文件的内容</p><blockquote><p>$ git show [commit]:[filename]</p></blockquote></li><li><p>显示当前分支的最近几次提交</p><blockquote><p>$ git reflog</p></blockquote></li><li><p>从本地master拉取代码更新当前分支：branch一般为master</p><blockquote><p><font color="red">$ git rebase [branch]</font> </p></blockquote></li></ul><h3 id="八、远程分支"><a href="#八、远程分支" class="headerlink" title="八、远程分支"></a>八、远程分支</h3><ul><li><p>更新远程仓储</p><blockquote><p><font color="red"> $ git remote update </font></p></blockquote></li><li><p>显示所有远程仓库</p><blockquote><p>$ git remote -v</p></blockquote></li><li><p>显示某个远程仓库信息</p><blockquote><p>$ git remote show [remote]</p></blockquote></li><li><p>增加一个新的远程仓库，并命名</p><blockquote><p>$ git remote add [shortname] [url]</p></blockquote></li><li><p>取回远程仓库的变化，并与本地分支合并</p><blockquote><p>$ git push [remote] [branch]</p></blockquote></li><li><p>上传本地分支到远程仓库</p><blockquote><p>$ git push [remote] [branch]</p></blockquote></li><li><p>强行推送当前分支到远程仓库</p><blockquote><p>$ git push [remote] –force</p></blockquote></li><li><p>推送所有分支到远程仓库</p><blockquote><p>git push [remote] –all</p></blockquote></li></ul><h3 id="九、撤销"><a href="#九、撤销" class="headerlink" title="九、撤销"></a>九、撤销</h3><ul><li><p>恢复暂存区的指定文件到工作区</p><blockquote><p>$ git checkout [commit] [file]</p></blockquote></li><li><p>恢复某个commit的指定文件到暂存区和工作区</p><blockquote><p>$ git chechout .</p></blockquote></li><li><p>重置暂存区的指定文件，与上一次commit保持一致，但工作区不变</p><blockquote><p>$ git reset [file]</p></blockquote></li><li><p>重置暂存区和工作区，与上次commit保持一致</p><blockquote><p><font color="red">$ git reset –hard</font></p></blockquote></li><li><p>重置当前分支的指针为指定commit，同时是重置暂存区，但工作区不变</p><blockquote><p>$ git reset [commit]</p></blockquote></li><li><p>重置当前分支的HEAD为指定commit，同时重置暂存区与工作区，与指定commit保持一致</p><blockquote><p>$git reset –hard [commit]</p></blockquote></li><li><p>重置当前HEAD为指定commit，但保持暂存区和工作区不变</p><blockquote><p>$ git reset –keep [commit]</p></blockquote></li><li><p>新建一个commit，哦用来撤销指定commit，后者的变化都被前者抵消，并且应用到当前分支</p><blockquote><p>$ git revert [commit]</p></blockquote></li><li><p>暂时将未提交的变化移除，稍后再移入</p><blockquote><p><font color="red"> $ git stash</font></p></blockquote></li></ul><blockquote><p><font color="red"> $ git stash pop</font></p></blockquote><h3 id="十、其他"><a href="#十、其他" class="headerlink" title="十、其他"></a>十、其他</h3><ul><li>生成一个可供发布的压缩包<blockquote><p>$ git archive</p></blockquote></li></ul><h3 id="版本穿梭"><a href="#版本穿梭" class="headerlink" title="版本穿梭"></a>版本穿梭</h3><p>再声明一次：<strong>HEAD指向的版本就是当前版本！</strong></p><h4 id="回到过去"><a href="#回到过去" class="headerlink" title="回到过去"></a>回到过去</h4><p>对Git来说，回到过去比把大象装进冰箱还要简单，总共分两步：</p><ol><li><p>倘若需要进行版本切换，首先就是查看有哪些版本咯！</p><ul><li><p>显示从最近到最远的提交日志</p><blockquote><p><font color="red">$ git log </font></p></blockquote></li><li><p>如果感觉眼花缭乱，可以选择单行显示</p><blockquote><p>$ git log –pretty=oneline</p></blockquote></li></ul></li><li><p>看到<code>commit fcef4ce4280229e2d4a9c914677f6e94e3539ede</code>了没？这就是我们的commit_id，也就是要去的地址。当然，我们不需要用这么长一段，取前五位就好。</p><p> 现在我们启动时光穿梭机!</p><blockquote><p><font color="red">$ git reset –hard </font>commit_id</p></blockquote></li></ol><h4 id="重返未来"><a href="#重返未来" class="headerlink" title="重返未来"></a>重返未来</h4><p>重返未来同样分两步：</p><ol><li><p>倘若需要重返未来，首先就是确定要回到未来的哪个版本</p><ul><li>查看命令历史<blockquote><p><font color="red">$ git reflog </font></p></blockquote></li></ul></li><li><p>看到<code>989d9ce HEAD@{……}: commit:……</code>了没？选择你想要的未来，出发吧！</p><blockquote><p><font color="red">$ git reset –hard </font>commit_id</p></blockquote></li></ol><h3 id="使用git在本地创建一个项目的过程"><a href="#使用git在本地创建一个项目的过程" class="headerlink" title="使用git在本地创建一个项目的过程"></a>使用git在本地创建一个项目的过程</h3><ol><li><code>$ makdir ~/hello-world</code>    //创建一个项目hello-world</li><li><code>$ cd ~/hello-world</code>       //打开这个项目</li><li><code>$ git init</code>             //初始化 </li><li><code>$ touch README</code></li><li><code>$ git add README</code>        //更新README文件</li><li><code>$ git commit -m &#39;first commit&#39;</code>     //提交更新，并注释信息“first commit”</li><li><code>$ git remote add origin git@github.com:dedsf/hello-world.git</code>     //连接远程github项目  </li><li><code>$ git push -u origin master</code>     //将本地项目更新到github项目上去</li></ol><h2 id="GitHub"><a href="#GitHub" class="headerlink" title="GitHub"></a>GitHub</h2><h3 id="什么是GitHub"><a href="#什么是GitHub" class="headerlink" title="什么是GitHub"></a>什么是GitHub</h3><p>&emsp;github是一个基于git的代码托管平台，付费用户可以建私人仓库，我们一般的免费用户只能使用公共仓库，也就是代码要公开。</p><p>&emsp;Git本身完全可以做到版本控制，但其所有内容以及版本记录只能保存在本机，如果想要将文件内容以及版本记录同时保存在远程，则需要结合GitHub来使用。使用场景：</p><ul><li>无GitHub：在本地 .git 文件夹内维护历时文件</li><li>有GitHub：在本地 .git 文件夹内维护历时文件，同时也将历时文件托管在远程仓库</li></ul><p>推荐一个文科妹子写的风趣易懂的GitHub介绍，戳这里：<a href="https://www.zhihu.com/question/20070065/answer/79557687" target="_blank" rel="noopener">如何使用 GitHub？</a></p><h3 id="我们能用GitHub做什么"><a href="#我们能用GitHub做什么" class="headerlink" title="我们能用GitHub做什么"></a>我们能用GitHub做什么</h3><p>&emsp;我们一直用GitHub作为免费的远程仓库，如果是个人的开源项目，放到GitHub上是完全没有问题的。其实GitHub还是一个开源协作社区，通过GitHub，既可以让别人参与你的开源项目，也可以参与别人的开源项目。</p><p>&emsp;在GitHub出现以前，开源项目开源容易，但让广大人民群众参与进来比较困难，因为要参与，就要提交代码，而给每个想提交代码的群众都开一个账号那是不现实的，因此，群众也仅限于报个bug，即使能改掉bug，也只能把diff文件用邮件发过去，很不方便。</p><p>&emsp;但是在GitHub上，利用Git极其强大的克隆和分支功能，广大人民群众真正可以第一次自由参与各种开源项目了。</p><p>&emsp;如何参与一个开源项目呢？</p><p>&emsp;比如人气极高的bootstrap项目，这是一个非常强大的CSS框架，你可以访问它的项目主页<code>https://github.com/twbs/bootstrap</code>，点“Fork”就在自己的账号下克隆了一个bootstrap仓库，然后，从自己的账号下clone：</p><blockquote><p>clone <a href="mailto:git@github.com" target="_blank" rel="noopener">git@github.com</a>:michaelliao/bootstrap.git</p></blockquote><p>&emsp;一定要从自己的账号下clone仓库，这样你才能推送修改。如果从bootstrap的作者的仓<code>it@github.com:twbs/bootstrap.git</code>克隆，因为没有权限，你将不能推送修改。</p><ul><li><p>如果你想修复bootstrap的一个bug，或者新增一个功能，立刻就可以开始干活，干完后，往自己的仓库推送。</p></li><li><p>如果你希望bootstrap的官方库能接受你的修改，你就可以在GitHub上发起一个pull request。当然，对方是否接受你的pull request就不一定了。</p></li><li><p>如果你没能力修改bootstrap，但又想要试一把pull request，那就Fork一下廖雪峰老师的仓库<code>https://github.com/michaelliao/learngit</code>，创建一个your-github-id.txt的文本文件，写点自己学习Git的心得，然后推送一个pull request给我，我会视心情而定是否接受。</p></li></ul><h3 id="小结-1"><a href="#小结-1" class="headerlink" title="小结"></a>小结</h3><ul><li><p>在GitHub上，可以任意Fork开源仓库；</p></li><li><p>自己拥有Fork后的仓库的读写权限；</p></li><li><p>可以推送pull request给官方仓库来贡献代码。</p></li></ul><h1 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h1><p>&emsp;路漫漫其修远兮，希望Git及GitHub可以帮我们记录每一个脚印，每一步成长。与诸君共勉。</p><p>&emsp;祝大家2019更上一层楼！</p><p><strong>后记：Hello 小伙伴们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更丰富文章的动力！<a href="https://github.com/danygitgit/document-library/blob/master/other-library/Git%E7%AC%94%E8%AE%B0/Git%E5%91%BD%E4%BB%A4%E5%85%A5%E9%97%A8.md" target="_blank" rel="noopener">GitHub 地址</a></strong></p><blockquote><p><a rel="noopener" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank"><img alt="知识共享许可协议" style="border-width:0" src="https://user-gold-cdn.xitu.io/2018/12/23/167d9537f3e29c99?w=88&h=31&f=png&s=1888"></a><br><a xmlns:dct="http://purl.org/dc/terms/" property="dct:title"><strong>db</strong> 的文档库</a> 由 <a xmlns:cc="http://creativecommons.org/ns#" href="db" property="cc:attributionName" rel="cc:attributionURL">db</a> 采用 <a rel="noopener" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议</a>进行许可。<br>基于<a xmlns:dct="http://purl.org/dc/terms/" href="https://github.com/danygitgit" rel="noopener" target="_blank">https://github.com/danygitgit</a>上的作品创作。<br>本许可协议授权之外的使用权限可以从 <a xmlns:cc="http://creativecommons.org/ns#" href="https://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel="noopener" target="_blank">https://creativecommons.org/licenses/by-nc-sa/2.5/cn/</a> 处获得。</p></blockquote>]]></content>
      
      
      <categories>
          
          <category> Git </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Git </tag>
            
            <tag> 版本管理 </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>Hello World</title>
      <link href="/2019/07/03/hello-world/"/>
      <url>/2019/07/03/hello-world/</url>
      
        <content type="html"><![CDATA[<p>Welcome to <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a>! This is your very first post. Check <a href="https://hexo.io/docs/" target="_blank" rel="noopener">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href="https://hexo.io/docs/troubleshooting.html" target="_blank" rel="noopener">troubleshooting</a> or you can ask me on <a href="https://github.com/hexojs/hexo/issues" target="_blank" rel="noopener">GitHub</a>.</p><h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><pre class=" language-bash"><code class="language-bash">$ hexo new <span class="token string">"My New Post"</span></code></pre><p>More info: <a href="https://hexo.io/docs/writing.html" target="_blank" rel="noopener">Writing</a></p><h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><pre class=" language-bash"><code class="language-bash">$ hexo server</code></pre><p>More info: <a href="https://hexo.io/docs/server.html" target="_blank" rel="noopener">Server</a></p><h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><pre class=" language-bash"><code class="language-bash">$ hexo generate</code></pre><p>More info: <a href="https://hexo.io/docs/generating.html" target="_blank" rel="noopener">Generating</a></p><h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><pre class=" language-bash"><code class="language-bash">$ hexo deploy</code></pre><p>More info: <a href="https://hexo.io/docs/deployment.html" target="_blank" rel="noopener">Deployment</a></p>]]></content>
      
      
      <categories>
          
          <category> Hello </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Hello World </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>JS之大循环</title>
      <link href="/2019/06/25/js-zhi-da-xun-huan/"/>
      <url>/2019/06/25/js-zhi-da-xun-huan/</url>
      
        <content type="html"><![CDATA[<p>@<a href="https://github.com/danygitgit/document-library/blob/master/JavaScript-library/JavaScript/JS%E4%B9%8B%E5%A4%A7%E5%BE%AA%E7%8E%AF.md" target="_blank" rel="noopener">JS之大循环</a>  </p><blockquote><p>create by <strong>db</strong> on <strong>2019-5-13 09:45:24</strong><br>Recently revised in <strong>2019-5-14 14:47:50</strong>  </p></blockquote><p>&emsp;<strong>Hello 小伙伴们，如果觉得本文还不错，麻烦点个赞或者给个 star，你们的赞和 star 是我前进的动力！<a href="https://github.com/danygitgit/document-library/blob/master/JavaScript-library/JavaScript/JS%E4%B9%8B%E5%A4%A7%E5%BE%AA%E7%8E%AF.md" target="_blank" rel="noopener">GitHub 地址</a></strong>  </p><p>&emsp;查阅网上诸多资料，并结合自己的学习经验，写下这篇学习笔记，以记录自己的学习心得。现分享给大家，以供参考。  </p><h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><blockquote><p>I hear and I fogorget.  </p></blockquote><blockquote><p>I see and I remember.  </p></blockquote><blockquote><p>I do and I understand.  </p></blockquote><p>&emsp;如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。</p><p>&emsp;参考文献：  </p><ul><li><a href="https://www.cnblogs.com/baiyunke/p/7821299.html" target="_blank" rel="noopener">JS中的循环—最全的循环总结 | 博客园-baiyunke </a>  </li><li><a href="http://www.codeceo.com/article/javascript-for-loop.html" target="_blank" rel="noopener">深入了解 JavaScript 中的 for 循环 | 码农网-编译青春 </a>  </li><li><a href="https://blog.csdn.net/qq_41899174/article/details/82797089" target="_blank" rel="noopener">js的15种循环遍历，你掌握了几种？ | CSDN-诗人与黑客 </a>  </li><li><a href="https://shimo.im/doc/VXqv2bxTlOUiJJqO/" target="_blank" rel="noopener">你还在用for循环大法麽？ | 石墨文档 </a>  </li><li><a href="https://www.liaoxuefeng.com/wiki/1022910821149312/1023023924160384" target="_blank" rel="noopener">廖雪峰的官方网站 | 廖雪峰 </a>  </li></ul><h1 id="正文"><a href="#正文" class="headerlink" title="正文"></a>正文</h1><p>在讲循环的之前，我们先了解一下循环结构的执行步骤：  </p><ol><li>声明循环变量；  </li><li>判断循环条件;  </li><li>执行循环体操作；  </li><li>更新循环变量；  </li><li>然后循环执行2-4，直到条件不成立，跳出循环。  </li></ol><h2 id="while循环"><a href="#while循环" class="headerlink" title="while循环"></a>while循环</h2><pre class=" language-javaScript"><code class="language-javaScript">let num = 1;  while (num<=10){//2、判断循环条件;    console.log(num);//3、执行循环体操作；    num++;//4、更新循环变量；  }  </code></pre><p><strong>注：</strong>  </p><p>while循环()中的表达式，运算结果可以是各种类型，但是最终都会转为真假，转换规则如下。  </p><ul><li><strong>Boolean</strong>：true为真，false为假；  </li><li><strong>String</strong>：空字符串为假，所有非空字符串为真；  </li><li><strong>Number</strong>：0为假，一切非0数字为真；  </li><li><strong>null/Undefined/NaN</strong>:全为假；  </li><li><strong>Object</strong>：全为真。  </li></ul><h2 id="do-while循环"><a href="#do-while循环" class="headerlink" title="do-while循环"></a>do-while循环</h2><pre class=" language-javaScript"><code class="language-javaScript">let num = 10;  do{    console.log(num);//10 9 8 7 6 5 4 3 2 1 0    num--;    }while(num>=0);  console.log(num);//-1  </code></pre><p><strong>注：</strong>  </p><ul><li><p>while循环特点：先判断后执行；  </p></li><li><p>do-while循环特点：先执行再判断，即使初始条件不成立，do-while循环至少执行一次；  </p></li></ul><h2 id="for循环"><a href="#for循环" class="headerlink" title="for循环"></a>for循环</h2><p><strong>for循环</strong>  </p><ul><li>&nbsp;for有三个表达式：  <ul><li>①声明循环变量；  </li><li>②判断循环条件；  </li><li>③更新循环变量；<br>&nbsp;&nbsp;三个表达式之间，用<code>;</code>分割，for循环三个表达式都可以省略，但是两个<code>;</code>缺一不可。  </li></ul></li><li>for循环的执行特点：先判断再执行，与while相同  </li><li>for循环三个表达式都可以有多部分组成，第二部分多个判断条件用<code>&amp;&amp; ||</code>连接，第一三部分用<code>,</code>分割；  </li></ul><p>下面先来看看大家最常见的一种写法：  </p><pre class=" language-javaScript"><code class="language-javaScript">const arr = [1, 2, 3];  for(let i = 0; i　< arr.length; i++) {    console.log(arr[i]);  }  </code></pre><p>当数组长度在循环过程中不会改变时，我们应将数组长度用变量存储起来，这样会获得更好的效率，下面是改进的写法：  </p><pre class=" language-javaScript"><code class="language-javaScript">const arr = [1, 2, 3];  for(let i = 0, len = arr.length; i < len; i++) {    console.log(arr[i]);  }  </code></pre><p>for循环的3个条件都是可以省略的，如果没有退出循环的判断条件，就必须使用break语句退出循环，否则就是死循环：  </p><pre class=" language-javaScript"><code class="language-javaScript">let x = 0;  for (;;) { // 将无限循环下去    if (x > 100) {      break; // 通过if判断来退出循环    }    x ++;  }  </code></pre><h2 id="for-in循环"><a href="#for-in循环" class="headerlink" title="for-in循环"></a>for-in循环</h2><p>for-in 循环主要用于遍历对象  </p><ul><li>for-in()中的格式：<code>for(keys in zhangsan){}</code>  </li><li><code>keys</code>表示obj对象的每一个键值对的键！！所有循环中，需要使用<code>obj[keys]</code>来取到每一个值！！！  </li><li>for-in 循环，遍历时不仅能读取对象自身上面的成员属性，也能延续原型链遍历出对象的原型属性  </li></ul><p>所以，可以使用<code>hasOwnProperty</code>判断一个属性是不是对象自身上的属性。  </p><ul><li><code>obj.hasOwnProperty(keys)==true</code> 表示这个属性是对象的成员属性，而不是原先属性  </li></ul><h3 id="for-in的真相"><a href="#for-in的真相" class="headerlink" title="for-in的真相"></a>for-in的真相</h3><p>for-in 循环遍历的是对象的属性，而不是数组的索引。因此， for-in 遍历的对象便不局限于数组，还可以遍历对象。例子如下：  </p><pre class=" language-javaScript"><code class="language-javaScript">const person = {    fname: "san",    lname: "zhang",    age: 99  };  let info;  for(info in person) {    console.log("person[" + info + "] = " + person[info]);  }  </code></pre><p>结果如下：  </p><pre class=" language-javaScript"><code class="language-javaScript">person[fname] = san  person[lname] = zhang  person[age] = 99  </code></pre><p>需要注意的是， for-in 遍历属性的顺序并不确定，即输出的结果顺序与属性在对象中的顺序无关，也与属性的字母顺序无关，与其他任何顺序也无关。  </p><h3 id="Array-的真相"><a href="#Array-的真相" class="headerlink" title="Array 的真相"></a>Array 的真相</h3><p>&emsp;Array 在 Javascript 中是一个对象， Array 的索引是属性名。  </p><p>&emsp;事实上， Javascript 中的 “array” 有些误导性， Javascript 中的 Array 并不像大部分其他语言的数组。  </p><ul><li>首先， Javascript 中的 Array 在内存上并不连续；  </li><li>其次， Array 的索引并不是指偏移量。  </li></ul><p>&emsp;实际上， Array 的索引也不是 Number 类型，而是 <code>String</code>类型的。我们可以正确使用如 arr[0] 的写法的原因是语言可以自动将 Number 类型的 0 转换成 String 类型的 “0″ 。  </p><p>&emsp;所以，在 Javascript 中从来就没有 Array 的索引，而只有类似 “0″ 、 “1″ 等等的属性。有趣的是，每个 Array 对象都有一个 length 的属性，导致其表现地更像其他语言的数组。但为什么在遍历 Array 对象的时候没有输出 length 这一条属性呢？那是因为 for-in 只能遍历“可枚举的属性”， length 属于不可枚举属性，实际上， Array 对象还有许多其他不可枚举的属性。  </p><p>&emsp;现在，我们再回过头来看看用 for-in 来循环数组的例子,我们修改一下前面遍历数组的例子：  </p><pre class=" language-javaScript"><code class="language-javaScript">const arr = [1, 2, 3];  arr.name = "Hello world";  let index;  for(index in arr) {    console.log("arr[" + index + "] = " + arr[index]);  }  </code></pre><p>运行结果是：  </p><pre class=" language-javaScript"><code class="language-javaScript">arr[0] = 1  arr[1] = 2  arr[2] = 3  arr[name] = Hello world  </code></pre><p>&emsp;我们看到 for-in 循环访问了我们新增的 “name” 属性，因为 for-in 遍历了对象的所有属性，而不仅仅是“索引”。  </p><p>&emsp;同时需要注意的是，此处输出的索引值，即 “0″、 “1″、 “2″不是<code>Number</code>类型的，而是<code>String</code>类型的，因为其就是作为属性输出，而不是索引。  </p><p>&emsp;那是不是说不在我们的 Array 对象中添加新的属性，我们就可以只输出数组中的内容了呢？答案是否定的。因为 for-in 不仅仅遍历 array 自身的属性，其还遍历 array 原型链上的所有可枚举的属性。下面我们看个例子：  </p><pre class=" language-javaScript"><code class="language-javaScript">Array.prototype.fatherName = "Father";  const arr = [1, 2, 3];  arr.name = "Hello world";  let index;  for(index in arr) {    console.log("arr[" + index + "] = " + arr[index]);  }  </code></pre><p>运行结果是：  </p><pre class=" language-javaScript"><code class="language-javaScript">arr[0] = 1  arr[1] = 2  arr[2] = 3  arr[name] = Hello world  arr[fatherName] = Father  </code></pre><p>&emsp; 写到这里，我们可以发现 for-in 并不适合用来遍历 Array 中的元素，其更适合遍历对象中的属性，这也是其被创造出来的初衷。却有一种情况例外，就是稀疏数组。考虑下面的例子：  </p><pre class=" language-javaScript"><code class="language-javaScript">let key;  const arr = [];  arr[0] = "a";  arr[100] = "b";  arr[10000] = "c";  for(key in arr) {    if(arr.hasOwnProperty(key)  &&      /^0$|^[1-9]\d*$/.test(key) &&      key <= 4294967294             ) {      console.log(arr[key]);    }  }  </code></pre><p>for-in 只会遍历存在的实体，上面的例子中， for-in 遍历了3次（遍历属性分别为”0″、 “100″、 “10000″的元素，普通 for 循环则会遍历 10001 次）。所以，只要处理得当， for-in 在遍历 Array 中元素也能发挥巨大作用。  </p><p>为了避免重复劳动，我们可以包装一下上面的代码：  </p><pre class=" language-javaScript"><code class="language-javaScript">function arrayHasOwnIndex(array, prop) {    return array.hasOwnProperty(prop) &&      /^0$|^[1-9]\d*$/.test(prop) &&      prop <= 4294967294; // 2^32 - 2  }  </code></pre><p>使用示例如下：  </p><pre class=" language-javaScript"><code class="language-javaScript">for (let key in arr) {    if (arrayHasOwnIndex(arr, key)) {      console.log(arr[key]);    }  }  </code></pre><h3 id="for-in-性能"><a href="#for-in-性能" class="headerlink" title="for-in 性能"></a>for-in 性能</h3><p>&emsp;正如上面所说，每次迭代操作会同时搜索实例或者原型属性， for-in 循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的 1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用 for-in 循环。如果需要遍历一个数量有限的已知属性列表，使用其他循环会更快，比如下面的例子：  </p><pre class=" language-javaScript"><code class="language-javaScript">const obj = {    "prop1": "value1",    "prop2": "value2"  };  const props = ["prop1", "prop2"];  for(let i = 0; i < props.length; i++) {    console.log(obj[props[i]]);  }  </code></pre><p>上面代码中，将对象的属性都存入一个数组中，相对于 for-in 查找每一个属性，该代码只关注给定的属性，节省了循环的开销和时间。  </p><h2 id="for-of循环"><a href="#for-of循环" class="headerlink" title="for-of循环"></a>for-of循环</h2><p>&emsp;ES6 借鉴 C++、Java、C# 和 Python 语言，引入了for…of循环，作为遍历所有数据结构的统一的方法。  </p><p>&emsp;一个数据结构只要部署了Symbol.iterator属性，就被视为具有iterator接口，就可以用for…of循环遍历它的成员。也就是说，for…of循环内部调用的是数据结构的Symbol.iterator方法。  </p><p>先来看个例子：  </p><pre class=" language-javaScript"><code class="language-javaScript">const arr = ['a', 'b', 'c'];  for(let data of arr) {    console.log(data);  }  </code></pre><p>运行结果是：  </p><pre class=" language-javaScript"><code class="language-javaScript">a  b  c  </code></pre><p>&emsp;为什么要引进 for-of？  </p><p>&emsp;要回答这个问题，我们先来看看ES6之前的 3 种 for 循环有什么缺陷：  </p><ul><li>forEach： 不能 break 和 return；  </li><li>for-in 缺点更加明显，它不仅遍历数组中的元素，还会遍历自定义的属性，甚至原型链上的属性都被访问到。而且，遍历数组元素的顺序可能是随机的。  </li></ul><p>&emsp;所以，鉴于以上种种缺陷，我们需要改进原先的 for 循环。但 ES6 不会破坏你已经写好的 JS 代码。目前，成千上万的 Web 网站依赖 for-in 循环，其中一些网站甚至将其用于数组遍历。如果想通过修正 for-in 循环增加数组遍历支持会让这一切变得更加混乱，因此，标准委员会在 ES6 中增加了一种新的循环语法来解决目前的问题，即 for-of 。  </p><p>&emsp;那 for-of 到底可以干什么呢？  </p><p>&emsp;跟 forEach 相比，可以正确响应 break, continue, return。  </p><ul><li>for-of 循环不仅支持数组，还支持大多数类数组对象，例如 DOM nodelist 对象。  </li><li>for-of 循环也支持字符串遍历，它将字符串视为一系列 Unicode 字符来进行遍历。  </li><li>for-of 也支持 Map 和 Set （两者均为 ES6 中新增的类型）对象遍历。  </li></ul><p>总结一下，for-of 循环有以下几个特征：  </p><ul><li>这是最简洁、最直接的遍历数组元素的语法。  </li><li>这个方法避开了 for-in 循环的所有缺陷。  </li><li>与 forEach 不同的是，它可以正确响应 break、continue 和 return 语句。  </li><li>其不仅可以遍历数组，还可以遍历类数组对象和其他可迭代对象。  </li></ul><p>&emsp;但需要注意的是，for-of循环不支持普通对象，但如果你想迭代一个对象的属性，你可以用 for-in 循环（这也是它的本职工作）。  </p><!-- 最后要说的是，ES6 引进的另一个方式也能实现遍历数组的值，那就是 Iterator。上个例子：  const arr = ['a', 'b', 'c'];  const iter = arr[Symbol.iterator]();  iter.next() // { value: 'a', done: false }  iter.next() // { value: 'b', done: false }  iter.next() // { value: 'c', done: false }  iter.next() // { value: undefined, done: true }  不过，这个内容超出了本文的范围，而且 Iterator 要讲的也有很多，以后有时间专门写一篇文章介绍，欢迎关注。 -->  <h2 id="map-循环"><a href="#map-循环" class="headerlink" title="map()循环"></a>map()循环</h2><p>&emsp;map方法将数组的所有成员依次传入参数函数，然后把每一次的执行结果组成一个新数组返回。  </p><p>注意：是返回一个新数组，而不会改变原数组。  </p><pre class=" language-javaScript"><code class="language-javaScript">let numbers = [1, 2, 3];  numbers.map(function (n) {    return n + 1;  });  // [2, 3, 4]  numbers // [1, 2, 3]  </code></pre><p>&emsp;map方法接受一个函数作为参数。该函数调用时，map方法向它传入三个参数：当前成员、当前位置和数组本身。  </p><pre class=" language-javaScript"><code class="language-javaScript">[1, 2, 3].map(function(elem, index, arr) {    return elem * index;  });  // [0, 2, 6]  </code></pre><p>&emsp;此外，map()循环还可以接受第二个参数，用来绑定回调函数内部的this变量，将回调函数内部的this对象，指向第二个参数，间接操作这个参数（一般是数组）。  </p><pre class=" language-javaScript"><code class="language-javaScript">let arr = ['a', 'b', 'c'];  [1, 2].map(function (e) {    return this[e];  }, arr)   // ['b', 'c']  </code></pre><p>&emsp;上面代码通过map方法的第二个参数，将回调函数内部的this对象，指向arr数组。间接操作了数组arr; forEach同样具有这个功能。</p><h2 id="forEach循环"><a href="#forEach循环" class="headerlink" title="forEach循环"></a>forEach循环</h2><p>&emsp;在 ES5 中，引入了新的循环，即 forEach 循环。  </p><p>&emsp;forEach方法与map方法很相似，也是对数组的所有成员依次执行参数函数。但是，forEach方法不返回值，只用来操作数据。也就是说，如果数组遍历的目的是为了得到返回值，那么使用map方法，否则使用forEach方法。  </p><pre class=" language-javaScript"><code class="language-javaScript">const arr = [1, 2, 3];  arr.forEach((data) => {    console.log(data);  });  </code></pre><p>运行结果：  </p><pre class=" language-javaScript"><code class="language-javaScript">1  2  3  </code></pre><p>&emsp;forEach 方法为数组中含有有效值的每一项执行一次 <code>callback</code> 函数，那些已删除（使用 delete 方法等情况）或者从未赋值的项将被跳过（不包括那些值为 undefined 或 null 的项）。  </p><p> <code>callback</code> 函数会被依次传入三个参数：  </p><ul><li>数组当前项的值；  </li><li>数组当前项的索引；  </li><li>数组对象本身；  </li></ul><p>&emsp;需要注意的是，forEach 遍历的范围在第一次调用 callback 前就会确定。调用forEach 后添加到数组中的项不会被 callback 访问到。如果已经存在的值被改变，则传递给 callback 的值是 forEach 遍历到他们那一刻的值。已删除的项不会被遍历到。  </p><pre class=" language-javaScript"><code class="language-javaScript">const arr = [];  arr[0] = "a";  arr[3] = "b";  arr[10] = "c";  arr.name = "Hello world";  arr.forEach((daelta, index, array) => {    console.log(data, index, array);  });  </code></pre><p>运行结果：  </p><pre class=" language-javaScript"><code class="language-javaScript">a 0 ["a", 3: "b", 10: "c", name: "Hello world"]  b 3 ["a", 3: "b", 10: "c", name: "Hello world"]  c 10 ["a", 3: "b", 10: "c", name: "Hello world"]  </code></pre><p>&emsp;这里的<code>index</code> 是 <code>Number</code> 类型，并且也不会像 for-in 一样遍历原型链上的属性。  </p><p>&emsp;所以，使用 forEach 时，我们不需要专门地声明 index 和遍历的元素，因为这些都作为回调函数的参数。  </p><p>&emsp;另外，forEach 将会遍历数组中的所有元素，但是 ES5 定义了一些其他有用的方法，下面是一部分：  </p><ul><li>every: 循环在第一次 return false 后返回  </li><li>some: 循环在第一次 return true 后返回  </li><li>filter: 返回一个新的数组，该数组内的元素满足回调函数  </li><li>map: 将原数组中的元素处理后再返回  </li><li>reduce: 对数组中的元素依次处理，将上次处理结果作为下次处理的输入，最后得到最终结果。     </li></ul><h2 id="filter-过滤循环"><a href="#filter-过滤循环" class="headerlink" title="filter()过滤循环"></a>filter()过滤循环</h2><p>&emsp;<code>filter</code>方法用于过滤数组成员，满足条件的成员组成一个新数组返回。  </p><ul><li>它的参数是一个函数，所有数组成员依次执行该函数;  </li><li>返回结果为true的成员组成一个新数组返回;  </li><li>该方法不会改变原数组。  </li></ul><pre class=" language-javaScript"><code class="language-javaScript">[1, 2, 3, 4, 5].filter(function (elem) {     return (elem > 3);  }) // [4, 5]  // 上面代码将大于3的数组成员，作为一个新数组返回。  let arr = [0, 1, 'a', false];  arr.filter(Boolean) // [1, "a"]  </code></pre><p>filter方法的参数函数也可以接受三个参数：当前成员，当前位置和整个数组。  </p><pre class=" language-javaScript"><code class="language-javaScript">[1, 2, 3, 4, 5].filter(function (elem, index, arr) {    return index % 2 === 0;  }); // [1, 3, 5]  </code></pre><p>此外，filter方法也可以接受第二个参数，用来绑定参数函数内部的this变量。  </p><pre class=" language-javaScript"><code class="language-javaScript">let obj = { MAX: 3 }; let myFilter = function (item) {     if (item > this.MAX) return true;  };  let arr = [2, 8, 3, 4, 1, 3, 2, 9];  arr.filter(myFilter, obj) // [8, 4, 9]  </code></pre><p>&emsp;上面代码中，过滤器myFilter内部有this变量，它可以被filter方法的第二个参数obj绑定，返回大于3的成员。  </p><h2 id="some-，every-循环遍历"><a href="#some-，every-循环遍历" class="headerlink" title="some()，every()循环遍历"></a>some()，every()循环遍历</h2><p>&emsp;这两个方法类似“断言”（assert），返回一个布尔值，表示判断数组成员是否符合某种条件。  </p><ul><li>它们接受一个函数作为参数，所有数组成员依次执行该函数。  </li><li>该函数接受三个参数：当前成员、当前位置和整个数组，然后返回一个布尔值。  </li></ul><h3 id="some-统计数组是否满足某个条件"><a href="#some-统计数组是否满足某个条件" class="headerlink" title="some(),统计数组是否满足某个条件"></a>some(),统计数组是否满足某个条件</h3><p>&emsp;some方法是只要一个成员的返回值是true，则整个some方法的返回值就是true，否则返回false。  </p><pre class=" language-javaScript"><code class="language-javaScript">let arr = [1, 2, 3, 4, 5];  arr.some(function (elem, index, arr) {    return elem >= 3;  });  // true  </code></pre><h3 id="every-统计数组是否不满足某个条件"><a href="#every-统计数组是否不满足某个条件" class="headerlink" title="every(), 统计数组是否不满足某个条件"></a>every(), 统计数组是否不满足某个条件</h3><p>&emsp;而every方法则相反，所有成员的返回值都是true，整个every方法才返回true，否则返回false。  </p><p>&emsp;两相比较，some()只要有一个是true，便返回true；而every()只要有一个是false，便返回false.  </p><pre class=" language-javaScript"><code class="language-javaScript">let arr = [1, 2, 3, 4, 5];  arr.every(function (elem, index, arr) {    return elem >= 3;  });  // false  </code></pre><p>&emsp;这两个方法在实际开发中，大有可用之处。比如在判定用户是否勾选了不可操作的数据，或者是否勾选了一条可以操作的数据可以使用这两个方法遍历循环数组。  </p><h2 id="reduce-，reduceRight-方法"><a href="#reduce-，reduceRight-方法" class="headerlink" title="reduce()，reduceRight()方法"></a>reduce()，reduceRight()方法</h2><p>&emsp;reduce方法和reduceRight方法依次处理数组的每个成员，最终累计为一个值。  </p><p>&emsp;它们的差别是，reduce是从左到右处理（从第一个成员到最后一个成员），reduceRight则是从右到左（从最后一个成员到第一个成员），其他完全一样。  </p><pre class=" language-javaScript"><code class="language-javaScript">[1, 2, 3, 4, 5].reduce(function (a, b) {    console.log(a, b);    return a + b;  })  // 1 2  // 3 3  // 6 4  // 10 5  //最后结果：15  </code></pre><p>reduce方法和reduceRight方法的第一个参数都是一个函数。该函数接受以下四个参数。  </p><ul><li>累积变量，默认为数组的第一个成员  </li><li>当前变量，默认为数组的第二个成员  </li><li>当前位置（从0开始）  </li><li>原数组<br>&emsp;这四个参数之中，只有前两个是必须的，后两个则是可选的。  </li></ul><p>&emsp;如果要对累积变量指定初值，可以把它放在reduce方法和reduceRight方法的第二个参数。  </p><pre class=" language-javaScript"><code class="language-javaScript">[1, 2, 3, 4, 5].reduce(function (a, b) {    return a + b;  }, 10);  // 25  </code></pre><p>&emsp;上面的第二个参数相当于设定了默认值，处理空数组时尤其有用，可避免一些空指针异常。  </p><p>&emsp;由于这两个方法会遍历数组，所以实际上还可以用来做一些遍历相关的操作。比如，找出字符长度最长的数组成员。  </p><pre class=" language-javaScript"><code class="language-javaScript">function findLongest(entries) {    return entries.reduce(function (longest, entry) {    return entry.length > longest.length ? entry : longest;    }, '');  }  findLongest(['aaa', 'bb', 'c']) // "aaa"  </code></pre><p>&emsp;上面代码中，reduce的参数函数会将字符长度较长的那个数组成员，作为累积值。这导致遍历所有成员之后，累积值就是字符长度最长的那个成员。  </p><h2 id="Object-keys-遍历对象的属性"><a href="#Object-keys-遍历对象的属性" class="headerlink" title="Object.keys() 遍历对象的属性"></a>Object.keys() 遍历对象的属性</h2><p>&emsp;<code>Object.keys()</code>方法的参数是一个对象，返回一个数组。该数组的成员都是该对象自身的（而不是继承的）所有属性名，且只返回可枚举的属性。  </p><pre class=" language-javaScript"><code class="language-javaScript">let obj = {    p1: 123,    p2: 456  };  Object.keys(obj) // ["p1", "p2"]  </code></pre><h2 id="Object-getOwnPropertyNames-遍历对象的属性"><a href="#Object-getOwnPropertyNames-遍历对象的属性" class="headerlink" title="Object.getOwnPropertyNames() 遍历对象的属性"></a>Object.getOwnPropertyNames() 遍历对象的属性</h2><p>&emsp;<code>Object.getOwnPropertyNames()</code>方法与<code>Object.keys</code>类似，也是接受一个对象作为参数，返回一个数组，包含了该对象自身的所有属性名。但它能返回不可枚举的属性。  </p><pre class=" language-javaScript"><code class="language-javaScript">let a = ['Hello', 'World'];  Object.keys(a) // ["0", "1"]  Object.getOwnPropertyNames(a) // ["0", "1", "length"]  </code></pre><p>上面代码中，数组的<code>length</code>属性是不可枚举的属性，所以只出现在Object.getOwnPropertyNames()方法的返回结果中。  </p><p>由于 JavaScript 没有提供计算对象属性个数的方法，所以可以用这两个方法代替。  </p><pre class=" language-javaScript"><code class="language-javaScript">let obj = {    p1: 123,    p2: 456  };  Object.keys(obj).length // 2  </code></pre><h2 id="循环控制语句"><a href="#循环控制语句" class="headerlink" title="循环控制语句"></a>循环控制语句</h2><h3 id="break"><a href="#break" class="headerlink" title="break"></a>break</h3><p>&emsp;直接跳出<strong>当前</strong>的循环，从当前循环外面开始执行,忽略循环体中任何其他语句和循环条件测试。  </p><p>&emsp;它只能跳出<strong>一层</strong>循环，如果你的循环是嵌套循环，那么你需要按照你嵌套的层次，逐步使用break来跳出。  </p><pre class=" language-javaScript"><code class="language-javaScript">function myBreak() {      for(let i = 0; i < 5; i++) {          if(i == 3) {          break;          }      console.log(i);      }  }  myBreak();  </code></pre><p>输出：  </p><pre class=" language-javaScript"><code class="language-javaScript">0  1  2  </code></pre><p>注：  </p><ol><li><p>只能在循环体内和switch语句体内使用break语句。  </p></li><li><p>当break出现在循环体中的switch语句体内时，其作用只是跳出该switch语句体。  </p></li><li><p>&nbsp;当break出现在循环体中，但并不在switch语句体内时，则在执行break后，跳出本层循环体。  </p></li><li><p>在循环结构中，应用break语句使流程跳出本层循环体，从而提前结束本层循环  </p></li></ol><h3 id="continue"><a href="#continue" class="headerlink" title="continue"></a>continue</h3><p>&emsp;终止当前的一次循环过程，其不跳出循环,而是继续往下判断循环条件执行语句。  </p><p>&emsp;只能结束循环中的一次过程,但不能终止循环继续进行。  </p><pre class=" language-javaScript"><code class="language-javaScript">function myContinue() {  for(let i = 0; i < 5; i++) {  if(i == 3) {  continue;  }  console.log(i);  }  }  myContinue();  </code></pre><p>输出：  </p><pre class=" language-javaScript"><code class="language-javaScript">0  1  2  4  </code></pre><p>注：  </p><ol><li><p>continue语句的一般形式为：continue;  </p></li><li><p>其作用是结束本次循环，即跳过本次循环体中余下尚未执行的语句，接着再一次进行循环的条件判定。  </p></li><li><p>注意：执行continue语句并没有使整个循环终止。在while和do-while循环中，continue语句使得流程直接跳到循环控制条件的测试部分 ，然后决定循环是否继续进行。  </p></li><li><p>对与for循环，continue之后执行的语句，是循环变量更新语句i++；  </p></li></ol><p>5.对于while、do-while循环，continue之后执行的语句，是循环条件判断；因此，使用这两个循环时，必须将continue放到i++之后使用，否则，continue将跳过i++进入死循环。  </p><h3 id="return"><a href="#return" class="headerlink" title="return"></a>return</h3><p>从当前的方法中退出,返回到该调用的方法的语句处,继续执行。  </p><pre class=" language-javaScript"><code class="language-javaScript">function myReturn() {  for(let i = 0; i < 5; i++) {  if(i == 3) {  return i;  }  console.log(i);  }  }  let s = myReturn();  console.log("s: " + s);  </code></pre><p>输出：  </p><pre class=" language-javaScript"><code class="language-javaScript">0  1  2  s: 3  </code></pre><p>注：  </p><ol><li><p>return 从当前的方法中退出,返回到该调用的方法的语句处,继续执行  </p></li><li><p>return 返回一个值给调用该方法的语句，返回值的数据类型必须与方法的声明中的返回值的类型一致，可以使用强制类型转换来是数据类型一致  </p></li><li><p>return 当方法说明中用void声明返回类型为空时，应使用这种格式，不返回任何值。  </p></li></ol><h2 id="6、总结"><a href="#6、总结" class="headerlink" title="6、总结"></a>6、总结</h2><table><thead><tr><th align="left">循环方法</th><th align="center">语法</th><th align="center">传入参数</th><th align="left">返回值</th><th align="center">应用场景</th><th align="left">使用频率</th><th align="left">特点</th><th align="left">对空位的处理</th></tr></thead><tbody><tr><td align="left">while</td><td align="center">while (<code>循环条件</code>){<code>循环体</code>}</td><td align="center">key</td><td align="left">无</td><td align="center">通常用在循环次数不确定的时候</td><td align="left">不常用</td><td align="left">先判断，再执行</td><td align="left">不会忽略空位，标记undefined</td></tr><tr><td align="left">do-while</td><td align="center">do{<code>循环体</code>}while(<code>循环条件</code>);</td><td align="center">key</td><td align="left">无</td><td align="center">循环至少要执行一次</td><td align="left">不常用</td><td align="left">先执行，再判断，至少执行一次</td><td align="left">不会忽略空位，标记undefined</td></tr><tr><td align="left">for</td><td align="center">for(<code>声明循环变量</code>;<code>判断循环条件</code>;<code>更新循环变量</code>;){<code>循环体</code>}</td><td align="center">key</td><td align="left">无</td><td align="center">确定循环次数以及对象遍历的时候使用</td><td align="left">常用</td><td align="left">已知循环的初始和结束条件时非常有用</td><td align="left">不会忽略空位，标记undefined</td></tr><tr><td align="left">for-in</td><td align="center">for( let <code>key</code> in <code>obj</code>){<code>循环体</code>}</td><td align="center">key</td><td align="left">无</td><td align="center">遍历对象及稀疏数组</td><td align="left">常用</td><td align="left">循环会遍历一个object所有的可枚举属性。最好不要用，可能会遍历原型链上的属性</td><td align="left">会忽略空位</td></tr><tr><td align="left">for-of</td><td align="center">for(let <code>value</code> of <code>arr</code>) {<code>循环体</code>}</td><td align="center">value</td><td align="left">无</td><td align="center">遍历数组</td><td align="left">常用</td><td align="left">最简洁、最直接的遍历数组元素的语法</td><td align="left">不会忽略空位，标记undefined</td></tr><tr><td align="left">forEach</td><td align="center"><code>arr</code>.forEach((<code>data</code>, <code>index</code>, <code>array</code>) =&gt; { <code>循环体</code>})</td><td align="center">函数</td><td align="left">无</td><td align="center">为一些相同的元素，绑定事件处理器</td><td align="left">常用</td><td align="left">调用数组的每个元素，将元素传给回调函数；没有返回一个新数组&amp;没有返回值；不能正确响应 break, continue, return。</td><td align="left">会忽略空位</td></tr><tr><td align="left">map</td><td align="center"><code>arr</code>.map(function(<code>elem</code>, <code>index</code>, <code>array</code>) { return <code>elem * index;</code>})</td><td align="center">函数</td><td align="left">一个新数组</td><td align="center">在遍历出的数据需要处理的时候,如处理数据每一项，或者取到对象中某些属性并返回</td><td align="left">常用</td><td align="left">返回一个新数组，而不会改变原数组</td><td align="left">会忽略空位</td></tr><tr><td align="left">filter</td><td align="center"><code>arr</code>.filter(function (<code>elem</code>, <code>index</code>, <code>arr</code>) { return index % 2 === 0; })</td><td align="center">函数</td><td align="left">一个新数组</td><td align="center">用于过滤数组成员，满足条件的成员组成一个新数组返回；</td><td align="left">常用</td><td align="left">返回一个新数组，而不会改变原数组</td><td align="left">会忽略空位</td></tr></tbody></table><p>&emsp;循环是让计算机做重复任务的有效的方法，有些时候，如果代码写得有问题，会让程序陷入“死循环”，也就是永远循环下去。JavaScript的死循环会让浏览器无法正常显示或执行当前页面的逻辑，有的浏览器会直接挂掉，有的浏览器会在一段时间后提示你强行终止JavaScript的执行，因此，要特别注意死循环的问题。</p><p>&emsp;作为一只前端菜鸟，本篇文章旨在记录自己的学习心得，如有不足，还请多多指教，谢谢大家。  </p><p>&emsp;路漫漫其修远兮，与诸君共勉。  </p><p><strong>后记：Hello 小伙伴们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更丰富文章的动力！<a href="https://github.com/danygitgit/document-library/blob/master/JavaScript-library/JavaScript/JS%E4%B9%8B%E5%A4%A7%E5%BE%AA%E7%8E%AF.md" target="_blank" rel="noopener">GitHub 地址</a></strong>  </p><blockquote><p><a rel="noopener" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank"><img alt="知识共享许可协议" style="border-width:0" src="https://user-gold-cdn.xitu.io/2018/12/23/167d9537f3e29c99?w=88&h=31&f=png&s=1888"></a><br><a xmlns:dct="http://purl.org/dc/terms/" property="dct:title"><strong>db</strong> 的文档库</a> 由 <a xmlns:cc="http://creativecommons.org/ns#" href="db" property="cc:attributionName" rel="cc:attributionURL">db</a> 采用 <a rel="noopener" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议</a>进行许可。<br>基于<a xmlns:dct="http://purl.org/dc/terms/" href="https://github.com/danygitgit" rel="noopener" target="_blank">https://github.com/danygitgit</a>上的作品创作。<br>本许可协议授权之外的使用权限可以从 <a xmlns:cc="http://creativecommons.org/ns#" href="https://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel="noopener" target="_blank">https://creativecommons.org/licenses/by-nc-sa/2.5/cn/</a> 处获得。  </p></blockquote>]]></content>
      
      
      <categories>
          
          <category> javaScript </category>
          
      </categories>
      
      
        <tags>
            
            <tag> javaScript </tag>
            
            <tag> 循环 </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>Less的正确打开方式</title>
      <link href="/2019/06/17/less-de-zheng-que-da-kai-fang-shi/"/>
      <url>/2019/06/17/less-de-zheng-que-da-kai-fang-shi/</url>
      
        <content type="html"><![CDATA[<p>@<a href="https://github.com/danygitgit/document-library/blob/master/JavaScript-library/Vue/Vue%E9%A1%B9%E7%9B%AE%E5%AE%9E%E6%88%98%EF%BC%88%E4%B8%80%EF%BC%89%E2%80%94%E2%80%94ToDoList.md" target="_blank" rel="noopener">Less学习笔记</a></p><blockquote><p>create by <strong>db</strong> on <strong>2019-4-26 18:06:31</strong><br>Recently revised in <strong>2019-4-26 18:06:35</strong></p></blockquote><p>&emsp;<strong>Hello 小伙伴们，如果觉得本文还不错，麻烦点个赞或者给个 star，你们的赞和 star 是我前进的动力！<a href="https://github.com/danygitgit/document-library/blob/master/JavaScript-library/Vue/Vue%E9%A1%B9%E7%9B%AE%E5%AE%9E%E6%88%98%EF%BC%88%E4%B8%80%EF%BC%89%E2%80%94%E2%80%94ToDoList.md" target="_blank" rel="noopener">GitHub 地址</a></strong></p><p>&emsp;查阅网上诸多资料，并结合自己的学习经验，写下这篇Less学习笔记，以记录自己的学习心得。现分享给大家，以供参考。</p><p>&emsp;作为一只前端菜鸟，本篇文章旨在记录自己的学习心得，如有不足，还请多多指教，谢谢大家。</p><h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><blockquote><p>I hear and I fogorget.</p></blockquote><blockquote><p>I see and I remember.</p></blockquote><blockquote><p>I do and I understand.</p></blockquote><p>&emsp;参考文献：</p><ul><li><a href="https://segmentfault.com/a/1190000012360995#articleHeader10" target="_blank" rel="noopener">学习Less-看这篇就够了</a></li><li><a href="https://www.html.cn/doc/less/#" target="_blank" rel="noopener">Less.js中文文档</a></li></ul><h2 id="CSS短板"><a href="#CSS短板" class="headerlink" title="CSS短板"></a>CSS短板</h2><p>&emsp;&emsp;作为前端学习者的我们，或多或少都要学习一些CSS，它作为前端开发三大基石之一，时刻引领着Web的发展方向。而CSS作为一门标语言，可能给初学者的印象是简单易懂，毫无逻辑，而且选择器及样式重复率高，不像编程该有的样子。在语法更新时，每当CSS新属性的提出，又会成为浏览器的兼容性问题的绊脚石。一言以蔽之，CSS的短板不容忽视。</p><p>&emsp;&emsp;问题的诞生往往伴随着新技术的兴起，在Web飞速发展的这几年，为了让CSS富有逻辑性，更有效率，涌现出了一些神奇的预处理语言。它们让CSS彻底变成一门可以使用变量、循环、继承、自定义方法等多种特性的标记语言，逻辑性得到大大的增强。</p><h2 id="预处理语言的诞生"><a href="#预处理语言的诞生" class="headerlink" title="预处理语言的诞生"></a>预处理语言的诞生</h2><ul><li><strong>Sass</strong></li></ul><blockquote><p>Sass诞生于2007年，Ruby编写，其功能及语法都十分全面，可以说完全把CSS变成了一门编程语言，在国内外都十分受欢迎。是一门非常优秀的的预处理语言。</p></blockquote><ul><li><strong>Less</strong></li></ul><blockquote><p>Less诞生于2009年，受Sass影响创建的一个开源项目。它扩充了CSS语言，增加了诸如变量、混合、函数等功能，让CSS更易于维护、方便。</p></blockquote><ul><li><strong>Stylus</strong></li></ul><blockquote><p>Stytus诞生于2010年，来自Node.js社区，其语法功能与Sass不相伯仲，是一门十分独特的创新型语言。</p></blockquote><h2 id="预处理语言的选择"><a href="#预处理语言的选择" class="headerlink" title="预处理语言的选择"></a>预处理语言的选择</h2><p>&emsp;&emsp;这是一个十分纠结的问题。</p><p>&emsp;&emsp;在网上讨论看来，Sass 与 Stylus 相比于 Less 功能更为丰富，但对于学习成本以及适应时间 ，Less 稍胜一筹。Less 没有去掉任何 CSS 的功能，而是在现有的语法上，增添了许多额外的功能特性，所以学习 Less 是一件非常舒服的事情。</p><p>&emsp;&emsp;如果你之前没有接触过预处理语言，纠结应该学哪一个，不如先看看 下面 Less 的介绍，我相信你会爱上它的。</p><h2 id="Less的正确打开方式"><a href="#Less的正确打开方式" class="headerlink" title="Less的正确打开方式"></a>Less的正确打开方式</h2><ol><li>在页面中引用Less.js</li></ol><p>可以在<a href="https://www.css88.com/doc/less/#" target="_blank" rel="noopener">官网</a>下载或者使用<a href="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js">CDN</a></p><pre class=" language-javascript"><code class="language-javascript"><span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span></code></pre><p>&emsp;&emsp;需要注意的是，link标签一定要在引入Less.js之前引入，并且link标签的的rel属性要设置为stylesheet/less</p><pre class=" language-javascript"><code class="language-javascript"><span class="token operator">&lt;</span>link rel<span class="token operator">=</span><span class="token string">"stylesheet/less"</span> herf<span class="token operator">=</span><span class="token string">"style.less"</span><span class="token operator">></span><span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span></code></pre><ol start="2"><li>在命令行，使用Node包管理工具npm来安装:</li></ol><pre class=" language-javascript"><code class="language-javascript">npm install <span class="token operator">-</span>g less </code></pre><p>一旦安装完成，就可以在命令行中调用，例如:</p><pre class=" language-javascript"><code class="language-javascript">lessc styles<span class="token punctuation">.</span>less</code></pre><p>这样的话编译后的CSS将会输出到 ‘stdout’ 中，你可以选择将这个输出重定向到文件中:</p><pre class=" language-javascript"><code class="language-javascript">$ lessc styles<span class="token punctuation">.</span>less <span class="token operator">></span> styles<span class="token punctuation">.</span>css</code></pre><p>详细步骤请参考官方文档</p><ul><li>如果你在本地环境，可以使用第一种方式，非常简单；但在生产环境中，性能非常重要，最好使用第二种方式</li></ul><h1 id="正文"><a href="#正文" class="headerlink" title="正文"></a>正文</h1><ul><li>Less的功能特性</li></ul><h2 id="变量（Variables）"><a href="#变量（Variables）" class="headerlink" title="变量（Variables）"></a>变量（Variables）</h2><p>&emsp;&emsp;我们常常在CSS中看到同一个值重复出现了了很多次，这样不仅降低效率，还使得代码难以维护。<br><br><br>&emsp;&emsp;<strong>变量</strong>通过为你提供一种在一个地方管理这些值的方法让你的代码变得更容易维护（值得一提的是，其变量是常量 ，所以只能定义一次，不能重复使用。</p><h3 id="值变量"><a href="#值变量" class="headerlink" title="值变量"></a>值变量</h3><p>以@开头定义变量，并且使用时直接键入@名称</p><pre class=" language-less"><code class="language-less"><span class="token comment" spellcheck="true">/* less */</span><span class="token comment" spellcheck="true">//定义值变量</span><span class="token variable">@color<span class="token punctuation">:</span></span> <span class="token hexcode">#999</span><span class="token punctuation">;</span> <span class="token variable">@bgColor<span class="token punctuation">:</span></span> skyblue<span class="token punctuation">;</span> <span class="token comment" spellcheck="true">//不要添加引号</span><span class="token variable">@width<span class="token punctuation">:</span></span> <span class="token number">50%</span><span class="token punctuation">;</span><span class="token comment" spellcheck="true">//使用值变量</span><span class="token selector">#warp</span> <span class="token punctuation">{</span>   <span class="token property">color</span><span class="token punctuation">:</span> <span class="token variable">@color</span><span class="token punctuation">;</span>  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token variable">@width</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token comment" spellcheck="true">/* 生成后的CSS */</span> <span class="token selector">#wrap</span> <span class="token punctuation">{</span>  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#999</span><span class="token punctuation">;</span>  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">50%</span><span class="token punctuation">;</span><span class="token punctuation">}</span></code></pre><p>在平时工作中，我们可以把变量封装到一个文件中，这样有利于代码的组织维护。</p><pre class=" language-less"><code class="language-less"><span class="token variable">@lightPrimaryColor<span class="token punctuation">:</span></span> <span class="token hexcode">#c5cae9</span><span class="token punctuation">;</span><span class="token variable">@textPrimaryColor<span class="token punctuation">:</span></span> <span class="token hexcode">#fff</span><span class="token punctuation">;</span><span class="token variable">@accentColor<span class="token punctuation">:</span></span> <span class="token function">rgb</span><span class="token punctuation">(</span><span class="token number">99</span><span class="token punctuation">,</span><span class="token number">137</span><span class="token punctuation">,</span><span class="token number">185</span><span class="token punctuation">;</span><span class="token variable">@primaryTextColor<span class="token punctuation">:</span></span> <span class="token hexcode">#646464</span><span class="token punctuation">;</span><span class="token variable">@secondaryTextColor<span class="token punctuation">:</span></span> <span class="token hexcode">#000</span><span class="token punctuation">;</span><span class="token variable">@dividerColor<span class="token punctuation">:</span></span> <span class="token hexcode">#b6b6b6</span><span class="token punctuation">;</span><span class="token variable">@borderColor<span class="token punctuation">:</span></span> <span class="token hexcode">#dadada</span><span class="token punctuation">;</span></code></pre><h3 id="选择器及属性变量"><a href="#选择器及属性变量" class="headerlink" title="选择器及属性变量"></a>选择器及属性变量</h3><p>让选择器或者属性名变成动态值</p><pre class=" language-less"><code class="language-less"><span class="token comment" spellcheck="true">/* Less */</span><span class="token comment" spellcheck="true">//定义选择器变量</span><span class="token variable">@mySelector<span class="token punctuation">:</span></span> #wrap<span class="token punctuation">;</span><span class="token variable">@Wrap<span class="token punctuation">:</span></span> wrap<span class="token punctuation">;</span><span class="token selector">@{mySelector}</span><span class="token punctuation">{</span> <span class="token comment" spellcheck="true">//变量名 必须使用大括号包裹</span>  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#999</span><span class="token punctuation">;</span>  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">50%</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token selector">.@{Wrap}</span><span class="token punctuation">{</span>  <span class="token property">color</span><span class="token punctuation">:</span><span class="token hexcode">#ccc</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token selector">#@{Wrap}</span><span class="token punctuation">{</span>    <span class="token property">color</span><span class="token punctuation">:</span><span class="token hexcode">#666</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token comment" spellcheck="true">/* 生成的 CSS */</span><span class="token selector">#wrap</span><span class="token punctuation">{</span>   <span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#999</span><span class="token punctuation">;</span>  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">50%</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token selector">.wrap</span><span class="token punctuation">{</span>  <span class="token property">color</span><span class="token punctuation">:</span><span class="token hexcode">#ccc</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token selector">#wrap</span><span class="token punctuation">{</span>    <span class="token property">color</span><span class="token punctuation">:</span><span class="token hexcode">#666</span><span class="token punctuation">;</span><span class="token punctuation">}</span></code></pre><h3 id="url变量"><a href="#url变量" class="headerlink" title="url变量"></a>url变量</h3><p>项目结构修改时，改变其变量名就好</p><pre class=" language-less"><code class="language-less"><span class="token comment" spellcheck="true">/* Less */</span><span class="token variable">@images<span class="token punctuation">:</span></span> <span class="token string">"../img"</span><span class="token punctuation">;</span><span class="token comment" spellcheck="true">//需要加引号</span><span class="token selector">body</span> <span class="token punctuation">{</span>  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url">url("@{images}/dog.png")</span><span class="token punctuation">;</span><span class="token comment" spellcheck="true">//变量名 必须使用大括号包裹</span><span class="token punctuation">}</span><span class="token comment" spellcheck="true">/* 生成的 CSS */</span><span class="token selector">body</span> <span class="token punctuation">{</span>  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url">url("../img/dog.png")</span><span class="token punctuation">;</span><span class="token punctuation">}</span></code></pre><h3 id="声明变量"><a href="#声明变量" class="headerlink" title="声明变量"></a>声明变量</h3><p>类似于混合方法</p><pre class=" language-less"><code class="language-less"><span class="token operator">-</span>结构：<span class="token atrule">@name<span class="token punctuation">:</span></span> <span class="token punctuation">{</span> 属性：值 <span class="token punctuation">}</span><span class="token operator">-</span>使用：<span class="token variable">@name</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code></pre><pre class=" language-less"><code class="language-less"> <span class="token comment" spellcheck="true">/* Less */</span><span class="token atrule">@background<span class="token punctuation">:</span></span> <span class="token punctuation">{</span><span class="token property">background</span><span class="token punctuation">:</span>red<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span class="token selector">#main</span><span class="token punctuation">{</span>  <span class="token variable">@background</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token atrule">@Rules<span class="token punctuation">:</span></span><span class="token punctuation">{</span>  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">200</span>px<span class="token punctuation">;</span>  <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">200</span>px<span class="token punctuation">;</span>  <span class="token property">border</span><span class="token punctuation">:</span> solid <span class="token number">1</span>px red<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span class="token selector">#con</span><span class="token punctuation">{</span>  <span class="token variable">@Rules</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" spellcheck="true">/* 生成的 CSS */</span><span class="token selector">#main</span><span class="token punctuation">{</span>  <span class="token property">background</span><span class="token punctuation">:</span>red<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token selector">#con</span><span class="token punctuation">{</span>  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">200</span>px<span class="token punctuation">;</span>   <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">200</span>px<span class="token punctuation">;</span>  <span class="token property">border</span><span class="token punctuation">:</span> solid <span class="token number">1</span>px red<span class="token punctuation">;</span><span class="token punctuation">}</span></code></pre><h3 id="变量运算"><a href="#变量运算" class="headerlink" title="变量运算"></a>变量运算</h3><p>任何数值，颜色和变量都可以进行运算，=-*/都可以，计算一方带单位就好</p><pre class=" language-less"><code class="language-less"><span class="token comment" spellcheck="true">/* Less */</span><span class="token variable">@width<span class="token punctuation">:</span></span><span class="token number">300</span>px<span class="token punctuation">;</span><span class="token variable">@color<span class="token punctuation">:</span></span><span class="token hexcode">#222</span><span class="token punctuation">;</span><span class="token selector">#wrap</span><span class="token punctuation">{</span>  <span class="token property">width</span><span class="token punctuation">:</span><span class="token variable">@width-20</span><span class="token punctuation">;</span>  <span class="token property">height</span><span class="token punctuation">:</span><span class="token variable">@width-20</span><span class="token operator">*</span><span class="token number">5</span><span class="token punctuation">;</span>  <span class="token property">margin</span><span class="token punctuation">:</span><span class="token punctuation">(</span><span class="token variable">@width-20</span><span class="token punctuation">)</span><span class="token operator">*</span><span class="token number">5</span><span class="token punctuation">;</span>  <span class="token property">color</span><span class="token punctuation">:</span><span class="token variable">@color</span><span class="token operator">*</span><span class="token number">2</span><span class="token punctuation">;</span>  <span class="token property">background-color</span><span class="token punctuation">:</span><span class="token variable">@color</span> <span class="token operator">+</span> <span class="token hexcode">#111</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token comment" spellcheck="true">/* 生成的 CSS */</span><span class="token selector">#wrap</span><span class="token punctuation">{</span>  <span class="token property">width</span><span class="token punctuation">:</span><span class="token number">280</span>px<span class="token punctuation">;</span>  <span class="token property">height</span><span class="token punctuation">:</span><span class="token number">200</span>px<span class="token punctuation">;</span>  <span class="token property">margin</span><span class="token punctuation">:</span><span class="token number">1400</span>px<span class="token punctuation">;</span>  <span class="token property">color</span><span class="token punctuation">:</span><span class="token hexcode">#444</span><span class="token punctuation">;</span>  <span class="token property">background-color</span><span class="token punctuation">:</span><span class="token hexcode">#333</span><span class="token punctuation">;</span><span class="token punctuation">}</span>   </code></pre><h3 id="变量的作用域"><a href="#变量的作用域" class="headerlink" title="变量的作用域"></a>变量的作用域</h3><p>延迟加载，块级作用域<br><br>Less 中的作用域与编程语言中的作用域概念非常相似。首先会在局部查找变量和混合，如果没找到，编译器就会在父作用域中查找，依次类推。</p><pre class=" language-less"><code class="language-less"><span class="token comment" spellcheck="true">/* Less */</span><span class="token variable">@var<span class="token punctuation">:</span></span> <span class="token variable">@a</span><span class="token punctuation">;</span><span class="token variable">@a<span class="token punctuation">:</span></span> <span class="token number">100%</span><span class="token punctuation">;</span><span class="token selector">#wrap</span> <span class="token punctuation">{</span>  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token variable">@var</span><span class="token punctuation">;</span>  <span class="token variable">@a<span class="token punctuation">:</span></span> <span class="token number">9%</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token comment" spellcheck="true">/* 生成的 CSS */</span><span class="token selector">#wrap</span> <span class="token punctuation">{</span>  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">9%</span><span class="token punctuation">;</span><span class="token punctuation">}</span></code></pre><h2 id="嵌套（Nested）"><a href="#嵌套（Nested）" class="headerlink" title="嵌套（Nested）"></a>嵌套（Nested）</h2><p>模仿了 HTML 的结构，代码更简洁</p><pre class=" language-less"><code class="language-less"><span class="token comment" spellcheck="true">/* Less */</span><span class="token selector">#header</span> <span class="token punctuation">{</span>  <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span>  <span class="token selector">.navigation</span> <span class="token punctuation">{</span>    <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">12</span>px<span class="token punctuation">;</span>  <span class="token punctuation">}</span>  <span class="token selector">.logo</span> <span class="token punctuation">{</span>    <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">300</span>px<span class="token punctuation">;</span>  <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token comment" spellcheck="true">/* 生成的 CSS */</span><span class="token selector">#header</span> <span class="token punctuation">{</span>  <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token selector">#header .navigation</span> <span class="token punctuation">{</span>  <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">12</span>px<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token selector">#header .logo</span> <span class="token punctuation">{</span>  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">300</span>px<span class="token punctuation">;</span><span class="token punctuation">}</span></code></pre><h3 id="amp-的妙用"><a href="#amp-的妙用" class="headerlink" title="&amp; 的妙用"></a>&amp; 的妙用</h3><p>&amp; ：代表的上一层选择器的名字，此例便是header</p><ul><li>要点：<br><code>.</code> 与 <code>#</code> 皆可作为 方法前缀。<br>方法后写不写 <code>()</code> 看个人习惯。<pre class=" language-Less"><code class="language-Less">/* Less */#header{&:after{  content:"Less is more!";}.title{  font-weight:bold;}&_content{//理解方式：直接把 & 替换成 #header  margin:20px;}}/* 生成的 CSS */#header:after{content:"Less is more!";}#header .title{ //嵌套了font-weight:bold;}#header_content{//没有嵌套！  margin:20px;}</code></pre><h2 id="混合（Mixins）"><a href="#混合（Mixins）" class="headerlink" title="混合（Mixins）"></a>混合（Mixins）</h2>混合就是一种将一系列属性从一个规则集引入(“混合”)到另一个规则集的方式。<h3 id="普通混合（无参数）"><a href="#普通混合（无参数）" class="headerlink" title="普通混合（无参数）"></a>普通混合（无参数）</h3>方法犹如 声明的集合，使用时 直接键入名称即可<pre class=" language-less"><code class="language-less"><span class="token comment" spellcheck="true">/* Less */</span><span class="token selector">.card</span> <span class="token punctuation">{</span> <span class="token comment" spellcheck="true">// 等价于 .card()</span>  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#f6f6f6</span><span class="token punctuation">;</span>  <span class="token property">-webkit-box-shadow</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">1</span>px <span class="token number">2</span>px <span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">151</span><span class="token punctuation">,</span> <span class="token number">151</span><span class="token punctuation">,</span> <span class="token number">151</span><span class="token punctuation">,</span> <span class="token number">.58</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token property">box-shadow</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">1</span>px <span class="token number">2</span>px <span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">151</span><span class="token punctuation">,</span> <span class="token number">151</span><span class="token punctuation">,</span> <span class="token number">151</span><span class="token punctuation">,</span> <span class="token number">.58</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token selector">#wrap</span><span class="token punctuation">{</span><span class="token mixin-usage function">.card</span><span class="token punctuation">;</span><span class="token comment" spellcheck="true">//等价于.card();</span><span class="token punctuation">}</span><span class="token comment" spellcheck="true">/* 生成的 CSS */</span><span class="token selector">#wrap</span><span class="token punctuation">{</span><span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#f6f6f6</span><span class="token punctuation">;</span><span class="token property">-webkit-box-shadow</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">1</span>px <span class="token number">2</span>px <span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">151</span><span class="token punctuation">,</span> <span class="token number">151</span><span class="token punctuation">,</span> <span class="token number">151</span><span class="token punctuation">,</span> <span class="token number">.58</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token property">box-shadow</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">1</span>px <span class="token number">2</span>px <span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">151</span><span class="token punctuation">,</span> <span class="token number">151</span><span class="token punctuation">,</span> <span class="token number">151</span><span class="token punctuation">,</span> <span class="token number">.58</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span></code></pre><h3 id="传参混合"><a href="#传参混合" class="headerlink" title="传参混合"></a>传参混合</h3>Less 可以使用默认参数，如果 没有传参数，那么将使用默认参数。<br>@arguments 犹如 JS 中的 arguments 指代的是 全部参数。<br>传的参数中 必须带着单位。```less/* Less */.border(@a:10px,@b:50px,@c:30px,@color:#000){border:solid 1px @color;box-shadow: @arguments;//指代的是 全部参数}#main{.border(0px,5px,30px,red);//必须带着单位}#wrap{.border(0px);}#content{.border;//等价于 .border()}</li></ul><p>/* 生成的 CSS */</p><p>#main{<br>  border:solid 1px red;<br>  box-shadow:0px,5px,30px,red;<br>}</p><p>#wrap{<br>  border:solid 1px #000;<br>  box-shadow: 0px 50px 30px #000;<br>}</p><p>#content{<br>  border:solid 1px #000;<br>  box-shadow: 10px 50px 30px #000;<br>}  </p><pre><code>### 方法的匹配模式以某个参数作为匹配符，与面向对象中的多态很相似```less/* Less */.triangle(top,@width:20px,@color:#000){  border-color:transparent  transparent @color transparent ;}.triangle(right,@width:20px,@color:#000){  border-color:transparent @color transparent  transparent ;}.triangle(bottom,@width:20px,@color:#000){  border-color:@color transparent  transparent  transparent ;}.triangle(left,@width:20px,@color:#000){  border-color:transparent  transparent  transparent @color;}.triangle(@_,@width:20px,@color:#000){  border-style: solid;  border-width: @width;}#main{  .triangle(left, 50px, #999)}/* 生成的 CSS */#main{  border-color:transparent  transparent  transparent #999;  border-style: solid;  border-width: 50px;}</code></pre><ul><li><p>要点</p><pre class=" language-less"><code class="language-less"><span class="token operator">-</span> 第一个参数 `left` 要会找到方法中匹配程度最高的，如果匹配程度相同，将全部选择，并存在着样式覆盖替换。<span class="token operator">-</span> 如果匹配的参数 是变量，则将会匹配，如 `<span class="token variable">@_</span>` 。</code></pre><h3 id="方法的命名空间"><a href="#方法的命名空间" class="headerlink" title="方法的命名空间"></a>方法的命名空间</h3><p>让方法更加规范</p><pre class=" language-less"><code class="language-less"><span class="token comment" spellcheck="true">/* Less */</span><span class="token selector">#card()</span><span class="token punctuation">{</span><span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#723232</span><span class="token punctuation">;</span><span class="token selector">.d(<span class="token variable">@w</span>:300px)</span><span class="token punctuation">{</span>  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token variable">@w</span><span class="token punctuation">;</span>  <span class="token selector">#a(<span class="token variable">@h</span>:300px)</span><span class="token punctuation">{</span>    <span class="token property">height</span><span class="token punctuation">:</span> <span class="token variable">@h</span><span class="token punctuation">;</span><span class="token comment" spellcheck="true">//可以使用上一层传进来的方法</span>    <span class="token property">width</span><span class="token punctuation">:</span> <span class="token variable">@w</span><span class="token punctuation">;</span>  <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token selector">#wrap</span><span class="token punctuation">{</span><span class="token mixin-usage function">#card > .d > #a</span><span class="token punctuation">(</span><span class="token number">100</span>px<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 父元素不能加 括号</span><span class="token punctuation">}</span><span class="token selector">#main</span><span class="token punctuation">{</span><span class="token mixin-usage function">#card .d</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token selector">#con</span><span class="token punctuation">{</span><span class="token comment" spellcheck="true">//不得单独使用命名空间的方法</span><span class="token comment" spellcheck="true">//.d() 如果前面没有引入命名空间 #card ，将会报错</span>#card<span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 等价于 #card();</span><span class="token number">.</span><span class="token function">d</span><span class="token punctuation">(</span><span class="token number">20</span>px<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">//必须先引入 #card</span><span class="token punctuation">}</span><span class="token comment" spellcheck="true">/* 生成的 CSS */</span><span class="token selector">#wrap</span><span class="token punctuation">{</span><span class="token property">height</span><span class="token punctuation">:</span><span class="token number">100</span>px<span class="token punctuation">;</span><span class="token property">width</span><span class="token punctuation">:</span><span class="token number">300</span>px<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token selector">#main</span><span class="token punctuation">{</span><span class="token property">width</span><span class="token punctuation">:</span><span class="token number">300</span>px<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token selector">#con</span><span class="token punctuation">{</span><span class="token property">width</span><span class="token punctuation">:</span><span class="token number">20</span>px<span class="token punctuation">;</span><span class="token punctuation">}</span></code></pre></li><li><p>要点</p><pre class=" language-less"><code class="language-less"><span class="token operator">-</span> 在 CSS 中`>` 选择器，选择的是 儿子元素，就是 必须与父元素 有直接血源的元素。<span class="token operator">-</span> 在引入命令空间时，如使用 `>` 选择器，父元素不能加 括号。<span class="token operator">-</span> 不得单独使用命名空间的方法 必须先引入命名空间，才能使用 其中方法。<span class="token operator">-</span> 子方法 可以使用上一层传进来的方法</code></pre><h3 id="方法的条件筛选"><a href="#方法的条件筛选" class="headerlink" title="方法的条件筛选"></a>方法的条件筛选</h3><p>Less 没有 if else，可是它有 when</p><pre class=" language-less"><code class="language-less"><span class="token comment" spellcheck="true">/* Less */</span><span class="token selector">#card</span><span class="token punctuation">{</span>      <span class="token comment" spellcheck="true">// and 运算符 ，相当于 与运算 &amp;&amp;，必须条件全部符合才会执行</span><span class="token selector">.border(<span class="token variable">@width</span>,<span class="token variable">@color</span>,<span class="token variable">@style</span>) when (<span class="token variable">@width</span>>100px) and(<span class="token variable">@color</span>=#999)</span><span class="token punctuation">{</span>  <span class="token property">border</span><span class="token punctuation">:</span><span class="token variable">@style</span> <span class="token variable">@color</span> <span class="token variable">@width</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token comment" spellcheck="true">// not 运算符，相当于 非运算 !，条件为 不符合才会执行</span><span class="token selector">.background(<span class="token variable">@color</span>) when not (<span class="token variable">@color</span>>=#222)</span><span class="token punctuation">{</span>  <span class="token property">background</span><span class="token punctuation">:</span><span class="token variable">@color</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token comment" spellcheck="true">// , 逗号分隔符：相当于 或运算 ||，只要有一个符合条件就会执行</span><span class="token selector">.font(<span class="token variable">@size</span>:20px) when (<span class="token variable">@size</span>>50px) , (<span class="token variable">@size</span>&lt;100px)</span><span class="token punctuation">{</span>    <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token variable">@size</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token selector">#main</span><span class="token punctuation">{</span><span class="token mixin-usage function">#card>.border</span><span class="token punctuation">(</span><span class="token number">200</span>px<span class="token punctuation">,</span><span class="token hexcode">#999</span><span class="token punctuation">,</span>solid<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token mixin-usage function">#card .background</span><span class="token punctuation">(</span><span class="token hexcode">#111</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token mixin-usage function">#card > .font</span><span class="token punctuation">(</span><span class="token number">40</span>px<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token comment" spellcheck="true">/* 生成后的 CSS */</span><span class="token selector">#main</span><span class="token punctuation">{</span><span class="token property">border</span><span class="token punctuation">:</span>solid <span class="token hexcode">#999</span> <span class="token number">200</span>px<span class="token punctuation">;</span><span class="token property">background</span><span class="token punctuation">:</span><span class="token hexcode">#111</span><span class="token punctuation">;</span><span class="token property">font-size</span><span class="token punctuation">:</span><span class="token number">40</span>px<span class="token punctuation">;</span><span class="token punctuation">}</span></code></pre></li><li><p>要点</p><pre class=" language-less"><code class="language-less"><span class="token operator">-</span> 比较运算有： > >= = =&lt; &lt;。<span class="token operator">-</span> = 代表的是等于<span class="token operator">-</span> 除去关键字 true 以外的值都被视为 false：</code></pre><h3 id="数量不定的参数"><a href="#数量不定的参数" class="headerlink" title="数量不定的参数"></a>数量不定的参数</h3><p>如果你希望你的方法接受数量不定的参数，你可以使用… ，犹如 ES6 的扩展运算符</p><pre class=" language-less"><code class="language-less"><span class="token comment" spellcheck="true">/* Less */</span><span class="token selector">.boxShadow(...)</span><span class="token punctuation">{</span><span class="token property">box-shadow</span><span class="token punctuation">:</span> <span class="token variable">@arguments</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token selector">.textShadow(<span class="token variable">@a</span>,...)</span><span class="token punctuation">{</span>    <span class="token property">text-shadow</span><span class="token punctuation">:</span> <span class="token variable">@arguments</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token selector">#main</span><span class="token punctuation">{</span><span class="token mixin-usage function">.boxShadow</span><span class="token punctuation">(</span><span class="token number">1</span>px<span class="token punctuation">,</span><span class="token number">4</span>px<span class="token punctuation">,</span><span class="token number">30</span>px<span class="token punctuation">,</span>red<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token mixin-usage function">.textShadow</span><span class="token punctuation">(</span><span class="token number">1</span>px<span class="token punctuation">,</span><span class="token number">4</span>px<span class="token punctuation">,</span><span class="token number">30</span>px<span class="token punctuation">,</span>red<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span></code></pre></li></ul><p>/* 生成后的 CSS */</p><p>#main{<br>  box-shadow: 1px 4px 30px red;<br>  text-shadow: 1px 4px 30px red;<br>}</p><pre><code>### 方法使用important！使用方法 非常简单，在方法名后 加上关键字即可。```less/* Less */.border{  border: solid 1px red;  margin: 50px;}#main{  .border() !important;}/* 生成后的 CSS */#main {  border: solid 1px red !important;  margin: 50px !important;}</code></pre><h3 id="实战技巧"><a href="#实战技巧" class="headerlink" title="实战技巧"></a>实战技巧</h3><p>下面是官网中的一个非常赞的 Demo</p><pre class=" language-less"><code class="language-less"><span class="token comment" spellcheck="true">/* Less */</span><span class="token selector">.average(<span class="token variable">@x</span>, <span class="token variable">@y</span>)</span> <span class="token punctuation">{</span>  <span class="token variable">@average<span class="token punctuation">:</span></span> <span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token variable">@x</span> <span class="token operator">+</span> <span class="token variable">@y</span><span class="token punctuation">)</span> <span class="token operator">/</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 selector">div</span> <span class="token punctuation">{</span>  <span class="token mixin-usage function">.average</span><span class="token punctuation">(</span><span class="token number">16</span>px<span class="token punctuation">,</span> <span class="token number">50</span>px<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 调用 方法</span>  <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token variable">@average</span><span class="token punctuation">;</span>    <span class="token comment" spellcheck="true">// 使用返回值</span><span class="token punctuation">}</span><span class="token comment" spellcheck="true">/* 生成的 CSS */</span><span class="token selector">div</span> <span class="token punctuation">{</span>  <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">33</span>px<span class="token punctuation">;</span><span class="token punctuation">}</span></code></pre><p>可以说 Less 是一门优雅编程语言。</p><h2 id="继承"><a href="#继承" class="headerlink" title="继承"></a>继承</h2><p>extend 是 Less 的一个伪类。它可继承 所匹配声明中的全部样式。<br><br><br><strong>特点</strong>：性能高，灵活度低，不能传参，无括号。</p><h3 id="extend-关键字的使用"><a href="#extend-关键字的使用" class="headerlink" title="extend 关键字的使用"></a>extend 关键字的使用</h3><pre class=" language-less"><code class="language-less"><span class="token comment" spellcheck="true">/* Less */</span><span class="token selector">.animation</span><span class="token punctuation">{</span>  <span class="token property">transition</span><span class="token punctuation">:</span> all <span class="token number">.3</span>s ease<span class="token operator">-</span>out<span class="token punctuation">;</span>  <span class="token selector">.hide</span><span class="token punctuation">{</span>    <span class="token property">transform</span><span class="token punctuation">:</span><span class="token function">scale</span><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 selector">#main</span><span class="token punctuation">{</span>    &amp;<span class="token punctuation">:</span><span class="token function">extend</span><span class="token punctuation">(</span><span class="token number">.</span>animation<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token selector">#con</span><span class="token punctuation">{</span>  &amp;<span class="token punctuation">:</span><span class="token function">extend</span><span class="token punctuation">(</span><span class="token number">.</span>animation <span class="token number">.</span>hide<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token comment" spellcheck="true">/* 生成后的 CSS */</span><span class="token selector">.animation,#main</span><span class="token punctuation">{</span>  <span class="token property">transition</span><span class="token punctuation">:</span> all <span class="token number">.3</span>s ease<span class="token operator">-</span>out<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token selector">.animation .hide , #con</span><span class="token punctuation">{</span>  <span class="token property">transform</span><span class="token punctuation">:</span><span class="token function">scale</span><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></code></pre><h3 id="减少代码的重复性"><a href="#减少代码的重复性" class="headerlink" title="减少代码的重复性"></a>减少代码的重复性</h3><p>从表面看来，extend 与 方法 最大的差别，就是 extend 是同个选择器共用同一个声明，而 方法 是使用自己的声明，这无疑 增加了代码的重复性。<br><br><br>方法示例 与上面的 extend 进行对比：</p><pre class=" language-less"><code class="language-less"><span class="token comment" spellcheck="true">/* Less */</span><span class="token selector">.Method</span><span class="token punctuation">{</span>  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">200</span>px<span class="token punctuation">;</span>  <span class="token selector">&amp;:after</span> <span class="token punctuation">{</span>    <span class="token property">content</span><span class="token punctuation">:</span><span class="token string">"Less is good!"</span><span class="token punctuation">;</span>  <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token selector">#main</span><span class="token punctuation">{</span>  <span class="token mixin-usage function">.Method</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token selector">#wrap</span><span class="token punctuation">{</span>  <span class="token mixin-usage function">.Method</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token comment" spellcheck="true">/* 生成的 CSS */</span><span class="token selector">#main</span><span class="token punctuation">{</span>  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">200</span>px<span class="token punctuation">;</span>  <span class="token selector">&amp;:after</span><span class="token punctuation">{</span>    <span class="token property">content</span><span class="token punctuation">:</span><span class="token string">"Less is good!"</span><span class="token punctuation">;</span>  <span class="token punctuation">}</span>  <span class="token punctuation">}</span><span class="token selector">#wrap</span><span class="token punctuation">{</span>  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">200</span>px<span class="token punctuation">;</span>  <span class="token selector">&amp;:after</span><span class="token punctuation">{</span>    <span class="token property">content</span><span class="token punctuation">:</span><span class="token string">"Less is good!"</span><span class="token punctuation">;</span>  <span class="token punctuation">}</span>  <span class="token punctuation">}</span></code></pre><ul><li>要点<ul><li>选择器和扩展之间 是允许有空格的：pre:hover :extend(div pre).</li><li>可以有多个扩展: pre:hover:extend(div pre):extend(.bucket tr) - 注意这与 pre:hover:extend(div pre, .bucket tr)一样。<br>这是不可以的，扩展必须在最后 : pre:hover:extend(div pre).nth-child(odd)。</li><li>如果一个规则集包含多个选择器，所有选择器都可以使用extend关键字。<h2 id="导入"><a href="#导入" class="headerlink" title="导入"></a>导入</h2><h3 id="文件导入"><a href="#文件导入" class="headerlink" title="文件导入"></a>文件导入</h3></li></ul></li></ul><ol><li>导入less文件可省略后缀<pre class=" language-javascript"><code class="language-javascript"><span class="token keyword">import</span> <span class="token string">"main"</span><span class="token punctuation">;</span><span class="token comment" spellcheck="true">// 等价于</span><span class="token keyword">import</span> <span class="token string">"main.less"</span><span class="token punctuation">;</span></code></pre></li><li>@omport 的位置可以随意放置<pre class=" language-less"><code class="language-less"><span class="token selector">#main</span> <span class="token punctuation">{</span><span class="token property">font-size</span><span class="token punctuation">:</span><span class="token number">150</span>px<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token variable">@import</span> <span class="token string">"style"</span></code></pre><h3 id="reference"><a href="#reference" class="headerlink" title="reference"></a>reference</h3>Less中最强大的特性<br>使用@import (reference)导入外部文件，但不会添加 把导入的文件 编译到最终输出中，只引用。```less/* Less */@import (reference) "bootstrap.less"; </li></ol><p>#wrap:extend(.navbar all){}</p><pre><code>### once@import语句的默认行为。这表明相同的文件只会被导入一次，而随后的导入文件的重复代码都不会解析。```less@import (once) &quot;foo.less&quot;;@import (once) &quot;foo.less&quot;; // this statement will be ignored</code></pre><h3 id="multiple"><a href="#multiple" class="headerlink" title="multiple"></a>multiple</h3><p>使用@import (multiple)允许导入多个同名文件。</p><pre class=" language-less"><code class="language-less"><span class="token comment" spellcheck="true">/* Less */</span>   <span class="token comment" spellcheck="true">// file: foo.less</span><span class="token selector">.a</span> <span class="token punctuation">{</span>  <span class="token property">color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token comment" spellcheck="true">// file: main.less</span><span class="token variable">@import</span> <span class="token punctuation">(</span>multiple<span class="token punctuation">)</span> <span class="token string">"foo.less"</span><span class="token punctuation">;</span><span class="token variable">@import</span> <span class="token punctuation">(</span>multiple<span class="token punctuation">)</span> <span class="token string">"foo.less"</span><span class="token punctuation">;</span><span class="token comment" spellcheck="true">/* 生成后的 CSS */</span><span class="token selector">.a</span> <span class="token punctuation">{</span>  <span class="token property">color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token selector">.a</span> <span class="token punctuation">{</span>  <span class="token property">color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span><span class="token punctuation">}</span></code></pre><h2 id="函数"><a href="#函数" class="headerlink" title="函数"></a>函数</h2><h3 id="判断类型"><a href="#判断类型" class="headerlink" title="判断类型"></a>判断类型</h3><ol><li><strong>isnumber</strong><br>判断给定的值 是否 是一个数字。<pre class=" language-less"><code class="language-less"><span class="token function">isnumber</span><span class="token punctuation">(</span><span class="token hexcode">#ff0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>     <span class="token comment" spellcheck="true">// false</span><span class="token function">isnumber</span><span class="token punctuation">(</span>blue<span class="token punctuation">)</span><span class="token punctuation">;</span>     <span class="token comment" spellcheck="true">// false</span><span class="token function">isnumber</span><span class="token punctuation">(</span><span class="token string">"string"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// false</span><span class="token function">isnumber</span><span class="token punctuation">(</span><span class="token number">1234</span><span class="token punctuation">)</span><span class="token punctuation">;</span>     <span class="token comment" spellcheck="true">// true</span><span class="token function">isnumber</span><span class="token punctuation">(</span><span class="token number">56</span>px<span class="token punctuation">)</span><span class="token punctuation">;</span>     <span class="token comment" spellcheck="true">// true</span><span class="token function">isnumber</span><span class="token punctuation">(</span><span class="token number">7.8%</span><span class="token punctuation">)</span><span class="token punctuation">;</span>     <span class="token comment" spellcheck="true">// true</span><span class="token function">isnumber</span><span class="token punctuation">(</span>keyword<span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment" spellcheck="true">// false</span><span class="token function">isnumber</span><span class="token punctuation">(</span><span class="token url">url(...)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// false</span></code></pre></li><li><strong>iscolor</strong><blockquote><p>判断给定的值是否是一个颜色。</p></blockquote></li><li><strong>isurl</strong><blockquote><p>判断给定的值是否是一个 url。</p></blockquote><h3 id="颜色操作"><a href="#颜色操作" class="headerlink" title="颜色操作"></a>颜色操作</h3></li><li><strong>saturate</strong> <blockquote><p>增加一定数值的颜色饱和度。 </p></blockquote></li><li><strong>lighten</strong><blockquote><p>降低一定数值的颜色亮度。</p></blockquote></li><li><strong>darken</strong><blockquote><p>降低一定数值的颜色亮度。</p></blockquote></li><li><strong>fade</strong><blockquote><p>给颜色设定一定数值的透明度。</p></blockquote></li><li><strong>mix</strong> <blockquote><p>根据比例混合两种颜色。</p></blockquote><h3 id="数学函数"><a href="#数学函数" class="headerlink" title="数学函数"></a>数学函数</h3></li><li><strong>ceil</strong> <blockquote><p>向上取整。 </p></blockquote></li><li><strong>floor</strong> <blockquote><p>向下取整。</p></blockquote></li><li><strong>percentage</strong> <blockquote><p>将浮点数转换为百分比字符串。</p></blockquote></li><li><strong>round</strong> <blockquote><p>四舍五入。</p></blockquote></li><li><strong>abs</strong> <blockquote><p>计算数字的绝对值，原样保持单位。<br>由于文章篇幅有限，所以只能介绍一些使用效率高的函数。<br>如果你想了解更多，可以去官网的<a href="http://lesscss.cn/functions/" target="_blank" rel="noopener">函数链接</a></p></blockquote><h2 id="其他"><a href="#其他" class="headerlink" title="其他"></a>其他</h2><h3 id="注释"><a href="#注释" class="headerlink" title="注释"></a>注释</h3></li></ol><ul><li>/* */ <blockquote><p>CSS原生注释，会被编译到CSS文件中</p></blockquote></li><li>// <blockquote><p>Less提供的注释，不会被编辑到CSS中</p></blockquote><h3 id="避免编译"><a href="#避免编译" class="headerlink" title="避免编译"></a>避免编译</h3>结构： <code>~&#39; 值 &#39;</code><pre class=" language-less"><code class="language-less"><span class="token comment" spellcheck="true">/* Less */</span><span class="token selector">#main</span><span class="token punctuation">{</span><span class="token property">width</span><span class="token punctuation">:</span>~<span class="token string">'calc(300px-30px)'</span><span class="token punctuation">;</span><span class="token punctuation">}</span></code></pre></li></ul><p>/* 生成后的 CSS */</p><p>#main{<br>  width:calc(300px-30px);<br>}</p><pre><code>### 使用JS因为 Less 是由 JS 编写，所以 Less 有一得天独厚的特性：代码中使用 Javascript 。```less/* Less */@content:`&quot;aaa&quot;.toUpperCase()`;#randomColor{  @randomColor: ~&quot;rgb(`Math.round(Math.random() * 256)`,`Math.round(Math.random() * 256)`,`Math.round(Math.random() * 256)`)&quot;;}#wrap{  width: ~&quot;`Math.round(Math.random() * 100)`px&quot;;  &amp;:after{      content:@content;  }  height: ~&quot;`window.innerHeight`px&quot;;  alert:~&quot;`alert(1)`&quot;;  #randomColor();  background-color: @randomColor;}/* 生成后的 CSS */// 弹出 1#wrap{  width: 随机值（0~100）px;  height: 743px;//由电脑而异  background: 随机颜色;}#wrap::after{  content:&quot;AAA&quot;;}</code></pre><h2 id="6、总结"><a href="#6、总结" class="headerlink" title="6、总结"></a>6、总结</h2><p>&emsp;从我学习 Web 以来，无数前辈告诉我，Web 有三大基石，JS 控制行为，HTML 控制结构，CSS 控制样式。我一直再想 为什么要分为 3 个语言？为什么不能合成一个语言？或者说 就没有更合适的吗？在这几年的 Web 发展中，页面从 MVC 到 现在的 MVVC，结构正在发生着改变，但 其根本 不过是造了一个又一个 完美的轮子。我们为什么就不能打破传统呢？让 前端的 三大基石 变成一座大山呢 ？</p><p>&emsp;请试想一下，那该是个怎样的世界。</p><p>&emsp;路漫漫其修远兮，与诸君共勉。</p><p><strong>后记：Hello 小伙伴们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更丰富文章的动力！<a href="https://github.com/danygitgit/document-library/blob/master/JavaScript-library/Vue/Vue%E9%A1%B9%E7%9B%AE%E5%AE%9E%E6%88%98%EF%BC%88%E4%B8%80%EF%BC%89%E2%80%94%E2%80%94ToDoList.md" target="_blank" rel="noopener">GitHub 地址</a></strong></p><blockquote><p><a rel="noopener" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank"><img alt="知识共享许可协议" style="border-width:0" src="https://user-gold-cdn.xitu.io/2018/12/23/167d9537f3e29c99?w=88&h=31&f=png&s=1888"></a><br><a xmlns:dct="http://purl.org/dc/terms/" property="dct:title"><strong>db</strong> 的文档库</a> 由 <a xmlns:cc="http://creativecommons.org/ns#" href="db" property="cc:attributionName" rel="cc:attributionURL">db</a> 采用 <a rel="noopener" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议</a>进行许可。<br>基于<a xmlns:dct="http://purl.org/dc/terms/" href="https://github.com/danygitgit" rel="noopener" target="_blank">https://github.com/danygitgit</a>上的作品创作。<br>本许可协议授权之外的使用权限可以从 <a xmlns:cc="http://creativecommons.org/ns#" href="https://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel="noopener" target="_blank">https://creativecommons.org/licenses/by-nc-sa/2.5/cn/</a> 处获得。</p></blockquote>]]></content>
      
      
      <categories>
          
          <category> Less </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Less </tag>
            
            <tag> CSS </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>MAC地址和IP地址的区别与联系</title>
      <link href="/2019/06/09/mac-di-zhi-he-ip-di-zhi-de-qu-bie-yu-lian-xi/"/>
      <url>/2019/06/09/mac-di-zhi-he-ip-di-zhi-de-qu-bie-yu-lian-xi/</url>
      
        <content type="html"><![CDATA[<p>@[MAC地址和IP地址的区别与联系（计算机网络篇）]</p><blockquote><p>create by <strong>db</strong> on <strong>2018-12-30 15:42:36</strong><br>Recently revised in <strong>2019-1-25 23:36:22</strong></p></blockquote><h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><blockquote><p>I hear and I fogorget. </p></blockquote><blockquote><p>I see and I remember.  </p></blockquote><blockquote><p>I do and I understand.  </p></blockquote><p>&emsp;作为一个前端码农，每天都在跟浏览器打交道，大家有对浏览器的数据存储方案有多少了解呢？</p><p>&emsp;参考文献：</p><ul><li><a href="https://blog.csdn.net/yang_best/article/details/41643589" target="_blank" rel="noopener">MAC地址和IP地址的区别与联系 | CSDN-gogo_hua </a></li></ul><h1 id="正文"><a href="#正文" class="headerlink" title="正文"></a><strong>正文</strong></h1><h2 id="MAC地址和IP地址的区别与联系"><a href="#MAC地址和IP地址的区别与联系" class="headerlink" title="MAC地址和IP地址的区别与联系"></a>MAC地址和IP地址的区别与联系</h2><p>&emsp;简单地说：ip地址是服务商给你的，mac地址是你的网卡物理地址。</p><h3 id="一、IP地址"><a href="#一、IP地址" class="headerlink" title="一、IP地址"></a>一、IP地址</h3><p>&emsp;对于IP地址，相信大家都很熟悉，即指使用TCP/IP协议指定给主机的32位地址。IP地址由用点分隔开的4个8八位组构成，如<code>192.168.0.1</code>就是一个IP地址，这种写法叫点分十进制格式.</p><p>&emsp;IP地址由网络地址和主机地址两部分组成，分配给这两部分的位数随地址类（A类、B类、C类等）的不同而不同。网络地址用于路由选择，而主机地址用于在网络或子网内部寻找一个单独的主机。一个IP地址使得将来自源地址的数据通过路由而传送到目的地址变为可能。</p><h3 id="二、MAC地址"><a href="#二、MAC地址" class="headerlink" title="二、MAC地址"></a>二、MAC地址</h3><p>&emsp;对于MAC地址，由于我们不直接和它接触，所以大家不一定很熟悉。</p><p>&emsp;在OSI（Open System Interconnection，开放系统互连）7层网络协议（物理层，数据链路层，网络层，传输层，会话层，表示层，应用层）参考模型中，第二层为数据链路层（Data Link）。它包含两个子层，上一层是逻辑链路控制（LLC：Logical Link Control），下一层即是我们前面所提到的MAC（Media Access Control）层，即介质访问控制层。</p><p>&emsp;所谓介质（Media），是指传输信号所通过的多种物理环境。常用网络介质包括电缆（如：双绞线，同轴电缆，光纤），还有微波、激光、红外线等，有时也称介质为物理介质。</p><p>&emsp;MAC地址也叫物理地址、硬件地址或链路地址，由网络设备制造商生产时写在硬件内部。这个地址与网络无关，也即无论将带有这个地址的硬件（如网卡、集线器、路由器等）接入到网络的何处，它都有相同的MAC地址，MAC地址一般不可改变，不能由用户自己设定。</p><h3 id="三、MAC地址的长度、表示方法、分配方法及其唯一性"><a href="#三、MAC地址的长度、表示方法、分配方法及其唯一性" class="headerlink" title="三、MAC地址的长度、表示方法、分配方法及其唯一性"></a>三、MAC地址的长度、表示方法、分配方法及其唯一性</h3><p>&emsp;MAC地址的长度为48位（6个字节），通常表示为12个16进制数，每2个16进制数之间用冒号隔开，如：<code>08:00:20:0A:8C:6D</code>就是一个MAC地址，其中前6位16进制数<code>08:00:20</code>代表网络硬件制造商的编号，它由IEEE（Istitute of Electrical and Electronics Engineers，电气与电子工程师协会）分配，而后3位16进制数<code>0A:8C:6D</code>代表该制造商所制造的某个网络产品（如网卡）的系列号。</p><p>&emsp;每个网络制造商必须确保它所制造的每个以太网设备都具有相同的前三字节以及不同的后三个字节。这样就可保证世界上每个以太网设备都具有唯一的MAC地址。</p><h3 id="四、IP地址与MAC地址在互连网中的作用"><a href="#四、IP地址与MAC地址在互连网中的作用" class="headerlink" title="四、IP地址与MAC地址在互连网中的作用"></a>四、IP地址与MAC地址在互连网中的作用</h3><p>&emsp;既然每个以太网设备在出厂时都有一个唯一的MAC地址了，那为什么还需要为每台主机再分配一个IP地址呢？或者说为什么每台主机都分配唯一的IP地址了，为什么还要在网络设备（如网卡，集线器，路由器等）生产时内嵌一个唯一的MAC地址呢？</p><p>主要原因有以下几点：</p><ol><li><p>IP地址的分配是根据网络的拓朴结构，而不是根据谁制造了网络设置。将高效的路由选择方案建立在设备制造商的基础上而不是网络所处的拓朴位置基础上，这种方案是不可行的。</p></li><li><p>当存在一个附加层的地址寻址时，设备更易于移动和维修。例如，如果一个以太网卡坏了，可以被更换，而无须取得一个新的IP地址。如果一个IP主机从一个网络移到另一个网络，可以给它一个新的IP地址，而无须换一个新的网卡。</p></li><li><p>无论是局域网，还是广域网中的计算机之间的通信，最终都表现为将数据包从某种形式的链路上的初始节点出发，从一个节点传递到另一个节点，最终传送到目的节点。数据包在这些节点之间的移动都是由ARP（Address Resolution Protocol：地址解析协议）负责将IP地址映射到MAC地址上来完成的。</p></li></ol><p><strong>下面我们来通过一个例子看看IP地址和MAC地址是怎样结合来传送数据包的。</strong></p><p>&emsp;假设网络上要将一个数据包（名为PAC）由北京的一台主机（名称为A，IP地址为IP_A，MAC地址为MAC_A）发送到华盛顿的一台主机（名称为B，IP地址为IP_B，MAC地址为MAC_B）。</p><p>&emsp;这两台主机之间不可能是直接连接起来的，因而数据包在传递时必然要经过许多中间节点（如路由器，服务器等等），我们假定在传输过程中要经过C1、C2、C3（其MAC地址分别为M1，M2，M3）三个节点。A在将PAC发出之前，先发送一个ARP请求，找到其要到达IP_B所必须经历的第一个中间节点C1的MAC地址M1，然后在其数据包中封装（Encapsulation）这些地址：IP_A、IP_B，MAC_A和M1。当PAC传到C1后，再由ARP根据其目的IP地址IP_B，找到其要经历的第二个中间节点C2的MAC地址M2，然后再将带有M2的数据包传送到C2。如此类推，直到最后找到带有IP地址为IP_B的B主机的地址MAC_B，最终传送给主机B。在传输过程中，IP_A、IP_B和MAC_A不变，而中间节点的MAC地址通过ARP在不断改变（M1，M2，M3），直至目的地址MAC_B。</p><p>&emsp;综合上面所述，我们可以归纳出IP地址和MAC地址相同点是它们都唯一，不同的特点主要有：</p><ol><li><p>对于网络上的某一设备，如一台计算机或一台路由器，其IP地址可变（但必须唯一），而MAC地址不可变。我们可以根据需要给一台主机指定任意的IP地址，如我们可以给局域网上的某台计算机分配IP地址为192.168.0.112 ，也可以将它改成192.168.0.200。而任一网络设备（如网卡，路由器）一旦生产出来以后，其MAC地址永远唯一且不能由用户改变。</p></li><li><p>长度不同。IP地址为32位，MAC地址为48位。</p></li><li><p>分配依据不同。IP地址的分配是基于网络拓朴，MAC地址的分配是基于制造商。</p></li><li><p>寻址协议层不同。IP地址应用于OSI第三层，即网络层，而MAC地址应用在OSI第二层，即数据链路层。 数据链路层协议可以使数据从一个节点传递到相同链路的另一个节点上（通过MAC地址），而网络层协议使数据可以从一个网络传递到另一个网络上（ARP根据目的IP地址，找到中间节点的MAC地址，通过中间节点传送，从而最终到达目的网络）。</p></li></ol><h2 id="mac地址和ip地址有什么区别"><a href="#mac地址和ip地址有什么区别" class="headerlink" title="mac地址和ip地址有什么区别"></a>mac地址和ip地址有什么区别</h2><p>&emsp;本科的时候老师讲到这两个地址的时候说过这样一句话：IP地址就像家里的门牌号，MAC地址就像你的身份证号，只知道MAC地址是无法知道你在什么位置的，除非是有个超大功率的扩音器，世界上所有人都能听到：*你在哪？然后你再用着一个扩音器喊：我在这。然后通信才能这样进行。而IP地址呢？不管你人去了哪？总会有个邮件地址，比如北京市海淀区闵庄路87号一样，很容易就会定位到你的位置。 </p><p>&emsp;IP地址是指Internet协议使用的地址，而MAC地址是Ethernet协议使用的地址。IP地址与MAC地址之间并没有什么必然的联系，MAC地址是Ethernet网卡上带的地址，长度为48位。</p><p>&emsp;每个Ethernet网卡生产厂家必须向IEEE组织申请一组MAC地址，在生产网卡时在网卡的串行EEPROM中写入一个唯一的MAC地址。任何两个Ethernet网卡的MAC地址，不管是哪一个厂家生产的都不应相同。Ethernet芯片厂家不必负责MAC地址的申请，MAC地址存在于每一个Ethernet包中，是Ethernet包头的组成部分，Ethernet交换机根据Ethernet包头中的MAC源地址和MAC目的地址实现包的交换和传递。</p><p>&emsp;IP地址是Internet协议地址，每个Internet包必须带有IP地址，每个Internet服务提供商（ISP）必须向有关组织申请一组IP地址，然后一般是动态分配给其用户。IP地址现是32位长，正在扩充到128位。IP地址与MAC地址无关，因为Ethernet的用户，仍然可通过Modem连接Internet，取得一个动态的IP地址，这个地址每次可以不一致。IP地址通常工作于广域网，路由器处理的就是IP地址。 MAC地址工作于局域网，局域网之间的互连一般通过现有的公用网或专用线路，需要进行网间协议转换。可以在Ethernet上传送IP信息，此时IP地址只是Ethernet信息包数据域的一部分，Ethernet交换机或处理器看不见IP地址，只是将其作为普通数据处理。、</p><h1 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h1><p>&emsp;路漫漫其修远兮，与诸君共勉。  </p><p><strong>后记：Hello 小伙伴们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更丰富文章的动力！<a href="https://github.com/danygitgit/document-library/blob/master/other-library/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9F%BA%E7%A1%80/%E6%B5%8F%E8%A7%88%E5%99%A8%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8%E6%BC%AB%E8%B0%88.md" target="_blank" rel="noopener">GitHub 地址</a></strong>  </p><blockquote><p><a rel="noopener" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank"><img alt="知识共享许可协议" style="border-width:0" src="https://user-gold-cdn.xitu.io/2018/12/23/167d9537f3e29c99?w=88&h=31&f=png&s=1888"></a><br><a xmlns:dct="http://purl.org/dc/terms/" property="dct:title"><strong>db</strong> 的文档库</a> 由 <a xmlns:cc="http://creativecommons.org/ns#" href="db" property="cc:attributionName" rel="cc:attributionURL">db</a> 采用 <a rel="noopener" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议</a>进行许可。<br>基于<a xmlns:dct="http://purl.org/dc/terms/" href="https://github.com/danygitgit" rel="noopener" target="_blank">https://github.com/danygitgit</a>上的作品创作。<br>本许可协议授权之外的使用权限可以从 <a xmlns:cc="http://creativecommons.org/ns#" href="https://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel="noopener" target="_blank">https://creativecommons.org/licenses/by-nc-sa/2.5/cn/</a> 处获得。  </p></blockquote>]]></content>
      
      
      <categories>
          
          <category> Promise </category>
          
      </categories>
      
      
        <tags>
            
            <tag> MAC </tag>
            
            <tag> IP </tag>
            
        </tags>
      
    </entry>
    
    
  
  
</search>