-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
2 lines (2 loc) · 107 KB
/
index.html
1
2
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=2"><meta name="theme-color" content="#222"><meta name="generator" content="Hexo 5.4.0"><link rel="apple-touch-icon" sizes="180x180" href="/blog/images/favicon/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/blog/images/favicon/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/blog/images/favicon/favicon-16x16.png"><link rel="mask-icon" href="/blog/images/favicon/logo.svg" color="#222"><link rel="manifest" href="/blog/images/favicon/site.webmanifest"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><meta name="google-site-verification" content="hfSxUMVDQ0d4JZmyWsUce4uMULHxHXQxxCLYVk3cIbs"><meta name="msvalidate.01" content="D0E8CE815DEAA11708C153218034AA8E"><meta name="baidu-site-verification" content="CtPpLH5dio"><link rel="stylesheet" href="/blog/css/main.css"><link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/all.min.css"><link rel="stylesheet" href="//cdn.jsdelivr.net/npm/pace-js@1/themes/blue/pace-theme-minimal.css"><script src="//cdn.jsdelivr.net/npm/pace-js@1/pace.min.js"></script><script id="hexo-configurations">var NexT=window.NexT||{},CONFIG={hostname:"anran758.github.io",root:"/blog/",scheme:"Muse",version:"8.0.0-rc.3",exturl:!1,sidebar:{position:"left",display:"post",padding:18,offset:12,onmobile:!1},copycode:{enable:!0,show_result:!0,style:null},back2top:{enable:!0,sidebar:!1,scrollpercent:!1},bookmark:{enable:!0,color:"#222",save:"manual"},fancybox:!1,mediumzoom:!0,lazyload:!0,pangu:!1,comments:{style:"tabs",active:null,storage:!0,lazyload:!0,nav:null},algolia:{hits:{per_page:10},labels:{input_placeholder:"Search for Posts",hits_empty:"We didn't find any results for the search: ${query}",hits_stats:"${hits} results found in ${time} ms"}},localsearch:{enable:!0,trigger:"auto",top_n_per_article:1,unescape:!1,preload:!1},motion:{enable:!1,async:!0,transition:{post_block:"fadeIn",post_header:"slideDownIn",post_body:"slideDownIn",coll_header:"slideLeftIn",sidebar:"slideUpIn"}},path:"search.xml"}</script><meta name="description" content="web 开发的碎碎念"><meta property="og:type" content="website"><meta property="og:title" content="Anran758's blog"><meta property="og:url" content="https://anran758.github.io/blog/"><meta property="og:site_name" content="Anran758's blog"><meta property="og:description" content="web 开发的碎碎念"><meta property="og:locale" content="zh_CN"><meta property="article:author" content="anran758"><meta property="article:tag" content="前端、前端开发、JavaScript、vue、react、小程序开发、数据可视化"><meta name="twitter:card" content="summary"><link rel="canonical" href="https://anran758.github.io/blog/"><script id="page-configurations">CONFIG.page={sidebar:"",isHome:!0,isPost:!1,lang:"zh-CN"}</script><title>Anran758's blog</title><script async src="https://www.googletagmanager.com/gtag/js?id=UA-99223334-1"></script><script>if(CONFIG.hostname===location.hostname){function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-99223334-1")}</script><script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?b333b085e93f238859c899fd8ca5bd3f";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script><noscript><style>.sidebar-inner,.use-motion .brand,.use-motion .collection-header,.use-motion .comments,.use-motion .menu-item,.use-motion .pagination,.use-motion .post-block,.use-motion .post-body,.use-motion .post-header{opacity:initial}.use-motion .site-subtitle,.use-motion .site-title{opacity:initial;top:initial}.use-motion .logo-line-before i{left:initial}.use-motion .logo-line-after i{right:initial}</style></noscript><link rel="alternate" href="/blog/atom.xml" title="Anran758's blog" type="application/atom+xml">
</head><body itemscope itemtype="http://schema.org/WebPage"><div class="container"><div class="headband"></div><header class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="header-inner"><div class="site-brand-container"><div class="site-nav-toggle"><div class="toggle" aria-label="切换导航栏"><span class="toggle-line toggle-line-first"></span> <span class="toggle-line toggle-line-middle"></span> <span class="toggle-line toggle-line-last"></span></div></div><div class="site-meta"><a href="/blog/" class="brand" rel="start"><span class="logo-line-before"><i></i></span><h1 class="site-title">Anran758's blog</h1><span class="logo-line-after"><i></i></span></a></div><div class="site-nav-right"><div class="toggle popup-trigger"><i class="fa fa-search fa-fw fa-lg"></i></div></div></div><nav class="site-nav"><ul id="menu" class="main-menu menu"><li class="menu-item menu-item-home"><a href="/blog/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a></li><li class="menu-item menu-item-about"><a href="/blog/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a></li><li class="menu-item menu-item-archives"><a href="/blog/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>时间轴</a></li><li class="menu-item menu-item-tags"><a href="/blog/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a></li><li class="menu-item menu-item-categories"><a href="/blog/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a></li><li class="menu-item menu-item-search"><a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索</a></li></ul></nav><div class="search-pop-overlay"><div class="popup search-popup"><div class="search-header"><span class="search-icon"><i class="fa fa-search"></i></span><div class="search-input-container"><input autocomplete="off" autocapitalize="off" placeholder="搜索..." spellcheck="false" type="search" class="search-input"></div><span class="popup-btn-close"><i class="fa fa-times-circle"></i></span></div><div id="search-result"><div id="no-result"><i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i></div></div></div></div></div></header><div class="back-to-top"><i class="fa fa-arrow-up"></i> <span>0%</span></div><div class="reading-progress-bar"></div><a role="button" class="book-mark-link book-mark-link-fixed"></a> <a href="https://github.com/anran758/blog" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin:130px 106px" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><main class="main"><div class="main-inner"><div class="content-wrap"><div class="content index posts-expand"><article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN"><link itemprop="mainEntityOfPage" href="https://anran758.github.io/blog/2023/12/18/usage-promise/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="image" content="https://avatars3.githubusercontent.com/u/23024075?s=96&v=4"><meta itemprop="name" content="anran758"><meta itemprop="description" content="web 开发的碎碎念"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Anran758's blog"></span><header class="post-header"><h2 class="post-title" itemprop="name headline"><a href="/blog/2023/12/18/usage-promise/" class="post-title-link" itemprop="url">Promise 与异步编程</a></h2><div class="post-meta"><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建时间：2023-12-18 11:11:17" itemprop="dateCreated datePublished" datetime="2023-12-18T11:11:17+08:00">2023-12-18</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar-check"></i> </span><span class="post-meta-item-text">更新于</span> <time title="修改时间：2024-01-04 11:20:04" itemprop="dateModified" datetime="2024-01-04T11:20:04+08:00">2024-01-04</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-folder"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/blog/categories/JavaScript/" itemprop="url" rel="index"><span itemprop="name">JavaScript</span></a> </span></span><span id="/blog/2023/12/18/usage-promise/" class="post-meta-item leancloud_visitors" data-flag-title="Promise 与异步编程" title="阅读次数"><span class="post-meta-item-icon"><i class="fa fa-eye"></i> </span><span class="post-meta-item-text">阅读次数：</span> <span class="leancloud-visitors-count"></span> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-comment"></i> </span><span class="post-meta-item-text">Disqus：</span> <a title="disqus" href="/blog/2023/12/18/usage-promise/#disqus_thread" itemprop="discussionUrl"><span class="post-comments-count disqus-comment-count" data-disqus-identifier="2023/12/18/usage-promise/" itemprop="commentCount"></span></a></span><br><span class="post-meta-item" title="本文字数"><span class="post-meta-item-icon"><i class="far fa-file-word"></i> </span><span class="post-meta-item-text">本文字数：</span> <span>12k</span> </span><span class="post-meta-item" title="阅读时长"><span class="post-meta-item-icon"><i class="far fa-clock"></i> </span><span class="post-meta-item-text">阅读时长 ≈</span> <span>14 分钟</span></span></div></header><div class="post-body" itemprop="articleBody"><p>Promise 是 JavaScript 中的一个重要概念，与前端的工作更是息息相关。因此本文将整理一下 Promise 在日常工作中的应用。</p><p><strong>目录</strong></p><ul><li><a href="#%E6%A6%82%E5%BF%B5">概念</a></li><li><a href="#asyncawait">async/await</a><ul><li><a href="#await">await</a></li><li><a href="#%E9%94%99%E8%AF%AF%E5%A4%84%E7%90%86">错误处理</a></li></ul></li><li><a href="#promise-%E4%B8%B2%E8%81%94">Promise 串联</a><ul><li><a href="#%E5%B8%B8%E8%A7%84%E5%A4%84%E7%90%86%E6%96%B9%E6%B3%95">常规处理方法</a></li><li><a href="#%E4%B8%B2%E8%81%94%E8%87%AA%E5%8A%A8%E5%8C%96">串联自动化</a></li></ul></li><li><a href="#promise-%E5%B9%B6%E5%8F%91">Promise 并发</a><ul><li><a href="#%E6%8E%A7%E5%88%B6%E6%89%B9%E6%AC%A1">控制批次</a></li><li><a href="#%E7%AE%80%E6%98%93%E7%89%88%E5%B9%B6%E5%8F%91%E6%8E%A7%E5%88%B6">简易版并发控制</a></li><li><a href="#%E5%8A%A8%E6%80%81%E4%BB%BB%E5%8A%A1%E9%98%9F%E5%88%97">动态任务队列</a></li><li><a href="#%E7%AC%AC%E4%B8%89%E6%96%B9%E5%BA%93">第三方库</a></li></ul></li><li><a href="#%E6%80%BB%E7%BB%93">总结</a></li></ul><div class="post-button"><a class="btn" href="/blog/2023/12/18/usage-promise/#more" rel="contents">阅读全文 »</a></div></div><footer class="post-footer"><div class="post-eof"></div></footer></article><article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN"><link itemprop="mainEntityOfPage" href="https://anran758.github.io/blog/2022/05/18/note-02331/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="image" content="https://avatars3.githubusercontent.com/u/23024075?s=96&v=4"><meta itemprop="name" content="anran758"><meta itemprop="description" content="web 开发的碎碎念"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Anran758's blog"></span><header class="post-header"><h2 class="post-title" itemprop="name headline"><a href="/blog/2022/05/18/note-02331/" class="post-title-link" itemprop="url">数据结构实践</a></h2><div class="post-meta"><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建时间：2022-05-18 23:18:13" itemprop="dateCreated datePublished" datetime="2022-05-18T23:18:13+08:00">2022-05-18</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar-check"></i> </span><span class="post-meta-item-text">更新于</span> <time title="修改时间：2023-12-13 11:46:34" itemprop="dateModified" datetime="2023-12-13T11:46:34+08:00">2023-12-13</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-folder"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/blog/categories/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%A7%91%E5%AD%A6%E4%B8%8E%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">计算机科学与技术</span></a> </span></span><span id="/blog/2022/05/18/note-02331/" class="post-meta-item leancloud_visitors" data-flag-title="数据结构实践" title="阅读次数"><span class="post-meta-item-icon"><i class="fa fa-eye"></i> </span><span class="post-meta-item-text">阅读次数：</span> <span class="leancloud-visitors-count"></span> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-comment"></i> </span><span class="post-meta-item-text">Disqus：</span> <a title="disqus" href="/blog/2022/05/18/note-02331/#disqus_thread" itemprop="discussionUrl"><span class="post-comments-count disqus-comment-count" data-disqus-identifier="2022/05/18/note-02331/" itemprop="commentCount"></span></a></span><br><span class="post-meta-item" title="本文字数"><span class="post-meta-item-icon"><i class="far fa-file-word"></i> </span><span class="post-meta-item-text">本文字数：</span> <span>5.9k</span> </span><span class="post-meta-item" title="阅读时长"><span class="post-meta-item-icon"><i class="far fa-clock"></i> </span><span class="post-meta-item-text">阅读时长 ≈</span> <span>7 分钟</span></span></div></header><div class="post-body" itemprop="articleBody"><p>本篇将根据自考实践要求对「数据结构」一科进行简要的复习，代码实现使用 <code>C++</code> 语言实现。</p><h2 id="实践"><a href="#实践" class="headerlink" title="实践"></a>实践</h2><p>已知 Q 是一个非空队列，S 是一个空栈。编写算法，仅用队列和栈的 ADT 函数和少量工作变量，将队列 Q 的所有元素逆置。</p><p>栈的基本 ADT 函数有：</p><ol><li>置空栈。函数原型为: <code>void MakeEmpty(SqStack s);</code></li><li>元素e入栈。函数原型为: <code>void Push(SqStack s,ElemType e);</code></li><li>出栈，返回栈顶元素。函数原型为: <code>ElemType pop(SqStack s);</code></li><li>判断栈是否为空。函数原型为: <code>int isEmpty(SqStack s);</code></li></ol><p>队列的基本ADT函数有：</p><ol><li>元素e入队。函数原型为：void enQueue(Queue q,ElemType e);</li><li>出队，返回队头元素。函数原型为：ElemType deQueue(Queue q);（3）（3）判断队是否为空。函数原型为：int isEmpty(Queue q);</li></ol><p>题目要求：</p><ol><li>编程实现队列和栈的ADT函数</li><li>仅用队列和栈的ADT函数和少量工作变量，编写将队列Q的所有元素逆置的函数</li><li>测试该函数</li></ol><div class="post-button"><a class="btn" href="/blog/2022/05/18/note-02331/#more" rel="contents">阅读全文 »</a></div></div><footer class="post-footer"><div class="post-eof"></div></footer></article><article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN"><link itemprop="mainEntityOfPage" href="https://anran758.github.io/blog/2022/05/16/mysql-note/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="image" content="https://avatars3.githubusercontent.com/u/23024075?s=96&v=4"><meta itemprop="name" content="anran758"><meta itemprop="description" content="web 开发的碎碎念"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Anran758's blog"></span><header class="post-header"><h2 class="post-title" itemprop="name headline"><a href="/blog/2022/05/16/mysql-note/" class="post-title-link" itemprop="url">MySQL 实践</a></h2><div class="post-meta"><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建时间：2022-05-16 11:25:00" itemprop="dateCreated datePublished" datetime="2022-05-16T11:25:00+08:00">2022-05-16</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar-check"></i> </span><span class="post-meta-item-text">更新于</span> <time title="修改时间：2023-12-13 11:46:34" itemprop="dateModified" datetime="2023-12-13T11:46:34+08:00">2023-12-13</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-folder"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/blog/categories/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%A7%91%E5%AD%A6%E4%B8%8E%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">计算机科学与技术</span></a> </span></span><span id="/blog/2022/05/16/mysql-note/" class="post-meta-item leancloud_visitors" data-flag-title="MySQL 实践" title="阅读次数"><span class="post-meta-item-icon"><i class="fa fa-eye"></i> </span><span class="post-meta-item-text">阅读次数：</span> <span class="leancloud-visitors-count"></span> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-comment"></i> </span><span class="post-meta-item-text">Disqus：</span> <a title="disqus" href="/blog/2022/05/16/mysql-note/#disqus_thread" itemprop="discussionUrl"><span class="post-comments-count disqus-comment-count" data-disqus-identifier="2022/05/16/mysql-note/" itemprop="commentCount"></span></a></span><br><span class="post-meta-item" title="本文字数"><span class="post-meta-item-icon"><i class="far fa-file-word"></i> </span><span class="post-meta-item-text">本文字数：</span> <span>18k</span> </span><span class="post-meta-item" title="阅读时长"><span class="post-meta-item-icon"><i class="far fa-clock"></i> </span><span class="post-meta-item-text">阅读时长 ≈</span> <span>22 分钟</span></span></div></header><div class="post-body" itemprop="articleBody"><p>由于自考的实践考核要求有需要用到 mysql 进行考核，故记录一下在 mac 环境下试手的笔记。</p><div class="post-button"><a class="btn" href="/blog/2022/05/16/mysql-note/#more" rel="contents">阅读全文 »</a></div></div><footer class="post-footer"><div class="post-eof"></div></footer></article><article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN"><link itemprop="mainEntityOfPage" href="https://anran758.github.io/blog/2022/01/22/event-bus/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="image" content="https://avatars3.githubusercontent.com/u/23024075?s=96&v=4"><meta itemprop="name" content="anran758"><meta itemprop="description" content="web 开发的碎碎念"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Anran758's blog"></span><header class="post-header"><h2 class="post-title" itemprop="name headline"><a href="/blog/2022/01/22/event-bus/" class="post-title-link" itemprop="url">组件通信: EventBus 的原理解析与应用</a></h2><div class="post-meta"><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建时间：2022-01-22 10:40:49" itemprop="dateCreated datePublished" datetime="2022-01-22T10:40:49+08:00">2022-01-22</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar-check"></i> </span><span class="post-meta-item-text">更新于</span> <time title="修改时间：2023-12-15 14:23:43" itemprop="dateModified" datetime="2023-12-15T14:23:43+08:00">2023-12-15</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-folder"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/blog/categories/JavaScript/" itemprop="url" rel="index"><span itemprop="name">JavaScript</span></a> </span></span><span id="/blog/2022/01/22/event-bus/" class="post-meta-item leancloud_visitors" data-flag-title="组件通信: EventBus 的原理解析与应用" title="阅读次数"><span class="post-meta-item-icon"><i class="fa fa-eye"></i> </span><span class="post-meta-item-text">阅读次数：</span> <span class="leancloud-visitors-count"></span> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-comment"></i> </span><span class="post-meta-item-text">Disqus：</span> <a title="disqus" href="/blog/2022/01/22/event-bus/#disqus_thread" itemprop="discussionUrl"><span class="post-comments-count disqus-comment-count" data-disqus-identifier="2022/01/22/event-bus/" itemprop="commentCount"></span></a></span><br><span class="post-meta-item" title="本文字数"><span class="post-meta-item-icon"><i class="far fa-file-word"></i> </span><span class="post-meta-item-text">本文字数：</span> <span>4.2k</span> </span><span class="post-meta-item" title="阅读时长"><span class="post-meta-item-icon"><i class="far fa-clock"></i> </span><span class="post-meta-item-text">阅读时长 ≈</span> <span>5 分钟</span></span></div></header><div class="post-body" itemprop="articleBody"><p>在开发复杂的单页面应用时，我们经常会遇到一个问题：如何高效地在组件或模块之间进行通信？这里，<code>EventBus</code>（事件总线）就派上了用场。简单来说，<code>EventBus</code> 是一种设计模式，它允许不同组件或模块之间通过事件来通信，而无需直接引用彼此。</p><p><code>EventBus</code> 是传统的组件通信解决方案，下面我们将讲解 <code>EventBus</code> 跨组件通信的原理、实现方式以及该如何使用。</p><div class="post-button"><a class="btn" href="/blog/2022/01/22/event-bus/#more" rel="contents">阅读全文 »</a></div></div><footer class="post-footer"><div class="post-eof"></div></footer></article><article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN"><link itemprop="mainEntityOfPage" href="https://anran758.github.io/blog/2021/10/11/redux/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="image" content="https://avatars3.githubusercontent.com/u/23024075?s=96&v=4"><meta itemprop="name" content="anran758"><meta itemprop="description" content="web 开发的碎碎念"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Anran758's blog"></span><header class="post-header"><h2 class="post-title" itemprop="name headline"><a href="/blog/2021/10/11/redux/" class="post-title-link" itemprop="url">Redux 食用指南</a></h2><div class="post-meta"><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建时间：2021-10-11 12:08:31" itemprop="dateCreated datePublished" datetime="2021-10-11T12:08:31+08:00">2021-10-11</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar-check"></i> </span><span class="post-meta-item-text">更新于</span> <time title="修改时间：2023-12-11 19:14:42" itemprop="dateModified" datetime="2023-12-11T19:14:42+08:00">2023-12-11</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-folder"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/blog/categories/React/" itemprop="url" rel="index"><span itemprop="name">React</span></a> </span></span><span id="/blog/2021/10/11/redux/" class="post-meta-item leancloud_visitors" data-flag-title="Redux 食用指南" title="阅读次数"><span class="post-meta-item-icon"><i class="fa fa-eye"></i> </span><span class="post-meta-item-text">阅读次数：</span> <span class="leancloud-visitors-count"></span> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-comment"></i> </span><span class="post-meta-item-text">Disqus：</span> <a title="disqus" href="/blog/2021/10/11/redux/#disqus_thread" itemprop="discussionUrl"><span class="post-comments-count disqus-comment-count" data-disqus-identifier="2021/10/11/redux/" itemprop="commentCount"></span></a></span><br><span class="post-meta-item" title="本文字数"><span class="post-meta-item-icon"><i class="far fa-file-word"></i> </span><span class="post-meta-item-text">本文字数：</span> <span>3.4k</span> </span><span class="post-meta-item" title="阅读时长"><span class="post-meta-item-icon"><i class="far fa-clock"></i> </span><span class="post-meta-item-text">阅读时长 ≈</span> <span>4 分钟</span></span></div></header><div class="post-body" itemprop="articleBody"><p>Redux 是一个强大的状态管理框架，被广泛用于管理应用程序的状态。它的设计理念是让状态的更新可预测和透明。本文将简要探讨 Redux 的核心机制和实际应用。</p><div class="post-button"><a class="btn" href="/blog/2021/10/11/redux/#more" rel="contents">阅读全文 »</a></div></div><footer class="post-footer"><div class="post-eof"></div></footer></article><article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN"><link itemprop="mainEntityOfPage" href="https://anran758.github.io/blog/2021/08/15/note-04741/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="image" content="https://avatars3.githubusercontent.com/u/23024075?s=96&v=4"><meta itemprop="name" content="anran758"><meta itemprop="description" content="web 开发的碎碎念"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Anran758's blog"></span><header class="post-header"><h2 class="post-title" itemprop="name headline"><a href="/blog/2021/08/15/note-04741/" class="post-title-link" itemprop="url">计算机网络原理笔记</a></h2><div class="post-meta"><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建时间：2021-08-15 12:56:15" itemprop="dateCreated datePublished" datetime="2021-08-15T12:56:15+08:00">2021-08-15</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar-check"></i> </span><span class="post-meta-item-text">更新于</span> <time title="修改时间：2023-12-11 19:21:59" itemprop="dateModified" datetime="2023-12-11T19:21:59+08:00">2023-12-11</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-folder"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/blog/categories/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%A7%91%E5%AD%A6%E4%B8%8E%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">计算机科学与技术</span></a> </span></span><span id="/blog/2021/08/15/note-04741/" class="post-meta-item leancloud_visitors" data-flag-title="计算机网络原理笔记" title="阅读次数"><span class="post-meta-item-icon"><i class="fa fa-eye"></i> </span><span class="post-meta-item-text">阅读次数：</span> <span class="leancloud-visitors-count"></span> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-comment"></i> </span><span class="post-meta-item-text">Disqus：</span> <a title="disqus" href="/blog/2021/08/15/note-04741/#disqus_thread" itemprop="discussionUrl"><span class="post-comments-count disqus-comment-count" data-disqus-identifier="2021/08/15/note-04741/" itemprop="commentCount"></span></a></span><br><span class="post-meta-item" title="本文字数"><span class="post-meta-item-icon"><i class="far fa-file-word"></i> </span><span class="post-meta-item-text">本文字数：</span> <span>5.8k</span> </span><span class="post-meta-item" title="阅读时长"><span class="post-meta-item-icon"><i class="far fa-clock"></i> </span><span class="post-meta-item-text">阅读时长 ≈</span> <span>7 分钟</span></span></div></header><div class="post-body" itemprop="articleBody"><p>计算机网络原理学习笔记。</p><h2 id="目录"><a href="#目录" class="headerlink" title="目录"></a>目录</h2><blockquote><p>下面目录定位有些使用不了。若需要跳转到具体段落应使用侧边栏文章定位</p></blockquote><ul><li><a href="#%E8%AE%A1%E7%AE%97%E7%B1%BB%E9%80%9F%E8%A7%88">计算类速览</a><ul><li><a href="#%E9%80%9F%E7%8E%87%E4%B8%8E%E5%B8%A6%E5%AE%BD">速率与带宽</a></li><li><a href="#tcp-%E6%8A%A5%E6%96%87%E6%AE%B5%E7%A1%AE%E8%AE%A4%E5%8F%B7">TCP 报文段确认号</a></li><li><a href="#%E6%B1%89%E6%98%8E%E8%B7%9D%E7%A6%BB">汉明距离</a></li><li><a href="#%E5%BE%AA%E7%8E%AF%E5%86%97%E4%BD%99%E7%A0%81">循环冗余码</a></li></ul></li><li><a href="#%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C%E6%A6%82%E8%BF%B0">计算机网络概述</a><ul><li><a href="#%E5%B8%B8%E8%A7%81%E5%BA%94%E7%94%A8%E7%9A%84%E7%AB%AF%E5%8F%A3%E5%8F%B7">常见应用的端口号</a></li><li><a href="#tcpiposi-%E5%8F%82%E8%80%83%E6%A8%A1%E5%9E%8B">TCP/IP、OSI 参考模型</a></li><li><a href="#%E7%AE%80%E8%BF%B0osi%E5%8F%82%E6%95%B0%E6%A8%A1%E5%9E%8B%E7%89%A9%E7%90%86%E5%B1%82%E7%9A%84%E4%B8%BB%E8%A6%81%E5%8A%9F%E8%83%BD%E5%8F%8A%E8%AF%A5%E5%B1%82%E5%8D%8F%E8%AE%AE%E8%A7%84%E5%AE%9A%E7%9A%84%E5%9B%9B%E4%B8%AA%E7%89%B9%E6%80%A7">简述OSI参数模型物理层的主要功能及该层协议规定的四个特性。</a></li></ul></li><li><a href="#%E5%BA%94%E7%94%A8%E5%B1%82">应用层</a><ul><li><a href="#%E7%AE%80%E8%BF%B0%E5%85%B8%E5%9E%8B%E7%9A%84http%E8%AF%B7%E6%B1%82%E6%96%B9%E6%B3%95%E5%8F%8A%E5%85%B6%E4%BD%9C%E7%94%A8">简述典型的HTTP请求方法及其作用</a></li><li><a href="#%E7%AE%80%E8%BF%B0-pop3-%E5%8D%8F%E8%AE%AE%E4%BA%A4%E4%BA%92%E8%BF%87%E7%A8%8B">简述 POP3 协议交互过程</a></li></ul></li><li><a href="#%E4%BC%A0%E8%BE%93%E5%B1%82">传输层</a><ul><li><a href="#tcpip">TCP/IP</a></li><li><a href="#%E7%AE%80%E8%BF%B0%E4%BC%A0%E8%BE%93%E5%B1%82%E6%89%80%E5%AE%9E%E7%8E%B0%E7%9A%84%E5%8A%9F%E8%83%BD">简述传输层所实现的功能</a></li><li><a href="#%E7%AE%80%E8%BF%B0%E4%BC%A0%E8%BE%93%E5%B1%82%E5%AE%9E%E7%8E%B0%E5%8F%AF%E9%9D%A0%E6%95%B0%E6%8D%AE%E4%BC%A0%E8%BE%93%E7%9A%84%E4%B8%BB%E8%A6%81%E6%8E%AA%E6%96%BD">简述传输层实现可靠数据传输的主要措施</a></li><li><a href="#%E7%AE%80%E8%BF%B0%E4%BF%9D%E8%AF%81%E7%BD%91%E7%BB%9C%E4%BC%A0%E8%BE%93%E5%8F%AF%E9%9D%A0%E6%80%A7%E7%9A%84%E7%A1%AE%E8%AE%A4%E4%B8%8E%E9%87%8D%E4%BC%A0%E6%9C%BA%E5%88%B6%E7%9A%84%E6%A6%82%E5%BF%B5">简述保证网络传输可靠性的确认与重传机制的概念</a></li><li><a href="#%E7%AE%80%E8%BF%B0%E5%B7%AE%E9%94%99%E6%8E%A7%E5%88%B6%E7%9A%84%E6%A6%82%E5%BF%B5%E4%BB%A5%E5%8F%8A%E5%B7%AE%E9%94%99%E6%8E%A7%E5%88%B6%E7%9A%84%E5%9F%BA%E6%9C%AC%E6%96%B9%E6%B3%95">简述差错控制的概念以及差错控制的基本方法</a></li><li><a href="#%E7%AE%80%E8%BF%B0tcp%E6%89%80%E6%8F%90%E4%BE%9B%E7%9A%84%E9%9D%A2%E5%90%91%E8%BF%9E%E6%8E%A5%E6%9C%8D%E5%8A%A1">简述TCP所提供的面向连接服务</a></li><li><a href="#%E7%AE%80%E8%BF%B0%E4%B8%BA-udp-%E5%A5%97%E6%8E%A5%E5%AD%97%E5%88%86%E9%85%8D%E7%AB%AF%E5%8F%A3%E5%8F%B7%E7%9A%84%E4%B8%A4%E7%A7%8D%E6%96%B9%E6%B3%95">简述为 UDP 套接字分配端口号的两种方法</a></li><li><a href="#%E7%AE%80%E8%BF%B0-udp-%E6%8F%90%E4%BE%9B%E7%9A%84%E6%9C%8D%E5%8A%A1%E7%9A%84%E4%B8%BB%E8%A6%81%E7%89%B9%E5%BE%81">简述 UDP 提供的服务的主要特征</a></li></ul></li><li><a href="#%E7%BD%91%E7%BB%9C%E5%B1%82">网络层</a><ul><li><a href="#%E7%AE%80%E8%BF%B0%E8%99%9A%E7%94%B5%E8%B7%AF%E7%9A%84%E6%A6%82%E5%BF%B5%E5%8F%8A%E5%85%B6%E6%9E%84%E6%88%90%E8%A6%81%E7%B4%A0">简述虚电路的概念及其构成要素</a></li><li><a href="#%E8%99%9A%E7%94%B5%E8%B7%AF%E4%BA%A4%E6%8D%A2%E5%92%8C%E6%95%B0%E6%8D%AE%E4%BA%A4%E6%8D%A2%E7%9A%84%E4%B8%BB%E8%A6%81%E5%B7%AE%E5%88%AB">虚电路交换和数据交换的主要差别</a></li><li><a href="#%E7%94%B5%E8%B7%AF%E4%BA%A4%E6%8D%A2%E7%9A%84%E7%89%B9%E7%82%B9%E5%92%8C%E4%BC%98%E7%BC%BA%E7%82%B9">电路交换的特点和优缺点</a></li><li><a href="#%E7%AE%80%E8%BF%B0%E6%B0%B8%E4%B9%85%E8%99%9A%E7%94%B5%E8%B7%AF%E4%B8%8E%E4%BA%A4%E6%8D%A2%E8%99%9A%E7%94%B5%E8%B7%AF%E7%9A%84%E5%8C%BA%E5%88%AB">简述永久虚电路与交换虚电路的区别</a></li><li><a href="#%E7%AE%80%E8%BF%B0%E8%B7%AF%E7%94%B1%E5%99%A8%E8%BE%93%E5%85%A5%E7%AB%AF%E5%8F%A3%E6%8E%A5%E5%8F%97%E4%B8%8E%E5%A4%84%E7%90%86%E6%95%B0%E6%8D%AE%E7%9A%84%E8%BF%87%E7%A8%8B">简述路由器输入端口接受与处理数据的过程</a></li></ul></li><li><a href="#%E6%95%B0%E6%8D%AE%E9%93%BE%E8%B7%AF%E5%B1%82%E4%B8%8E%E5%B1%80%E5%9F%9F%E7%BD%91">数据链路层与局域网</a><ul><li><a href="#%E5%B8%A7%E7%9A%84%E7%BB%84%E6%88%90">帧的组成</a></li><li><a href="#-%E5%A4%9A%E8%B7%AF%E8%AE%BF%E9%97%AE%E6%8E%A7%E5%88%B6%E5%8D%8F%E8%AE%AE-">==== 多路访问控制协议 ====</a><ul><li><a href="#%E9%9D%9E%E5%9D%9A%E6%8C%81-csma-%E7%9A%84%E5%9F%BA%E6%9C%AC%E5%8E%9F%E7%90%86">非坚持 csma 的基本原理</a></li><li><a href="#1-%E5%9D%9A%E6%8C%81-csma-%E7%9A%84%E5%9F%BA%E6%9C%AC%E5%8E%9F%E7%90%86">1-坚持 csma 的基本原理</a></li></ul></li><li><a href="#-%E5%B1%80%E5%9F%9F%E7%BD%91-">==== 局域网 ====</a><ul><li><a href="#%E7%AE%80%E8%BF%B0%E5%9C%B0%E5%9D%80%E8%A7%A3%E6%9E%90%E5%8D%8F%E8%AE%AE-arp-%E7%9A%84%E4%BD%9C%E7%94%A8%E5%92%8C%E5%9F%BA%E6%9C%AC%E6%80%9D%E6%83%B3">简述地址解析协议 ARP 的作用和基本思想</a></li><li><a href="#%E7%AE%80%E8%BF%B0%E8%99%9A%E6%8B%9F%E5%B1%80%E5%9F%9F%E7%BD%91vlan%E7%9A%84%E6%A6%82%E5%BF%B5%E4%BB%A5%E5%8F%8A%E5%88%92%E5%88%86%E6%96%B9%E6%B3%95">简述虚拟局域网(VLAN)的概念以及划分方法</a></li></ul></li></ul></li><li><a href="#%E7%89%A9%E7%90%86%E5%B1%82">物理层</a><ul><li><a href="#%E7%AE%80%E8%BF%B0-cmi-%E7%A0%81%E7%9A%84%E7%BC%96%E7%A0%81%E8%A7%84%E5%88%99%E5%B9%B6%E7%94%BB%E5%87%BA%E4%BA%8C%E8%BF%9B%E5%88%B6%E6%AF%94%E7%89%B9%E5%BA%8F%E5%88%97-1011010011-%E7%9A%84-cmi-%E7%A0%81%E4%BF%A1%E5%8F%B7%E6%B3%A2%E5%BD%A2">简述 CMI 码的编码规则，并画出二进制比特序列 1011010011 的 CMI 码信号波形</a></li><li><a href="#%E7%B1%B3%E5%8B%92%E7%A0%81%E7%9A%84%E7%BC%96%E7%A0%81%E8%A7%84%E5%88%99">米勒码的编码规则</a></li></ul></li><li><a href="#%E6%97%A0%E7%BA%BF%E4%B8%8E%E7%A7%BB%E5%8A%A8%E7%BD%91%E7%BB%9C">无线与移动网络</a><ul><li><a href="#%E7%AE%80%E8%BF%B0-4-%E4%B8%AA-ieee-80211-%E6%A0%87%E5%87%86%E5%85%B7%E6%9C%89%E7%9A%84%E5%85%B1%E5%90%8C%E7%89%B9%E5%BE%81">简述 4 个 IEEE 802.11 标准具有的共同特征</a></li></ul></li><li><a href="#%E7%AE%80%E7%AD%94%E9%A2%98">简答题</a><ul><li><a href="#%E6%AF%8F%E4%B8%AA-as-%E5%8F%AF%E4%BB%A5%E9%80%9A%E8%BF%87-bgp%E8%BE%B9%E7%95%8C%E7%BD%91%E5%85%B3%E5%8D%8F%E8%AE%AE-%E5%AE%9E%E7%8E%B0%E5%93%AA%E4%BA%9B%E5%8A%9F%E8%83%BD">每个 AS 可以通过 BGP(边界网关协议) 实现哪些功能</a></li><li><a href="#%E7%AE%80%E8%BF%B0%E6%95%B0%E5%AD%97%E7%AD%BE%E5%90%8D%E5%BA%94%E6%BB%A1%E8%B6%B3%E7%9A%84%E8%A6%81%E6%B1%82">简述数字签名应满足的要求</a></li></ul></li><li><a href="#%E5%9F%BA%E7%A1%80%E8%AE%A1%E7%AE%97">基础计算</a><ul><li><a href="#%E5%8D%81%E8%BF%9B%E5%88%B6%E8%BD%AC%E4%BA%8C%E8%BF%9B%E5%88%B6">十进制转二进制</a></li><li><a href="#2n-%E9%80%9F%E6%9F%A5%E8%A1%A8">2^n 速查表</a></li><li><a href="#%E5%AD%90%E7%BD%91%E6%8E%A9%E7%A0%81%E9%80%9F%E8%A7%88">子网掩码速览</a></li><li><a href="#%E9%80%9A%E8%BF%87-ip-%E5%9C%B0%E5%9D%80%E4%B8%8E%E5%AD%90%E7%BD%91%E6%8E%A9%E7%A0%81%E6%8E%A8%E7%AE%97%E5%87%BA%E5%85%B6%E4%BB%96%E4%BF%A1%E6%81%AF">通过 IP 地址与子网掩码推算出其他信息</a></li></ul></li></ul><hr><div class="post-button"><a class="btn" href="/blog/2021/08/15/note-04741/#more" rel="contents">阅读全文 »</a></div></div><footer class="post-footer"><div class="post-eof"></div></footer></article><article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN"><link itemprop="mainEntityOfPage" href="https://anran758.github.io/blog/2021/04/13/w3c-validator/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="image" content="https://avatars3.githubusercontent.com/u/23024075?s=96&v=4"><meta itemprop="name" content="anran758"><meta itemprop="description" content="web 开发的碎碎念"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Anran758's blog"></span><header class="post-header"><h2 class="post-title" itemprop="name headline"><a href="/blog/2021/04/13/w3c-validator/" class="post-title-link" itemprop="url">Accessibility Parsing 无障碍页面分析</a></h2><div class="post-meta"><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建时间：2021-04-13 15:00:00" itemprop="dateCreated datePublished" datetime="2021-04-13T15:00:00+08:00">2021-04-13</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar-check"></i> </span><span class="post-meta-item-text">更新于</span> <time title="修改时间：2021-10-04 17:19:41" itemprop="dateModified" datetime="2021-10-04T17:19:41+08:00">2021-10-04</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-folder"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/blog/categories/a11y/" itemprop="url" rel="index"><span itemprop="name">a11y</span></a> </span></span><span id="/blog/2021/04/13/w3c-validator/" class="post-meta-item leancloud_visitors" data-flag-title="Accessibility Parsing 无障碍页面分析" title="阅读次数"><span class="post-meta-item-icon"><i class="fa fa-eye"></i> </span><span class="post-meta-item-text">阅读次数：</span> <span class="leancloud-visitors-count"></span> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-comment"></i> </span><span class="post-meta-item-text">Disqus：</span> <a title="disqus" href="/blog/2021/04/13/w3c-validator/#disqus_thread" itemprop="discussionUrl"><span class="post-comments-count disqus-comment-count" data-disqus-identifier="2021/04/13/w3c-validator/" itemprop="commentCount"></span></a></span><br><span class="post-meta-item" title="本文字数"><span class="post-meta-item-icon"><i class="far fa-file-word"></i> </span><span class="post-meta-item-text">本文字数：</span> <span>3.3k</span> </span><span class="post-meta-item" title="阅读时长"><span class="post-meta-item-icon"><i class="far fa-clock"></i> </span><span class="post-meta-item-text">阅读时长 ≈</span> <span>4 分钟</span></span></div></header><div class="post-body" itemprop="articleBody"><img src="/blog/2021/04/13/w3c-validator/banner.jpg"><p>最近项目需要做 Accessibility 的处理，在这段时间的接触了很多无障碍相关的技术。除了基础的 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/ARIA">ARIA</a> 和相对单位的影响等基础知识外，本篇想介绍一下比较实用的 Accessibility Parsing tools。</p><div class="post-button"><a class="btn" href="/blog/2021/04/13/w3c-validator/#more" rel="contents">阅读全文 »</a></div></div><footer class="post-footer"><div class="post-eof"></div></footer></article><article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN"><link itemprop="mainEntityOfPage" href="https://anran758.github.io/blog/2021/02/10/note-023333/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="image" content="https://avatars3.githubusercontent.com/u/23024075?s=96&v=4"><meta itemprop="name" content="anran758"><meta itemprop="description" content="web 开发的碎碎念"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Anran758's blog"></span><header class="post-header"><h2 class="post-title" itemprop="name headline"><a href="/blog/2021/02/10/note-023333/" class="post-title-link" itemprop="url">软件工程笔记</a></h2><div class="post-meta"><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建时间：2021-02-10 12:00:00" itemprop="dateCreated datePublished" datetime="2021-02-10T12:00:00+08:00">2021-02-10</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar-check"></i> </span><span class="post-meta-item-text">更新于</span> <time title="修改时间：2022-05-23 14:15:12" itemprop="dateModified" datetime="2022-05-23T14:15:12+08:00">2022-05-23</time> </span><span id="/blog/2021/02/10/note-023333/" class="post-meta-item leancloud_visitors" data-flag-title="软件工程笔记" title="阅读次数"><span class="post-meta-item-icon"><i class="fa fa-eye"></i> </span><span class="post-meta-item-text">阅读次数：</span> <span class="leancloud-visitors-count"></span> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-comment"></i> </span><span class="post-meta-item-text">Disqus：</span> <a title="disqus" href="/blog/2021/02/10/note-023333/#disqus_thread" itemprop="discussionUrl"><span class="post-comments-count disqus-comment-count" data-disqus-identifier="2021/02/10/note-023333/" itemprop="commentCount"></span></a></span><br><span class="post-meta-item" title="本文字数"><span class="post-meta-item-icon"><i class="far fa-file-word"></i> </span><span class="post-meta-item-text">本文字数：</span> <span>3.9k</span> </span><span class="post-meta-item" title="阅读时长"><span class="post-meta-item-icon"><i class="far fa-clock"></i> </span><span class="post-meta-item-text">阅读时长 ≈</span> <span>5 分钟</span></span></div></header><div class="post-body" itemprop="articleBody"><p>软件工程相关笔记。</p><hr><ul><li><a href="#1-%E7%BB%AA%E8%AE%BA">1. 绪论</a><ul><li><a href="#%E7%AE%80%E8%BF%B0%E8%BD%AF%E4%BB%B6%E5%8D%B1%E6%9C%BA%E4%B8%8E%E8%BD%AF%E4%BB%B6%E5%B7%A5%E7%A8%8B%E7%9A%84%E6%A6%82%E5%BF%B5%E4%BB%A5%E5%8F%8A%E6%8F%90%E5%87%BA%E8%BD%AF%E4%BB%B6%E5%B7%A5%E7%A8%8B%E6%A6%82%E5%BF%B5%E7%9A%84%E7%9B%AE%E7%9A%84">简述软件危机与软件工程的概念以及提出软件工程概念的目的</a></li><li><a href="#%E7%AE%80%E8%BF%B0%E8%BD%AF%E4%BB%B6%E5%BC%80%E5%8F%91%E7%9A%84%E6%9C%AC%E8%B4%A8">简述软件开发的本质</a></li></ul></li><li><a href="#2-%E8%BD%AF%E4%BB%B6%E9%9C%80%E6%B1%82%E4%B8%8E%E8%BD%AF%E4%BB%B6%E9%9C%80%E6%B1%82%E8%A7%84%E7%BA%A6">2. 软件需求与软件需求规约</a><ul><li><a href="#%E5%88%9D%E5%A7%8B%E5%8F%91%E7%8E%B0%E9%9C%80%E6%B1%82">初始发现需求</a></li><li><a href="#%E9%9C%80%E6%B1%82%E8%A7%84%E7%BA%A6%E5%AE%9A%E4%B9%89">需求规约定义</a></li><li><a href="#%E9%9C%80%E6%B1%82%E8%A7%84%E7%BA%A6%E7%9A%84%E4%B8%89%E7%A7%8D%E5%9F%BA%E6%9C%AC%E5%BD%A2%E5%BC%8F">需求规约的三种基本形式</a></li></ul></li><li><a href="#3-%E7%BB%93%E6%9E%84%E5%8C%96%E6%96%B9%E6%B3%95">3. 结构化方法</a><ul><li><a href="#%E6%A8%A1%E5%9D%97%E7%9A%84%E5%86%85%E8%81%9A%E6%80%A7">模块的内聚性</a></li><li><a href="#%E6%A8%A1%E5%9D%97%E9%97%B4%E7%9A%84%E8%80%A6%E5%90%88%E7%B1%BB%E5%9E%8B">模块间的耦合类型</a></li><li><a href="#%E7%A8%8B%E5%BA%8F%E6%B5%81%E7%A8%8B%E5%9B%BE%E4%B8%BB%E8%A6%81%E7%94%A8%E4%BA%8E%E8%BD%AF%E4%BB%B6%E5%BC%80%E5%8F%91%E7%9A%84%E5%93%AA%E4%B8%80%E9%98%B6%E6%AE%B5%E5%AE%83%E7%9A%84%E4%B8%BB%E8%A6%81%E4%BC%98%E7%BC%BA%E7%82%B9%E6%9C%89%E5%93%AA%E4%BA%9B">程序流程图主要用于软件开发的哪一阶段？它的主要优缺点有哪些？</a></li><li><a href="#%E7%B3%BB%E7%BB%9F%E6%B5%81%E7%A8%8B%E5%9B%BE%E4%B8%8E%E6%95%B0%E6%8D%AE%E6%B5%81%E7%A8%8B%E5%9B%BE%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB">系统流程图与数据流程图有什么区别？</a></li><li><a href="#%E6%BC%94%E5%8C%96%E6%A8%A1%E5%9E%8B%E7%9A%84%E4%B8%BB%E8%A6%81%E7%89%B9%E5%BE%81%E6%98%AF%E4%BB%80%E4%B9%88%E5%AE%83%E5%AD%98%E5%9C%A8%E4%BB%80%E4%B9%88%E4%B8%8D%E8%B6%B3">演化模型的主要特征是什么？它存在什么不足？</a></li></ul></li><li><a href="#4-rupuml">4. RUP、UML</a><ul><li><a href="#%E5%9B%BE%E5%BD%A2%E5%B7%A5%E5%85%B7%E7%9A%84%E7%94%A8%E9%80%94">图形工具的用途</a></li><li><a href="#%E4%BB%80%E4%B9%88%E6%98%AF-uml-%E5%AE%83%E6%9C%89%E4%BB%80%E4%B9%88%E7%89%B9%E7%82%B9">什么是 UML? 它有什么特点？</a></li><li><a href="#%E7%AE%80%E8%BF%B0%E6%B3%9B%E5%8C%96%E7%9A%84%E6%A6%82%E5%BF%B5%E5%8F%8A%E5%85%B6%E7%BA%A6%E6%9D%9F">简述泛化的概念及其约束</a></li><li><a href="#rup-%E7%9A%84%E7%89%B9%E7%82%B9%E4%B9%8B%E4%B8%80%E6%98%AF%E8%BF%AD%E4%BB%A3%E5%A2%9E%E9%87%8F%E5%BC%8F%E5%BC%80%E5%8F%91%E5%AE%83%E8%A7%84%E5%AE%9A%E4%BA%86-4-%E4%B8%AA%E5%BC%80%E5%8F%91%E9%98%B6%E6%AE%B5%E8%AF%B7%E7%AE%80%E8%BF%B0%E6%AF%8F%E6%AC%A1%E8%BF%AD%E4%BB%A3%E5%9C%A8%E5%90%84%E9%98%B6%E6%AE%B5%E7%9A%84%E7%9B%AE%E6%A0%87">RUP 的特点之一是迭代、增量式开发，它规定了 4 个开发阶段。请简述每次迭代在各阶段的目标。</a></li><li><a href="#%E7%AE%80%E8%BF%B0-rup-%E5%92%8C-uml-%E4%B9%8B%E9%97%B4%E7%9A%84%E5%85%B3%E7%B3%BB">简述 RUP 和 UML 之间的关系</a></li><li><a href="#%E7%AE%80%E8%BF%B0%E9%9C%80%E6%B1%82%E5%88%86%E6%9E%90%E4%B8%8E%E8%BD%AF%E4%BB%B6%E8%AE%BE%E8%AE%A1%E4%B8%A4%E4%B8%AA%E9%98%B6%E6%AE%B5%E4%BB%BB%E5%8A%A1%E7%9A%84%E4%B8%BB%E8%A6%81%E5%8C%BA%E5%88%AB">简述需求分析与软件设计两个阶段任务的主要区别</a></li><li><a href="#%E7%AE%80%E8%BF%B0%E4%BA%8B%E5%8A%A1%E8%AE%BE%E8%AE%A1%E7%9A%84%E5%9F%BA%E6%9C%AC%E6%AD%A5%E9%AA%A4">简述事务设计的基本步骤</a></li></ul></li><li><a href="#6-%E8%BD%AF%E4%BB%B6%E6%B5%8B%E8%AF%95">6. 软件测试</a><ul><li><a href="#%E7%99%BD%E7%9B%92%E6%B5%8B%E8%AF%95%E6%B3%95%E5%92%8C%E9%BB%91%E7%9B%92%E6%B5%8B%E8%AF%95%E6%B3%95%E7%9A%84%E5%8C%BA%E5%88%AB%E6%98%AF%E4%BB%80%E4%B9%88">白盒测试法和黑盒测试法的区别是什么？</a></li><li><a href="#%E7%AE%80%E8%BF%B0%E8%BD%AF%E4%BB%B6%E6%B5%8B%E8%AF%95%E7%9A%84%E5%9F%BA%E6%9C%AC%E6%AD%A5%E9%AA%A4">简述软件测试的基本步骤</a></li><li><a href="#%E7%AE%80%E8%BF%B0%E8%B7%AF%E5%BE%84%E6%B5%8B%E8%AF%95%E4%B8%AD%E5%87%A0%E7%A7%8D%E5%85%B8%E5%9E%8B%E7%9A%84%E6%B5%8B%E8%AF%95%E7%AD%96%E7%95%A5">简述路径测试中几种典型的测试策略。</a></li><li><a href="#%E7%AE%80%E8%BF%B0%E5%9B%A0%E6%9E%9C%E5%9B%BE%E6%96%B9%E6%B3%95%E7%94%9F%E6%88%90%E6%B5%8B%E8%AF%95%E7%94%A8%E4%BE%8B%E7%9A%84%E5%9F%BA%E6%9C%AC%E6%AD%A5%E9%AA%A4">简述因果图方法生成测试用例的基本步骤</a></li></ul></li><li><a href="#7-%E8%BD%AF%E4%BB%B6%E7%94%9F%E5%AD%98%E5%91%A8%E6%9C%9F%E8%BF%87%E7%A8%8B%E4%B8%8E%E7%AE%A1%E7%90%86">7. 软件生存周期过程与管理</a><ul><li><a href="#%E8%BD%AF%E4%BB%B6%E7%94%9F%E5%AD%98%E5%91%A8%E6%9C%9F%E6%A8%A1%E5%9E%8B">软件生存周期模型</a></li><li><a href="#%E7%AE%80%E8%BF%B0%E6%BC%94%E5%8C%96%E6%A8%A1%E5%9E%8B%E5%8F%8A%E5%85%B6%E4%B8%BB%E8%A6%81%E7%89%B9%E5%BE%81">简述演化模型及其主要特征</a></li></ul></li><li><a href="#8-%E9%9B%86%E6%88%90%E5%8C%96%E8%83%BD%E5%8A%9B%E6%88%90%E7%86%9F%E5%BA%A6%E6%A8%A1%E5%9E%8B">8. 集成化能力成熟度模型</a><ul><li><a href="#%E8%83%BD%E5%8A%9B%E7%AD%89%E7%BA%A7">能力等级</a></li><li><a href="#%E6%88%90%E7%86%9F%E5%BA%A6%E7%AD%89%E7%BA%A7">成熟度等级</a></li></ul></li><li><a href="#%E5%85%B6%E4%BB%96">其他</a></li></ul><div class="post-button"><a class="btn" href="/blog/2021/02/10/note-023333/#more" rel="contents">阅读全文 »</a></div></div><footer class="post-footer"><div class="post-eof"></div></footer></article><article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN"><link itemprop="mainEntityOfPage" href="https://anran758.github.io/blog/2021/01/05/binary-tree/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="image" content="https://avatars3.githubusercontent.com/u/23024075?s=96&v=4"><meta itemprop="name" content="anran758"><meta itemprop="description" content="web 开发的碎碎念"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Anran758's blog"></span><header class="post-header"><h2 class="post-title" itemprop="name headline"><a href="/blog/2021/01/05/binary-tree/" class="post-title-link" itemprop="url">JavaScript 实现二叉树</a></h2><div class="post-meta"><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建时间：2021-01-05 14:35:00" itemprop="dateCreated datePublished" datetime="2021-01-05T14:35:00+08:00">2021-01-05</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar-check"></i> </span><span class="post-meta-item-text">更新于</span> <time title="修改时间：2022-05-23 14:14:04" itemprop="dateModified" datetime="2022-05-23T14:14:04+08:00">2022-05-23</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-folder"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/blog/categories/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/" itemprop="url" rel="index"><span itemprop="name">数据结构</span></a> </span></span><span id="/blog/2021/01/05/binary-tree/" class="post-meta-item leancloud_visitors" data-flag-title="JavaScript 实现二叉树" title="阅读次数"><span class="post-meta-item-icon"><i class="fa fa-eye"></i> </span><span class="post-meta-item-text">阅读次数：</span> <span class="leancloud-visitors-count"></span> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-comment"></i> </span><span class="post-meta-item-text">Disqus：</span> <a title="disqus" href="/blog/2021/01/05/binary-tree/#disqus_thread" itemprop="discussionUrl"><span class="post-comments-count disqus-comment-count" data-disqus-identifier="2021/01/05/binary-tree/" itemprop="commentCount"></span></a></span><br><span class="post-meta-item" title="本文字数"><span class="post-meta-item-icon"><i class="far fa-file-word"></i> </span><span class="post-meta-item-text">本文字数：</span> <span>5.8k</span> </span><span class="post-meta-item" title="阅读时长"><span class="post-meta-item-icon"><i class="far fa-clock"></i> </span><span class="post-meta-item-text">阅读时长 ≈</span> <span>7 分钟</span></span></div></header><div class="post-body" itemprop="articleBody"><p>二叉树数据结构的学习与笔记。</p><h2 id="目录"><a href="#目录" class="headerlink" title="目录"></a>目录</h2><ul><li><a href="#%E4%BA%8C%E5%8F%89%E6%A0%91%E7%9A%84%E5%82%A8%E5%AD%98%E7%BB%93%E6%9E%84">二叉树的储存结构</a></li><li><a href="#%E9%A1%BA%E5%BA%8F%E7%BB%93%E6%9E%84%E8%BD%AC%E9%93%BE%E5%BC%8F%E7%BB%93%E6%9E%84">顺序结构转链式结构</a></li><li><a href="#%E4%BA%8C%E5%8F%89%E6%A0%91%E7%9A%84%E9%81%8D%E5%8E%86">二叉树的遍历</a><ul><li><a href="#%E5%89%8D%E5%BA%8F%E5%BA%8F%E9%81%8D%E5%8E%86">前序序遍历</a></li><li><a href="#%E4%B8%AD%E5%BA%8F%E9%81%8D%E5%8E%86">中序遍历</a></li><li><a href="#%E5%90%8E%E5%BA%8F%E9%81%8D%E5%8E%86">后序遍历</a></li><li><a href="#%E5%B1%82%E5%BA%8F%E9%81%8D%E5%8E%86">层序遍历</a></li></ul></li><li><a href="#%E5%90%88%E5%B9%B6%E4%BA%8C%E5%8F%89%E6%A0%91">合并二叉树</a></li><li><a href="#%E4%BA%8C%E5%8F%89%E6%8E%92%E5%BA%8F%E6%A0%91-bst">二叉排序树 (BST)</a><ul><li><a href="#%E9%AB%98%E5%BA%A6%E5%B9%B3%E8%A1%A1%E4%BA%8C%E5%8F%89%E6%90%9C%E7%B4%A2%E6%A0%91">高度平衡二叉搜索树</a></li><li><a href="#%E5%88%A4%E6%96%AD%E6%8C%87%E5%AE%9A%E6%A0%91%E6%98%AF%E5%90%A6%E6%98%AF%E5%B9%B3%E8%A1%A1%E6%A0%91">判断指定树是否是平衡树</a></li></ul></li></ul><div class="post-button"><a class="btn" href="/blog/2021/01/05/binary-tree/#more" rel="contents">阅读全文 »</a></div></div><footer class="post-footer"><div class="post-eof"></div></footer></article><article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN"><link itemprop="mainEntityOfPage" href="https://anran758.github.io/blog/2020/12/22/closure-and-function-chaining/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="image" content="https://avatars3.githubusercontent.com/u/23024075?s=96&v=4"><meta itemprop="name" content="anran758"><meta itemprop="description" content="web 开发的碎碎念"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Anran758's blog"></span><header class="post-header"><h2 class="post-title" itemprop="name headline"><a href="/blog/2020/12/22/closure-and-function-chaining/" class="post-title-link" itemprop="url">闭包与链式设计的使用示例</a></h2><div class="post-meta"><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建时间：2020-12-22 20:30:09" itemprop="dateCreated datePublished" datetime="2020-12-22T20:30:09+08:00">2020-12-22</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar-check"></i> </span><span class="post-meta-item-text">更新于</span> <time title="修改时间：2021-10-04 17:19:41" itemprop="dateModified" datetime="2021-10-04T17:19:41+08:00">2021-10-04</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-folder"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/blog/categories/JavaScript/" itemprop="url" rel="index"><span itemprop="name">JavaScript</span></a> </span></span><span id="/blog/2020/12/22/closure-and-function-chaining/" class="post-meta-item leancloud_visitors" data-flag-title="闭包与链式设计的使用示例" title="阅读次数"><span class="post-meta-item-icon"><i class="fa fa-eye"></i> </span><span class="post-meta-item-text">阅读次数：</span> <span class="leancloud-visitors-count"></span> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-comment"></i> </span><span class="post-meta-item-text">Disqus：</span> <a title="disqus" href="/blog/2020/12/22/closure-and-function-chaining/#disqus_thread" itemprop="discussionUrl"><span class="post-comments-count disqus-comment-count" data-disqus-identifier="2020/12/22/closure-and-function-chaining/" itemprop="commentCount"></span></a></span><br><span class="post-meta-item" title="本文字数"><span class="post-meta-item-icon"><i class="far fa-file-word"></i> </span><span class="post-meta-item-text">本文字数：</span> <span>4.2k</span> </span><span class="post-meta-item" title="阅读时长"><span class="post-meta-item-icon"><i class="far fa-clock"></i> </span><span class="post-meta-item-text">阅读时长 ≈</span> <span>5 分钟</span></span></div></header><div class="post-body" itemprop="articleBody"><p>最近遇到了个按需请求数据的需求，非常适合用于讲解闭包与链式设计的例子，故来分享一下思路。</p><div class="post-button"><a class="btn" href="/blog/2020/12/22/closure-and-function-chaining/#more" rel="contents">阅读全文 »</a></div></div><footer class="post-footer"><div class="post-eof"></div></footer></article><article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN"><link itemprop="mainEntityOfPage" href="https://anran758.github.io/blog/2020/11/04/react-retrospection-2/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="image" content="https://avatars3.githubusercontent.com/u/23024075?s=96&v=4"><meta itemprop="name" content="anran758"><meta itemprop="description" content="web 开发的碎碎念"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Anran758's blog"></span><header class="post-header"><h2 class="post-title" itemprop="name headline"><a href="/blog/2020/11/04/react-retrospection-2/" class="post-title-link" itemprop="url">React 知识回顾 (优化篇)</a></h2><div class="post-meta"><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建时间：2020-11-04 23:48:43" itemprop="dateCreated datePublished" datetime="2020-11-04T23:48:43+08:00">2020-11-04</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar-check"></i> </span><span class="post-meta-item-text">更新于</span> <time title="修改时间：2021-10-04 17:19:41" itemprop="dateModified" datetime="2021-10-04T17:19:41+08:00">2021-10-04</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-folder"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/blog/categories/React/" itemprop="url" rel="index"><span itemprop="name">React</span></a> </span></span><span id="/blog/2020/11/04/react-retrospection-2/" class="post-meta-item leancloud_visitors" data-flag-title="React 知识回顾 (优化篇)" title="阅读次数"><span class="post-meta-item-icon"><i class="fa fa-eye"></i> </span><span class="post-meta-item-text">阅读次数：</span> <span class="leancloud-visitors-count"></span> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-comment"></i> </span><span class="post-meta-item-text">Disqus：</span> <a title="disqus" href="/blog/2020/11/04/react-retrospection-2/#disqus_thread" itemprop="discussionUrl"><span class="post-comments-count disqus-comment-count" data-disqus-identifier="2020/11/04/react-retrospection-2/" itemprop="commentCount"></span></a></span><br><span class="post-meta-item" title="本文字数"><span class="post-meta-item-icon"><i class="far fa-file-word"></i> </span><span class="post-meta-item-text">本文字数：</span> <span>3.9k</span> </span><span class="post-meta-item" title="阅读时长"><span class="post-meta-item-icon"><i class="far fa-clock"></i> </span><span class="post-meta-item-text">阅读时长 ≈</span> <span>5 分钟</span></span></div></header><div class="post-body" itemprop="articleBody"><img src="/blog/2020/11/04/react-retrospection-2/banner.png"><p>接下来对 React 性能相关的问题进行知识回顾。</p><div class="post-button"><a class="btn" href="/blog/2020/11/04/react-retrospection-2/#more" rel="contents">阅读全文 »</a></div></div><footer class="post-footer"><div class="post-eof"></div></footer></article><article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN"><link itemprop="mainEntityOfPage" href="https://anran758.github.io/blog/2020/10/31/react-retrospection/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="image" content="https://avatars3.githubusercontent.com/u/23024075?s=96&v=4"><meta itemprop="name" content="anran758"><meta itemprop="description" content="web 开发的碎碎念"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Anran758's blog"></span><header class="post-header"><h2 class="post-title" itemprop="name headline"><a href="/blog/2020/10/31/react-retrospection/" class="post-title-link" itemprop="url">React 知识回顾 (使用篇)</a></h2><div class="post-meta"><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建时间：2020-10-31 20:19:22" itemprop="dateCreated datePublished" datetime="2020-10-31T20:19:22+08:00">2020-10-31</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar-check"></i> </span><span class="post-meta-item-text">更新于</span> <time title="修改时间：2021-10-04 17:19:41" itemprop="dateModified" datetime="2021-10-04T17:19:41+08:00">2021-10-04</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-folder"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/blog/categories/React/" itemprop="url" rel="index"><span itemprop="name">React</span></a> </span></span><span id="/blog/2020/10/31/react-retrospection/" class="post-meta-item leancloud_visitors" data-flag-title="React 知识回顾 (使用篇)" title="阅读次数"><span class="post-meta-item-icon"><i class="fa fa-eye"></i> </span><span class="post-meta-item-text">阅读次数：</span> <span class="leancloud-visitors-count"></span> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-comment"></i> </span><span class="post-meta-item-text">Disqus：</span> <a title="disqus" href="/blog/2020/10/31/react-retrospection/#disqus_thread" itemprop="discussionUrl"><span class="post-comments-count disqus-comment-count" data-disqus-identifier="2020/10/31/react-retrospection/" itemprop="commentCount"></span></a></span><br><span class="post-meta-item" title="本文字数"><span class="post-meta-item-icon"><i class="far fa-file-word"></i> </span><span class="post-meta-item-text">本文字数：</span> <span>12k</span> </span><span class="post-meta-item" title="阅读时长"><span class="post-meta-item-icon"><i class="far fa-clock"></i> </span><span class="post-meta-item-text">阅读时长 ≈</span> <span>15 分钟</span></span></div></header><div class="post-body" itemprop="articleBody"><img src="/blog/2020/10/31/react-retrospection/banner.png"><p>使用 React 进行项目开发也有好几个项目了，趁着最近有空来对 React 的知识做一个简单的复盘。</p><div class="post-button"><a class="btn" href="/blog/2020/10/31/react-retrospection/#more" rel="contents">阅读全文 »</a></div></div><footer class="post-footer"><div class="post-eof"></div></footer></article><article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN"><link itemprop="mainEntityOfPage" href="https://anran758.github.io/blog/2020/09/27/hexo-issue/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="image" content="https://avatars3.githubusercontent.com/u/23024075?s=96&v=4"><meta itemprop="name" content="anran758"><meta itemprop="description" content="web 开发的碎碎念"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Anran758's blog"></span><header class="post-header"><h2 class="post-title" itemprop="name headline"><a href="/blog/2020/09/27/hexo-issue/" class="post-title-link" itemprop="url">Hexo 常见问题解决方案</a></h2><div class="post-meta"><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建时间：2020-09-27 21:12:42" itemprop="dateCreated datePublished" datetime="2020-09-27T21:12:42+08:00">2020-09-27</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar-check"></i> </span><span class="post-meta-item-text">更新于</span> <time title="修改时间：2021-10-04 17:19:41" itemprop="dateModified" datetime="2021-10-04T17:19:41+08:00">2021-10-04</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-folder"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/blog/categories/Hexo/" itemprop="url" rel="index"><span itemprop="name">Hexo</span></a> </span></span><span id="/blog/2020/09/27/hexo-issue/" class="post-meta-item leancloud_visitors" data-flag-title="Hexo 常见问题解决方案" title="阅读次数"><span class="post-meta-item-icon"><i class="fa fa-eye"></i> </span><span class="post-meta-item-text">阅读次数：</span> <span class="leancloud-visitors-count"></span> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-comment"></i> </span><span class="post-meta-item-text">Disqus：</span> <a title="disqus" href="/blog/2020/09/27/hexo-issue/#disqus_thread" itemprop="discussionUrl"><span class="post-comments-count disqus-comment-count" data-disqus-identifier="2020/09/27/hexo-issue/" itemprop="commentCount"></span></a></span><br><span class="post-meta-item" title="本文字数"><span class="post-meta-item-icon"><i class="far fa-file-word"></i> </span><span class="post-meta-item-text">本文字数：</span> <span>4k</span> </span><span class="post-meta-item" title="阅读时长"><span class="post-meta-item-icon"><i class="far fa-clock"></i> </span><span class="post-meta-item-text">阅读时长 ≈</span> <span>5 分钟</span></span></div></header><div class="post-body" itemprop="articleBody"><img src="/blog/2020/09/27/hexo-issue/banner.png"><p>记录 Hexo 升级或使用时遇到的问题和一些解决方案。</p><div class="post-button"><a class="btn" href="/blog/2020/09/27/hexo-issue/#more" rel="contents">阅读全文 »</a></div></div><footer class="post-footer"><div class="post-eof"></div></footer></article><article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN"><link itemprop="mainEntityOfPage" href="https://anran758.github.io/blog/2020/07/05/react-vs-vue/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="image" content="https://avatars3.githubusercontent.com/u/23024075?s=96&v=4"><meta itemprop="name" content="anran758"><meta itemprop="description" content="web 开发的碎碎念"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Anran758's blog"></span><header class="post-header"><h2 class="post-title" itemprop="name headline"><a href="/blog/2020/07/05/react-vs-vue/" class="post-title-link" itemprop="url">React vs Vue</a></h2><div class="post-meta"><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建时间：2020-07-05 11:10:56" itemprop="dateCreated datePublished" datetime="2020-07-05T11:10:56+08:00">2020-07-05</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar-check"></i> </span><span class="post-meta-item-text">更新于</span> <time title="修改时间：2023-12-13 11:44:01" itemprop="dateModified" datetime="2023-12-13T11:44:01+08:00">2023-12-13</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-folder"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/blog/categories/JavaScript/" itemprop="url" rel="index"><span itemprop="name">JavaScript</span></a> </span></span><span id="/blog/2020/07/05/react-vs-vue/" class="post-meta-item leancloud_visitors" data-flag-title="React vs Vue" title="阅读次数"><span class="post-meta-item-icon"><i class="fa fa-eye"></i> </span><span class="post-meta-item-text">阅读次数：</span> <span class="leancloud-visitors-count"></span> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-comment"></i> </span><span class="post-meta-item-text">Disqus：</span> <a title="disqus" href="/blog/2020/07/05/react-vs-vue/#disqus_thread" itemprop="discussionUrl"><span class="post-comments-count disqus-comment-count" data-disqus-identifier="2020/07/05/react-vs-vue/" itemprop="commentCount"></span></a></span><br><span class="post-meta-item" title="本文字数"><span class="post-meta-item-icon"><i class="far fa-file-word"></i> </span><span class="post-meta-item-text">本文字数：</span> <span>1k</span> </span><span class="post-meta-item" title="阅读时长"><span class="post-meta-item-icon"><i class="far fa-clock"></i> </span><span class="post-meta-item-text">阅读时长 ≈</span> <span>1 分钟</span></span></div></header><div class="post-body" itemprop="articleBody"><p>在项目架构时选择合适的前端框架是至关重要的。React 和 Vue 都是流行的选择，但它们在灵活性、易用性和性能方面各有特点。本文旨在深入比较这两个框架，让我们在开发前选择技术架构有个参考。</p><div class="post-button"><a class="btn" href="/blog/2020/07/05/react-vs-vue/#more" rel="contents">阅读全文 »</a></div></div><footer class="post-footer"><div class="post-eof"></div></footer></article><article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN"><link itemprop="mainEntityOfPage" href="https://anran758.github.io/blog/2020/06/08/github-travis-build/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="image" content="https://avatars3.githubusercontent.com/u/23024075?s=96&v=4"><meta itemprop="name" content="anran758"><meta itemprop="description" content="web 开发的碎碎念"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Anran758's blog"></span><header class="post-header"><h2 class="post-title" itemprop="name headline"><a href="/blog/2020/06/08/github-travis-build/" class="post-title-link" itemprop="url">webpack + Travis CI 自动部署项目应用</a></h2><div class="post-meta"><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建时间：2020-06-08 12:43:57" itemprop="dateCreated datePublished" datetime="2020-06-08T12:43:57+08:00">2020-06-08</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar-check"></i> </span><span class="post-meta-item-text">更新于</span> <time title="修改时间：2021-10-04 17:19:41" itemprop="dateModified" datetime="2021-10-04T17:19:41+08:00">2021-10-04</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-folder"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/blog/categories/%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA/" itemprop="url" rel="index"><span itemprop="name">环境搭建</span></a> </span></span><span id="/blog/2020/06/08/github-travis-build/" class="post-meta-item leancloud_visitors" data-flag-title="webpack + Travis CI 自动部署项目应用" title="阅读次数"><span class="post-meta-item-icon"><i class="fa fa-eye"></i> </span><span class="post-meta-item-text">阅读次数：</span> <span class="leancloud-visitors-count"></span> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-comment"></i> </span><span class="post-meta-item-text">Disqus：</span> <a title="disqus" href="/blog/2020/06/08/github-travis-build/#disqus_thread" itemprop="discussionUrl"><span class="post-comments-count disqus-comment-count" data-disqus-identifier="2020/06/08/github-travis-build/" itemprop="commentCount"></span></a></span><br><span class="post-meta-item" title="本文字数"><span class="post-meta-item-icon"><i class="far fa-file-word"></i> </span><span class="post-meta-item-text">本文字数：</span> <span>4.9k</span> </span><span class="post-meta-item" title="阅读时长"><span class="post-meta-item-icon"><i class="far fa-clock"></i> </span><span class="post-meta-item-text">阅读时长 ≈</span> <span>6 分钟</span></span></div></header><div class="post-body" itemprop="articleBody"><img src="/blog/2020/06/08/github-travis-build/banner.png"><p>我们知道 <strong><a target="_blank" rel="noopener" href="https://pages.github.com/">Github Pages</a></strong> 是 Github 免费提供给用户展示页面的一项服务。当我们完成项目开发后，想将页面部署到 Github Pages 时，该要怎么操作呢？</p><p>可以在 GitHub 的储存库设置中设置用于展示页面的分支，该分支只保留构建后的静态资源，也就是源码与编译后的静态资源分离。按照传统的做法是：手动运行编译命令，编译后再复制到指定分支中。这样操作很繁琐，但使用 <code>Travis CI</code> 持续集成服务之后就可以不用操心这些事了。</p><div class="post-button"><a class="btn" href="/blog/2020/06/08/github-travis-build/#more" rel="contents">阅读全文 »</a></div></div><footer class="post-footer"><div class="post-eof"></div></footer></article><article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN"><link itemprop="mainEntityOfPage" href="https://anran758.github.io/blog/2020/05/04/webpack-example/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="image" content="https://avatars3.githubusercontent.com/u/23024075?s=96&v=4"><meta itemprop="name" content="anran758"><meta itemprop="description" content="web 开发的碎碎念"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Anran758's blog"></span><header class="post-header"><h2 class="post-title" itemprop="name headline"><a href="/blog/2020/05/04/webpack-example/" class="post-title-link" itemprop="url">从零构建 webpack 脚手架(基础篇)</a></h2><div class="post-meta"><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建时间：2020-05-04 22:58:56" itemprop="dateCreated datePublished" datetime="2020-05-04T22:58:56+08:00">2020-05-04</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar-check"></i> </span><span class="post-meta-item-text">更新于</span> <time title="修改时间：2021-10-04 17:19:41" itemprop="dateModified" datetime="2021-10-04T17:19:41+08:00">2021-10-04</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-folder"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/blog/categories/webpack/" itemprop="url" rel="index"><span itemprop="name">webpack</span></a> </span></span><span id="/blog/2020/05/04/webpack-example/" class="post-meta-item leancloud_visitors" data-flag-title="从零构建 webpack 脚手架(基础篇)" title="阅读次数"><span class="post-meta-item-icon"><i class="fa fa-eye"></i> </span><span class="post-meta-item-text">阅读次数：</span> <span class="leancloud-visitors-count"></span> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-comment"></i> </span><span class="post-meta-item-text">Disqus：</span> <a title="disqus" href="/blog/2020/05/04/webpack-example/#disqus_thread" itemprop="discussionUrl"><span class="post-comments-count disqus-comment-count" data-disqus-identifier="2020/05/04/webpack-example/" itemprop="commentCount"></span></a></span><br><span class="post-meta-item" title="本文字数"><span class="post-meta-item-icon"><i class="far fa-file-word"></i> </span><span class="post-meta-item-text">本文字数：</span> <span>33k</span> </span><span class="post-meta-item" title="阅读时长"><span class="post-meta-item-icon"><i class="far fa-clock"></i> </span><span class="post-meta-item-text">阅读时长 ≈</span> <span>41 分钟</span></span></div></header><div class="post-body" itemprop="articleBody"><img src="/blog/2020/05/04/webpack-example/banner.png"><p>webpack 是一个现代 JavaScript 应用程序的静态模块打包工具，它对于前端工程师来说可谓是如雷贯耳，基本上现在的大型应用都是通过 webpack 进行构建的。</p><p>webpack 具有高度可配置性，它拥有非常丰富的配置。在过去一段时间内曾有人将熟练配置 webpack 的人称呼为 “webapck 工程师”。当然，这称呼只是个玩笑话，但也能从侧面了解到 webpack 配置的灵活与复杂。</p><p>为了能够熟练掌握 webpack 的使用，接下来通过几个例子循序渐进的学习如何使用 webpack。</p><p>以下 <code>Demo</code> 都可以在 Github 的 <a target="_blank" rel="noopener" href="https://github.com/anran758/webpack-example">webpack-example</a> 中找到对应的示例，欢迎 star~</p><div class="post-button"><a class="btn" href="/blog/2020/05/04/webpack-example/#more" rel="contents">阅读全文 »</a></div></div><footer class="post-footer"><div class="post-eof"></div></footer></article><article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN"><link itemprop="mainEntityOfPage" href="https://anran758.github.io/blog/2020/02/22/flexbox-use-cases/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="image" content="https://avatars3.githubusercontent.com/u/23024075?s=96&v=4"><meta itemprop="name" content="anran758"><meta itemprop="description" content="web 开发的碎碎念"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Anran758's blog"></span><header class="post-header"><h2 class="post-title" itemprop="name headline"><a href="/blog/2020/02/22/flexbox-use-cases/" class="post-title-link" itemprop="url">Flexbox 布局实际用例</a></h2><div class="post-meta"><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建时间：2020-02-22 16:28:44" itemprop="dateCreated datePublished" datetime="2020-02-22T16:28:44+08:00">2020-02-22</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar-check"></i> </span><span class="post-meta-item-text">更新于</span> <time title="修改时间：2023-12-13 14:14:38" itemprop="dateModified" datetime="2023-12-13T14:14:38+08:00">2023-12-13</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-folder"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/blog/categories/CSS/" itemprop="url" rel="index"><span itemprop="name">CSS</span></a> </span></span><span id="/blog/2020/02/22/flexbox-use-cases/" class="post-meta-item leancloud_visitors" data-flag-title="Flexbox 布局实际用例" title="阅读次数"><span class="post-meta-item-icon"><i class="fa fa-eye"></i> </span><span class="post-meta-item-text">阅读次数：</span> <span class="leancloud-visitors-count"></span> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-comment"></i> </span><span class="post-meta-item-text">Disqus：</span> <a title="disqus" href="/blog/2020/02/22/flexbox-use-cases/#disqus_thread" itemprop="discussionUrl"><span class="post-comments-count disqus-comment-count" data-disqus-identifier="2020/02/22/flexbox-use-cases/" itemprop="commentCount"></span></a></span><br><span class="post-meta-item" title="本文字数"><span class="post-meta-item-icon"><i class="far fa-file-word"></i> </span><span class="post-meta-item-text">本文字数：</span> <span>1.6k</span> </span><span class="post-meta-item" title="阅读时长"><span class="post-meta-item-icon"><i class="far fa-clock"></i> </span><span class="post-meta-item-text">阅读时长 ≈</span> <span>2 分钟</span></span></div></header><div class="post-body" itemprop="articleBody"><p>上篇文章介绍了 flexbox 的属性与示例，本文再通过几个 flex 布局的案例来体会 flex 布局的特性带来的便利和问题~</p><img src="/blog/2020/02/22/flexbox-use-cases/banner.png"><div class="post-button"><a class="btn" href="/blog/2020/02/22/flexbox-use-cases/#more" rel="contents">阅读全文 »</a></div></div><footer class="post-footer"><div class="post-eof"></div></footer></article><article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN"><link itemprop="mainEntityOfPage" href="https://anran758.github.io/blog/2020/02/05/css-getting-started-with-flexbox/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="image" content="https://avatars3.githubusercontent.com/u/23024075?s=96&v=4"><meta itemprop="name" content="anran758"><meta itemprop="description" content="web 开发的碎碎念"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Anran758's blog"></span><header class="post-header"><h2 class="post-title" itemprop="name headline"><a href="/blog/2020/02/05/css-getting-started-with-flexbox/" class="post-title-link" itemprop="url">Flexbox 布局入门</a></h2><div class="post-meta"><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建时间：2020-02-05 21:36:54" itemprop="dateCreated datePublished" datetime="2020-02-05T21:36:54+08:00">2020-02-05</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar-check"></i> </span><span class="post-meta-item-text">更新于</span> <time title="修改时间：2023-12-13 14:14:38" itemprop="dateModified" datetime="2023-12-13T14:14:38+08:00">2023-12-13</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-folder"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/blog/categories/CSS/" itemprop="url" rel="index"><span itemprop="name">CSS</span></a> </span></span><span id="/blog/2020/02/05/css-getting-started-with-flexbox/" class="post-meta-item leancloud_visitors" data-flag-title="Flexbox 布局入门" title="阅读次数"><span class="post-meta-item-icon"><i class="fa fa-eye"></i> </span><span class="post-meta-item-text">阅读次数：</span> <span class="leancloud-visitors-count"></span> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-comment"></i> </span><span class="post-meta-item-text">Disqus：</span> <a title="disqus" href="/blog/2020/02/05/css-getting-started-with-flexbox/#disqus_thread" itemprop="discussionUrl"><span class="post-comments-count disqus-comment-count" data-disqus-identifier="2020/02/05/css-getting-started-with-flexbox/" itemprop="commentCount"></span></a></span><br><span class="post-meta-item" title="本文字数"><span class="post-meta-item-icon"><i class="far fa-file-word"></i> </span><span class="post-meta-item-text">本文字数：</span> <span>8.2k</span> </span><span class="post-meta-item" title="阅读时长"><span class="post-meta-item-icon"><i class="far fa-clock"></i> </span><span class="post-meta-item-text">阅读时长 ≈</span> <span>10 分钟</span></span></div></header><div class="post-body" itemprop="articleBody"><p>互联网早期实现布局是需要通过多种不同属性组合才能实现我们想要的布局。</p><p>比如常见的垂直居中，刚接触 css 的朋友看到 <code>vertical-align: middle;</code> 这个属性可能就会认为它就是用于垂直居中的，但实际上并没有那么简单。如果想要通过该属性来实现垂直居中，还需要其他小伙伴配合。</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">6px</span>;</span><br><span class="line"> <span class="attribute">text-align</span>: center;</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#e44b27</span>;</span><br><span class="line"> <span class="attribute">white-space</span>: nowrap;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 该伪类是实现垂直居中关键 */</span></span><br><span class="line"><span class="selector-class">.container</span>:after {</span><br><span class="line"> content: <span class="string">''</span>;</span><br><span class="line"> <span class="attribute">display</span>: inline-block;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">vertical-align</span>: middle;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.content</span> {</span><br><span class="line"> <span class="attribute">display</span>: inline-block;</span><br><span class="line"> <span class="attribute">white-space</span>: normal;</span><br><span class="line"> <span class="attribute">vertical-align</span>: middle;</span><br><span class="line"> <span class="attribute">text-align</span>: left;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"container"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"content"</span>></span>我想居中！<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><p>这样看来，为了实现垂直居中布局，我们还得打一套组合拳才能出来才行，是不是看起来有点麻烦的样子？</p><p>W3C 在 2009 年提出的 <code>Fiexbox(flex)</code> 布局<a target="_blank" rel="noopener" href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">草案</a>，就是针对用户界面设计优化的 CSS 盒模型。如果使用 flex 布局来实现上面的垂直居中布局的话，可以简化为：</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">6px</span>;</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#e44b27</span>;</span><br><span class="line"></span><br><span class="line"> <span class="comment">/* 使用 flex 布局 */</span></span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line"> <span class="attribute">justify-content</span>: center;</span><br><span class="line"> <span class="attribute">align-items</span>: center;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"container"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span>我想居中！<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><p>修改后的代码就显得更精简了，也不需要其他小伙伴来搭把手。布局的事情就让 flex 家族自己来解决即可。</p><div class="post-button"><a class="btn" href="/blog/2020/02/05/css-getting-started-with-flexbox/#more" rel="contents">阅读全文 »</a></div></div><footer class="post-footer"><div class="post-eof"></div></footer></article><article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN"><link itemprop="mainEntityOfPage" href="https://anran758.github.io/blog/2019/11/02/hexo-blog-upgrade-and-version-control/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="image" content="https://avatars3.githubusercontent.com/u/23024075?s=96&v=4"><meta itemprop="name" content="anran758"><meta itemprop="description" content="web 开发的碎碎念"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Anran758's blog"></span><header class="post-header"><h2 class="post-title" itemprop="name headline"><a href="/blog/2019/11/02/hexo-blog-upgrade-and-version-control/" class="post-title-link" itemprop="url">Hexo blog 的升级与同步方案</a></h2><div class="post-meta"><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建时间：2019-11-02 09:44:24" itemprop="dateCreated datePublished" datetime="2019-11-02T09:44:24+08:00">2019-11-02</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar-check"></i> </span><span class="post-meta-item-text">更新于</span> <time title="修改时间：2021-10-04 17:19:41" itemprop="dateModified" datetime="2021-10-04T17:19:41+08:00">2021-10-04</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-folder"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/blog/categories/Hexo/" itemprop="url" rel="index"><span itemprop="name">Hexo</span></a> </span></span><span id="/blog/2019/11/02/hexo-blog-upgrade-and-version-control/" class="post-meta-item leancloud_visitors" data-flag-title="Hexo blog 的升级与同步方案" title="阅读次数"><span class="post-meta-item-icon"><i class="fa fa-eye"></i> </span><span class="post-meta-item-text">阅读次数：</span> <span class="leancloud-visitors-count"></span> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-comment"></i> </span><span class="post-meta-item-text">Disqus：</span> <a title="disqus" href="/blog/2019/11/02/hexo-blog-upgrade-and-version-control/#disqus_thread" itemprop="discussionUrl"><span class="post-comments-count disqus-comment-count" data-disqus-identifier="2019/11/02/hexo-blog-upgrade-and-version-control/" itemprop="commentCount"></span></a></span><br><span class="post-meta-item" title="本文字数"><span class="post-meta-item-icon"><i class="far fa-file-word"></i> </span><span class="post-meta-item-text">本文字数：</span> <span>4.7k</span> </span><span class="post-meta-item" title="阅读时长"><span class="post-meta-item-icon"><i class="far fa-clock"></i> </span><span class="post-meta-item-text">阅读时长 ≈</span> <span>6 分钟</span></span></div></header><div class="post-body" itemprop="articleBody"><p>前一篇我们介绍了如何使用 <code>Hexo</code> 框架及 <code>Next</code> 主题搭建博客。这次来聊聊如何安全的更新博客与主题的版本。</p><p><img src="https://user-images.githubusercontent.com/16272760/63487983-da41b080-c4df-11e9-951c-64883a8a5e9b.png" alt="next theme"></p><div class="post-button"><a class="btn" href="/blog/2019/11/02/hexo-blog-upgrade-and-version-control/#more" rel="contents">阅读全文 »</a></div></div><footer class="post-footer"><div class="post-eof"></div></footer></article><article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN"><link itemprop="mainEntityOfPage" href="https://anran758.github.io/blog/2019/08/24/js-%E5%B0%86JSON%E6%95%B0%E6%8D%AE%E6%A0%BC%E5%BC%8F%E8%BE%93%E5%87%BA%E8%87%B3%E9%A1%B5%E9%9D%A2%E4%B8%8A/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="image" content="https://avatars3.githubusercontent.com/u/23024075?s=96&v=4"><meta itemprop="name" content="anran758"><meta itemprop="description" content="web 开发的碎碎念"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Anran758's blog"></span><header class="post-header"><h2 class="post-title" itemprop="name headline"><a href="/blog/2019/08/24/js-%E5%B0%86JSON%E6%95%B0%E6%8D%AE%E6%A0%BC%E5%BC%8F%E8%BE%93%E5%87%BA%E8%87%B3%E9%A1%B5%E9%9D%A2%E4%B8%8A/" class="post-title-link" itemprop="url">将 JSON 数据格式输出至页面上</a></h2><div class="post-meta"><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建时间：2019-08-24 16:04:52" itemprop="dateCreated datePublished" datetime="2019-08-24T16:04:52+08:00">2019-08-24</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar-check"></i> </span><span class="post-meta-item-text">更新于</span> <time title="修改时间：2021-10-04 17:19:41" itemprop="dateModified" datetime="2021-10-04T17:19:41+08:00">2021-10-04</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-folder"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/blog/categories/JavaScript/" itemprop="url" rel="index"><span itemprop="name">JavaScript</span></a> </span></span><span id="/blog/2019/08/24/js-%E5%B0%86JSON%E6%95%B0%E6%8D%AE%E6%A0%BC%E5%BC%8F%E8%BE%93%E5%87%BA%E8%87%B3%E9%A1%B5%E9%9D%A2%E4%B8%8A/" class="post-meta-item leancloud_visitors" data-flag-title="将 JSON 数据格式输出至页面上" title="阅读次数"><span class="post-meta-item-icon"><i class="fa fa-eye"></i> </span><span class="post-meta-item-text">阅读次数：</span> <span class="leancloud-visitors-count"></span> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-comment"></i> </span><span class="post-meta-item-text">Disqus：</span> <a title="disqus" href="/blog/2019/08/24/js-%E5%B0%86JSON%E6%95%B0%E6%8D%AE%E6%A0%BC%E5%BC%8F%E8%BE%93%E5%87%BA%E8%87%B3%E9%A1%B5%E9%9D%A2%E4%B8%8A/#disqus_thread" itemprop="discussionUrl"><span class="post-comments-count disqus-comment-count" data-disqus-identifier="2019/08/24/js-将JSON数据格式输出至页面上/" itemprop="commentCount"></span></a></span><br><span class="post-meta-item" title="本文字数"><span class="post-meta-item-icon"><i class="far fa-file-word"></i> </span><span class="post-meta-item-text">本文字数：</span> <span>4.3k</span> </span><span class="post-meta-item" title="阅读时长"><span class="post-meta-item-icon"><i class="far fa-clock"></i> </span><span class="post-meta-item-text">阅读时长 ≈</span> <span>5 分钟</span></span></div></header><div class="post-body" itemprop="articleBody"><p><code>JSON</code> 是一种轻量级的数据交换格式，它有键值对集合(js 中的对象)和数组两种结构。<code>JSON</code>是一个通用的格式，在前后端语言中都能跟该 <code>JSON</code> 打交道。</p><p>有时候我们需要将 <code>JSON</code> 格式输入至页面展示的需求，其中还需要保持一定的索引，那么该如何实现呢？</p><div class="post-button"><a class="btn" href="/blog/2019/08/24/js-%E5%B0%86JSON%E6%95%B0%E6%8D%AE%E6%A0%BC%E5%BC%8F%E8%BE%93%E5%87%BA%E8%87%B3%E9%A1%B5%E9%9D%A2%E4%B8%8A/#more" rel="contents">阅读全文 »</a></div></div><footer class="post-footer"><div class="post-eof"></div></footer></article><nav class="pagination"><span class="page-number current">1</span><a class="page-number" href="/blog/page/2/">2</a><span class="space">…</span><a class="page-number" href="/blog/page/4/">4</a><a class="extend next" rel="next" href="/blog/page/2/"><i class="fa fa-angle-right" aria-label="下一页"></i></a></nav></div><script>window.addEventListener("tabs:register",()=>{let{activeClass:t}=CONFIG.comments;if(CONFIG.comments.storage&&(t=localStorage.getItem("comments_active")||t),t){let e=document.querySelector(`a[href="#comment-${t}"]`);e&&e.click()}}),CONFIG.comments.storage&&window.addEventListener("tabs:click",t=>{if(!t.target.matches(".tabs-comment .tab-content .tab-pane"))return;let e=t.target.classList[1];localStorage.setItem("comments_active",e)})</script></div><div class="toggle sidebar-toggle"><span class="toggle-line toggle-line-first"></span> <span class="toggle-line toggle-line-middle"></span> <span class="toggle-line toggle-line-last"></span></div><aside class="sidebar"><div class="sidebar-inner"><ul class="sidebar-nav motion-element"><li class="sidebar-nav-toc">文章目录</li><li class="sidebar-nav-overview">站点概览</li></ul><div class="post-toc-wrap sidebar-panel"></div><div class="site-overview-wrap sidebar-panel"><div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person"><img class="site-author-image" itemprop="image" alt="anran758" src="https://avatars3.githubusercontent.com/u/23024075?s=96&v=4"><p class="site-author-name" itemprop="name">anran758</p><div class="site-description" itemprop="description">web 开发的碎碎念</div></div><div class="site-state-wrap motion-element"><nav class="site-state"><div class="site-state-item site-state-posts"><a href="/blog/archives/"><span class="site-state-item-count">64</span> <span class="site-state-item-name">日志</span></a></div><div class="site-state-item site-state-categories"><a href="/blog/categories/"><span class="site-state-item-count">16</span> <span class="site-state-item-name">分类</span></a></div><div class="site-state-item site-state-tags"><a href="/blog/tags/"><span class="site-state-item-count">97</span> <span class="site-state-item-name">标签</span></a></div></nav></div><div class="links-of-author motion-element"><span class="links-of-author-item"><a href="https://github.com/anran758" title="GitHub → https://github.com/anran758" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a> </span><span class="links-of-author-item"><a href="https://weibo.com/u/3833726651" title="Weibo → https://weibo.com/u/3833726651" rel="noopener" target="_blank"><i class="fab fa-weibo fa-fw"></i>Weibo</a> </span><span class="links-of-author-item"><a href="https://segmentfault.com/u/anran758" title="Segmentfault → https://segmentfault.com/u/anran758" rel="noopener" target="_blank"><i class="fab fa-skype fa-fw"></i>Segmentfault</a></span></div><div class="cc-license motion-element" itemprop="license"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" class="cc-opacity" rel="noopener" target="_blank"><img src="/blog/images/cc-by-nc-sa.svg" alt="Creative Commons"></a></div><div class="links-of-blogroll motion-element"><div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i> 推荐阅读</div><ul class="links-of-blogroll-list"><li class="links-of-blogroll-item"><a href="http://www.zhangxinxu.com/" title="http://www.zhangxinxu.com/" rel="noopener" target="_blank">张鑫旭</a></li><li class="links-of-blogroll-item"><a href="https://tan90qian.github.io/blog/" title="https://tan90qian.github.io/blog/" rel="noopener" target="_blank">Tan90Qian's blog</a></li><li class="links-of-blogroll-item"><a href="http://www.alloyteam.com/" title="http://www.alloyteam.com/" rel="noopener" target="_blank">Alloyteam</a></li></ul></div><div class="links-of-blogroll motion-element"><div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i> 常用网站</div><ul class="links-of-blogroll-list"><li class="links-of-blogroll-item"><a href="https://caniuse.com/" title="https://caniuse.com/" rel="noopener" target="_blank">Caniuse(CSS兼容性)</a></li><li class="links-of-blogroll-item"><a href="https://developer.mozilla.org/zh-CN/" title="https://developer.mozilla.org/zh-CN/" rel="noopener" target="_blank">MDN(web 文档)</a></li><li class="links-of-blogroll-item"><a href="https://codepen.io/" title="https://codepen.io/" rel="noopener" target="_blank">codepen</a></li><li class="links-of-blogroll-item"><a href="https://tinypng.com/" title="https://tinypng.com/" rel="noopener" target="_blank">Tinypng(图片压缩)</a></li></ul></div></div></div></aside><div id="sidebar-dimmer"></div></div></main><footer class="footer"><div class="footer-inner"><div class="copyright">© 2017 – <span itemprop="copyrightYear">2024</span> <span class="with-love"><i class="fa fa-heart"></i> </span><span class="author" itemprop="copyrightHolder">anran758</span> <span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-chart-area"></i> </span><span class="post-meta-item-text">站点总字数：</span> <span title="站点总字数">322k</span> <span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-coffee"></i> </span><span class="post-meta-item-text">站点阅读时长 ≈</span> <span title="站点阅读时长">6:43</span></div><div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/muse/" class="theme-link" rel="noopener" target="_blank">NexT.Muse</a> 强力驱动</div><div class="addthis_inline_share_toolbox"><script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=5d560b378f0db5fa" async></script></div><div class="busuanzi-count"><script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><script>!function(){function e(e){return e=encodeURI(e),document.getElementById(e).querySelector(".leancloud-visitors-count")}let{app_id:t,app_key:o,server_url:n}={enable:!0,app_id:"pzA3EVFcmmGjhOfofaeSXDdr-MdYXbMMI",app_key:"YQgLRTjAQ5uE0S4T6dKqeS8U",server_url:null,security:!0};function r(n){var r=(e,r,l)=>fetch(`${n}/1.1${r}`,{method:e,headers:{"X-LC-Id":t,"X-LC-Key":o,"Content-Type":"application/json"},body:JSON.stringify(l)});if(CONFIG.page.isPost){if(CONFIG.hostname!==location.hostname)return;!function(t){var o=document.querySelector(".leancloud_visitors"),n=decodeURI(o.id);o.dataset.flagTitle,t("get","/classes/Counter?where="+encodeURIComponent(JSON.stringify({url:n}))).then(e=>e.json()).then(({results:o})=>{if(o.length>0){var r=o[0];e(n).innerText=r.time+1,t("put","/classes/Counter/"+r.objectId,{time:{__op:"Increment",amount:1}}).catch(e=>{console.error("Failed to save visitor count",e)})}else e(n).innerText="Counter not initialized! More info at console err msg.",console.error("ATTENTION! LeanCloud counter has security bug, see how to solve it here: https://github.com/theme-next/hexo-leancloud-counter-security. \n However, you can still use LeanCloud without security, by setting `security` option to `false`.")}).catch(e=>{console.error("LeanCloud Counter Error",e)})}(r)}else document.querySelectorAll(".post-title-link").length>=1&&function(t){var o=[...document.querySelectorAll(".leancloud_visitors")].map(e=>decodeURI(e.id));t("get","/classes/Counter?where="+encodeURIComponent(JSON.stringify({url:{$in:o}}))).then(e=>e.json()).then(({results:t})=>{for(let n of o){let o=t.find(e=>e.url===n);e(n).innerText=o?o.time:0}}).catch(e=>{console.error("LeanCloud Counter Error",e)})}(r)}let l="-MdYXbMMI"!==t.slice(-9)?n:`https://${t.slice(0,8).toLowerCase()}.api.lncldglobal.com`;l?r(l):fetch("https://app-router.leancloud.cn/2/route?appId="+t).then(e=>e.json()).then(({api_server:e})=>{r("https://"+e)})}()</script></div></footer></div><script src="//cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script><script src="//cdn.jsdelivr.net/npm/medium-zoom@1/dist/medium-zoom.min.js"></script><script src="//cdn.jsdelivr.net/npm/lozad@1/dist/lozad.min.js"></script><script src="/blog/js/utils.js"></script><script src="/blog/js/schemes/muse.js"></script><script src="/blog/js/next-boot.js"></script><script src="/blog/js/bookmark.js"></script><script>!function(){var t=document.createElement("script"),e=window.location.protocol.split(":")[0];t.src="https"===e?"https://zz.bdstatic.com/linksubmit/push.js":"http://push.zhanzhang.baidu.com/push.js";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(t,s)}()</script><script>CONFIG.page.isPost&&(wpac_init=window.wpac_init||[],wpac_init.push({widget:"Rating",id:20378,el:"wpac-rating",color:"fc6423"}),function(){if(!("WIDGETPACK_LOADED"in window)){WIDGETPACK_LOADED=!0;var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="//embed.widgetpack.com/widget.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t.nextSibling)}}())</script><script src="/blog/js/local-search.js"></script><script>document.querySelectorAll("pre.mermaid").length&&NexT.utils.getScript("//cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.min.js",()=>{mermaid.initialize({theme:"default",logLevel:3,flowchart:{curve:"linear"},gantt:{axisFormat:"%m/%d/%Y"},sequence:{actorMargin:50}})},window.mermaid)</script><script>function loadCount(){var d=document,n=d.createElement("script");n.src="https://anran758.disqus.com/count.js",n.id="dsq-count-scr",(d.head||d.body).appendChild(n)}window.addEventListener("load",loadCount,!1)</script></body></html>