https://github.com/kidbai 2021-03-22T08:43:17+00:00 Youngbye https://github.com/kidbai ybooty@@gmail.com https://github.com/kidbai/前端架构是什么？ 2021-01-21T00:00:00+00:00 https://github.com/kidbai/设计模式六大原则 2020-12-30T00:00:00+00:00 <h1 id="引言">引言</h1> <p>本文主要讲解设计模式的设计原则，以及通过一些样例去详解（通篇还是偏稿子的形态，并没有好好整理，而是想到的就写下</p> <h1 id="六大原则">六大原则</h1> <ul> <li>单一职责原则</li> <li>开闭原则</li> <li>里氏替换原则</li> <li>依赖倒置原则</li> <li>接口隔离原则</li> <li>迪米特原则</li> </ul> <h1 id="单一职责">单一职责</h1> <h2 id="单一职责原则的定义类方法接口">单一职责原则的定义（类、方法、接口）</h2> <p>首先先看概念</p> <p>单一职责原则（Single Responsibility Principle，SRP）又称单一功能原则。这里的职责是指类变化的原因，单一职责原则规定一个类应该有且仅有一个引起它变化的原因，否则类应该被拆分（There should never be more than one reason for a class to change）。</p> <p>归纳总结，就是一个类不应该承担过多的职责，而是专注类自身的职责</p> <h2 id="优点">优点</h2> <ul> <li>降低类的复杂度</li> <li>提高类的可读性</li> <li>提高系统的可维护性</li> <li>降低变更的风险</li> </ul> <h2 id="样例">样例</h2> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>//user.js class... https://github.com/kidbai/Nuxt SSR如何做性能优化 2020-11-26T00:00:00+00:00 <h1 id="nuxt的背景">Nuxt的背景</h1> <p>Nuxt.js 是一个基于 Vue.js 的通用应用框架。</p> <p>通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染。</p> <p>我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js。</p> <p>Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。</p> <p>除此之外，我们还提供了一种命令叫：nuxt generate ，为基于 Vue.js 的应用提供生成对应的静态站点的功能。</p> <p>我们相信这个命令所提供的功能，是向开发集成各种微服务（Microservices）的 Web 应用迈开的新一步。</p> <p>作为框架，Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等。</p> <h2 id="nuxt-特性">Nuxt 特性</h2> <ul> <li>基于 Vue.js</li> <li>自动代码分层</li> <li>服务端渲染</li> <li>强大的路由功能，支持异步数据</li> <li>静态文件服务</li> <li>ES2015+ 语法支持</li> <li>打包和压缩 JS 和 CSS</li> <li>HTML 头部标签管理</li> <li>本地开发支持热加载</li> <li>集成... https://github.com/kidbai/第95个百分位数(95th-percentile)是什么 2020-06-05T00:00:00+00:00 <h1 id="95th-percentile">95th-percentile</h1> <p>什么是第95个百分位数？我们先看看wiki上的解释：<a href="https://en.wikipedia.org/wiki/Burstable_billing#95th_percentile">https://en.wikipedia.org/wiki/Burstable_billing#95th_percentile</a></p> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>The 95th percentile is a widely used mathematical calculation to evaluate the regular and sustained use of a network connection. The 95th percentile method more closely reflects the needed capacity of the link in question than tracking by other methods such as... https://github.com/kidbai/$PATH和$HOME是什么？ 2019-12-20T00:00:00+00:00 <p>$PATH和$HOME都是 Linux 系统下的环境变量，一般 Linux 系统的变量在调用时会加 $ 符号，并且按规范都为大写</p> <p>PATH是指系统指可执行命令的环境变量，比如常用的ls</p> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>➜ ~ whereis ls /bin/ls ➜ ~ echo $PATH /usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin ➜ ~ </code></pre></div></div> <p>该执行命令就在 /bin/ 下</p> <p>同理 HOME 是指当前用户的主目录环境变量</p> <p>另外一个，Bash 的默认命令是不在 $PATH 里的，比如 cd 这种</p> https://github.com/kidbai/macOS Catalina(v10.15) 如何安装 node-gyp 2019-11-27T00:00:00+00:00 <h2 id="在-catalina-中下载node-gyp">在 Catalina 中下载node-gyp</h2> <p>node-gyp 的 repo 地址 <a href="https://github.com/nodejs/node-gyp">https://github.com/nodejs/node-gyp</a>，阅读后其实会发现对 Catalina(v10.15) 之后的系统版本有一个md的地址 <a href="https://github.com/nodejs/node-gyp/blob/master/macOS_Catalina.md">https://github.com/nodejs/node-gyp/blob/master/macOS_Catalina.md</a> 里头有完整的处理方案就不赘述了</p> <h2 id="node-gyp-是什么">node-gyp 是什么？</h2> <p>这里有一份关于 node-gyp 的讲解，<a href="https://github.com/tsy77/blog/issues/5">刨根问底之node-gyp</a>。</p> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>node-gyp是一个跨平台的命令行工具，目的是编译node addon模块。 常用的命令有configure和build，configure 原理就是利用gyp生成不同的编译配置文件，build则根据不同平台、不同构建配置进行编译。 </code></pre></div></div> <p>简单的说noe-gyp是编辑C++扩展用的，node addon中存在有很多不同语言编写的工具，所以需要预先编译一下，否则就会有跨平台的问题。</p> https://github.com/kidbai/SSL本地自建流程（mac） 2019-07-03T00:00:00+00:00 <h3 id="找到自己openssl配置的位置">找到自己openssl配置的位置</h3> <p><code class="language-plaintext highlighter-rouge">find / -name openssl.cnf</code></p> <h3 id="打开opensslcnf">打开openssl.cnf</h3> <p>把<code class="language-plaintext highlighter-rouge">[ req ]</code>下的<code class="language-plaintext highlighter-rouge">#req_extensions = v3_req # The extensions to add to a certificate request</code>注释去掉，启用v3_req</p> <p>在<code class="language-plaintext highlighter-rouge">[ v3_req ]</code>下配置 <code class="language-plaintext highlighter-rouge">subjectAltName=IP:127.0.0.1</code>，更多配置方法可以参考 <a href="https://www.openssl.org/docs/man1.0.2/apps/x509v3_config.html#Subject-Alternative-Name">https://www.openssl.org/docs/man1.0.2/apps/x509v3_config.html#Subject-Alternative-Name</a>。</p> <p>还可以将 <code class="language-plaintext highlighter-rouge">subjectAltName=@alternate_names</code> 在openssl.cnf中额外增加一个新的配置<code class="language-plaintext highlighter-rouge">[ alternate_names ]</code></p> <div class="language-plaintext highlighter-rouge"><div... https://github.com/kidbai/RabbitMQ上手(Node) 2019-06-28T00:00:00+00:00 <h1 id="大纲">大纲</h1> <ul> <li>介绍</li> <li>安装以及编码</li> </ul> <h2 id="介绍">介绍</h2> <p>RabbitMQ 是一个消息代理，其主要思想比较简单。允许接收和转发消息。你可以把RabbitMQ想成是一个邮局，当你发一份邮件到邮箱，你相当确定邮递员最终会把这封信送到你的收件人那边。 使用这个比喻，RabbitMQ可以是一个邮箱，或一个邮局，或一个邮递员。 其与邮局主要的不同是实际上RabbitMQ并不处理内容，而是接收，存储然后转发二进制数据–消息（message）</p> <p>在RabbitMQ的消息传递上，我们用一些术语来解释：</p> <ul> <li> <p>生产（Producing） 意味着只做发送的事情。一个发送消息（message）的程序可以作为一个生产者（producer）.图如下，代号‘P’</p> <p><img src="https://www.rabbitmq.com/img/tutorials/producer.png" alt="image" /></p> </li> <li> <p>队列（queue）是一个邮箱的名字，存在在 RabbitMQ中。尽管消息（messages）是在RabbitMQ和你的应用中传递，但是它们只能被存到一个队列中。这个队列没有任何限制，可以存储你想要的任何多的消息，实际上，它就是一个无限的Buffer，大量生产者可以把消息发送到一个 队列中，消费者们可以尝试从一个队列中去接收数据。一个队列可以画成下图所示：上方是它的名字</p> </li> </ul> <p><img src="https://www.rabbitmq.com/img/tutorials/queue.png" alt="image" /></p> <ul> <li>消费（Consuming）和接收的意思类似。一个等待接收消息的程序是一个消费者（Consumer）。如下图所示，代号“C”：</li> </ul> <p><img src="https://www.rabbitmq.com/img/tutorials/consumer.png" alt="image" /></p> <ul> <li>生产者-队列-消费者</li> </ul> <p><img src="https://www.rabbitmq.com/img/tutorials/python-one.png" alt="image" /></p> <h2 id="安装以及编码">安装以及编码</h2> <ul> <li>安装部署RabbitMQ</li>... https://github.com/kidbai/本地自建SSL流程 2018-05-26T00:00:00+00:00 <h3 id="找到自己openssl配置的位置">找到自己openssl配置的位置</h3> <p><code class="language-plaintext highlighter-rouge">find / -name openssl.cnf</code></p> <h3 id="打开opensslcnf">打开openssl.cnf</h3> <p>把<code class="language-plaintext highlighter-rouge">[ req ]</code>下的<code class="language-plaintext highlighter-rouge">#req_extensions = v3_req # The extensions to add to a certificate request</code>注释去掉，启用v3_req</p> <p>在<code class="language-plaintext highlighter-rouge">[ v3_req ]</code>下配置 <code class="language-plaintext highlighter-rouge">subjectAltName=IP:127.0.0.1</code>，更多配置方法可以参考 <a href="https://www.openssl.org/docs/man1.0.2/apps/x509v3_config.html#Subject-Alternative-Name">https://www.openssl.org/docs/man1.0.2/apps/x509v3_config.html#Subject-Alternative-Name</a>。</p> <p>还可以将 <code class="language-plaintext highlighter-rouge">subjectAltName=@alternate_names</code> 在openssl.cnf中额外增加一个新的配置<code class="language-plaintext highlighter-rouge">[ alternate_names ]</code></p> <div class="language-plaintext highlighter-rouge"><div... https://github.com/kidbai/重读《JavaScript高级程序设计》第三版笔记-变量、作用于和内存问题 2018-01-05T00:00:00+00:00 <h1 id="变量作用域和内存问题">变量、作用域和内存问题</h1> <p>该章节主要讲解了以下三个重点内容：</p> <ul> <li>理解基本类型和引用类型的值</li> <li>理解执行环境</li> <li>理解垃圾回收</li> </ul> <h1 id="基本类型和引用类型的值">基本类型和引用类型的值</h1> <p>首先JavaScript中的变量分为基本类型和引用类型。</p> <p>基本类型就是保存在栈内存中的简单数据段，而引用类型指的是那些保存在堆内存中的对象。</p> <h2 id="基本类型">基本类型</h2> <p>基本类型有Undefined、Null、Boolean、Number 和String。这些类型在内存中分别占有固定大小的空间，他们的值保存在栈空间，我们通过按值来访问的。</p> <h2 id="引用类型">引用类型</h2> <p>引用类型的值大小不固定，因此不能把它们放在栈内存中，但是内存地址的大小是固定的，可以把内存地址存在栈内存中，在堆中为这个地址分配空间。那么我们如果访问一个引用类型的变量，流程就是先从栈内存中读取变量的地址，通过这个地址去找到存储在堆内存中的值。对于这种方式，叫做引用访问</p> <p><img src="https://kidbai.github.io/img/stack.png" alt="image" /></p> <h1 id="执行环境">执行环境</h1> <p>每个函数都有自己的执行环境。当执行流进入一个函数时，函数的环境就会被推入一个环境栈中。 而在函数执行之后，栈将其环境弹出，把控制权返回给之前的执行环境。ECMAScript 程序中的执行流 正是由这个方便的机制控制着。 5 当代码在一个环境中执行时，会创建变量对象的一个作用域链(scope chain)。作用域链的用途，是 <strong>保证对执行环境有权访问的所有变量和函数的有序访问</strong>。作用域链的前端，始终都是当前执行的代码所 在环境的变量对象。如果这个环境是函数，则将其活动对象(activation object)作为变量对象。活动对 6 象在最开始时只包含一个变量，即 arguments 对象(这个对象在全局环境中是不存在的)。作用域链中 的下一个变量对象来自包含(外部)环境，而再下一个变量对象则来自下一个包含环境。这样，一直延 续到全局执行环境;全局执行环境的变量对象始终都是作用域链中的最后一个对象。</p> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var color = "blue"; function...