-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsearch.xml
More file actions
311 lines (149 loc) · 58 KB
/
Copy pathsearch.xml
File metadata and controls
311 lines (149 loc) · 58 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
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>localStorage、sessionStorage、Cookie的区别详解</title>
<link href="/post/e9431e4e/"/>
<url>/post/e9431e4e/</url>
<content type="html"><![CDATA[<p>localStorage、sessionStorage、Cookie共同点:</p><p>都保存在浏览器端，且是同源的（顺便解释一下同源：域名、协议、端口号相同）</p><p>localStorage、sessionStorage、Cookie不共同点:</p><ul><li>存储大小的不同：</li></ul><p>localStorage的大小一般为5M<br>sessionStorage的大小一般为5M<br>cookies的大小一般为4K</p><ul><li>有效期不同：</li></ul><p>localStorage的有效期为永久有效，除非你进行手动删除。<br>sessionStorage在当前会话下有效，关闭页面或者浏览器时会被清空。<br>cookies在设置的有效之前有效，当超过有效期便会失效</p><ul><li>与服务器端的通信</li></ul><p>localStorage不参与服务器端的通信。<br>sessionStorage不参与服务器端的通信。<br>cookies参与服务器端通信，每次都会携带http的头信息中。（如果使用cookie保存过多数据会带来性能问题）</p><ul><li>localStorage和sessionStorage的作用域的区别详解</li></ul><p>不同浏览器无法共享localStorage或sessionStorage中的信息。<br>相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。</p> <h2 id="参考文章" > <a href="#参考文章" class="heading-link"><i class="fas fa-link"></i></a>参考文章</h2> <p><span class="exturl"><a class="exturl__link" href="https://blog.csdn.net/qq_26941173/article/details/88369543" target="_blank" rel="noopener" title="Markdown">localStorage、sessionStorage、Cookie的区别详解</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p>]]></content>
<categories>
<category> 前端 </category>
</categories>
<tags>
<tag> javascript </tag>
</tags>
</entry>
<entry>
<title>箭头函数和普通函数的区别</title>
<link href="/post/1eced665/"/>
<url>/post/1eced665/</url>
<content type="html"><![CDATA[<ul><li>箭头函数是匿名函数，不能作为构造函数，不能使用new;</li><li>箭头函数不绑定arguments，取而代之用rest参数…解决;</li><li>箭头函数不绑定this，会捕获其所在的<code>上下文</code>的this值，作为自己的this值;</li><li>箭头函数通过<code>call()</code>或<code>apply()</code>方法调用一个函数时，只传入了一个参数，对 this 并没有影响。;</li><li>箭头函数没有原型属性;</li><li>箭头函数不能当做Generator函数,不能使用yield关键字.</li></ul> <h1 id="参考文章" > <a href="#参考文章" class="heading-link"><i class="fas fa-link"></i></a>参考文章</h1> <p><span class="exturl"><a class="exturl__link" href="https://www.cnblogs.com/biubiuxixiya/p/8610594.html" target="_blank" rel="noopener" title="Markdown">箭头函数与普通函数的区别</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p>]]></content>
<categories>
<category> 前端 </category>
</categories>
<tags>
<tag> javascript </tag>
<tag> 前端 </tag>
<tag> es6 </tag>
</tags>
</entry>
<entry>
<title>6个代码在线调试工具，实时可视化编辑</title>
<link href="/post/de977e1e/"/>
<url>/post/de977e1e/</url>
<content type="html"><![CDATA[ <h2 id="codepen" > <a href="#codepen" class="heading-link"><i class="fas fa-link"></i></a>codepen</h2> <p>最受欢迎的在线调试工具,案例可fork衍生出自己的版本,可以设置代码的预处理器,通过搜索等方式添加外部类库,代码分享社区完善.<br><span class="exturl"><a class="exturl__link" href="https://codepen.io/pen/" target="_blank" rel="noopener">https://codepen.io/pen/</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p> <h2 id="jsfiddle" > <a href="#jsfiddle" class="heading-link"><i class="fas fa-link"></i></a>jsfiddle</h2> <p>最早的较出名的在线调试工具,支持使用react、jq等30多个框架和库可供选择,可fork,代码可预处理.国内打开较慢.<br><span class="exturl"><a class="exturl__link" href="http://jsfiddle.net/" target="_blank" rel="noopener">http://jsfiddle.net/</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p> <h2 id="jsbin" > <a href="#jsbin" class="heading-link"><i class="fas fa-link"></i></a>jsbin</h2> <p>简单的在线调试工具,支持控制台功能,JS的预处理器较多,CSS较少<br><span class="exturl"><a class="exturl__link" href="https://jsbin.com" target="_blank" rel="noopener">https://jsbin.com</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p> <h2 id="jsrun" > <a href="#jsrun" class="heading-link"><i class="fas fa-link"></i></a>jsrun</h2> <p>中文,对国内开发者友好.UI风格简洁,功能丰富强大,更多功能VIP收费,代码分享社区完善<br><span class="exturl"><a class="exturl__link" href="http://jsrun.net/" target="_blank" rel="noopener">http://jsrun.net/</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span><br>其他</p> <h2 id="cssdeck" > <a href="#cssdeck" class="heading-link"><i class="fas fa-link"></i></a>cssdeck</h2> <p><span class="exturl"><a class="exturl__link" href="http://cssdeck.com/" target="_blank" rel="noopener">http://cssdeck.com/</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p> <h2 id="Liveweave" > <a href="#Liveweave" class="heading-link"><i class="fas fa-link"></i></a>Liveweave</h2> <p>界面漂亮、支持协作功能</p><p><span class="exturl"><a class="exturl__link" href="https://liveweave.com/" target="_blank" rel="noopener">https://liveweave.com/</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p>]]></content>
<categories>
<category> 开发工具 </category>
</categories>
<tags>
<tag> 工具 </tag>
</tags>
</entry>
<entry>
<title>css中BFC特性</title>
<link href="/post/5d5065d5/"/>
<url>/post/5d5065d5/</url>
<content type="html"><![CDATA[<p>BFC，即块格式化上下文。浏览器满足一定的条件时会形成一种叫块渲染区域,它会按照一定的规则进行渲染,它拥有以下特性:</p><ul><li>BFC的块不会和浮动块重叠;</li><li>计算BFC元素的高度时，会包括浮动元素;</li><li>在一个BFC下的块 margin 会发生重叠，不在同一个则不会;</li><li>BFC元素是一个独立的容器，使得里面的元素和外部元素隔离开，互补影响<a id="more"></a></li></ul><p>它具有一下形成条件:</p><ul><li>float 的值不为 none;</li><li>overflow 的值为 auto, scroll和 hidden</li><li>display 的值为 table-cell, table-caption和 inline-block</li><li>position 设置为 absolute和 fixed</li></ul><p>bfc特性的应用详见:<br><span class="exturl"><a class="exturl__link" href="https://juejin.im/post/5c7a84b1518825629f3877a0" target="_blank" rel="noopener" title="Markdown">如何理解CSS中的BFC特性</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span> </p>]]></content>
<categories>
<category> 前端 </category>
</categories>
<tags>
<tag> css </tag>
<tag> 前端 </tag>
</tags>
</entry>
<entry>
<title>js运行时-eventLoop</title>
<link href="/post/9d968128/"/>
<url>/post/9d968128/</url>
<content type="html"><![CDATA[<p>JS引擎到底做了什么来解析代码之前，我们首先需要知道解析工作所发生的环境。<br>以V8引擎为例,V8引擎会根据需要将JS的解析工作放到一下四个容器里处理</p><ul><li>堆:用于存储函数变量和函数声明;</li><li>栈:根据函数之间调用与被调用的关系形成一个栈的数据结构,被调用的函数压入栈顶;根据先进先出的原则,先执行</li><li>栈顶函数,返回后弹出栈,直到栈空;</li><li>Web API容器:事件监听函数、HTTP／AJAX请求、或者是定时器函数等,一旦达到触发条件,将回调放至回调队列尾部;</li><li>回调队列:按照先进后出的原则,当主程序栈空时,会通知回调队列,将队列首部的回调函数放至执行栈执行;触发的事件回调会放在队列尾部;</li></ul><a id="more"></a><p>JS将任务分为同步任务和异步任务，同步任务根据调用关系入执行栈，根据栈先进先出的特性执行任务；<br>异步任务在执行完成时，会将回调函数放入回调队列，按照先进后出的原则以此放入回调去执行。</p><p>分析详见:<br><span class="exturl"><a class="exturl__link" href="https://juejin.im/post/5c7be69e51882555a8223325" target="_blank" rel="noopener" title="Markdown">【译】JS运行时环境</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span> </p>]]></content>
<categories>
<category> 前端 </category>
</categories>
<tags>
<tag> javascript </tag>
</tags>
</entry>
<entry>
<title>如何使用多个git(github)账号</title>
<link href="/post/a9c733cc/"/>
<url>/post/a9c733cc/</url>
<content type="html"><![CDATA[<p>我在公司开发已经使用了公司的git,配置了时使用的git已经存在了git账号,都要支持ssh</p> <h2 id="实现方案" > <a href="#实现方案" class="heading-link"><i class="fas fa-link"></i></a>实现方案</h2> <p>git对用户信息配置有一下几种等级: </p><a id="more"></a> <h3 id="1-系统级别的配置" > <a href="#1-系统级别的配置" class="heading-link"><i class="fas fa-link"></i></a>1.系统级别的配置</h3> <p>配置文件位于<code>/etc/gitconfig</code>中,适用于所有的用户和所有的库,可以使用 <code>$git config --system</code> 来指定和修改,存储在Git安装目录下</p> <h3 id="2-用户级别的配置" > <a href="#2-用户级别的配置" class="heading-link"><i class="fas fa-link"></i></a>2.用户级别的配置</h3> <p>适用于当前登录的用户,可以使用<code>$git config --gloabal</code>来指定和修改,存储在<code>C:\Documents and Settings\$USER</code>下</p> <h3 id="3-仓库级别的配置" > <a href="#3-仓库级别的配置" class="heading-link"><i class="fas fa-link"></i></a>3.仓库级别的配置</h3> <p>库级别的配置,适用于某个具体的库,可以使用<code>$git config</code>来指定和修改,存储在具体的库隐藏的.git文件夹下</p><p>几种级别的配置的优先级3>2>1,默认取优先级高的配置.因此可以对公司的git仓库使用系统或用户级配置,而github则使用仓库级配置,每次克隆github的仓库时设置仓库级别的配置</p><p>关于SSH key,原有的git已生成了一对文件,这时就需要再为github生成另一组;</p> <h2 id="为github配置SSH-key" > <a href="#为github配置SSH-key" class="heading-link"><i class="fas fa-link"></i></a>为github配置SSH key</h2> <p>进入<code>.ssh</code>目录,执行创建ssh key命令</p><figure class="highlight plain"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ ssh-keygen -t rsa -C 87125944@qq.com</span><br></pre></td></tr></table></div></figure><p><img src="https://raw.githubusercontent.com/DiamondsMe/source-base/master/_SOURCE_/images/a3b151b2d6a05eaa5e7b989846425ee255657ada.png" alt="生成密钥文件" title="生成密钥文件"></p><p>根据提示操作npm install,注意新生成的密钥文件名要区别于原有的文件名,这里执行之后<br>生成密钥文件<code>id_rsa_github</code>和公钥文件<code>id_rsa_github.pub</code></p> <h2 id="在github中添加SSH-key" > <a href="#在github中添加SSH-key" class="heading-link"><i class="fas fa-link"></i></a>在github中添加SSH key</h2> <p>复制公钥文件中的文本,访问github.com Setting -> SSH keys -> New Keys</p><p>title随心,将刚才复制的内容填入key中并提交;</p> <h2 id="在-ssh目录添加配置文件config" > <a href="#在-ssh目录添加配置文件config" class="heading-link"><i class="fas fa-link"></i></a>在.ssh目录添加配置文件config</h2> <h2 id="将密钥加入到ssh-agent中" > <a href="#将密钥加入到ssh-agent中" class="heading-link"><i class="fas fa-link"></i></a>将密钥加入到ssh-agent中</h2> <p>ssh-agent是用于管理密钥,执行以下命令将加入到ssh-agent中</p><figure class="highlight plain"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ssh-add ~/.ssh/id_rsa_github</span><br></pre></td></tr></table></div></figure> <h2 id="创建config文本文件" > <a href="#创建config文本文件" class="heading-link"><i class="fas fa-link"></i></a>创建config文本文件</h2> <p>在.ssh目录中创建config文件,为每个账号配置单独的host</p><figure class="highlight plain"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"># 配置github.com</span><br><span class="line"># 别名 </span><br><span class="line">Host github.com </span><br><span class="line"></span><br><span class="line"> # 真实的地址</span><br><span class="line"> HostName github.com </span><br><span class="line"></span><br><span class="line"> # id_rsa路径</span><br><span class="line"> IdentityFile ~\.ssh\id_rsa_github</span><br><span class="line"></span><br><span class="line"> # 配置登录时用什么权限认证--可设为publickey,password publickey,keyboard-interactive等</span><br><span class="line"> PreferredAuthentications publickey</span><br><span class="line"></span><br><span class="line"> # 用户名</span><br><span class="line"> User DiamondsMe </span><br><span class="line"></span><br><span class="line"># 配置原有的git地址</span><br><span class="line">Host xxx.com </span><br><span class="line"> HostName xxx.com </span><br><span class="line"> IdentityFile ~\.ssh\id_rsa</span><br><span class="line"> PreferredAuthentications publickey</span><br><span class="line"> User nameA</span><br></pre></td></tr></table></div></figure> <h2 id="执行测试命令测试是否配置成功（管理员身份运行）" > <a href="#执行测试命令测试是否配置成功（管理员身份运行）" class="heading-link"><i class="fas fa-link"></i></a>执行测试命令测试是否配置成功（管理员身份运行）</h2> <figure class="highlight plain"><div class="table-container"><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">$ ssh -T git@github.com</span><br><span class="line"></span><br><span class="line">ssh -T git@github.com The authenticity of host 'github.com (192.30.253.113)' can't be established.</span><br><span class="line"></span><br><span class="line">RSA key fingerprint is SHA256:nThbg6kXUpJWGl7E1IGOCspRomTxdCARLviKw6E5SY8.</span><br><span class="line">Are you sure you want to continue connecting (yes/no)? yes</span><br><span class="line"></span><br><span class="line">Warning: Permanently added 'github.com,192.30.253.113' (RSA) to the list of known hosts.</span><br><span class="line"></span><br><span class="line">Enter passphrase for key '/Users/bj-10026/.ssh/id_rsa_github':</span><br></pre></td></tr></table></div></figure><p>如果 </p><figure class="highlight plain"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Hi DiamondsMe! You've successfully authenticated, but GitHub does not provide shell access.</span><br></pre></td></tr></table></div></figure><p>命令执行结束后会在.ssh中生成unknow_host文件</p> <h2 id="创建本地github仓库-配置用户信息" > <a href="#创建本地github仓库-配置用户信息" class="heading-link"><i class="fas fa-link"></i></a>创建本地github仓库,配置用户信息</h2> <figure class="highlight plain"><div class="table-container"><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">$ git config user.name DiamondsMe</span><br><span class="line">$ git config user.email 871259441@qq.com</span><br><span class="line">$ git config --global credential.helper store</span><br></pre></td></tr></table></div></figure><p>未使用ssh-add添加</p> <h2 id="尝试提交" > <a href="#尝试提交" class="heading-link"><i class="fas fa-link"></i></a>尝试提交</h2> <figure class="highlight plain"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git add . && git commit -m "ci" && git push origin master</span><br></pre></td></tr></table></div></figure><p>成功!</p><p><img src="https://raw.githubusercontent.com/DiamondsMe/source-base/master/_SOURCE_/images/7e422b820e41705a2358268fc0dc7ea006b399db.png" alt="提交信息" title="提交信息"></p><p><span class="exturl"><a class="exturl__link" href="https://www.cnblogs.com/popfisher/p/5731232.html" target="_blank" rel="noopener" title="Markdown">Windows下Git多账号配置，同一电脑多个ssh-key的管理</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span><br><span class="exturl"><a class="exturl__link" href="https://www.jianshu.com/p/3d34cb3f4f0d" target="_blank" rel="noopener" title="Markdown">Enter passphrase for key每次都需要输入的解决办法</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span><br><span class="exturl"><a class="exturl__link" href="https://blog.csdn.net/superbfly/article/details/75287741" target="_blank" rel="noopener" title="markdown">Enter passphrase for key每次都需要输入的解决办法</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span><br><span class="exturl"><a class="exturl__link" href="https://blog.csdn.net/ainuser/article/details/79166463" target="_blank" rel="noopener" title="Markdown">git 查看/修改用户名、密码</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p>]]></content>
<categories>
<category> git </category>
</categories>
<tags>
<tag> git </tag>
</tags>
</entry>
<entry>
<title>解决H5 键盘兼容性问题</title>
<link href="/post/792c856b/"/>
<url>/post/792c856b/</url>
<content type="html"><![CDATA[<p>ios和安卓设备在唤起和收起键盘时会展现不同的效果,利用Element.scrollIntoViewIfNeeded(),将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域,可以解决唤起键盘时输入框表单被挡等问题.</p><p>分析详见:<span class="exturl"><a class="exturl__link" href="https://juejin.im/post/5c6d1c8b6fb9a049de6df441" target="_blank" rel="noopener">https://juejin.im/post/5c6d1c8b6fb9a049de6df441</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p>]]></content>
<categories>
<category> 前端 </category>
</categories>
<tags>
<tag> javascript </tag>
<tag> 前端 </tag>
</tags>
</entry>
<entry>
<title>解决ios设备设备下页面滚动问题</title>
<link href="/post/3d040cbc/"/>
<url>/post/3d040cbc/</url>
<content type="html"><![CDATA[<p>如果你在safari浏览器和app内核浏览器中对需要滚动的元素设置如下样式时</p><figure class="highlight plain"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">overflow|overflow-x|overflow-y:scroll;</span><br></pre></td></tr></table></div></figure><p>你会发现滚动区域的表现极其差劲,滚动在手指抬起时立即停止,不产生惯性滚动.</p><p>这时可以在以上样式的基础上通过添加<code>-webkit-overflow-scrolling: touch;</code>属性来实现ios下的惯性滚动效果.</p><figure class="highlight plain"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">overflow:scroll;</span><br><span class="line">-webkit-overflow-scrolling: touch;</span><br></pre></td></tr></table></div></figure><p>分析详见: <span class="exturl"><a class="exturl__link" href="https://juejin.im/post/5c6ebc8af265da2dec623d51" target="_blank" rel="noopener">https://juejin.im/post/5c6ebc8af265da2dec623d51</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p>]]></content>
<categories>
<category> 前端 </category>
</categories>
<tags>
<tag> css </tag>
<tag> 前端 </tag>
</tags>
</entry>
<entry>
<title>javascript实现数组去重</title>
<link href="/post/680dc6eb/"/>
<url>/post/680dc6eb/</url>
<content type="html"><![CDATA[ <h1 id="数组去重" > <a href="#数组去重" class="heading-link"><i class="fas fa-link"></i></a>数组去重</h1> <h2 id="利用ES6-Set去重（ES6中最常用）" > <a href="#利用ES6-Set去重（ES6中最常用）" class="heading-link"><i class="fas fa-link"></i></a>利用ES6 Set去重（ES6中最常用）</h2> <figure class="highlight plain"><div class="table-container"><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></pre></td><td class="code"><pre><span class="line">function unique (arr) {</span><br><span class="line"> return Array.from(new Set(arr))</span><br><span class="line">}</span><br><span class="line">var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];</span><br><span class="line"></span><br><span class="line">console.log(unique(arr))</span><br><span class="line"></span><br><span class="line">//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]</span><br></pre></td></tr></table></div></figure><p>不考虑兼容性，这种去重的方法代码最少。这种方法还无法去掉“{}”空对象，后面的高阶方法会添加去掉重复“{}”的方法。</p><a id="more"></a> <h2 id="利用for嵌套for，然后splice去重（ES5中最常用）" > <a href="#利用for嵌套for，然后splice去重（ES5中最常用）" class="heading-link"><i class="fas fa-link"></i></a>利用for嵌套for，然后splice去重（ES5中最常用）</h2> <figure class="highlight plain"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">function unique(arr){ </span><br><span class="line"> for(var i=0; i<arr.length; i++){</span><br><span class="line"> for(var j=i+1; j<arr.length; j++){</span><br><span class="line"> if(arr[i]==arr[j]){ //第一个等同于第二个，splice方法删除第二个</span><br><span class="line"> arr.splice(j,1);</span><br><span class="line"> j--;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> return arr;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];</span><br><span class="line"></span><br><span class="line">console.log(unique(arr))</span><br><span class="line"></span><br><span class="line">//[1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}] //NaN和{}没有去重，两个null直接消失了</span><br></pre></td></tr></table></div></figure> <h2 id="利用indexOf去重" > <a href="#利用indexOf去重" class="heading-link"><i class="fas fa-link"></i></a>利用indexOf去重</h2> <figure class="highlight plain"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">function unique(arr) {</span><br><span class="line"> if (!Array.isArray(arr)) {</span><br><span class="line"> console.log('type error!')</span><br><span class="line"> return</span><br><span class="line"> }</span><br><span class="line"> var array = [];</span><br><span class="line"> for (var i = 0; i < arr.length; i++) {</span><br><span class="line"> if (array .indexOf(arr[i]) === -1) {</span><br><span class="line"> array .push(arr[i])</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> return array;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];</span><br><span class="line"></span><br><span class="line">console.log(unique(arr))</span><br><span class="line"></span><br><span class="line">// [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}] //NaN、{}没有去重</span><br></pre></td></tr></table></div></figure><p>新建一个空的结果数组，for 循环原数组，判断结果数组是否存在当前元素，如果有相同的值则跳过，不相同则push进数组。</p> <h2 id="利用sort" > <a href="#利用sort" class="heading-link"><i class="fas fa-link"></i></a>利用sort()</h2> <figure class="highlight plain"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">function unique(arr) {</span><br><span class="line"> if (!Array.isArray(arr)) {</span><br><span class="line"> console.log('type error!')</span><br><span class="line"> return;</span><br><span class="line"> }</span><br><span class="line"> arr = arr.sort()</span><br><span class="line"> var arrry= [arr[0]];</span><br><span class="line"> for (var i = 1; i < arr.length; i++) {</span><br><span class="line"> if (arr[i] !== arr[i-1]) {</span><br><span class="line"> arrry.push(arr[i]);</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> return arrry;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];</span><br><span class="line"></span><br><span class="line">console.log(unique(arr))</span><br><span class="line"></span><br><span class="line">// [0, 1, 15, "NaN", NaN, NaN, {…}, {…}, "a", false, null, true, "true", undefined] //NaN、{}没有去重</span><br></pre></td></tr></table></div></figure><p>利用sort()排序方法，然后根据排序后的结果进行遍历及相邻元素比对。</p> <h2 id="利用对象的属性不能相同的特点进行去重" > <a href="#利用对象的属性不能相同的特点进行去重" class="heading-link"><i class="fas fa-link"></i></a>利用对象的属性不能相同的特点进行去重</h2> <figure class="highlight plain"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">function unique(arr) {</span><br><span class="line"> if (!Array.isArray(arr)) {</span><br><span class="line"> console.log('type error!')</span><br><span class="line"> return</span><br><span class="line"> }</span><br><span class="line"> var arrry= [];</span><br><span class="line"> var obj = {};</span><br><span class="line"> for (var i = 0; i < arr.length; i++) {</span><br><span class="line"> if (!obj[arr[i]]) {</span><br><span class="line"> arrry.push(arr[i])</span><br><span class="line"> obj[arr[i]] = 1</span><br><span class="line"> } else {</span><br><span class="line"> obj[arr[i]]++</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> return arrry;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];</span><br><span class="line"></span><br><span class="line">console.log(unique(arr))</span><br><span class="line"></span><br><span class="line">//[1, "true", 15, false, undefined, null, NaN, 0, "a", {…}] //两个true直接去掉了，NaN和{}去重</span><br></pre></td></tr></table></div></figure> <h2 id="利用includes" > <a href="#利用includes" class="heading-link"><i class="fas fa-link"></i></a>利用includes</h2> <figure class="highlight plain"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">function unique(arr) {</span><br><span class="line"> if (!Array.isArray(arr)) {</span><br><span class="line"> console.log('type error!')</span><br><span class="line"> return</span><br><span class="line"> }</span><br><span class="line"> var array =[];</span><br><span class="line"> for(var i = 0; i < arr.length; i++) {</span><br><span class="line"> if( !array.includes( arr[i]) ) {//includes 检测数组是否有某个值</span><br><span class="line"> array.push(arr[i]);</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> return array</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];</span><br><span class="line"></span><br><span class="line">console.log(unique(arr))</span><br><span class="line"></span><br><span class="line">//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}] //{}没有去重</span><br></pre></td></tr></table></div></figure> <h2 id="利用hasOwnProperty" > <a href="#利用hasOwnProperty" class="heading-link"><i class="fas fa-link"></i></a>利用hasOwnProperty</h2> <figure class="highlight plain"><div class="table-container"><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></pre></td><td class="code"><pre><span class="line">function unique(arr) {</span><br><span class="line"> var obj = {};</span><br><span class="line"> return arr.filter(function(item, index, arr){</span><br><span class="line"> return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)</span><br><span class="line"> })</span><br><span class="line">}</span><br><span class="line">var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];</span><br><span class="line"></span><br><span class="line">console.log(unique(arr));</span><br><span class="line"></span><br><span class="line">//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}] //所有的都去重了</span><br></pre></td></tr></table></div></figure><p>利用hasOwnProperty 判断是否存在对象属性</p> <h2 id="利用filter" > <a href="#利用filter" class="heading-link"><i class="fas fa-link"></i></a>利用filter</h2> <figure class="highlight plain"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">function unique(arr) {</span><br><span class="line"> return arr.filter(function(item, index, arr) {</span><br><span class="line"> //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素</span><br><span class="line"> return arr.indexOf(item, 0) === index;</span><br><span class="line"> });</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];</span><br><span class="line"></span><br><span class="line">console.log(unique(arr))</span><br><span class="line"></span><br><span class="line">//[1, "true", true, 15, false, undefined, null, "NaN", 0, "a", {…}, {…}]</span><br></pre></td></tr></table></div></figure> <h2 id="利用递归去重" > <a href="#利用递归去重" class="heading-link"><i class="fas fa-link"></i></a>利用递归去重</h2> <figure class="highlight plain"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">function unique(arr) {</span><br><span class="line"> var array= arr;</span><br><span class="line"> var len = array.length;</span><br><span class="line"></span><br><span class="line"> array.sort(function(a,b){ //排序后更加方便去重</span><br><span class="line"> return a - b;</span><br><span class="line"> })</span><br><span class="line"></span><br><span class="line"> function loop(index){</span><br><span class="line"> if(index >= 1){</span><br><span class="line"> if(array[index] === array[index-1]){</span><br><span class="line"> array.splice(index,1);</span><br><span class="line"> }</span><br><span class="line"> loop(index - 1); //递归loop，然后数组去重</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> loop(len-1);</span><br><span class="line"> return array;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];</span><br><span class="line"></span><br><span class="line">console.log(unique(arr))</span><br><span class="line"></span><br><span class="line">//[1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]</span><br></pre></td></tr></table></div></figure> <h2 id="利用Map数据结构去重" > <a href="#利用Map数据结构去重" class="heading-link"><i class="fas fa-link"></i></a>利用Map数据结构去重</h2> <figure class="highlight plain"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">function arrayNonRepeatfy(arr) {</span><br><span class="line"> let map = new Map();</span><br><span class="line"> let array = new Array(); // 数组用于返回结果</span><br><span class="line"> for (let i = 0; i < arr.length; i++) {</span><br><span class="line"> if(map .has(arr[i])) { // 如果有该key值</span><br><span class="line"> map .set(arr[i], true); </span><br><span class="line"> } else { </span><br><span class="line"> map .set(arr[i], false); // 如果没有该key值</span><br><span class="line"> array .push(arr[i]);</span><br><span class="line"> }</span><br><span class="line"> } </span><br><span class="line"> return array ;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];</span><br><span class="line"></span><br><span class="line">console.log(unique(arr))</span><br><span class="line"></span><br><span class="line">//[1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]</span><br></pre></td></tr></table></div></figure> <h2 id="利用reduce-includes" > <a href="#利用reduce-includes" class="heading-link"><i class="fas fa-link"></i></a>利用reduce+includes</h2> <figure class="highlight plain"><div class="table-container"><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></pre></td><td class="code"><pre><span class="line">function unique(arr){</span><br><span class="line"> return arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];</span><br><span class="line"></span><br><span class="line">console.log(unique(arr));</span><br><span class="line"></span><br><span class="line">// [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]</span><br></pre></td></tr></table></div></figure> <h2 id="…new-Set-arr" > <a href="#…new-Set-arr" class="heading-link"><i class="fas fa-link"></i></a>[…new Set(arr)]</h2> <figure class="highlight plain"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[...new Set(arr)]</span><br></pre></td></tr></table></div></figure> <h2 id="参考文章" > <a href="#参考文章" class="heading-link"><i class="fas fa-link"></i></a>参考文章</h2> <p><span class="exturl"><a class="exturl__link" href="https://segmentfault.com/a/1190000016418021" target="_blank" rel="noopener" title="Markdown">JavaScript数组去重（12种方法，史上最全）</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p>]]></content>
<categories>
<category> 前端 </category>
</categories>
</entry>
<entry>
<title>如何避免出现“cannot read property of undefined”错误</title>
<link href="/post/c9529d69/"/>
<url>/post/c9529d69/</url>
<content type="html"><![CDATA[<p>开发时经常会出现某对象属性为undefined,而继续获取下一层属性时导致报错,有以下方案可以避免错误的发生</p> <h2 id="使用方法库" > <a href="#使用方法库" class="heading-link"><i class="fas fa-link"></i></a>使用方法库</h2> <p>lodash中的_.get或者Ramda 里的 R.path方法;<br>但有时只是想单纯避免出现这个错误,而不想引入整合类库造成不必要的浪费.</p><a id="more"></a> <h2 id="使用-amp-amp-“短路”" > <a href="#使用-amp-amp-“短路”" class="heading-link"><i class="fas fa-link"></i></a>使用 && “短路”</h2> <p>使用<code>&&</code>符号,例如:</p><figure class="highlight plain"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">meals.breakfast && meals.breakfast.protein</span><br></pre></td></tr></table></div></figure><p>但是会导致获取属性值时有重复的代码,比如前面的<code>meals.breakfast</code></p> <h2 id="使用“或单元”" > <a href="#使用“或单元”" class="heading-link"><i class="fas fa-link"></i></a>使用“或单元”</h2> <p>同上是一种特殊的代码结构,在每个<code>||</code>后都有一个默认值防止报错,例如:</p><figure class="highlight plain"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">((favorites.reading||{}).books||[])[0],</span><br></pre></td></tr></table></div></figure><p>然而此方案代码可读性较差;</p> <h2 id="使用try-catch" > <a href="#使用try-catch" class="heading-link"><i class="fas fa-link"></i></a>使用try/catch</h2> <p>此方案检查单个属性可用,多个属性写在里面无法排查错误位置;</p> <h2 id="未来展望" > <a href="#未来展望" class="heading-link"><i class="fas fa-link"></i></a>未来展望</h2> <p>可选链式调用:TC39 提案中的一个功能,例如</p><figure class="highlight plain"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">favorites?.video?.shows[0];</span><br></pre></td></tr></table></div></figure> <h2 id="参考文章" > <a href="#参考文章" class="heading-link"><i class="fas fa-link"></i></a>参考文章</h2> <p><span class="exturl"><a class="exturl__link" href="https://juejin.im/post/5c810170e51d450a453fb48e" target="_blank" rel="noopener" title="Markdown">避免那些可恶的 “cannot read property of undefined” 错误</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p>]]></content>
<categories>
<category> 前端 </category>
</categories>
<tags>
<tag> javascript </tag>
</tags>
</entry>
<entry>
<title>css层叠上下文</title>
<link href="/post/9daba997/"/>
<url>/post/9daba997/</url>
<content type="html"><![CDATA[<p>“层叠上下文”描述了DOM元素在页面中形成的一种堆叠关系,它的一些规则决定了元素在页面z轴展现的先后顺序,这也解释了z-index值很高的元素会被一些值比较低的元素遮挡等等现象.<br>某个dom元素触发“层叠上下文”是有以下条件的:</p><ul><li>z-index 值不为 “auto”的 绝对/相对/绝对定位;</li><li>flex 项(父元素 display 为 flex|inline-flex)，需要配合z-index;</li><li>opacity 属性值小于 1 的元素;</li><li>transform 属性值不为 “none”的元素;</li><li>mix-blend-mode 属性值不为 “normal”的元素;</li><li>perspective值不为“none”的元素;</li><li>filter与层叠上下文;</li></ul><a id="more"></a><p>在相同层叠上下文的情况下,元素之间会按”层叠水平”的优先级排序(以下从低至高):</p><ul><li>background/border;</li><li>负值z-index;</li><li>block块状水平盒子;</li><li>float浮动盒子;</li><li>inline\inline-block水平盒子;</li><li>z-index:0\auto;</li><li>正值z-index;</li></ul><p>如果是在不同的层叠上下文中，先找到共同的祖先层叠上下文，然后比较共同层叠上下文下这个两个元素所在的局部层叠上下文的层叠水平</p><p>分析详见:<br><span class="exturl"><a class="exturl__link" href="https://juejin.im/post/5c6ebc8af265da2dec623d51" target="_blank" rel="noopener" title="Markdown">前端面试之层叠上下文(z-index)</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span> </p>]]></content>
<categories>
<category> 前端 </category>
</categories>
<tags>
<tag> css </tag>
</tags>
</entry>
<entry>
<title>新建一个npm配置文件package.json</title>
<link href="/post/7f3647cb/"/>
<url>/post/7f3647cb/</url>
<content type="html"><![CDATA[<p>如果需要在项目中使用npm的一些功能,一般有需要在项目里面添加一个<code>package.json</code>文件.它描述了项目目需要使用的npm模块,项目的基本信息等.</p><p>该文件可以手动添加,更方便一点的方式是在控制台使用如下命令:</p><figure class="highlight plain"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm init</span><br></pre></td></tr></table></div></figure><a id="more"></a><p>执行此命令后,会有一系列回答步骤,回答完毕后会在<code>package.json</code>中生成如下基本配置</p><figure class="highlight plain"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line"> /* 项目名称 */</span><br><span class="line"> "name": "new-npm",</span><br><span class="line"></span><br><span class="line"> /* 版本号 */</span><br><span class="line"> "version": "1.0.0",</span><br><span class="line"></span><br><span class="line"> /* 项目描述 */</span><br><span class="line"> "description": "",</span><br><span class="line"></span><br><span class="line"> /* </span><br><span class="line"> 入口文件,如果改项目作为模块使用,其他</span><br><span class="line"> 项目依赖此项目时返回此路径中的文件</span><br><span class="line"> */</span><br><span class="line"> "main": "index.js",</span><br><span class="line"></span><br><span class="line"> "scripts": {</span><br><span class="line"> "test": "aaa"</span><br><span class="line"> },</span><br><span class="line"></span><br><span class="line"> /* 存放代码的地方 */</span><br><span class="line"> "repository": {</span><br><span class="line"> "type": "git",</span><br><span class="line"> "url": "https://github.com/DiamondsMe/study.git"</span><br><span class="line"> },</span><br><span class="line"></span><br><span class="line"> /* 关键字,便于用户搜索到此模块 */</span><br><span class="line"> "keywords": [</span><br><span class="line"> "adfasf"</span><br><span class="line"> ],</span><br><span class="line"></span><br><span class="line"> /* 作者 */</span><br><span class="line"> "author": "fasfd",</span><br><span class="line"></span><br><span class="line"> /* 项目许可证 */</span><br><span class="line"> "license": "ISC"</span><br><span class="line">}</span><br></pre></td></tr></table></div></figure> <h2 id="参考文章" > <a href="#参考文章" class="heading-link"><i class="fas fa-link"></i></a>参考文章</h2> <p><span class="exturl"><a class="exturl__link" href="https://www.cnblogs.com/bydzhangxiaowei/p/8729210.html" target="_blank" rel="noopener" title="Markdown">package.json说明 by 张小伟</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span><br><span class="exturl"><a class="exturl__link" href="https://www.cnblogs.com/whkl-m/p/6617540.html" target="_blank" rel="noopener" title="Markdown">对package.json的理解和学习</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p>]]></content>
<categories>
<category> 开发工具 </category>
</categories>
<tags>
<tag> 前端 </tag>
</tags>
</entry>
</search>