-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsearch.xml
More file actions
141 lines (128 loc) · 22.5 KB
/
search.xml
File metadata and controls
141 lines (128 loc) · 22.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>Hexo + Next踩坑</title>
<url>/posts/896459f8/</url>
<content><![CDATA[<p>前前后后搞了快有一个星期的时间 终于把这个博客给搭起来了…</p>
<p>用的是hexo + Git pages + Next theme 现在回过头来看其实这些都并不是很难 </p>
<p>真正麻烦的地方就在于next的theme的一些配置都已经更新了(主要是他们人多力量大)</p>
<p>但是很多教程并没有随着更新 尤其是各种插件这一块 所以还是踩了不少的坑</p>
<a id="more"></a>
<p> </p>
<h3 id="Next-theme-的config文件配置"><a href="#Next-theme-的config文件配置" class="headerlink" title="Next theme 的config文件配置"></a>Next theme 的config文件配置</h3><h4 id="用Alternate-Theme-Config"><a href="#用Alternate-Theme-Config" class="headerlink" title="用Alternate Theme Config"></a><strong>用Alternate Theme Config</strong></h4><p>因为next他们这个theme的更新速度是很快的 如果直接从repo上面拉代码下来很容易产生conflict</p>
<p>所以所有theme的主题配置推荐使用Alternate Theme Config</p>
<p>主要的逻辑就是用根目录下的</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">_config.next.yml</span><br></pre></td></tr></table></figure>
<p>代替原本的theme里面的config文件 具体参照下面的官方博客链接</p>
<p><a href="https://theme-next.js.org/docs/getting-started/configuration.html">使用Alternate Theme Config</a></p>
<h4 id="配置暗黑风格的scheme"><a href="#配置暗黑风格的scheme" class="headerlink" title="配置暗黑风格的scheme"></a><strong>配置暗黑风格的scheme</strong></h4><p>最新的next theme支持了暗黑风格主题 这个很赞</p>
<p>我的博客用了 Gemini + Dark 看上应该是舒服多了</p>
<p><a href="https://theme-next.js.org/docs/theme-settings/index.html?highlight=scheme">Dark scheme config</a></p>
<p> </p>
<h3 id="Next-theme-的插件优化"><a href="#Next-theme-的插件优化" class="headerlink" title="Next theme 的插件优化"></a>Next theme 的插件优化</h3><h4 id="使用不蒜子显示访客人数"><a href="#使用不蒜子显示访客人数" class="headerlink" title="使用不蒜子显示访客人数"></a><strong>使用不蒜子显示访客人数</strong></h4><p>next theme的最新版已经在配置中集成了显示访客人数的功能</p>
<p>不需要你再费劲的去改.njk文件了 </p>
<p>但是网上能找的教程 目前很多还都是让你去改动layout里面的footer.ejs </p>
<p>这实在是画蛇添足的举动 具体可以直接看下面官方博客的链接</p>
<p><a href="https://theme-next.js.org/docs/third-party-services/statistics-and-analytics.html?highlight=busuanz">使用不蒜子</a></p>
<h4 id="使用Gitalk的评论系统"><a href="#使用Gitalk的评论系统" class="headerlink" title="使用Gitalk的评论系统"></a><strong>使用Gitalk的评论系统</strong></h4><p>Next theme内置支持很多评论系统 然而我试了一下其中很多跟暗黑主题风格不搭配</p>
<p>另外说一句 虽然它官方博客上也写了支持国内的几个评论系统</p>
<p>但是我研究了一下发现都需要实名注册 实在是感觉不怎么安全 说不定以后就会给你因为各种理由停掉…</p>
<p>所以最后还是选用了Gitalk这一套 虽然说管理的体验一般 但是好看呀！</p>
<p><a href="https://theme-next.js.org/docs/third-party-services/comments.html">使用Gitalk</a></p>
<p> </p>
<h3 id="本地预览与上传更新"><a href="#本地预览与上传更新" class="headerlink" title="本地预览与上传更新"></a>本地预览与上传更新</h3><p>这里我写了一个.sh文件集成了几个简单的hexo命令 </p>
<p>在root目录下创建<code>deploy.sh</code></p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">yourname.github.io/deploy.sh</span><br></pre></td></tr></table></figure>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="built_in">echo</span> -e <span class="string">"清除旧文件"</span></span><br><span class="line">hexo clean</span><br><span class="line"><span class="built_in">echo</span> -e <span class="string">"\t\t......OK\n正在【生成】静态页面"</span></span><br><span class="line">hexo g</span><br><span class="line"><span class="keyword">if</span> [ <span class="variable">$1</span> == <span class="string">'p'</span> ]</span><br><span class="line"><span class="keyword">then</span></span><br><span class="line"> <span class="built_in">echo</span> -e <span class="string">"\t\t......OK\n正在【预览】静态页面"</span></span><br><span class="line"> hexo s</span><br><span class="line"> <span class="built_in">echo</span> <span class="string">"预览完成"</span></span><br><span class="line"><span class="keyword">fi</span></span><br><span class="line"><span class="keyword">if</span> [ <span class="variable">$1</span> == <span class="string">'g'</span> ]</span><br><span class="line"><span class="keyword">then</span></span><br><span class="line"> <span class="built_in">echo</span> -e <span class="string">"\t\t......OK\n正在【发布】静态页面"</span></span><br><span class="line"> hexo d</span><br><span class="line"> <span class="built_in">echo</span> <span class="string">"发布完成"</span></span><br><span class="line"><span class="keyword">fi</span></span><br></pre></td></tr></table></figure>
<p>这样只要在run命令的时候输入不同的参数就可以完成本地预览或者部署到git</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$./deploy.sh [Location]</span><br><span class="line">Location Options:</span><br><span class="line"> --p <span class="built_in">local</span> preview</span><br><span class="line"> --g deploy to the GitHub </span><br></pre></td></tr></table></figure>
<p> </p>
<p><strong>更多配置文件和插件请参考官方博客</strong> <a href="https://theme-next.js.org/">Next Them Official</a></p>
]]></content>
<categories>
<category>hexo</category>
</categories>
<tags>
<tag>hexo</tag>
</tags>
</entry>
<entry>
<title>JavaScript深入理解</title>
<url>/posts/89aff4dd/</url>
<content><![CDATA[<h2 id="函数式编程"><a href="#函数式编程" class="headerlink" title="函数式编程"></a>函数式编程</h2><h3 id="柯里化-Currying"><a href="#柯里化-Currying" class="headerlink" title="柯里化(Currying)"></a>柯里化(Currying)</h3><p>柯里化是函数式编程的基础 主要的想法在于利用函数式编程的概念</p>
<p>利用闭包的特性把原本是接受多个参数的函数封装成只接受一个参数的函数(单函数参数)</p>
<p>后面再配合组合的方式使用 compose 函数</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">curry</span>(<span class="params">fn</span>) </span>{</span><br><span class="line"> <span class="comment">//这里用递归实现 考虑递归条件与递归出口</span></span><br><span class="line"> <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> <span class="title">makeFn</span>(<span class="params">...args</span>) </span>{</span><br><span class="line"> <span class="keyword">if</span> (args.length < fn.length) {</span><br><span class="line"> <span class="comment">//递归条件 - 当传入的参数的个数小于fn本身执行需要的参数的个数</span></span><br><span class="line"> <span class="comment">//高阶函数这里要return function</span></span><br><span class="line"> <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params">...localArgs</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> makeFn(...[...args, ...localArgs]); <span class="comment">//把上一层递归的args和本身收到的参数拼起来往下递归</span></span><br><span class="line"> };</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> fn(...arguments); <span class="comment">//递归出口 - 当传入的参数的个数等于执行函数所需要的参数的个数时 执行函数</span></span><br><span class="line"> };</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<a id="more"></a>
<h3 id="组合函数-Compose-lodash"><a href="#组合函数-Compose-lodash" class="headerlink" title="组合函数(Compose-lodash)"></a>组合函数(Compose-lodash)</h3><p>把一组函数组合成数据管道 按照从右到左的次序依次执行</p>
<p>所有被组合的函数都必须是单函数参数(多数是柯里化以后的函数)</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">compose</span>(<span class="params">...args</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params">value</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> args.reverse().reduce(<span class="function"><span class="keyword">function</span> (<span class="params">acc, fn</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> fn(acc);</span><br><span class="line"> }, value);</span><br><span class="line"> };</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> reverse = <span class="function">(<span class="params">arr</span>) =></span> arr.reverse();</span><br><span class="line"><span class="keyword">const</span> first = <span class="function">(<span class="params">arr</span>) =></span> arr[<span class="number">0</span>];</span><br><span class="line"><span class="keyword">const</span> toUpperCase = <span class="function">(<span class="params">str</span>) =></span> str.toUpperCase();</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> f = compose(toUpperCase, first, reverse);</span><br><span class="line"><span class="built_in">console</span>.log(f([<span class="string">"ant"</span>, <span class="string">"bat"</span>, <span class="string">"cab"</span>])); <span class="comment">// C B A</span></span><br></pre></td></tr></table></figure>
<h3 id="Point-Free"><a href="#Point-Free" class="headerlink" title="Point-Free"></a>Point-Free</h3><p>在函数组合的基础上继续提升 从 data-first 变成 method-first</p>
<p>用这样的方法来构造函数组合 构造时并不涉及数据 而执行时再把需要用到的数据传进去</p>
<p>按照一定的步骤把小的函数给组合起来 实现特定的目的</p>
<p>这里可以用 loadsh 里面的 fp 模块实现</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> firstLetterToUpper = fp.flowRight(</span><br><span class="line"> fp.join(<span class="string">". "</span>),</span><br><span class="line"> fp.map(fp.flowRight(fp.toUpper, fp.first())),</span><br><span class="line"> fp.split(<span class="string">""</span>)</span><br><span class="line">);</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(firstLetterToUpper(<span class="string">"world wild web"</span>)); <span class="comment">//W. W. W</span></span><br></pre></td></tr></table></figure>
<h3 id="函子-Functor"><a href="#函子-Functor" class="headerlink" title="函子(Functor)"></a>函子(Functor)</h3><h4 id="基本概念"><a href="#基本概念" class="headerlink" title="基本概念"></a>基本概念</h4><p>首先要明确一下这个概念的由来</p>
<p>在传统的函数式编程中 所有的函数均应该为纯函数 也就是说这些函数本身都是没有副作用的函数</p>
<blockquote>
<p>副作用：函数执行时不引起其他变量的变化，函数没有中间中间状态</p>
</blockquote>
<p>然而在实际应用中 除了功能单一的一些工具类的函数 大部分的函数都是为了业务构造的</p>
<p>他们是不可能做到完全避免副作用的 所以函子的概念就诞生了</p>
<p>函子把要被改变的变量和要改变这个变量的方法封装到听一个 class 中</p>
<p>在使用的时候从外部传入一个函数来执行想做的操作 同时这个操作也会返回一个新的函子</p>
<p>这样可以做到链式操作 <strong>函子之中包裹的这个值是永远不会被直接取出来操作的</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//简单的函子的演示</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Container</span> </span>{</span><br><span class="line"> <span class="comment">//使用静态函数封装构造函数，这样外面调用的时候就不需要使用new</span></span><br><span class="line"> <span class="keyword">static</span> <span class="keyword">of</span>(value) {</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> Container(value);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">constructor</span>(value) {</span><br><span class="line"> <span class="built_in">this</span>._value = value;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> map(fn) {</span><br><span class="line"> <span class="keyword">return</span> Container.of(fn(<span class="built_in">this</span>._value));</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">//test</span></span><br><span class="line"><span class="keyword">const</span> r = Container.of(<span class="number">5</span>) <span class="comment">//用5来初始化这个函子</span></span><br><span class="line"> .map(<span class="function">(<span class="params">x</span>) =></span> x + <span class="number">1</span>) <span class="comment">//值加一</span></span><br><span class="line"> .map(<span class="function">(<span class="params">x</span>) =></span> x * x); <span class="comment">//36</span></span><br></pre></td></tr></table></figure>
<h4 id="Maybe-函子"><a href="#Maybe-函子" class="headerlink" title="Maybe 函子"></a>Maybe 函子</h4><p>函子可以按照其功能或用法的特点归类成不同的函子</p>
<p>比如基本的函子里面是没有判断传入的 value 值是不是为空或者 null 的</p>
<p>所以可以在容器中加入判断 在 value 为空时不做任何处理 这样直接返回新函子</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// MayBe 函子</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MayBe</span> </span>{</span><br><span class="line"> <span class="keyword">static</span> <span class="keyword">of</span>(value) {</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> MayBe(value);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">constructor</span>(value) {</span><br><span class="line"> <span class="built_in">this</span>._value = value;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> map(fn) {</span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">this</span>.isNothing() ? MayBe.of(<span class="literal">null</span>) : MayBe.of(fn(<span class="built_in">this</span>._value));</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> isNothing() {</span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">this</span>._value === <span class="literal">null</span> || <span class="built_in">this</span>._value === <span class="literal">undefined</span>;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> r = MayBe.of(<span class="string">"Hello World"</span>).map(<span class="function">(<span class="params">x</span>) =></span> x.toUpperCase());</span><br><span class="line"><span class="built_in">console</span>.log(r); <span class="comment">//HELLO WORLD</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> r = MayBe.of(<span class="literal">null</span>).map(<span class="function">(<span class="params">x</span>) =></span> x.toUpperCase());</span><br><span class="line"><span class="built_in">console</span>.log(r); <span class="comment">//null</span></span><br></pre></td></tr></table></figure>
<h4 id="其他函子与常用库"><a href="#其他函子与常用库" class="headerlink" title="其他函子与常用库"></a>其他函子与常用库</h4><p>Either 函子， IO 函子， Task 函子等等其他函子</p>
<p>具体写可以使用<a href="https://folktale.origamitower.com/">FolkTale</a></p>
<h2 id="函数式编程的面试题"><a href="#函数式编程的面试题" class="headerlink" title="函数式编程的面试题"></a>函数式编程的面试题</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> arrat = [<span class="string">"23"</span>, <span class="string">"8"</span>, <span class="string">"10"</span>];</span><br><span class="line"><span class="comment">//用fp进行解答 会得到错误结果</span></span><br><span class="line"><span class="built_in">console</span>.log(array.map(<span class="built_in">parseInt</span>)); <span class="comment">//[23, NaN, 2]</span></span><br></pre></td></tr></table></figure>
<p>这里的错误是因为 map 函数本身的定义是这样的</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> new_array = arr.map(<span class="function"><span class="keyword">function</span> <span class="title">callback</span>(<span class="params">currentValue[, index[, array]]</span>) </span>{</span><br><span class="line"> <span class="comment">// Return element for new_array</span></span><br><span class="line">}[, thisArg])</span><br></pre></td></tr></table></figure>
<p>详细解释</p>
<blockquote>
<p>callback</p>
</blockquote>
<p>生成新数组元素的函数，使用三个参数：</p>
<ul>
<li><p><code>currentValue</code></p>
<p><code>callback</code> 数组中正在处理的当前元素</p>
</li>
<li><p><code>index</code>可选</p>
<p><code>callback</code> 数组中正在处理的当前元素的索引</p>
</li>
<li><p><code>array</code>可选</p>
<p><code>map</code> 方法调用的数组。</p>
</li>
</ul>
<p>而 parseInt 的定义是这样的</p>
<blockquote>
<p>parseInt(string, radix);</p>
</blockquote>
<ul>
<li><p><code>string</code></p>
<p>要被解析的值。如果参数不是一个字符串，则将其转换为字符串(使用 <code>ToString </code>抽象操作)。字符串开头的空白符将会被忽略</p>
</li>
<li><p><code>radix</code> 可选</p>
<p>从 <code>2</code> 到 <code>36</code>，表示字符串的基数。例如指定 16 表示被解析值是十六进制数。请注意，10 不是默认值</p>
</li>
</ul>
<p>也就是说当我们在调用 parseInt 的时候我们是没有指定 radix 的</p>
<p>而当 radix 取值为 0， undefined 或者 null 时 parseInt 不会以 10 进制来解析</p>
<p>所以实际上当执行上一步操作时 真正得到的结果是这样的</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">parseInt</span>(<span class="string">"23"</span>, <span class="number">0</span>); <span class="comment">// parseInt没有第三个参数，所以map传递进来第三个参数array可以被忽略</span></span><br><span class="line"><span class="built_in">parseInt</span>(<span class="string">"8"</span>, <span class="number">1</span>);</span><br><span class="line"><span class="built_in">parseInt</span>(<span class="string">"10"</span>, <span class="number">2</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//结果[23, NaN, 2]</span></span><br></pre></td></tr></table></figure>
<p>这个题可以用 lodash 中的 map 方法来做</p>
<p><strong>注意</strong> 这里如果只用 lodash 中的普通的 map 方法也是会出问题的</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> _ = <span class="built_in">require</span>(<span class="string">"lodash"</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// The `lodash/map` iteratee receives three arguments:</span></span><br><span class="line"><span class="comment">// (value, index|key, collection)</span></span><br><span class="line">_.map([<span class="string">"6"</span>, <span class="string">"8"</span>, <span class="string">"10"</span>], <span class="built_in">parseInt</span>);</span><br><span class="line"><span class="comment">// ➜ [6, NaN, 2]</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> fp = <span class="built_in">require</span>(<span class="string">"lodash/fp"</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// The `lodash/fp/map` iteratee is capped at one argument:</span></span><br><span class="line"><span class="comment">// (value)</span></span><br><span class="line">fp.map(<span class="built_in">parseInt</span>)([<span class="string">"6"</span>, <span class="string">"8"</span>, <span class="string">"10"</span>]);</span><br><span class="line"><span class="comment">// ➜ [6, 8, 10]</span></span><br></pre></td></tr></table></figure>
]]></content>
<categories>
<category>javascript</category>
</categories>
<tags>
<tag>javascript</tag>
</tags>
</entry>
</search>