-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathlocal-search.xml
More file actions
212 lines (101 loc) · 97.4 KB
/
Copy pathlocal-search.xml
File metadata and controls
212 lines (101 loc) · 97.4 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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>Hello World</title>
<link href="/2020/09/hello-world/"/>
<url>/2020/09/hello-world/</url>
<content type="html"><![CDATA[<p>Welcome to <a href="https://hexo.io/">Hexo</a>! This is your very first post. Check <a href="https://hexo.io/docs/">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href="https://hexo.io/docs/troubleshooting.html">troubleshooting</a> or you can ask me on <a href="https://github.com/hexojs/hexo/issues">GitHub</a>.</p><a id="more"></a><h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><pre><code class="hljs bash">$ hexo new <span class="hljs-string">"My New Post"</span></code></pre><p>More info: <a href="https://hexo.io/docs/writing.html">Writing</a></p><h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><pre><code class="hljs bash">$ hexo server</code></pre><p>More info: <a href="https://hexo.io/docs/server.html">Server</a></p><h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><pre><code class="hljs bash">$ hexo generate</code></pre><p>More info: <a href="https://hexo.io/docs/generating.html">Generating</a></p><h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><pre><code class="hljs bash">$ hexo deploy</code></pre><p>More info: <a href="https://hexo.io/docs/one-command-deployment.html">Deployment</a></p>]]></content>
</entry>
<entry>
<title>Hexo-Theme-Fluid 一些 Tag 插件语法</title>
<link href="/2020/07/others-fluid-guide/"/>
<url>/2020/07/others-fluid-guide/</url>
<content type="html"><![CDATA[<h1 id="Hexo-Theme-Fluid-一些-Tag-插件语法记录"><a href="#Hexo-Theme-Fluid-一些-Tag-插件语法记录" class="headerlink" title="Hexo-Theme-Fluid 一些 Tag 插件语法记录"></a>Hexo-Theme-Fluid 一些 Tag 插件语法记录</h1><p>本文主要讲述关于一些 Hexo Tag 插件的使用方法</p><a id="more"></a><h2 id="文章页"><a href="#文章页" class="headerlink" title="文章页"></a>文章页</h2><h3 id="文章在首页的略缩图"><a href="#文章在首页的略缩图" class="headerlink" title="文章在首页的略缩图"></a>文章在首页的略缩图</h3><p>在文章开头 Front-matter 中配置 index_img 属性。</p><pre><code class="hljs yml"><span class="hljs-meta">---</span><span class="hljs-attr">title:</span> <span class="hljs-string">文章标题</span><span class="hljs-attr">tags:</span> [<span class="hljs-string">Hexo</span>, <span class="hljs-string">Fluid</span>]<span class="hljs-attr">index_img:</span> <span class="hljs-string">/img/example.jpg</span><span class="hljs-attr">date:</span> <span class="hljs-number">2019-10-10 10:00:00</span><span class="hljs-meta">---</span><span class="hljs-string">以下是文章内容</span></code></pre><p>和 Banner 配置相同，<code>/img/example.jpg</code> 对应的是存放在 <code>/source/img/example.jpg</code> 目录下的图片（目录也可自定义，但必须在 source 目录下）。</p><p>也可以使用外链 Url 的绝对路径。</p><h3 id="文章页顶部大图"><a href="#文章页顶部大图" class="headerlink" title="文章页顶部大图"></a>文章页顶部大图</h3><p>默认显示主题配置中的 <code>post.banner_img</code>，如需要设置单个文章的 Banner，在 Front-matter 中指定 banner_img 属性。</p><p>本地图片存放位置同上。</p><pre><code class="hljs yml"><span class="hljs-meta">---</span><span class="hljs-attr">title:</span> <span class="hljs-string">文章标题</span><span class="hljs-attr">tags:</span> [<span class="hljs-string">Hexo</span>, <span class="hljs-string">Fluid</span>]<span class="hljs-attr">index_img:</span> <span class="hljs-string">/img/example.jpg</span><span class="hljs-attr">banner_img:</span> <span class="hljs-string">/img/post_banner.jpg</span><span class="hljs-attr">date:</span> <span class="hljs-number">2019-10-10 10:00:00</span><span class="hljs-meta">---</span><span class="hljs-string">以下是文章内容</span></code></pre><h3 id="文章内容图片"><a href="#文章内容图片" class="headerlink" title="文章内容图片"></a>文章内容图片</h3><p>本地图片存放位置同上。</p><p><img src="/.io//hello.png" alt="Hello"></p><pre><code class="hljs md"></code></pre><h2 id="脚注"><a href="#脚注" class="headerlink" title="脚注"></a>脚注</h2><p>脚注语法如下：</p><pre><code class="hljs md">这是一句话<sup id="fnref:1" class="footnote-ref"><a href="#fn:1" rel="footnote"><span class="hint--top hint--rounded" aria-label="这是对应的脚注">[1]</span></a></sup>[<span class="hljs-symbol">^1</span>]: <span class="hljs-link">这是对应的脚注</span></code></pre><p>这是一句话<sup id="fnref:1" class="footnote-ref"><a href="#fn:1" rel="footnote"><span class="hint--top hint--rounded" aria-label="这是对应的脚注">[1]</span></a></sup></p><p>更优雅的使用方式，是将脚注写在文末，比如：</p><pre><code class="hljs md">正文<span class="hljs-section">## 参考</span>[<span class="hljs-symbol">^1</span>]: <span class="hljs-link">参考资料 1</span>[<span class="hljs-symbol">^2</span>]: <span class="hljs-link">参考资料 2</span></code></pre><h2 id="便签"><a href="#便签" class="headerlink" title="便签"></a>便签</h2><p>在 markdown 中加入如下的代码来使用便签：</p><pre><code class="hljs ejs">{% note success %}文字 或者 `markdown` 均可{% endnote %}</code></pre><p>或者使用 HTML 形式：</p><pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"note note-primary"</span>></span>标签<span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre><p>可选便签：</p><div class="note note-primary"> <p>primary</p> </div><div class="note note-secondary"> <p>secondary</p> </div><div class="note note-success"> <p>success</p> </div><div class="note note-danger"> <p>danger</p> </div><div class="note note-warning"> <p>warning</p> </div><div class="note note-info"> <p>info</p> </div><div class="note note-light"> <p>light</p> </div><div class="note note-warning"> <p>使用时 <code><div class="note note-primary"> <p><code>和</code></p> </div></code> 需单独一行，否则会出现问题</p> </div><h2 id="行内标签"><a href="#行内标签" class="headerlink" title="行内标签"></a>行内标签</h2><p>在 markdown 中加入如下的代码来使用 Label：</p><pre><code class="hljs ejs">{% label primary @text %}</code></pre><p>或者使用 HTML 形式：</p><pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label label-primary"</span>></span>Label<span class="hljs-tag"></<span class="hljs-name">span</span>></span></code></pre><p>可选 Label：</p><span class="label label-primary">text</span><span class="label label-default">text</span><span class="label label-info">text</span><span class="label label-success">text</span><span class="label label-warning">text</span><span class="label label-danger">text</span><div class="note note-warning"> <p>若使用 <code><span class="label label-primary">text</span></code>，text 不能以 @ 开头</p> </div><h2 id="勾选框"><a href="#勾选框" class="headerlink" title="勾选框"></a>勾选框</h2><p>在 markdown 中加入如下的代码来使用 Checkbox：</p><pre><code class="hljs ejs">{% cb text, checked?, incline? %}</code></pre><ul><li>text：显示的文字</li><li>checked：默认是否已勾选，默认 false</li><li>incline: 是否内联（可以理解为后面的文字是否换行），默认 false</li></ul><p>示例：</p><div> <input type="checkbox" disabled>我是文字 </div> \<div> <input type="checkbox" disabled>普通示例 </div><div> <input type="checkbox" disabled checked="checked">我是文字 </div> \<div> <input type="checkbox" disabled checked="checked">默认选中 </div> <input type="checkbox" disabled>我是文字 \ <input type="checkbox" disabled>内联示例 后面文字不换行<input type="checkbox" disabled> \<input type="checkbox" disabled> 也可以只传入一个参数，文字写在后边（这样不支持外联）<h2 id="按钮"><a href="#按钮" class="headerlink" title="按钮"></a>按钮</h2><p>你可以在 markdown 中加入如下的代码来使用 Button：</p><pre><code class="hljs ejs">{% btn url, text, title %}</code></pre><p>或者使用 HTML 形式：</p><pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"url"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"title"</span>></span>text<span class="hljs-tag"></<span class="hljs-name">a</span>></span></code></pre><ul><li>url：跳转链接</li><li>text：显示的文字</li><li>title：鼠标悬停时显示的文字（可选）</li></ul><a class="btn" href="url" title="title" target="_blank">text</a><h2 id="组图"><a href="#组图" class="headerlink" title="组图"></a>组图</h2><p>如果想把多张图片按一定布局组合显示，你可以在 markdown 中按如下格式：</p><pre><code class="hljs ejs">{% gi total n1-n2-... %}     {% endgi %}</code></pre><ul><li>total：图片总数量，对应中间包含的图片 url 数量</li><li>n1-n2-…：每行的图片数量，可以省略，默认单行最多 3 张图，求和必须相等于 total，否则按默认样式</li></ul><p>如下图为 <code>{% gi 5 3-2 %}</code> 示例，代表共 5 张图，第一行 3 张图，第二行 2 张图。</p><pre><code class="hljs gradle">目前好像用不了 会报错unexpected end of <span class="hljs-keyword">file</span>{% gi <span class="hljs-number">5</span> <span class="hljs-number">3</span>-<span class="hljs-number">2</span> %} ![](<span class="hljs-regexp">/images/</span>banner/hello.png) ![](<span class="hljs-regexp">/images/</span>banner/hello.png) ![](<span class="hljs-regexp">/images/</span>banner/hello.png) ![](<span class="hljs-regexp">/images/</span>banner/hello.png) ![](<span class="hljs-regexp">/images/</span>banner/hello.png){% endgi %}</code></pre><section class="footnotes"><div class="footnote-list"><ol><li><span id="fn:1" class="footnote-text"><span>这是对应的脚注<a href="#fnref:1" rev="footnote" class="footnote-backref"> ↩</a></span></span></li></ol></div></section>]]></content>
<tags>
<tag>Hexo</tag>
</tags>
</entry>
<entry>
<title>slide 使用示例</title>
<link href="/2020/07/slide/"/>
<url>/2020/07/slide/</url>
<content type="html"><![CDATA[<h1 id="nodeppt-使用示例"><a href="#nodeppt-使用示例" class="headerlink" title="nodeppt 使用示例"></a>nodeppt 使用示例</h1><iframe src="/nodeppt/dist/nodeppt.html" width="100%" height="500" name="topFrame" scrolling="yes" noresize="noresize" frameborder="0" id="topFrame"></iframe><!-- <iframe src="http://uwrfy5.coding-pages.com/" width="100%" height="500" name="topFrame" scrolling="yes" noresize="noresize" frameborder="0" id="topFrame"></iframe> --><a id="more"></a><div class="note note-primary"> <p>生成的网页可以使用键盘操作(类似PPT操作)</p><ul><li>页面: ↑/↓/←/→ Space Home End（空格,home键,end键）</li><li>全屏: F</li><li>Overview: -/+</li><li>演讲者笔记: N</li><li>网格背景: Enter</li><li>演讲者模式，在页面 url 后面增加?mode=speaker 既可以打开演讲者模式，双屏同步</li></ul> </div>]]></content>
</entry>
<entry>
<title>解决 Git 中 fatal:refusing to merge unrelated histories</title>
<link href="/2019/09/troubleshooting-fatal-refusing-to-merge-unrelated-histories/"/>
<url>/2019/09/troubleshooting-fatal-refusing-to-merge-unrelated-histories/</url>
<content type="html"><![CDATA[<h2 id="问题描述"><a href="#问题描述" class="headerlink" title="问题描述"></a>问题描述</h2><p>我们在没有 clone 的情况下，在本地 Init 了一个新的 Git Folder，在进行 push 操作时出现 <code>fatal:refusing to merge unrelated histories</code> 错误。</p><a id="more"></a><h2 id="解决方法"><a href="#解决方法" class="headerlink" title="解决方法"></a>解决方法</h2><p>这个问题就是因为我们想要将两个不相关的 git history 合并到一起，git 默认是不允许的。<br>我们可以在命令后添加： <code>--allow-unrelated-histories</code> 参数，使 git 不进行该检测。</p><p>例如： master/live 两个 branch 是不想关联的 branch， 我们可以使用以下命令将 master merge 到 live 中：</p><pre><code class="hljs git">// switched to branch 'live'$ git checkout live// merge 'master' to 'live'$ git merge master --allow-unrelated-histories</code></pre>]]></content>
<categories>
<category>TroubleShooting</category>
</categories>
<tags>
<tag>Git</tag>
</tags>
</entry>
<entry>
<title>SmartGit 轻度破解，仅限个人使用</title>
<link href="/2019/09/troubleshooting-register-30-days-expire/"/>
<url>/2019/09/troubleshooting-register-30-days-expire/</url>
<content type="html"><![CDATA[<p>SmartGit 个人使用时，可以免费试用 30 天，通过以下方法可以清楚之前 30 天的使用记录，从而达到长期使用的效果。^_^</p><a id="more"></a><p>smartGit 用于记录使用日期的文件是： <code>%APPDATA%\syntevo\SmartGit\<version_folder>\settings.xml</code> 所以我们只要找到它将他删除即可。</p><p>使用 运行（Windows + R)，输入 <code>%APPDATA%\syntevo\SmartGit\</code> 定位到 SmartGit 目录, 选择相应的版本号（文件夹），在其中找到 settings.xml 将其删除即可。</p>]]></content>
<categories>
<category>TroubleShooting</category>
</categories>
<tags>
<tag>Git</tag>
<tag>SmartGit</tag>
</tags>
</entry>
<entry>
<title>Node.js 学习笔记</title>
<link href="/2019/09/study-notes-node-js/"/>
<url>/2019/09/study-notes-node-js/</url>
<content type="html"><![CDATA[<h2 id="模块化"><a href="#模块化" class="headerlink" title="模块化"></a>模块化</h2><p>Node 利用 JavaScript 的函数式编程特性，实现模块的隔离。</p><pre><code class="hljs javascript">(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ ... })();</code></pre><p>使用 <code>module.exports = <functionName></code> 将函数暴露出去， 调用处用 <code>require('<module_name>')</code> 拿到暴露的函数。</p><a id="more"></a><h2 id="基本模块"><a href="#基本模块" class="headerlink" title="基本模块"></a>基本模块</h2><h3 id="fs"><a href="#fs" class="headerlink" title="fs"></a>fs</h3><p>文件系统模块 <code>fs</code>: 分为<strong>异步方法</strong>和*<strong>同步方法</strong>。</p><ul><li>异步读文件: <code>fs.readFile('<FileName>', 'utf-8', function(err, data){ ... });</code></li><li>同步读文件: <code>var data = fs.readFileSync('<FileName>', 'utf-8');</code><br> 错误通过 <code>try {...} catch() {...}</code> 捕获。</li><li>异步写文件: <code>fs.writeFile('<FileName>', data, function(err) { ... });</code><br> 传入的 data 是 String, 默认按 UTF-8 写入，传入的 data 是 Buffer, 则写入二进制文件。</li><li>同步写文件: <code>fs.writeFileSync('<FileName>', data);</code></li><li>异步获取文件属性: <code>fs.stat('<FileName>', function(err, stat) { ... });</code></li><li>同步获取文件属性: <code>var stat = fs.statSync('<FileName>');</code></li></ul><h3 id="stream"><a href="#stream" class="headerlink" title="stream"></a>stream</h3><p>数据流读取/写入 <code>fs.createReadStream</code>, <code>fs.createWriteStream</code></p><p>管道连接 <code>readable.pipe(writeable, {end:true/false});</code></p><h3 id="http"><a href="#http" class="headerlink" title="http"></a>http</h3><ul><li><code>http</code> 模块 - 提供 <code>request</code> 和 <code>response</code> 对象<br> <code>http.createServer(function(request, response) {...});</code> 创建 Web Server</li><li><code>url</code> 模块 - web 路径</li><li><code>path</code> 模块 - 本地文件目录</li></ul><h3 id="crypto"><a href="#crypto" class="headerlink" title="crypto"></a>crypto</h3><p><code>crypto</code> 提供 加密和哈希算法。</p><ul><li><code>crypto.createHash('md5');</code> - 哈希算法 MD5及SHA1</li><li><code>crypto.createHmac('sha256', 'secret-key');</code> - 哈希算法 Hmac 需要额外的一个密钥</li><li><code>crypto.createCipher('aes192', 'secret-key');</code> - AES 对称加密算法, 加解密用同一个密钥</li><li><code>crypto.createDiffieHellman(prime, generator);</code> - DH 算法，密钥交换协议，双方在不泄露密钥的情况下生成一个密钥</li><li><code>crypto.create</code> - 非对称算法，RSA 一个公钥和一个私钥构成密钥对<br> RSA 不适合加密大数据，对于大数据加密，先生成一个 AES 密钥加密大数据，然后用 RSA 加密 AES 密钥，实际使用时，传输 AES 和 RSA 2 份密钥。</li></ul><h2 id="Web-开发"><a href="#Web-开发" class="headerlink" title="Web 开发"></a>Web 开发</h2><h3 id="koa"><a href="#koa" class="headerlink" title="koa"></a>koa</h3><p>未完，待续 …</p><h2 id="示例代码"><a href="#示例代码" class="headerlink" title="示例代码"></a>示例代码</h2><p>相关代码请参考：<a href="https://github.com/v-tawe/v-tawe.github.io/tree/master/sample-code/study-notes/node-js">Node.js 示例代码</a>。</p>]]></content>
<categories>
<category>Study Notes</category>
<category>Node.js</category>
</categories>
<tags>
<tag>Node.js</tag>
</tags>
</entry>
<entry>
<title>SQL 学习笔记</title>
<link href="/2019/09/study-notes-sql/"/>
<url>/2019/09/study-notes-sql/</url>
<content type="html">< |  |  |  | --></li></ul></li></ol><h3 id="SQL-修改"><a href="#SQL-修改" class="headerlink" title="SQL 修改"></a>SQL 修改</h3><p>关系数据库的基本操作就是增删改查，即 <code>CRUD：Create、Retrieve、Update、Delete</code>。</p><p>对于增、删、改，对应的SQL语句分别是：</p><ul><li><code>INSERT</code>：插入新记录 - <code>INSERT INTO <表名> (字段1, 字段2, ...) VALUES (值1, 值2, ...);</code></li><li><code>UPDATE</code>：更新已有记录 - <code>UPDATE <表名> SET 字段1=值1, 字段2=值2, ... WHERE ...;</code></li><li><code>DELETE</code>：删除已有记录 - <code>DELETE FROM <表名> WHERE ...;</code></li></ul><h2 id="常用-SQL-语句"><a href="#常用-SQL-语句" class="headerlink" title="常用 SQL 语句"></a>常用 SQL 语句</h2><h3 id="数据库-表操作-SQL-语句"><a href="#数据库-表操作-SQL-语句" class="headerlink" title="数据库 + 表操作 SQL 语句"></a>数据库 + 表操作 SQL 语句</h3><table><thead><tr><th>SQL 语句</th><th>含义</th></tr></thead><tbody><tr><td>SHOW DATABASES</td><td>列出所有数据库</td></tr><tr><td>CREATE DATABASE <database_name></database_name></td><td>创建数据库</td></tr><tr><td>DROP DATABASE <database_name></database_name></td><td>删除数据库</td></tr><tr><td>USE <database_name></database_name></td><td>切换当前数据库</td></tr><tr><td>SHOW TABLES</td><td>列出所有表</td></tr><tr><td>DESC <table_name></table_name></td><td>查看表结构</td></tr><tr><td>SHOW CREATE TABLE <table_name></table_name></td><td>查看创建表的 SQL 语句</td></tr><tr><td>DROP TABLE <table_name></table_name></td><td>删除表</td></tr><tr><td>ALTER TABLE <table_name> ADD COLUMN <column_name> VARCHAR(10) NOT NULL</column_name></table_name></td><td>新增列</td></tr><tr><td>ALTER TABLE <table_name> CHANGE COLUMN <column_name> VARCHAR(20) NOT NULL</column_name></table_name></td><td>修改列属性</td></tr><tr><td>ALTER TABLE <table_name> DROP COLUMN <column_name></column_name></table_name></td><td>删除列</td></tr><tr><td>EXIT</td><td>退出 MYSQL 连接</td></tr></tbody></table><h3 id="实用-SQL-语句"><a href="#实用-SQL-语句" class="headerlink" title="实用 SQL 语句"></a>实用 SQL 语句</h3><ul><li>插入或替换<br> <code>REPLACE INTO <students> (<id>, <class_id>, <...>) VALUES(<1>, <1>, <...>)</code><br> 若 <code>id=1</code> 记录不存在，插入新纪录； 若 <code>id=1</code> 记录存在，当前 <code>id=1</code> 记录被删除，然后再插入新纪录。</li><li>插入或更新<br> <code>INSERT INTO <students> (<id>, <class_id>, <name>, <...>) VALUES(<1>, <1>, <'xiao_min'>, <...>) ON DUPLICATE KEY UPDATE <name>=<'xiao_min'>, <...>;</code><br> 若 <code>id=1</code> 记录不存在，插入新纪录； 若 <code>id=1</code> 记录存在，当前 <code>id=1</code> 记录被更新，更新字段有 <code>UPDATE</code> 指定。</li><li>插入或忽略<br> <code>INSERT IGNORE INTO <students> (<id>, <class_id>, <...>) VALUES(<1>, <1>, <...>);</code><br> 若 <code>id=1</code>记录不存在，<code>INSERT</code> 语句将插入新记录，否则，不执行任何操作。</li><li>快照<br> <code>CREATE TABLE <students_of_class1> SELECT * FROM <students> WHERE <class_id>=<1>;</code><br> 通过查询集合创建新表</li></ul><h2 id="事务操作"><a href="#事务操作" class="headerlink" title="事务操作"></a>事务操作</h2><p>多条语句作为一个整体进行操作的功能，被称为数据库事务。数据库事务可以确保该事务范围内的所有操作都可以全部成功或者全部失败。如果事务失败，那么效果就和没有执行这些 SQL 一样，不会对数据库数据有任何改动。</p><ul><li><code>BEGIN</code> 开启一个事务</li><li><code>COMMIT</code> 提交一个事务</li><li><code>ROLLBACK</code> 回滚事务</li></ul><h3 id="隔离级别"><a href="#隔离级别" class="headerlink" title="隔离级别"></a>隔离级别</h3><ul><li><strong>脏读 DIRTY READ</strong>： 查询同一记录，2 次结果<strong>不一样</strong>，读到还未 commit 的数据结果；</li><li><strong>不可重复读 NON REPEATABLE READ</strong>： 查询同一记录，2 次结果<strong>不一样</strong>，读到的结果在另一事务 commit/rollback 之间；</li><li><strong>幻读 PHANTOM READ</strong>：查询同一记录，2 次结果是<strong>一样</strong>，但是会出现 事务 A 新增的列，事务 B 读不到(<code>SELECT</code>)，但是却可以更新(<code>UPDATE</code>)，更新后才可以读到。</li></ul><table><thead><tr><th align="center">ISOLATION LEVEL</th><th align="center">DIRTY READ</th><th align="center">NON REPEATABLE READ</th><th align="center">PHANTOM READ</th></tr></thead><tbody><tr><td align="center">READ UNCOMMITTED</td><td align="center">YES</td><td align="center">YES</td><td align="center">YES</td></tr><tr><td align="center">READ COMMITTED</td><td align="center">-</td><td align="center">YES</td><td align="center">YES</td></tr><tr><td align="center">Repeatable Read</td><td align="center">-</td><td align="center">-</td><td align="center">YES</td></tr><tr><td align="center">Serializable</td><td align="center">-</td><td align="center">-</td><td align="center">-</td></tr></tbody></table><p><strong>Serializable</strong> 虽然隔离级别最高，但是效率会大大下降。</p>]]></content>
<categories>
<category>Study Notes</category>
<category>SQL</category>
</categories>
<tags>
<tag>SQL</tag>
</tags>
</entry>
<entry>
<title>JavaScript 学习笔记</title>
<link href="/2019/09/study-notes-javascript/"/>
<url>/2019/09/study-notes-javascript/</url>
<content type="html"><![CDATA[<h2 id="JavaScript-布局"><a href="#JavaScript-布局" class="headerlink" title="JavaScript 布局"></a>JavaScript 布局</h2><ul><li><p>通常 JavaScript 代码可以放到 <code><head> </head></code> 中；</p> <pre><code class="hljs javascript"><html> <head> <script type=<span class="hljs-string">"text/javascript"</span>> alert(<span class="hljs-string">'Hello World'</span>); </script> </head> <body> ... </body></html></code></pre><blockquote><p><code>type</code> 默认属性即为：<code>JavaScript</code>, 所以可以不必显示指定。</p></blockquote></li><li><p>将 JavaScript 代码放到单独的 <code>.js</code> 文件中；</p> <pre><code class="hljs javascript"><html> <head> <script src=<span class="hljs-string">"/static/js/abc.js"</span>></script> </head> <body> ... </body></html></code></pre><a id="more"></a><h2 id="JavaScript-基础"><a href="#JavaScript-基础" class="headerlink" title="JavaScript 基础"></a>JavaScript 基础</h2></li></ul><h3 id="比较运算符"><a href="#比较运算符" class="headerlink" title="比较运算符"></a>比较运算符</h3><p><code>==</code> ： 自动转换数据类型在比较；<br><code>===</code> ： 如果数据类型不一致，返回 <code>false</code>；</p><h3 id="字符串"><a href="#字符串" class="headerlink" title="字符串"></a>字符串</h3><p>使用 `xxxxxxx` 标识多行字符串：</p><pre><code class="hljs javascript"><span class="hljs-built_in">console</span>.log(<span class="hljs-string">`Hello</span><span class="hljs-string">World</span><span class="hljs-string">!`</span>);</code></pre><p>可以用 <code>{$variable}</code> 替换字符串中的变量：</p><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> name = <span class="hljs-string">'Bob'</span>;<span class="hljs-keyword">var</span> age = <span class="hljs-number">20</span>;<span class="hljs-built_in">console</span>.log(<span class="hljs-string">`Hello, <span class="hljs-subst">${name}</span>, you are <span class="hljs-subst">${age}</span> years old!`</span>);</code></pre><p>对字符串的操作本身不会改变自身，而是返回一个新的字符串；</p><p><code>str.toUpperCase()</code> - 转变为大写<br><code>str.toLowerCase()</code> - 转变为小写<br><code>str.indexOf('string')</code> - 获取指定字符串出现的位置<br><code>str.substring(startIndex, length)</code> - 获取截取的字符串</p><h3 id="数组"><a href="#数组" class="headerlink" title="数组"></a>数组</h3><p>通过索引进行赋值可以直接修改这个 Array：</p><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr = [<span class="hljs-string">'A'</span>, <span class="hljs-string">'B'</span>, <span class="hljs-string">'C'</span>];arr[<span class="hljs-number">1</span>] = <span class="hljs-number">100</span>;arr; <span class="hljs-comment">//arr now is ['A', 100, 'C'];</span></code></pre><p><code>indexOf(value)</code> - 搜索指定值的索引；<br><code>slice(startIndex, length)</code> - 类似于 String 的 <code>substring()</code>；<br><code>push('value1', 'value2')</code> - 末尾添加值；<br><code>pop()</code> - 删除最有一个值；<br><code>sort()</code> - 排序；<br><code>reverse()</code> - 反转数组；<br><code>splice(startIndex, deleteNum, replaceValue1, replaceValue2)</code> - 从指定的索引开始删除若干值，然后再从该位置添加若干值；<br><code>concat(newArray)</code> - 连接两个 Array;<br><code>join(connectValue)</code> - 每个值用指定的字符串连接，返回一个连接后的字符串</p><h3 id="对象"><a href="#对象" class="headerlink" title="对象"></a>对象</h3><p>JavaScript 对象是动态类型，可以添加或删除属性;</p><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> person = { name: <span class="hljs-string">'David'</span>, age: <span class="hljs-string">'20'</span>,};person.gender = <span class="hljs-string">'male'</span>; <span class="hljs-comment">// 新增 gender 属性</span><span class="hljs-keyword">delete</span> person.age; <span class="hljs-comment">// 删除 age 属性</span></code></pre><p>使用 <code>in</code>/<code>hasOwnProperty()</code> 检测是否拥有某属性：</p><p><code>in</code> - 包括继承的属性, 例如： <code>toString</code> 是 <code>object</code> 对象的属性，结果也是 <code>true</code>;<br><code>hasOwnProperty()</code> - 必须是自身拥有的属性</p><pre><code class="hljs javascript"><span class="hljs-string">'age'</span> <span class="hljs-keyword">in</span> person; <span class="hljs-comment">//true</span><span class="hljs-string">'birth'</span> <span class="hljs-keyword">in</span> person; <span class="hljs-comment">//false</span>person.hasOwnProperty(<span class="hljs-string">'age'</span>); <span class="hljs-comment">//true</span>person.hasOwnProperty(<span class="hljs-string">'toString'</span>); <span class="hljs-comment">//true</span></code></pre><h3 id="循环"><a href="#循环" class="headerlink" title="循环"></a>循环</h3><ul><li><code>for(i=index; i<length; i++)</code>;</li><li><code>for (var key in object)</code>;</li><li><code>while(condition)</code>;</li><li><code>do {...} while(condition)</code>;</li></ul><h3 id="Map-amp-Set"><a href="#Map-amp-Set" class="headerlink" title="Map & Set"></a>Map & Set</h3><p><code>Map</code> - 键值对集合；</p><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> m = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Map</span>([[<span class="hljs-string">'David'</span>, <span class="hljs-number">100</span>], [<span class="hljs-string">'Bob'</span>, <span class="hljs-number">10</span>]]);m.get(<span class="hljs-string">'David'</span>); <span class="hljs-comment">//100</span>m.set(<span class="hljs-string">'Adam'</span>, <span class="hljs-number">99</span>); <span class="hljs-comment">//添加新的 key-value</span>m.has(<span class="hljs-string">'Bob'</span>); <span class="hljs-comment">//true</span>m.delete(<span class="hljs-string">'Adam'</span>) <span class="hljs-comment">//删除 key-'Adam'</span></code></pre><p><code>Set</code> - Key 的集合，Key 不能重复，没有索引；</p><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> s = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Set</span>([<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">3</span>, <span class="hljs-string">'3'</span>]);s.add(<span class="hljs-number">4</span>); <span class="hljs-comment">// Set {1, 2, 3, '3', 4}</span>s.delete(<span class="hljs-number">3</span>); <span class="hljs-comment">// Set {1, 2, '3', 4}</span></code></pre><h3 id="iterable"><a href="#iterable" class="headerlink" title="iterable"></a>iterable</h3><p>新的 <code>iterable</code> 类型，<code>Array</code>、<code>Map</code> 和 <code>Set</code> 都属于 <code>iterable</code> 类型。</p><p><code>for ... of</code> 循环 解决 <code>for ... in</code> 循环的历史遗留问题:</p><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a = [<span class="hljs-string">'A'</span>, <span class="hljs-string">'B'</span>, <span class="hljs-string">'C'</span>];a.name = <span class="hljs-string">'David'</span>;<span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i <span class="hljs-keyword">in</span> a) { <span class="hljs-built_in">console</span>.log(i); <span class="hljs-comment">// '0', '1', '2', 'name'</span>}<span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i <span class="hljs-keyword">of</span> a) { <span class="hljs-built_in">console</span>.log(i); <span class="hljs-comment">// 'A', 'B', 'C'</span>}a.forEach(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">element, index, array</span>) </span>{ <span class="hljs-comment">// element: 指向当前元素的值；</span> <span class="hljs-comment">// index：指向当前索引；</span> <span class="hljs-comment">// array：指向 Array 对象本身</span>})</code></pre><h2 id="函数"><a href="#函数" class="headerlink" title="函数"></a>函数</h2><p>2 种定义方法：</p><ul><li><code>function abs(x) { ... }</code></li><li><code>var abs = function(x) { ... };</code></li></ul><p>参数：</p><ul><li><code>arguments</code> - 用于函数内部，指向传入的所有参数</li><li><code>...rest</code> - 指向传入的未显示指定的参数 <code>function foo(a, b, ...rest){ ... }</code></li></ul><h3 id="作用域"><a href="#作用域" class="headerlink" title="作用域"></a>作用域</h3><p>JavaScript 默认有一个全局对象 <code>window</code>，任何全局变量（函数也视为变量）都会绑定到 <code>window</code> 上。</p><p><code>var</code> - 定义<strong>局部</strong>作用域变量<br><code>let</code> - 定于<strong>块</strong>级作用域变量</p><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">foo</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i=<span class="hljs-number">0</span>; i<<span class="hljs-number">100</span>; i++) { <span class="hljs-comment">//</span> } i += <span class="hljs-number">100</span>; <span class="hljs-comment">// SyntaxError;</span> <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i=<span class="hljs-number">0</span>; i<<span class="hljs-number">100</span>; i++) { <span class="hljs-comment">//</span> } i += <span class="hljs-number">100</span>; <span class="hljs-comment">// 仍然可以引用变量i</span>}</code></pre><p><code>const</code> - 常量</p><h3 id="解构赋值"><a href="#解构赋值" class="headerlink" title="解构赋值"></a>解构赋值</h3><p>可以同时赋值多个变量，包括嵌套的数组：</p><p><code>let [x, [y, z]] = ['hello', ['hi', 'welcome']];</code></p><p>对象赋值：</p><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> person = { name: <span class="hljs-string">'David'</span>, age: <span class="hljs-number">20</span>, gender: <span class="hljs-string">'male'</span>, passport: <span class="hljs-string">'G-12345678'</span>, address: { city: <span class="hljs-string">'Beijing'</span>, zipcode: <span class="hljs-string">'100001'</span> }};<span class="hljs-keyword">var</span> {name, <span class="hljs-attr">address</span>: {city, zip}} = person;name; <span class="hljs-comment">// 'David'</span>city; <span class="hljs-comment">// 'Beijing'</span>zip; <span class="hljs-comment">// undefined, 因为属性名是zipcode而不是zip</span><span class="hljs-comment">// 注意: address不是变量，而是为了让city和zip获得嵌套的address对象的属性:</span>address; <span class="hljs-comment">// Uncaught ReferenceError: address is not defined</span></code></pre><h2 id="高阶函数"><a href="#高阶函数" class="headerlink" title="高阶函数"></a>高阶函数</h2><p>可以将函数作为参数传入：</p><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">add</span>(<span class="hljs-params">x, y, abs</span>) </span>{ <span class="hljs-keyword">return</span> abs(x) + abs(y);}</code></pre><h3 id="map-方法"><a href="#map-方法" class="headerlink" title="map 方法"></a>map 方法</h3><p><code>arr.map(function (x) { return abs(x); } )</code> - 依次对数组的每个元素调用指定的函数：</p><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">pow</span>(<span class="hljs-params">x</span>) </span>{ <span class="hljs-keyword">return</span> x * x;}<span class="hljs-keyword">var</span> arr = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>, <span class="hljs-number">5</span>];arr.map(pow); <span class="hljs-comment">// [2, 4, 9, 16, 25]</span>arr.map(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">x</span>) </span>{ <span class="hljs-keyword">return</span> x * x; }); <span class="hljs-comment">// [2, 4, 9, 16, 25]</span>arr.map(<span class="hljs-function"><span class="hljs-params">x</span> =></span> x * x); <span class="hljs-comment">// [2, 4, 9, 16, 25]</span></code></pre><h3 id="reduce-方法"><a href="#reduce-方法" class="headerlink" title="reduce 方法"></a>reduce 方法</h3><p><code>arr.reduce(function (x, y) { return add(x, y); })</code> - 分别对数组的进行函数调用，依次往后累计：</p><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>, <span class="hljs-number">5</span>];arr.reduce( <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">x, y</span>) </span>{ <span class="hljs-keyword">return</span> x + y; }); <span class="hljs-comment">// 15</span>arr.reduce( <span class="hljs-function">(<span class="hljs-params">x,y</span>) =></span> x * y; ) <span class="hljs-comment">// 15</span></code></pre><h3 id="filter-方法"><a href="#filter-方法" class="headerlink" title="filter 方法"></a>filter 方法</h3><p><code>arr.filter(function (x) { return x>99 })</code> - 通过返回值决定是否保留该元素</p><h3 id="sort-方法"><a href="#sort-方法" class="headerlink" title="sort 方法"></a>sort 方法</h3><p><code>arr.sort()</code> - 默认排序按字符串 ASCII 码进行排序（eg. 10 < 2）</p><p><code>arr.sort(function(x,y) { if (x < y) return -1; else if (x > y) return 1; else return 0;})</code> - 修改排序规则则可以按照数字大小进行排序</p><p><code>sort</code> 方法直接对当前 Array 进行修改。</p><h3 id="every-方法"><a href="#every-方法" class="headerlink" title="every 方法"></a>every 方法</h3><p>判断 Array 中的每个元素是否满足条件</p><p><code>let r = arr.every(funciton (s) { return s.length > 0;});</code> - 判断 Array 中是否存在空元素</p><h3 id="find-findIndex-方法"><a href="#find-findIndex-方法" class="headerlink" title="find\findIndex 方法"></a>find\findIndex 方法</h3><p>查找 Array 中满足条件的第一个元素\索引</p><p><code>let s = arr.find(function (s) { return s.toLowerCase() === s });</code> - 返回第一个小写的元素，如果未找到返回 <code>undefinded</code></p><h3 id="foreach-方法"><a href="#foreach-方法" class="headerlink" title="foreach 方法"></a>foreach 方法</h3><p>用于遍历 Array, 没有返回值，也不会改变原 Array, 常用于遍历</p><p><code>arr.forEach(console.log)</code></p><h2 id="闭包"><a href="#闭包" class="headerlink" title="闭包"></a>闭包</h2><p>将函数作为结果返回。实现一个计数器的示例：</p><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">counter</span> (<span class="hljs-params">initial</span>) </span>{ <span class="hljs-keyword">var</span> x = initial || <span class="hljs-number">0</span>; <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) <span class="hljs-title">return</span> <span class="hljs-title">x</span> ++;</span><span class="hljs-function">}</span><span class="hljs-function"></span><span class="hljs-function"><span class="hljs-title">var</span> <span class="hljs-title">c</span> = <span class="hljs-title">conter</span>(<span class="hljs-params"><span class="hljs-number">100</span></span>);</span><span class="hljs-function"><span class="hljs-title">c</span>(<span class="hljs-params"></span>); //100</span><span class="hljs-function"><span class="hljs-title">c</span>(<span class="hljs-params"></span>); //101</span></code></pre><h2 id="箭头函数"><a href="#箭头函数" class="headerlink" title="箭头函数"></a>箭头函数</h2><pre><code class="hljs javascript">(x, y) => x * y;</code></pre><p>==> 等价于 ==></p><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">x, y</span>) </span>{ <span class="hljs-keyword">return</span> x * y;}</code></pre><h2 id="generator-生成器"><a href="#generator-生成器" class="headerlink" title="generator 生成器"></a>generator 生成器</h2><p>类似于在一个函数内可以返回多个结果</p><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span>* <span class="hljs-title">name</span>(<span class="hljs-params">max</span>) </span>{ <span class="hljs-keyword">var</span> index = <span class="hljs-number">0</span>; <span class="hljs-keyword">while</span>(index < max) { <span class="hljs-keyword">yield</span> index++; } <span class="hljs-keyword">return</span> index;}<span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> x <span class="hljs-keyword">of</span> name()) { <span class="hljs-built_in">console</span>.log(x);}</code></pre><h2 id="标准对象"><a href="#标准对象" class="headerlink" title="标准对象"></a>标准对象</h2><p><code>number</code>, <code>string</code>, <code>boolean</code>, <code>function</code>, <code>underfined</code>, <code>object</code> - (<code>Array</code>, <code>null</code> 均属于 <code>object</code>）</p><h3 id="Date"><a href="#Date" class="headerlink" title="Date"></a>Date</h3><p><code>var date = new Date(2019, 6, 12);</code> - 2019/07/12</p><p>JavaScript 的 Date 对象月份值从 0 开始，牢记 0=1 月，1=2 月，2=3 月，……，11=12 月。</p><h3 id="RegExp"><a href="#RegExp" class="headerlink" title="RegExp"></a>RegExp</h3><h4 id="正则表达式基础"><a href="#正则表达式基础" class="headerlink" title="正则表达式基础"></a>正则表达式基础</h4><p><code>\d</code> - 数字<br><code>\w</code> - 字母或数字<br><code>\s</code> - 空格</p><p><code>.</code> - 任意字符<br><code>*</code> - 任意个字符(包括 0 个)<br><code>+</code> - 至少一个字符<br><code>?</code> - 0 或 1 个字符<br><code>{n}</code> - n 个字符<br><code>{n, m}</code> - n~m 个字符</p><p><code>[]</code> - 表示范围<br><code>[0-9a-zA-Z]</code> - 数字及字母<br><code>A|B</code> - A 或 B<br><code>^</code> - 以…开头<br><code>$</code> - 以…结尾</p><p><code>()</code> - 定义组</p><h4 id="RegExp-1"><a href="#RegExp-1" class="headerlink" title="RegExp"></a>RegExp</h4><p><code>test()</code> 方法测试字符串是否符合正则表达式</p><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> re = <span class="hljs-keyword">new</span> <span class="hljs-built_in">RegExp</span>(<span class="hljs-string">'^\d{3}\-\d{3-8}$'</span>);<span class="hljs-keyword">var</span> re = <span class="hljs-regexp">/^\d{3}\-\d{3-8}$/</span>;re.test(<span class="hljs-string">'010-12345'</span>); <span class="hljs-comment">// true</span></code></pre><p><code>exec()</code> 方法提取正则表达式中定义的组, 失败返回 null</p><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> re = <span class="hljs-regexp">/^(\d{3})-(\d{3,8})$/</span>;re.exec(<span class="hljs-string">'010-12345'</span>); <span class="hljs-comment">// ['010-12345', '010', '12345']</span>re.exec(<span class="hljs-string">'010 12345'</span>); <span class="hljs-comment">// null</span></code></pre><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> re = <span class="hljs-regexp">/^[0-9a-zA-Z\.]+@.+\.\w+$/</span>; <span class="hljs-comment">// 匹配邮箱 v-tawe@microsoft.com</span><span class="hljs-keyword">var</span> re = <span class="hljs-regexp">/^\<(.+)\>\s+([0-9a-zA-Z\.]+@.+\.\w+)$/</span>; <span class="hljs-comment">// 匹配带名字的邮箱 <David Tang> v-tawe@microsoft.com</span></code></pre><h4 id="JSON"><a href="#JSON" class="headerlink" title="JSON"></a>JSON</h4><p>序列化 - <code>JSON.parse('json')</code><br>反序列化 - <code>JSON.stringify(obj)</code></p><h2 id="面向对象"><a href="#面向对象" class="headerlink" title="面向对象"></a>面向对象</h2><p>两种创建对象的方式：</p><p>通过数据类型对象创建：</p><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> Student = { name: <span class="hljs-string">'Robot'</span>; height: <span class="hljs-number">1.2</span>; run: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">return</span> <span class="hljs-built_in">this</span>.name + <span class="hljs-string">'is running'</span>; }}<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">createStudent</span>(<span class="hljs-params">name</span>) </span>{ <span class="hljs-keyword">var</span> s = <span class="hljs-built_in">Object</span>.create(Student); s.name = name; <span class="hljs-keyword">return</span> s;}<span class="hljs-keyword">var</span> xiaoming = createStudent(<span class="hljs-string">'xiaoming'</span>);xiaoming.run(); <span class="hljs-comment">//xiaoming is runing</span></code></pre><p>通过构造函数实现：</p><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Student</span>(<span class="hljs-params">props</span>) </span>{ <span class="hljs-built_in">this</span>.name = props.name || <span class="hljs-string">'Robot'</span>; <span class="hljs-built_in">this</span>.height = props.height || <span class="hljs-string">'1.2'</span>;}Student.prototype.run = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">return</span> <span class="hljs-built_in">this</span>.name + <span class="hljs-string">'is running'</span>;}<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">createStudent</span>(<span class="hljs-params">props</span>) </span>{ <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Student(props || {})}</code></pre><p>通过 class 实现：</p><pre><code class="hljs javascript"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Student</span> </span>{ <span class="hljs-keyword">constructor</span>(name) { <span class="hljs-built_in">this</span>.name = name; } run() { <span class="hljs-keyword">return</span> <span class="hljs-built_in">this</span>.name + <span class="hljs-string">'is running'</span>; }}</code></pre><h3 id="原型继承"><a href="#原型继承" class="headerlink" title="原型继承"></a>原型继承</h3><p>定义新的构造函数，并在内部调用继承的构造函数的 <code>call()</code> 方法绑定<code>this</code>;</p><!----><img src="/.io//09/study-notes-javascript/inherits.png" class title="inherits"><p>只有函数才有 <code>prototype</code> 属性, <code>_proto_</code> 是所有对象都有的（包括函数）, 即对象原型 <code>xxx.constructor</code>。</p><p>通过构造函数实现继承：</p><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">inherits</span>(<span class="hljs-params">Child, Father</span>) </span>{ <span class="hljs-keyword">var</span> F = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{}; F.prototype = Father.prototype; Child.prototype = <span class="hljs-keyword">new</span> F(); Child.prototype.constructor = Child;}<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Student</span>(<span class="hljs-params">props</span>) </span>{ <span class="hljs-built_in">this</span>.name = props.name || <span class="hljs-string">'unnamed'</span>; <span class="hljs-built_in">this</span>.height = props.height || <span class="hljs-number">1.2</span>;}Student.prototype.run = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">return</span> <span class="hljs-built_in">this</span>.name + <span class="hljs-string">'is running'</span>;}<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">PrimaryStudent</span>(<span class="hljs-params">props</span>) </span>{ Student.call(<span class="hljs-built_in">this</span>, props); <span class="hljs-built_in">this</span>.grade = props.grade || <span class="hljs-number">1</span>;}inherits(PrimaryStudent, Student);PrimaryStudent.prototype.getGrade = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">return</span> <span class="hljs-built_in">this</span>.grade;}</code></pre><p>通过 class 实现继承：</p><pre><code class="hljs javascript"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">PrimaryStudent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Student</span> </span>{ <span class="hljs-keyword">constructor</span>(props) { <span class="hljs-built_in">super</span>(props); <span class="hljs-built_in">this</span>.grade = props.grade || <span class="hljs-number">1</span>; } getGrade() { <span class="hljs-keyword">return</span> <span class="hljs-built_in">this</span>.grade; }}</code></pre><h2 id="浏览器"><a href="#浏览器" class="headerlink" title="浏览器"></a>浏览器</h2><p>需要支持 ES6</p><ul><li>浏览器窗口： <code>windows</code>： <code>windows.innerWidth; windows.innerHeight</code>;</li><li>浏览器信息： <code>navigator</code>: <code>navigator.appName; navigator.appVersion</code>…;</li><li>屏幕信息： <code>screen</code>: <code>screen.width; screen.height</code>…;</li><li>当前页面 URL 信息: <code>location</code>: <code>location.protocol; location.host</code>…;</li><li>DOM 对象: <code>document</code>: <code>document.title; document.cookie</code>…;<ul><li><code>document.getElementById();</code> - 根据 ID 获取 DOM 节点</li><li><code>document.getElementsByTagName();</code> - 根据 Tag 名词获取 DOM 节点</li><li><code>document.cookie</code> - 获取 cookie 信息，服务器端使用 <code>httpOnly</code> 可以禁止 JS 读取 Cookie;</li></ul></li><li>浏览器历史： <code>history</code>: <code>history.back(); history.forward();</code> <strong>历史遗留对象已弃用！！</strong></li></ul><h3 id="DOM"><a href="#DOM" class="headerlink" title="DOM"></a>DOM</h3><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> d = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'id'</span>);<span class="hljs-built_in">document</span>.getElementsByTagName(<span class="hljs-string">'p'</span>);<span class="hljs-built_in">document</span>.getElementsByClassName(<span class="hljs-string">'class'</span>);<span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'#id'</span>);<span class="hljs-built_in">document</span>.querySelectorAll(<span class="hljs-string">'div.class > p'</span>);d.children; <span class="hljs-comment">// 获取 id 下的所有子节点</span>d.firstElementChild; <span class="hljs-comment">// 获取 id 下的第一个子节点</span><span class="hljs-comment">// 更新 DOM</span>d.innerHTML = <span class="hljs-string">'ABC <span style="color:red">RED</span> XYZ'</span>; <span class="hljs-comment">// 可以设置 HTML 标签</span>d.innerText = <span class="hljs-string">'ABC XYZ'</span>;<span class="hljs-comment">//// 设置 CSS</span>d.style.color = <span class="hljs-string">'#ff0000'</span>;d.style.fontSize = <span class="hljs-string">'20px'</span>;<span class="hljs-comment">// 插入 DOM</span><span class="hljs-keyword">var</span> div1 = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">'p'</span>);div1.id = <span class="hljs-string">'div1'</span>;div1.innerText = <span class="hljs-string">'DIV1'</span>;d.appendChild(div1);<span class="hljs-keyword">var</span> ref = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'ref'</span>);d.insertBefore(div1, ref);<span class="hljs-comment">// 删除 DOM</span><span class="hljs-keyword">var</span> parent = d.parentElement;<span class="hljs-comment">// 删除节点时 children 节点实时变化</span>parent.removeChild(parent.children[<span class="hljs-number">0</span>]); <span class="hljs-comment">// 删除节点 0</span>parent.removeChild(parent.children[<span class="hljs-number">0</span>]); <span class="hljs-comment">// 删除节点 1</span></code></pre><h3 id="表单"><a href="#表单" class="headerlink" title="表单"></a>表单</h3><p>没有 <code>name</code> 属性的表单控件不会提交。</p><p>表单控件</p><ul><li><code><input type='text'></input></code></li><li><code><input type='password'></input></code></li><li><code><input type='radio'></input></code></li><li><code><input type='checkbox'></input></code></li><li><code><input type='hidden'></input></code></li><li><code><select></select></input></code></li></ul><p>获取值</p><ul><li><code>text, password, hidden, select</code> 使用 <code>value</code> 获取值</li><li><code>select</code> 使用 <code>checked</code> 获取值</li></ul><h3 id="文件"><a href="#文件" class="headerlink" title="文件"></a>文件</h3><p><code><input type='file'></input></code></p><h3 id="AJAX"><a href="#AJAX" class="headerlink" title="AJAX"></a>AJAX</h3><p>只支持同源策略访问，跨域需要使用 CORS 策略。</p><ol><li>创建 <code>XMLHttpRequest</code> 对象；</li><li>设置 <code>onreadystatechange</code> 回调函数；</li><li>通过 <code>readyState === 4</code> 判断请求是否完成；</li><li>根据 <code>status === 2000</code> 判断是否成功响应；</li><li>调用 <code>open()</code> 方法, 参数1： <code>GET/POST</code>; 参数2： URL 地址； 参数3：是否异步（默认 true);</li><li>调用 <code>send()</code> 方法发送请求；</li></ol><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> request = <span class="hljs-keyword">new</span> XMLHttpRequest(); <span class="hljs-comment">// 新建 AJAX 对象</span><span class="hljs-comment">// 状态发生变化时，函数被回调</span>request.onreadystatechange = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">if</span> (request.readyState === <span class="hljs-number">4</span>) { <span class="hljs-comment">// 成功</span> <span class="hljs-comment">// 判断响应结果</span> <span class="hljs-keyword">if</span> (request.status === <span class="hljs-number">200</span>) { <span class="hljs-comment">// 成功，responseText - 响应文本</span> <span class="hljs-keyword">return</span> success(request.responseText); } <span class="hljs-keyword">else</span> { <span class="hljs-comment">// 失败</span> <span class="hljs-keyword">return</span> fail(request.status); } }}<span class="hljs-comment">// 发送请求</span>request.open(<span class="hljs-string">'GET'</span>, <span class="hljs-string">'/api/categories'</span>);request.send();</code></pre><h2 id="Promise"><a href="#Promise" class="headerlink" title="Promise"></a>Promise</h2><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">ajax</span>(<span class="hljs-params">method, url, data</span>) </span>{ <span class="hljs-keyword">var</span> request = <span class="hljs-keyword">new</span> XMLHttpRequest(); <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">resolve, reject</span>) </span>{ request.onreadystatechange = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">if</span> (request.readyState === <span class="hljs-number">4</span>) { <span class="hljs-keyword">if</span> (request.status === <span class="hljs-number">200</span>) { resolve(request.responseText); } <span class="hljs-keyword">else</span> { reject(request.status); } } }; request.open(method, url); request.send(data); });}<span class="hljs-keyword">var</span> p = ajax(<span class="hljs-string">'GET'</span>, <span class="hljs-string">'/api/categories'</span>);p.then(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">text</span>) </span>{ log.innerText = text;}).catch(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">status</span>) </span>{ log.innerText =<span class="hljs-string">'ERROR'</span> + status;})</code></pre><p>并行执行： <code>Promise.all()</code><br>容错执行： <code>Promise.race()</code></p><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> p1 = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">resolve, reject</span>) </span>{ ...})<span class="hljs-keyword">var</span> p2 = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">resolve, reject</span>) </span>{ ...})<span class="hljs-comment">// p1, p2 均执行成功后，执行 then</span><span class="hljs-built_in">Promise</span>.all([p1, p2]).then(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">results</span>) </span>{ <span class="hljs-built_in">console</span>.log(results);})<span class="hljs-comment">// p1, p2 同时执行，先执行成功的返回结果给 then，后执行成功的结果丢失</span><span class="hljs-built_in">Promise</span>.race([p1, p2]).then(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">result</span>) </span>{ <span class="hljs-built_in">console</span>.log(result);})</code></pre><h2 id="JQuery"><a href="#JQuery" class="headerlink" title="JQuery"></a>JQuery</h2><ul><li>按 ID 查找： <code>$('#id')</code></li><li>按 class 查找： <code>$('.class')</code></li><li>按 Tag 查找： <code>$('tag')</code></li><li>按属性查找： <code>$('[name=email]')</code>; <code>$('[type=password]')</code><ul><li><code>$('[name^=icon])</code>: 查找 name 属性以 icon 开头的 DOM;</li><li><code>$('[name$=with]')</code>: 查找 name 属性以 with 结尾的 DOM;</li></ul></li><li>组合查找： <code>$('input[name=email]')</code>; <code>$('tr.red')</code></li><li>多项选择器： <code>$('p, div')</code>; <code>$('p.red, p.green')</code>; <code>$('input[name=email],[name=password]')</code></li></ul><h3 id="选择器"><a href="#选择器" class="headerlink" title="选择器"></a>选择器</h3><ul><li><p>层级选择器 用 空格 隔开： <code>$('ul li.class')</code></p></li><li><p>子选择器 用 > 隔开： <code>$('ul > li.class')</code></p><p> 层级选择器 和 子选择器的区别在： 子选择器必须时父子关系，不可跨层级选择！</p></li><li><p>过滤器 用 : 隔开： <code>$('ul li:first-child')</code>; <code>$('ul li:last-child')</code>; <code>$('ul li:nth-child(2)')</code>; <code>$('ul li:nth-child(even)')</code></p></li></ul><h3 id="表单相关"><a href="#表单相关" class="headerlink" title="表单相关"></a>表单相关</h3><ul><li><code>:input</code> - <code><input></code>, <code><textarea></code>, <code><select></code>, <code><button></code></li><li><code>:file</code> - <code>input[type=file]</code></li><li><code>:checkbox</code> - <code>input[type=checkbox]</code></li><li><code>:radio</code> - <code>input[type=radio]</code></li><li><code>:focus</code> - 获取鼠标当前的焦点控件 <code>input:focus</code></li><li><code>:checked</code> - 已选择的单选或复选框控件 <code>input[type=radio]:checked</code></li><li><code>:enabled</code> - 可以正常输入的控件</li><li><code>:disabled</code> - 已被禁用的控件</li><li><code>:visible</code> - 可见的控件</li><li><code>:hidden</code> - 隐藏的控件</li><li>… …</li></ul><h3 id="查找-amp-过滤"><a href="#查找-amp-过滤" class="headerlink" title="查找 & 过滤"></a>查找 & 过滤</h3><ul><li><p><code>find()</code> - 在所有子节点中进行查找</p></li><li><p><code>parent()</code> - 从当前节点向上查找</p></li><li><p><code>next()</code> & <code>prev()</code> - 同一层级节点前后进行查找</p></li><li><p><code>filter()</code> - 过滤掉不符合条件的节点</p></li><li><p><code>map()</code> - 把一个 jQuery 对象包含的若干 DOM 节点转化为其他对象</p></li><li><p><code>first()</code> & <code>last()</code> & <code>slice(2, 4)</code> - 截取 jQuery 对象</p></li></ul><h3 id="操作"><a href="#操作" class="headerlink" title="操作"></a>操作</h3><ul><li><p><code>text()</code> & <code>html()</code> - 获取或修改 text 或 html</p></li><li><p><code>val()</code> - 获取或修改 value 属性</p></li><li><p><code>css()</code> - 获取或修改 css</p></li><li><p><code>hide()</code> & <code>show()</code> - 隐藏或显示元素; 增加参数可以实现淡入淡出效果： <code>hide('slow')</code> / <code>show('slow')</code></p></li><li><p><code>attr()</code> & <code>removeAttr()</code> - 修改 DOM 属性</p></li><li><p><code>prop()</code> - 与 attr() 类似</p></li><li><p><code>append()</code> & <code>prepend()</code> - 添加 DOM 节点</p></li><li><p><code>before()</code> & <code>after()</code> - 在当前元素前/后插入 DOM 节点</p></li><li><p><code>remove()</code> - 删除节点</p></li></ul><h3 id="事件"><a href="#事件" class="headerlink" title="事件"></a>事件</h3><p>绑定事件：</p><ul><li><code>$('#id').on('click', function() { alert('Hello, World'); });</code></li><li><code>$('#id').click(function() { alert('Hello, World'); });</code></li></ul><p>事件类型：</p><ul><li><p><code>click</code> - 单击</p></li><li><p><code>dblclick</code> - 双击</p></li><li><p><code>mouseenter</code> - 鼠标移入</p></li><li><p><code>mouseleave</code> - 鼠标移除</p></li><li><p><code>mousemove</code> - 鼠标在 DOM 内移动</p></li><li><p><code>hover</code> - <code>mouseenter</code> + <code>mouseleave</code></p></li><li><p><code>keydown</code> - 键盘按下</p></li><li><p><code>keyup</code> - 键盘松开</p></li><li><p><code>keypress</code> - 按一次键触发</p></li><li><p><code>focus</code> - DOM 获得焦点</p></li><li><p><code>blur</code> - DOM 失去焦点</p></li><li><p><code>change</code> - DOM 内容变更</p></li><li><p><code>submit</code> - form 提交</p></li><li><p><code>ready</code> - 页面载入并且 DOM 树初始化后 仅作用于 document 对象</p><p> <code>$(document).ready(function() {...});</code><br> 简化后：<br> <code>$(function() {...});</code></p></li><li><p><code>off('click', <functionName>)</code> 取消事件绑定</p></li></ul><h3 id="动画效果"><a href="#动画效果" class="headerlink" title="动画效果"></a>动画效果</h3><ul><li><p><code>show('slow') / hide('slow') / toogle('slow')</code> - 左上角缓慢收缩</p></li><li><p><code>slideUp('slow') / SlideDown('slow') / slideToogle('slow')</code> - 垂直缓慢收缩</p></li><li><p><code>fadeIn('slow') / fadeOut('slow') / fadeToggle('slow')</code> - 淡入淡出</p></li><li><p><code>animate()</code> - 自定义效果</p> <pre><code class="hljs javascript">$(<span class="hljs-string">'#id'</span>).animate({ opacity: <span class="hljs-number">0.25</span>, width: <span class="hljs-number">0</span>px; height: <span class="hljs-number">0</span>px;}, <span class="hljs-number">1000</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Complete'</span>); }).delay(<span class="hljs-number">1000</span>).animate(...);</code></pre><p> 可以使用 <code>delay()</code> 实现动画的暂停。</p></li></ul><h3 id="AJAX-1"><a href="#AJAX-1" class="headerlink" title="AJAX"></a>AJAX</h3><ul><li><p><code>$.ajax(async, method, contentType, data, headers, dataType)</code></p></li><li><p><code>$.ajax(async, method, contentType, data, headers, dataType, jsonp:'callback', jsonpCallback:'callbackFunction', success: function(data){...})</code></p></li><li><p><code>$.get(url)</code></p></li><li><p><code>$.post(url, data)</code></p></li><li><p><code>$.getJSON(url)</code></p></li></ul><h3 id="扩展"><a href="#扩展" class="headerlink" title="扩展"></a>扩展</h3><ol><li>使用 <code>$.fn</code> 绑定函数</li><li>使用 <code>return this</code> 实现链式调用</li><li>插件有默认值，绑定在 <code>$.fn.<pluginName>.defaults</code> 上</li><li>用户在调用时可传入参数以覆盖默认值</li></ol><pre><code class="hljs javascript">$.fn.<pluginName> = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">options</span>) </span>{ <span class="hljs-keyword">var</span> bgcolor = options && options.bgcolor || <span class="hljs-string">'#FFFFFF'</span>; <span class="hljs-built_in">this</span>.css(<span class="hljs-string">'background'</span>, bgcolor) <span class="hljs-keyword">return</span> <span class="hljs-built_in">this</span>;}</code></pre><p><code>extend(target, obj1, obj2, ...)</code> 会将靠后对象的值合并到第一个 target 中, 越往后面的对象优先级越高；</p><p><code>extend({}, $.fn.<pluginName>.defaults, options)</code></p><h2 id="异常处理"><a href="#异常处理" class="headerlink" title="异常处理"></a>异常处理</h2><p>使用 <code>try {...} catch {...} finally {...}</code> 捕获</p><blockquote><p>注意：异步操作时的异常无法在调用处捕获，同样，对于控件的事件处理，在绑定事件的代码处无法捕获事件处理函数的异常。</p></blockquote><h2 id="unerscore"><a href="#unerscore" class="headerlink" title="unerscore"></a>unerscore</h2><p>与 jQuery 类似，提供一套完善的 API, 绑定到 <code>_</code> 变量上。</p><h3 id="Collections"><a href="#Collections" class="headerlink" title="Collections"></a>Collections</h3><h4 id="map-filter"><a href="#map-filter" class="headerlink" title="map/filter"></a>map/filter</h4><p>类似于 Array 的 <code>map/filter</code> 方法</p><ul><li><code>_.map(object, function(value, key) {...});</code></li><li><code>_.mapObject(object, function(value, key) {...});</code></li><li><code>_.filter(object, function(value, key) {...});</code></li></ul><h4 id="every-some"><a href="#every-some" class="headerlink" title="every/some"></a>every/some</h4><p>集合中元素都满足情况，<code>_.every()</code> 返回 <code>true</code>, 集合中部分元素满足情况， <code>_.some()</code> 返回 <code>true</code></p><ul><li><code>_.every([1, 4, 7, -3, -9], (x) => x > 0); // false</code></li><li><code>_.some([1, 4, 7, -3, -9], (x) => x > 0); // true</code></li></ul><h4 id="max-min"><a href="#max-min" class="headerlink" title="max/min"></a>max/min</h4><p>集合时 Object，会忽略掉 key，只比较 value</p><p><code>_.max({ a: 1, b: 2, c: 3 }); // 3</code></p><h4 id="groupBy"><a href="#groupBy" class="headerlink" title="groupBy"></a>groupBy</h4><p><code>_.groupBy([1, 2, 3, 4, 5], (x) => { if(x<3) return 'small'; else return 'big' });</code></p><p>更多 <a href="https://underscorejs.org/">underscrore 方法</a>。</p>]]></content>
<categories>
<category>Study Notes</category>
<category>JavaScript</category>
</categories>
<tags>
<tag>JavaScript</tag>
</tags>
</entry>
<entry>
<title>Git 学习笔记</title>
<link href="/2019/09/study-notes-git/"/>
<url>/2019/09/study-notes-git/</url>
<content type="html"><--><!---->]]></content>
<categories>
<category>Study Notes</category>
<category>Git</category>
</categories>
<tags>
<tag>Git</tag>
</tags>
</entry>
</search>