-
Notifications
You must be signed in to change notification settings - Fork 17
/
Copy pathindex.html
executable file
·1 lines (1 loc) · 38.7 KB
/
index.html
1
<!doctype html><html class="theme-next muse use-motion"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><link href="/vendors/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet"><link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet"><link href="/vendors/font-awesome/css/font-awesome.min.css?v=4.4.0" rel="stylesheet"><link href="/css/main.css?v=5.0.1" rel="stylesheet"><meta name="keywords" content="前端开发,技术博客,HTML/CSS,javaScript,前端技能,开发工具"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.0.1"><meta name="description" content="Hancoson（墨萧）的博客，一名打拼多年的前端开发者的积累"><meta name="keywords" content="前端开发,技术博客,HTML/CSS,javaScript,前端技能,开发工具"><meta property="og:type" content="website"><meta property="og:title" content="Hancoson'blog"><meta property="og:url" content="http://vsoui.com/index.html"><meta property="og:site_name" content="Hancoson'blog"><meta property="og:description" content="Hancoson（墨萧）的博客，一名打拼多年的前端开发者的积累"><meta property="og:locale" content="zh-Hans"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="Hancoson'blog"><meta name="twitter:description" content="Hancoson（墨萧）的博客，一名打拼多年的前端开发者的积累"><script id="hexo.configuration">var NexT=window.NexT||{},CONFIG={scheme:"Muse",sidebar:{position:"left",display:"post"},fancybox:!0,motion:!0,duoshuo:{userId:0,author:"博主"}}</script><title>Hancoson'blog</title></head><body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans"><div class="container one-collumn sidebar-position-left page-home"><div class="headband"></div><header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="header-inner"><div class="site-meta"><div class="custom-logo-site-title"><a href="/" class="brand" rel="start"><span class="logo-line-before"><i></i></span> <span class="site-title">Hancoson'blog</span> <span class="logo-line-after"><i></i></span></a></div><p class="site-subtitle">每天成长一点点</p></div><div class="site-nav-toggle"><button><span class="btn-bar"></span> <span class="btn-bar"></span> <span class="btn-bar"></span></button></div><nav class="site-nav"><ul id="menu" class="menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="menu-item-icon fa fa-fw fa-home"></i><br>首页</a></li><li class="menu-item menu-item-categories"><a href="/categories" rel="section"><i class="menu-item-icon fa fa-fw fa-th"></i><br>分类</a></li><li class="menu-item menu-item-about"><a href="/about" rel="section"><i class="menu-item-icon fa fa-fw fa-user"></i><br>关于</a></li><li class="menu-item menu-item-archives"><a href="/archives" rel="section"><i class="menu-item-icon fa fa-fw fa-archive"></i><br>归档</a></li><li class="menu-item menu-item-tags"><a href="/tags" rel="section"><i class="menu-item-icon fa fa-fw fa-tags"></i><br>标签</a></li></ul></nav></div></header><main id="main" class="main"><div class="main-inner"><div class="content-wrap"><div id="content" class="content"><section id="posts" class="posts-expand"><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/2018/12/26/npm-vs-yarn/" itemprop="url">npm vs yarn</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time itemprop="dateCreated" datetime="2018-12-26T19:45:44+08:00" content="2018-12-26">2018-12-26 </time></span><span class="post-category"> | <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="https://schema.org/Thing"><a href="/categories/笔记/" itemprop="url" rel="index"><span itemprop="name">笔记</span></a></span></span></div></header><div class="post-body" itemprop="articleBody"><blockquote><p>npm 和 yarn 是目前比较常用的包管理工具。本文主要对 npm5+ 和 yarn 来做简单的对比和介绍。</p></blockquote><p>npm 与 yarn 主要的命令对比：</p><table><thead><tr><th style="text-align:left">npm命令</th><th style="text-align:left">yarn命令</th></tr></thead><tbody><tr><td style="text-align:left">npm install</td><td style="text-align:left">yarn (install)</td></tr><tr><td style="text-align:left">npm install –save / npm i</td><td style="text-align:left">yarn add</td></tr><tr><td style="text-align:left">npm install –save-dev / npm i -D</td><td style="text-align:left">yarn add –dev</td></tr><tr><td style="text-align:left">npm uninstall</td><td style="text-align:left">yarn remove</td></tr><tr><td style="text-align:left">npm init</td><td style="text-align:left">yarn init</td></tr><tr><td style="text-align:left">npm install -g</td><td style="text-align:left">yarn global add</td></tr><tr><td style="text-align:left">npm uninstall -g</td><td style="text-align:left">yarn global remove</td></tr><tr><td style="text-align:left">npm start</td><td style="text-align:left">yarn start</td></tr><tr><td style="text-align:left">npm run</td><td style="text-align:left">yarn run</td></tr><tr><td style="text-align:left">npm ls</td><td style="text-align:left">yarn list</td></tr></tbody></table><h2 id="一、yarn"><a href="#一、yarn" class="headerlink" title="一、yarn"></a>一、yarn</h2><p>yarn是2016年10月发布，目前在Github上获取了3.4w+的 star。官方给出的解释是：快速、可靠、安全的依赖管理。</p><h3 id="1-1-特点"><a href="#1-1-特点" class="headerlink" title="1.1 特点"></a>1.1 特点</h3><h4 id="1-1-1-并行安装："><a href="#1-1-1-并行安装：" class="headerlink" title="1.1.1 并行安装："></a>1.1.1 并行安装：</h4><p>无论 npm 还是 yarn 在执行包的安装时，都会执行一系列任务。npm 是按照队列执行每个 package，也就是说必须要等到当前 package 安装完成之后，才能继续后面的安装。而 yarn 是同步执行所有任务，提高了性能。</p><h4 id="1-1-2-离线模式："><a href="#1-1-2-离线模式：" class="headerlink" title="1.1.2 离线模式："></a>1.1.2 离线模式：</h4><p>如果之前已经安装过一个软件包，再次安装时就不用再从网络下载了。</p><h4 id="1-1-3安装版本统一："><a href="#1-1-3安装版本统一：" class="headerlink" title="1.1.3安装版本统一："></a>1.1.3安装版本统一：</h4><p>安装版本统一为了防止拉取到不同的版本，yarn 有一个锁定文件 (lock file) 记录了被确切安装上的模块的版本号。每次只要新增了一个模块，Yarn 就会创建（或更新）yarn.lock 这个文件。这么做就保证了，每一次拉取同一个项目依赖时，使用的都是一样的模块版本。</p><h4 id="1-1-4-多注册来源处理："><a href="#1-1-4-多注册来源处理：" class="headerlink" title="1.1.4 多注册来源处理："></a>1.1.4 多注册来源处理：</h4><p>所有的依赖包，不管他被不同的库间接关联引用多少次，安装这个包时，只会从一个注册来源去装，要么是 npm 要么是 bower, 防止出现混乱不一致<br></p><div class="post-more-link text-center"><a class="btn" href="/2018/12/26/npm-vs-yarn/#more" rel="contents">阅读全文 »</a></div></div><div></div><div></div><footer class="post-footer"><div class="post-eof"></div></footer></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/2018/10/18/Higher-Order-Function/" itemprop="url">JavaScript 高阶函数理解与应用</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time itemprop="dateCreated" datetime="2018-10-18T16:01:01+08:00" content="2018-10-18">2018-10-18 </time></span><span class="post-category"> | <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="https://schema.org/Thing"><a href="/categories/笔记/" itemprop="url" rel="index"><span itemprop="name">笔记</span></a></span></span></div></header><div class="post-body" itemprop="articleBody"><h2 id="认识"><a href="#认识" class="headerlink" title="认识"></a>认识</h2><p>高阶函数（Higher Order Function）作为函数式编程众多风格中的一项显著特征，经常被使用着。</p><p>那什么是高阶函数呢？高阶函数是对其他函数进行操作的函数，操作可以是将它们作为参数，或者是返回它们，即满指至少满足下列条件之一的函数：</p><ul><li>函数作为参数被传递</li><li>函数作为返回值输出</li></ul><h2 id="应用"><a href="#应用" class="headerlink" title="应用"></a>应用</h2><p>实际上我们日常开发中也会经常用到高阶函数。接下来看一下几个典型的应用实例：</p><h3 id="做为参数传递"><a href="#做为参数传递" class="headerlink" title="做为参数传递"></a>做为参数传递</h3><h4 id="Array-prototype-map"><a href="#Array-prototype-map" class="headerlink" title="Array.prototype.map()"></a>Array.prototype.map()</h4><p>map() 接受一个函数作参数，这个函数封装了创建新数组的规则，从 map() 的使用可以看到，我们的目的是根据原数组获取一个新数组，这是不变的部分；而使用什么规则去创建，则是可变的部分。把可变的部分封装在函数参数里，动态传入 map()，使 map() 方法成为了一个非常灵活的方法。</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> arr1 = [<span class="number">1</span>,<span class="number">3</span>,<span class="number">5</span>]</span><br><span class="line"><span class="keyword">const</span> arr2 = arr1.map(<span class="function"><span class="params">item</span> =></span> tem*<span class="number">2</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(arr2) <span class="comment">//2,6,10</span></span><br></pre></td></tr></table></figure><div class="post-more-link text-center"><a class="btn" href="/2018/10/18/Higher-Order-Function/#more" rel="contents">阅读全文 »</a></div></div><div></div><div></div><footer class="post-footer"><div class="post-eof"></div></footer></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/2018/09/29/git-commit-message/" itemprop="url">如何做好 Git Commit message 规范化</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time itemprop="dateCreated" datetime="2018-09-29T10:59:46+08:00" content="2018-09-29">2018-09-29 </time></span><span class="post-category"> | <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="https://schema.org/Thing"><a href="/categories/笔记/" itemprop="url" rel="index"><span itemprop="name">笔记</span></a></span></span></div></header><div class="post-body" itemprop="articleBody"><p>如今 Git 在团队开发中使用已经越来越普遍，那么如何做好提交信息的规范化呢？本文主要结合 <a href="https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit#heading=h.greljkmo14y0" target="_blank" rel="noopener">Angular Git Commit message 规范</a>，来介绍一下相关的配套工具使用。</p><h2 id="Commit-message-规范化的好处"><a href="#Commit-message-规范化的好处" class="headerlink" title="Commit message 规范化的好处"></a>Commit message 规范化的好处</h2><ul><li>提供更多的历史信息，方便快速浏览。</li><li>可以过滤某些commit（比如文档改动），便于快速查找信息。</li></ul><h2 id="如何规范化-Commit-message"><a href="#如何规范化-Commit-message" class="headerlink" title="如何规范化 Commit message"></a>如何规范化 Commit message</h2><p>下面主要介绍一下相关的工具。</p><h3 id="Commitizen"><a href="#Commitizen" class="headerlink" title="Commitizen"></a>Commitizen</h3><p><a href="https://github.com/commitizen/cz-cli" target="_blank" rel="noopener">commitizen</a>是一个撰写合格 Commit message 的工具。<br></p><div class="post-more-link text-center"><a class="btn" href="/2018/09/29/git-commit-message/#more" rel="contents">阅读全文 »</a></div></div><div></div><div></div><footer class="post-footer"><div class="post-eof"></div></footer></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/2018/09/20/data-transfer-between-vue-compontents/" itemprop="url">VUE组件之间数据传递</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time itemprop="dateCreated" datetime="2018-09-20T20:34:18+08:00" content="2018-09-20">2018-09-20 </time></span><span class="post-category"> | <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="https://schema.org/Thing"><a href="/categories/笔记/" itemprop="url" rel="index"><span itemprop="name">笔记</span></a></span></span></div></header><div class="post-body" itemprop="articleBody"><h1 id="VUE组件之间数据传递"><a href="#VUE组件之间数据传递" class="headerlink" title="VUE组件之间数据传递"></a>VUE组件之间数据传递</h1><h2 id="父子组件之间传递"><a href="#父子组件之间传递" class="headerlink" title="父子组件之间传递"></a>父子组件之间传递</h2><h3 id="父-gt-子"><a href="#父-gt-子" class="headerlink" title="父 -> 子"></a>父 -> 子</h3><h4 id="props-属性值方式"><a href="#props-属性值方式" class="headerlink" title="(props)属性值方式"></a>(props)属性值方式</h4><ul><li>父组件关键代码：<figure class="highlight js"><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"><template></span><br><span class="line"> <Child :child-msg=<span class="string">"msg"</span>><span class="xml"><span class="tag"></<span class="name">Child</span>></span></span></span><br><span class="line"><<span class="regexp">/template></span></span><br></pre></td></tr></table></figure></li></ul><ul><li><p>子组件关键代码：</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> {</span><br><span class="line"> name: <span class="string">'child'</span>,</span><br><span class="line"> props: {</span><br><span class="line"> child-msg: <span class="built_in">String</span> <span class="comment">//这里指定了字符串类型，如果类型不一致会警</span></span><br><span class="line"> }</span><br><span class="line">};</span><br></pre></td></tr></table></figure></li></ul><p><code>child-msg</code> 为父组件给子组件设置的额外属性值，属性值需在子组件中设置<code>props</code>，子组件中可直接使用<code>child-msg</code>变量。</p><div class="post-more-link text-center"><a class="btn" href="/2018/09/20/data-transfer-between-vue-compontents/#more" rel="contents">阅读全文 »</a></div></div><div></div><div></div><footer class="post-footer"><div class="post-eof"></div></footer></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/2018/08/14/git-submodule/" itemprop="url">Git 子模块</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time itemprop="dateCreated" datetime="2018-08-14T15:46:30+08:00" content="2018-08-14">2018-08-14 </time></span><span class="post-category"> | <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="https://schema.org/Thing"><a href="/categories/笔记/" itemprop="url" rel="index"><span itemprop="name">笔记</span></a></span></span></div></header><div class="post-body" itemprop="articleBody"><h2 id="为什么要用子模块"><a href="#为什么要用子模块" class="headerlink" title="为什么要用子模块"></a>为什么要用子模块</h2><h3 id="痛点"><a href="#痛点" class="headerlink" title="痛点"></a>痛点</h3><p>在我们开发项目的时候可能会遇到下面这个问题：在你的项目中使用另外一个项目，也许这个是一个第三方开发的库或者是你独立开发和并在多个父项目中使用的。简单的说就是A同学开发的一个模块，被B、C…同学共同调用（使用），可能就形成了如下的这种关系。</p><p><img src="http://7xtxh3.com1.z0.glb.clouddn.com/blog/[email protected]" alt="模块调用关系"></p><p>这个场景下一个常见的问题产生了：你想将两个项目单独处理但是又需要在其中一个中使用另外一个。</p><h3 id="解决方案"><a href="#解决方案" class="headerlink" title="解决方案"></a>解决方案</h3><p>这种问题，Git 已经帮我们有了处理方案——子模块。</p><ul><li>子模块允许你将一个 Git 仓库作为另一个 Git 仓库的子目录。 它能让你将另一个仓库克隆到自己的项目中，同时还保持提交的独立。</li><li>子模块关键字：<code>git submodule</code><div class="post-more-link text-center"><a class="btn" href="/2018/08/14/git-submodule/#more" rel="contents">阅读全文 »</a></div></li></ul></div><div></div><div></div><footer class="post-footer"><div class="post-eof"></div></footer></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/2018/07/12/angular6-zhihuDaily-demo/" itemprop="url">Angular6 开发探索 - 知乎日报</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time itemprop="dateCreated" datetime="2018-07-12T15:17:15+08:00" content="2018-07-12">2018-07-12 </time></span><span class="post-category"> | <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="https://schema.org/Thing"><a href="/categories/笔记/" itemprop="url" rel="index"><span itemprop="name">笔记</span></a></span></span></div></header><div class="post-body" itemprop="articleBody"><p>最近利用空余时间研究学习了前端“三剑客”之 —— Angular。Angular 是一个开发平台。它能帮你更轻松的构建 Web 应用。Angular 集声明式模板、依赖注入、端到端工具和一些最佳实践于一身，为你解决开发方面的各种挑战。Angular 为开发者提升构建 Web、手机或桌面应用的能力（好官方～～～）。好了，接下来结合自己做 DEMO 的过程来说说。</p><blockquote><p>github >> <a href="https://github.com/Hancoson/ng-zhihuDaily" target="_blank" rel="noopener">https://github.com/Hancoson/ng-zhihuDaily</a> Star Star Star ~~</p></blockquote><h2 id="开始"><a href="#开始" class="headerlink" title="开始"></a>开始</h2><ul><li>脚手架：本 demo 是使用 <a href="https://cli.angular.io/" target="_blank" rel="noopener">Angular CLI</a> 工具来构建的，不熟悉的同学可以去官网看看。</li><li>技术栈：<ul><li><a href="https://angular.io" target="_blank" rel="noopener">Angular 6</a>，<a href="https://angular.cn/" target="_blank" rel="noopener">中文版</a></li><li><a href="https://element-angular.faas.ele.me/guide/install" target="_blank" rel="noopener">element-angular</a></li></ul></li></ul><div class="post-more-link text-center"><a class="btn" href="/2018/07/12/angular6-zhihuDaily-demo/#more" rel="contents">阅读全文 »</a></div></div><div></div><div></div><footer class="post-footer"><div class="post-eof"></div></footer></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/2018/06/07/async-await-function/" itemprop="url">async/await 函数简介</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time itemprop="dateCreated" datetime="2018-06-07T10:08:22+08:00" content="2018-06-07">2018-06-07 </time></span><span class="post-category"> | <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="https://schema.org/Thing"><a href="/categories/笔记/" itemprop="url" rel="index"><span itemprop="name">笔记</span></a></span></span></div></header><div class="post-body" itemprop="articleBody"><blockquote><p>自从 ES6 诞生以来，异步编程的方法得到了很大的发展。从 <code>Promise</code> 到 ES7 提案中的 <code>async/await</code>。目前，它仍处于提案阶段，<code>async</code> 函数可以说是目前异步操作最好的解决方案，是对 <code>Generator</code> 函数的升级和改进。那么今天就来具体说说 <code>async/await</code> 函数。</p></blockquote><h2 id="async-await-简介"><a href="#async-await-简介" class="headerlink" title="async/await 简介"></a>async/await 简介</h2><ul><li>async/await 是异步代码的新方式</li><li>async/await 基于 Promise 实现</li><li>async/await 使得异步代码更像同步代码</li><li>await 只能用在 async 函数中，不能用在普通函数中</li><li>await 关键字后面必须跟 Promise 对象</li><li>函数执行到 await 后，Promise 函数执行完毕，但因为 Promise 内部一般都是异步函数，所以事件循环会一直 wait，直到事件轮询检查到 Promise 有了状态 resolve 或 reject 才重新执行这个函数后面的内容</li></ul><h2 id="async-await-用法"><a href="#async-await-用法" class="headerlink" title="async/await 用法"></a>async/await 用法</h2><p>async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数。当函数执行的时候，一旦遇到 await 就会先返回一个 Promise 对象，等到异步操作完成，再接着执行函数体内后面的语句。</p><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">timeout</span>(<span class="params">ms</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="params">resolve</span> =></span> {</span><br><span class="line"> setTimeout(resolve, ms);</span><br><span class="line"> });</span><br><span class="line">}</span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">asyncPrint</span>(<span class="params">value, ms</span>) </span>{</span><br><span class="line"> <span class="keyword">await</span> timeout(ms);</span><br><span class="line"> <span class="built_in">console</span>.log(value);</span><br><span class="line">}</span><br><span class="line">asyncPrint(<span class="string">'hello world'</span>, <span class="number">50</span>);</span><br></pre></td></tr></table></figure><div class="post-more-link text-center"><a class="btn" href="/2018/06/07/async-await-function/#more" rel="contents">阅读全文 »</a></div></div><div></div><div></div><footer class="post-footer"><div class="post-eof"></div></footer></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/2018/05/18/ejs-to-nextjs/" itemprop="url">学会这个，前端也可以和PHP程序员一样了</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time itemprop="dateCreated" datetime="2018-05-18T11:04:51+08:00" content="2018-05-18">2018-05-18 </time></span><span class="post-category"> | <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="https://schema.org/Thing"><a href="/categories/笔记/" itemprop="url" rel="index"><span itemprop="name">笔记</span></a></span></span></div></header><div class="post-body" itemprop="articleBody"><p>话说 PHP 是世界上“最好”的语言，我不是 PHPer ，所以今天我们的主角不是 PHP ，而是前端（Nextjs）。那么问题来了，Nextjs 是什么？</p><blockquote><p>Next.js is a lightweight framework for static and server-rendered applications.</p></blockquote><p>说直白了：Next.js 是一个基于 React 实现的服务端渲染框架。<br>好了，今天我们就来聊聊 Next.js 实现。</p><h2 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h2><p>该项目通过使用 Nextjs 技术，实现了 React 同构方案。采用 Nodejs 搭建服务，结合 Mongoose 数据库，实现了一个简单的博客系统。<br>也可以参考项目 <a href="https://github.com/Hancoson/node-blog-app/tree/ejs-tpl" target="_blank" rel="noopener">v1.0 版本通过 Ejs 模版</a>的实现，<a href="http://www.vsoui.com/2017/10/19/node-blog-demo/" target="_blank" rel="noopener">相关文章>></a>。</p><div class="post-more-link text-center"><a class="btn" href="/2018/05/18/ejs-to-nextjs/#more" rel="contents">阅读全文 »</a></div></div><div></div><div></div><footer class="post-footer"><div class="post-eof"></div></footer></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/2018/04/18/node-midd-dev/" itemprop="url">Node.js 之前端请求转发</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time itemprop="dateCreated" datetime="2018-04-18T10:43:58+08:00" content="2018-04-18">2018-04-18 </time></span><span class="post-category"> | <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="https://schema.org/Thing"><a href="/categories/笔记/" itemprop="url" rel="index"><span itemprop="name">笔记</span></a></span></span></div></header><div class="post-body" itemprop="articleBody"><p>好几年之前【大前端】这个词语就开始在“dev er”中流行起来了，那么大前端到底包含了哪些技术呢？传统的FE、Native（Hybrid）、Node、图形技术、VR……，今天我们来着重说说其中简单的一块——Nodejs（请求转发）。</p><p><img src="http://7xtxh3.com1.z0.glb.clouddn.com/node/13417b7c8dd6daecb9fa4d7c38062421.jpg" alt="node"></p><h2 id="需求"><a href="#需求" class="headerlink" title="需求"></a>需求</h2><p>明确用 <code>Node</code> 来干什么，很重要。</p><ul><li>从后台读取对应的 API</li><li>处理读取的数据，并发给前端（自己）</li></ul><p>很明显这样可以完全抛弃 <code>JSP</code> 语言，并由前端自己来完成。</p><h2 id="开发"><a href="#开发" class="headerlink" title="开发"></a>开发</h2><p>说完就撸起袖子干吧～～～，下文以「<a href="https://github.com/Hancoson/blog/tree/master/demo/nodeMidd" target="_blank" rel="noopener">blog中的demo</a>（已开源）」为例，引入 <code>Express</code> 框架。</p><h3 id="目录机构"><a href="#目录机构" class="headerlink" title="目录机构"></a>目录机构</h3><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line">.</span><br><span class="line">├── app.js <span class="comment">//入口文件</span></span><br><span class="line">├── config <span class="comment">//配置文件</span></span><br><span class="line">├── controllers <span class="comment">//控制器</span></span><br><span class="line">├── logs <span class="comment">//日志</span></span><br><span class="line">├── models <span class="comment">//模型</span></span><br><span class="line">├── node_modules <span class="comment">//依赖</span></span><br><span class="line">├── package.json</span><br><span class="line">├── public <span class="comment">//静态资源</span></span><br><span class="line">├── routes <span class="comment">//路由</span></span><br><span class="line">├── services <span class="comment">//服务</span></span><br><span class="line">├── utils <span class="comment">//工具方法</span></span><br><span class="line">├── views <span class="comment">//模版</span></span><br><span class="line">│ └── index.html</span><br><span class="line">└── yarn.lock</span><br></pre></td></tr></table></figure><p>从目录机构开看是比较简单的，好了，我们来详细介绍一下比较主要的功能吧。<br></p><div class="post-more-link text-center"><a class="btn" href="/2018/04/18/node-midd-dev/#more" rel="contents">阅读全文 »</a></div></div><div></div><div></div><footer class="post-footer"><div class="post-eof"></div></footer></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/2018/04/08/react-doc-context/" itemprop="url">全新的 React Context API</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time itemprop="dateCreated" datetime="2018-04-08T10:49:35+08:00" content="2018-04-08">2018-04-08 </time></span><span class="post-category"> | <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="https://schema.org/Thing"><a href="/categories/笔记/" itemprop="url" rel="index"><span itemprop="name">笔记</span></a></span></span></div></header><div class="post-body" itemprop="articleBody"><blockquote><p>在一个经典的 <code>React</code> 应用中，组件之间通信是常用到的技术方案。在父子组件之间通常通过 <code>props</code> 来传递参数，而非父子组件就比较麻烦了，要么就一级一级通过 <code>props</code> 传递，要么就使用 <code>Redux</code> or <code>Mobx</code> 这类状态管理的状态管理库，但是这样无疑增加了应用的复杂度。在 FEers 的期盼中，<code>React</code> 团队终于从 <code>16.3.0</code> 版本开始新增了一个新的 API <code>Context</code>，福音啊。好了，今天我就来一起学习一下这个新的 <code>Context</code>。</p></blockquote><h2 id="什么时候使用-Context"><a href="#什么时候使用-Context" class="headerlink" title="什么时候使用 Context"></a>什么时候使用 Context</h2><p>Context 目的是为了共享可以被认为是 <code>React</code> 组件“全局”树的数据。例如当前应用的主题、首选语言等等。接下来看看通过 <code>props</code> 和 <code>Context</code> 两种方式实现按钮组件样式参数传递方式的对比：</p><div class="post-more-link text-center"><a class="btn" href="/2018/04/08/react-doc-context/#more" rel="contents">阅读全文 »</a></div></div><div></div><div></div><footer class="post-footer"><div class="post-eof"></div></footer></article></section><nav class="pagination"><span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><span class="space">…</span><a class="page-number" href="/page/6/">6</a><a class="extend next" rel="next" href="/page/2/"><i class="fa fa-angle-right"></i></a></nav></div></div><div class="sidebar-toggle"><div class="sidebar-toggle-line-wrap"><span class="sidebar-toggle-line sidebar-toggle-line-first"></span> <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span> <span class="sidebar-toggle-line sidebar-toggle-line-last"></span></div></div><aside id="sidebar" class="sidebar"><div class="sidebar-inner"><section class="site-overview sidebar-panel sidebar-panel-active"><div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person"><img class="site-author-image" itemprop="image" src="/img/me.jpg" alt="Hancoson（墨萧）"><p class="site-author-name" itemprop="name">Hancoson（墨萧）</p><p class="site-description motion-element" itemprop="description">Hancoson（墨萧）的博客，一名打拼多年的前端开发者的积累</p></div><nav class="site-state motion-element"><div class="site-state-item site-state-posts"><a href="/archives"><span class="site-state-item-count">51</span> <span class="site-state-item-name">日志</span></a></div><div class="site-state-item site-state-categories"><a href="/categories"><span class="site-state-item-count">8</span> <span class="site-state-item-name">分类</span></a></div><div class="site-state-item site-state-tags"><a href="/tags"><span class="site-state-item-count">64</span> <span class="site-state-item-name">标签</span></a></div></nav><div class="links-of-author motion-element"><span class="links-of-author-item"><a href="https://github.com/hancoson" target="_blank" title="Github"><i class="fa fa-fw fa-github"></i> Github </a></span><span class="links-of-author-item"><a href="http://weibo.com/hancoson" target="_blank" title="weibo"><i class="fa fa-fw fa-weibo"></i> weibo </a></span><span class="links-of-author-item"><a href="http://hancoson.github.io/Resume" target="_blank" title="Resume"><i class="fa fa-fw fa-globe"></i> Resume </a></span><span class="links-of-author-item"><a href="https://twitter.com/hancoson" target="_blank" title="twitter"><i class="fa fa-fw fa-twitter"></i> twitter</a></span></div><div class="links-of-blogroll motion-element links-of-blogroll-inline"><div class="links-of-blogroll-title"><i class="fa fa-fw fa-globe"></i> Links</div><ul class="links-of-blogroll-list"><li class="links-of-blogroll-item"><a href="http://hancoson.github.io/Resume" title="Resume" target="_blank">Resume</a></li><li class="links-of-blogroll-item"><a href="http://www.vsoui.com/" title="VSOUI BLOG" target="_blank">VSOUI BLOG</a></li><li class="links-of-blogroll-item"><a href="https://github.com/Hancoson/blog" title="GitHub Blog" target="_blank">GitHub Blog</a></li></ul></div></section></div></aside></div></main><footer id="footer" class="footer"><div class="footer-inner"><script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script><div class="copyright">© <span itemprop="copyrightYear">2018</span> <span class="with-love"><i class="fa fa-heart"></i> </span><a class="author" itemprop="copyrightHolder" href="https://github.com/Hancoson" target="_blank">Hancoson（墨萧）</a></div><div class="powered-by">由 Hexo 强力驱动</div><div class="theme-info powered-by">主题 - NexT.Muse</div><div id="busuanzi_container_site_pv">Total visited <span id="busuanzi_value_site_pv"></span> times.</div></div></footer><div class="back-to-top"><i class="fa fa-arrow-up"></i></div></div><script>"[object Function]"!==Object.prototype.toString.call(window.Promise)&&(window.Promise=null)</script><script src="/vendors/jquery/index.js?v=2.1.3"></script><script src="/vendors/fastclick/lib/fastclick.min.js?v=1.0.6"></script><script src="/vendors/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script><script src="/vendors/velocity/velocity.min.js?v=1.2.1"></script><script src="/vendors/velocity/velocity.ui.min.js?v=1.2.1"></script><script src="/vendors/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script><script src="/js/src/utils.js?v=5.0.1"></script><script src="/js/src/motion.js?v=5.0.1"></script><script src="/js/src/bootstrap.js?v=5.0.1"></script><div style="display:none"><script src="http://s11.cnzz.com/stat.php?id=1259074362&web_id=1259074362" language="JavaScript"></script></div></body></html>