-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsearch.xml
351 lines (200 loc) · 271 KB
/
search.xml
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
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>一些开发过程中遇到的问题(一)</title>
<link href="/2018/08/14/tips/"/>
<content type="html"><![CDATA[<p><excerpt in="" index="" |="" 首页摘要=""><br> 记录一些我在平常工作中遇到的问题<br><a id="more"></a></excerpt></p><p><the rest="" of="" contents="" |="" 余下全文=""></the></p><p><contents></contents></p><h3 id="1-json文件"><a href="#1-json文件" class="headerlink" title="1.json文件"></a>1.json文件</h3><ul><li><code>"react": "^16.2.0",</code>这里面的^表示版本当前主版本号内的版本都是可以的也就是16.x.x都是会自动更新的。～则表示最小位版本号内的版本，也就是16.2.x.</li><li>devDependencies开发环境</li><li>dependencies生产环境，npm项目</li><li>rm -rf 强制删除指定目录下的文件和所有子文件递归删除，无需询问<h4 id="安装某个固定版本"><a href="#安装某个固定版本" class="headerlink" title="安装某个固定版本"></a>安装某个固定版本</h4></li><li>npm install <h3 id="2-对象"><a href="#2-对象" class="headerlink" title="2.对象"></a>2.对象</h3>对象可以不加双引号，也可以加<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">//写法一</span><br><span class="line">let json = {</span><br><span class="line"> a:'apple',</span><br><span class="line"> b:'banana'</span><br><span class="line">}</span><br><span class="line">//写法二</span><br><span class="line">let json = {</span><br><span class="line"> 'a':'jspang',</span><br><span class="line"> 'b':'技术胖'</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ul><h3 id="3-el表达式"><a href="#3-el表达式" class="headerlink" title="3.el表达式"></a>3.el表达式</h3><p>epression language,也就是我们常见到的${expression}这种</p><h3 id="4-形参的命名"><a href="#4-形参的命名" class="headerlink" title="4.形参的命名"></a>4.形参的命名</h3><p>形参的命名和其他东西真的没有什么关系，他可以是任何名字，只要是你在调用时候用的就是形参中的名字，但是要注意的是，如果你在头文件也就是函数定义的时候写了一个名字，那么后面调用的时候的数据类型，形参名字是和你之前定义的要保持一致的。当然了，一般为了方便，我们都会定义成和他的作用差不多的名字，比如我们需要传入的参数或者说需要操作的函数是名字，那么我们一般将参数也命名为name。</p><h3 id="5-一些框架"><a href="#5-一些框架" class="headerlink" title="5.一些框架"></a>5.一些框架</h3><p>angular是一个mvvm框架，它有数据绑定，更适合以数据中心为的系统，比如像一些管理平台，比如应用管理平台或者电商店铺的管理等，总之就是以数据流为中心等一些管理系统更适合用angularjs这样等。</p><h3 id="6-sublime文件无法保存"><a href="#6-sublime文件无法保存" class="headerlink" title="6.sublime文件无法保存"></a>6.sublime文件无法保存</h3><p>原网址：<a href="http://blog.csdn.net/cigg153/article/details/69938277" target="_blank" rel="noopener">http://blog.csdn.net/cigg153/article/details/69938277</a></p><p>sublime text 3 保存文件时，提示sublime text 3 unable to save permission denied错误。</p><p>原因：保存文件时，保存文件的位置是根目录，在根目录下没有写入的权限</p><p>解决办法：更换保存文件的位置</p><h3 id="7-随机数的生成"><a href="#7-随机数的生成" class="headerlink" title="7.随机数的生成"></a>7.随机数的生成</h3><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">//生成有n个元素的随机数组，每个元素的随机范围为[rangeL, rangeR]</span><br><span class="line">#include<iostream></span><br><span class="line">#include<ctime></span><br><span class="line">#include<cassert></span><br><span class="line">using namespace std;</span><br><span class="line">int* generateRandomArray(int n ,int rangeL, int rangeR){</span><br><span class="line"> assert(rangeL <= rangeR);</span><br><span class="line"> int *arr = new int[n];</span><br><span class="line"> srand(time(NULL));</span><br><span class="line"> for(int i =0; i <n; i++){</span><br><span class="line"> arr[i]= rand()%(rangeR -rangeL +1)+ rangeL;</span><br><span class="line"> }</span><br><span class="line"> return arr;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="8-压缩"><a href="#8-压缩" class="headerlink" title="8.压缩"></a>8.压缩</h3><p>一般图片的话可以使用tinypng来压缩，而js代码的话可以使用UglifyJS来进行压缩。</p><h3 id="9-git"><a href="#9-git" class="headerlink" title="9. git"></a>9. git</h3><ul><li>进入系统磁盘，那么则直接输入<code>cd \系统盘名称</code></li><li>进入某个文件夹，那么则直接输入<code>cd 文件夹名称</code></li><li>git 中不允许名称中包含有大写字母</li></ul><h3 id="10-express的安装和简单应用"><a href="#10-express的安装和简单应用" class="headerlink" title="10. express的安装和简单应用"></a>10. express的安装和简单应用</h3><ul><li><a href="http://weizhifeng.net/how-to-publish-a-node-module.html" target="_blank" rel="noopener">http://weizhifeng.net/how-to-publish-a-node-module.html</a></li></ul><p>如何发布Node模块到NPM社区</p><ul><li><a href="http://www.expressjs.com.cn/" target="_blank" rel="noopener">http://www.expressjs.com.cn/</a><br>express 官网</li></ul><p>如果只是全局的安装了express好像不可以，一定要在项目目录下再安装一次。</p><ul><li>服务启动不成功的时候，会生成一个express的debug的文件，记录调试信息，如果服务成功启动以后，那么这个文件会自动消失。</li><li>关于端口号被重复占用的问题</li></ul><p><code>Failed at the myresume@0.0.0 start script 'node ./bin/www'.</code>其实这个指的就是我们的文件夹目录下的www文件，在这里我们可以手动修改端口号的值。从而解决端口号被占用的问题。</p><h3 id="11-express不是内部或外部命令也不是可运行的程序？"><a href="#11-express不是内部或外部命令也不是可运行的程序？" class="headerlink" title="11.express不是内部或外部命令也不是可运行的程序？"></a>11.express不是内部或外部命令也不是可运行的程序？</h3><p>安装时请使用<code>npm install -g express</code>命令，另因express默认安装是最新的版本，已经是4.x.x的版本。而最新express4.0+版本中将命令工具分出来了，所以必须要安装express-generator，执行命令<code>npm install -g express-generator</code>命令即可。无需配置环境变量等东西。安装完成后，执行<code>express --version</code>命令，即可看到安装的express的版本号。另外，<code>npm -v</code>命令并不是查看版本号，而是 <code>-v, --view <engine> add view <engine> support (dust|ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)</code></p><h3 id="12、location-href"><a href="#12、location-href" class="headerlink" title="12、location.href"></a>12、location.href</h3><p>href 属性是一个可读可写的字符串，可设置或返回当前显示的文档的完整 URL。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">self.location.href="/url" 当前页面打开URL页面</span><br><span class="line">location.href="/url" 当前页面打开URL页面</span><br><span class="line">windows.location.href="/url" 当前页面打开URL页面，前面三个用法相同。</span><br><span class="line">this.location.href="/url" 当前页面打开URL页面</span><br><span class="line">parent.location.href="/url" 在父页面打开新页面</span><br><span class="line">top.location.href="/url" 在顶层页面打开新页面</span><br></pre></td></tr></table></figure></p><h3 id="13-margin不起作用"><a href="#13-margin不起作用" class="headerlink" title="13.margin不起作用"></a>13.margin不起作用</h3><ol><li><p>把margin-top改成padding-top,不过,前提是内层的Div没有设置边框</p></li><li><p>给外层的Div加padding-top</p></li><li><p>给外层DIV加：</p></li></ol><ul><li>float: left或right </li><li>position: absolute </li><li>display: inline-block或table-cell或其他 table 类型 </li><li>overflow: hidden或auto<h3 id="14-修改element样式"><a href="#14-修改element样式" class="headerlink" title="14.修改element样式"></a>14.修改element样式</h3></li><li>问题描述:当我们修改elementUI的默认样式比如dialog的时候，如果我们的style有加scoped或者直接在标签中书写内联样式并且加！important也是不管用的。如果去掉scoped有效，但是这个改变会是全局的，其他的样式也会改变。</li><li>解决方案: 将dialog组件最外层包裹一个class，并且在书写样式时也包上这一层class</li><li>示例代码<figure class="highlight plain"><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">**** html ****</span><br><span class="line">.dialog</span><br><span class="line"> el-dialog(...)</span><br><span class="line"> </span><br><span class="line">**** css ****</span><br><span class="line"><style lang='scss'></span><br><span class="line">.dialog {</span><br><span class="line"> .el-dialog {</span><br><span class="line"> margin-left: 60px;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></style></span><br></pre></td></tr></table></figure></li></ul><h3 id="15-setCurrentRow失效"><a href="#15-setCurrentRow失效" class="headerlink" title="15.setCurrentRow失效"></a>15.setCurrentRow失效</h3><ul><li>问题描述：table表格数据回显</li><li>解决方法：<figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">****1****</span><br><span class="line">setTimeout(() => {</span><br><span class="line"> this.$refs.singleTable['setCurrentRow'](oSel);</span><br><span class="line">}, 10);</span><br><span class="line"></span><br><span class="line">****2****</span><br><span class="line">也许用nextTick也是可以的</span><br></pre></td></tr></table></figure></li></ul><h3 id="16-change-”handleCheckAllChange”"><a href="#16-change-”handleCheckAllChange”" class="headerlink" title="16.@change=”handleCheckAllChange”"></a>16.@change=”handleCheckAllChange”</h3><ul><li>问题描述:handleCheckAllChange(val)代表什么</li><li>回答：val代表当前所选中的v-for里面的label值。也就是说我们可以在template里面改变这个值。根据我们的需要。目前在修改label 的值后，这个并不影响我们其他的显示功能</li></ul><h3 id="17-表格中的按钮和图片"><a href="#17-表格中的按钮和图片" class="headerlink" title="17.表格中的按钮和图片"></a>17.表格中的按钮和图片</h3><ul><li><p>表格中的按钮的话，如果有第二行，可能会有错开的现象，后面发现从二行开始及以后的按钮都会往里缩紧。后面发现他们有一个默认的margin-left:10px，去掉就好了</p><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">.el-button + .el-button {</span><br><span class="line"> margin-left: 0;</span><br><span class="line"> margin-bottom: 10px;</span><br><span class="line"> margin-right: 10px;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p>添加margin-right:10px之后，第一行的按钮没有分开，要手动再给他加一个margin-right:10px;因为我们的margin-right是加载砂上面这个类里面，而这个类的意思应该是第一个按钮追加的按钮的类。</p></li><li>多选框也有一个默认的margin-left值</li><li>如果我们要在表格中添加图片的话，可以添加如下代码，利用scope.row,他后面的值就是我们使用的prop<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">el-table-column(label="头图" width="180")</span><br><span class="line"> template(slot-scope="scope")</span><br><span class="line"> img.w-90.h-90(v-if="scope.row.covers.length!==0" :src="scope.row.covers[0].url")</span><br><span class="line"> .w-90.h-90.lh-90(v-else style="border:1px dashed #d9d9d9") 暂无相关图片</span><br></pre></td></tr></table></figure></li></ul><h3 id="18-keyup-enter-native可能要加"><a href="#18-keyup-enter-native可能要加" class="headerlink" title="18. keyup.enter(native可能要加)"></a>18. keyup.enter(native可能要加)</h3><p>vue可以利用v-on监听键盘回车事件，<br><figure class="highlight plain"><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"><input v-on:keyup.13="submit"></span><br><span class="line"></span><br><span class="line"><input v-on:keyup.enter="submit"></span><br><span class="line"></span><br><span class="line"><input @keyup.enter="submit"></span><br><span class="line"></span><br><span class="line">但是如果使用了封装组件的话，比如element，这个时候使用按键修饰符需要加上.native</span><br><span class="line"></span><br><span class="line"><el-input @keyup.enter.native="submit"></el-input></span><br></pre></td></tr></table></figure></p><h3 id="19-elementui-table"><a href="#19-elementui-table" class="headerlink" title="19.elementui table"></a>19.elementui table</h3><ul><li>我们有的时候根据某一行的状态不是一定要非要后端返回给我们他们的boolean值然后根据这个去v-show或者v-else去判断他到底展不展示、是否disabled</li><li>你也不要一直局限于我非要根据某一行的boolean值然后，给他去加一个boolean值然后去怎样怎样，结果搞得每一行都是一个状态</li><li>另外，很多时候如果你觉得if和else比较繁琐(这两行其他数据都是一毛一样的)，这时候可以多多去尝试使用三目运算符，减少代码量的冗余，可读性也会更强。</li><li>最后，表格中的scope.row什么的，你是可以直接拿来在template中使用的呀，不是非要放到ts中才会生效。甚至我们通过这些数据与后端数据的比较直接实现我们上面那样的操作的啊</li></ul><h3 id="20-如何获取response-headers中的信息"><a href="#20-如何获取response-headers中的信息" class="headerlink" title="20.如何获取response headers中的信息"></a>20.如何获取response headers中的信息</h3><ul><li>浏览器Request Header和Response Header的内容:<a href="https://blog.csdn.net/m0_37828249/article/details/78164320" target="_blank" rel="noopener">https://blog.csdn.net/m0_37828249/article/details/78164320</a></li><li>详解web缓存:<a href="https://segmentfault.com/a/1190000006741200" target="_blank" rel="noopener">https://segmentfault.com/a/1190000006741200</a></li><li>前端<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">AJAX</span><br><span class="line"></span><br><span class="line">需要配置Access Control Allow Origin选项</span><br><span class="line"></span><br><span class="line">xhr.getAllResponseHeaders();//返回全部头信息,string</span><br><span class="line">xhr.getResponseHeader('date');//获取对应的某一个字段</span><br></pre></td></tr></table></figure></li></ul><h3 id="21-elementui-cascader"><a href="#21-elementui-cascader" class="headerlink" title="21. elementui cascader"></a>21. elementui cascader</h3><ul><li>后端传回来的数据可以获取到，但是在下拉列表里没有显示</li><li>原因一：没有对数据进行处理，要处理成合适的数据格式</li><li>原因二:没有写props,对于数据的话，他得知道显示哪些东西才对嘛，你不告诉他，他自己也懵了。</li><li><p>props如何写</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">oCateTreeProps: {</span><br><span class="line"> value: 'name',</span><br><span class="line"> label: 'name',</span><br><span class="line"> children: 'child',</span><br><span class="line"> disabled: true</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p>原有geshi</p><figure class="highlight plain"><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">{</span><br><span class="line"> "value":{</span><br><span class="line"> "cate_id":"0e2",</span><br><span class="line"> "name":"服饰",</span><br><span class="line"> "parent":"root",</span><br><span class="line"> "level":1,</span><br><span class="line"> "weight":10,</span><br><span class="line"> "desc":"",</span><br><span class="line"> "tag_ids":"",</span><br><span class="line"> "status":0,</span><br><span class="line"> "cate_image":null,</span><br><span class="line"> "alias":"",</span><br><span class="line"> "if_checked":false,</span><br><span class="line"> "cates_lv1_lv2":""</span><br><span class="line"> },</span><br><span class="line"> "children":Array[0],</span><br><span class="line"> "count":0,</span><br><span class="line"> "if_checked":false,</span><br><span class="line"> "child":Array[9]</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p>现在格式</p><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line"> "value":Object{...},</span><br><span class="line"> "children":Array[0],</span><br><span class="line"> "count":0,</span><br><span class="line"> "if_checked":false,</span><br><span class="line"> "child":Array[9],</span><br><span class="line"> "cate_id":"0e2",</span><br><span class="line"> "name":"服饰",</span><br><span class="line"> "parent":"root",</span><br><span class="line"> "level":1,</span><br><span class="line"> "weight":10,</span><br><span class="line"> "desc":"",</span><br><span class="line"> "tag_ids":"",</span><br><span class="line"> "status":0,</span><br><span class="line"> "cate_image":null,</span><br><span class="line"> "alias":"",</span><br><span class="line"> "cates_lv1_lv2":""</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p>修改格式的函数,可以看出，这两个的区别就是我们把父节点的值取出来， 不过这样的话，父节点的值重复了两次，有没有什么更好的方法呢？</p><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">// 处理tree 数据</span><br><span class="line">fnBsnModifyTreeData(aList) {</span><br><span class="line"> function loop(item) {</span><br><span class="line"> item = {</span><br><span class="line"> ...item,</span><br><span class="line"> ...item.value</span><br><span class="line"> };</span><br><span class="line"> if (item.child.length) {</span><br><span class="line"> item.child = item.child.map((child, i) => {</span><br><span class="line"> return loop(child);</span><br><span class="line"> });</span><br><span class="line"> } else {</span><br><span class="line"> delete item.child;</span><br><span class="line"> }</span><br><span class="line"> return item;</span><br><span class="line"> }</span><br><span class="line"> aList = _.map(aList, (item, i) => {</span><br><span class="line"> return loop(item);</span><br><span class="line"> });</span><br><span class="line"> return aList;</span><br><span class="line">},</span><br></pre></td></tr></table></figure></li></ul>]]></content>
<tags>
<tag> tips js vue elementui </tag>
</tags>
</entry>
<entry>
<title>记一次elementui图片上传功能的重构</title>
<link href="/2018/05/14/elementupload/"/>
<content type="html"><![CDATA[<p><excerpt in="" index="" |="" 首页摘要=""><br> 为实现图片的拖拽排序而重写upload组件的踩坑填坑过程<br><a id="more"></a></excerpt></p><p><the rest="" of="" contents="" |="" 余下全文=""></the></p><h3 id="1-拖拽的实现"><a href="#1-拖拽的实现" class="headerlink" title="1. 拖拽的实现"></a>1. 拖拽的实现</h3><h4 id="1-dom操作"><a href="#1-dom操作" class="headerlink" title="1.dom操作"></a>1.dom操作</h4><p>原本已经封装好的elementui来说，它的图片是一个fileList的数组，而拖拽的话，需要对dom进行操作，因此，我们首先想到的是能否取到img的src并将其放在一个div中，循环遍历显示出我们上传后的图片(下文中的fileArray只是一个假定值，代表我们在data里面定义的这个model值)<br><figure class="highlight plain"><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"><div v-for="item in fileArray"></span><br><span class="line"> <img src="item中存放的地址"> </span><br><span class="line"></div></span><br></pre></td></tr></table></figure></p><p>这里要说的是，已经上传成功的response值和我们在上传图片成功时的返回值的数据结构并不一样。因此我们需要想办法取其共同点并且构造成一个新的数组，得到我们的fileArray。<br><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">fnBsnUploadPicSuccess(response, file, fileList) {</span><br><span class="line"> if (response && response.result && response.result.res_path) {</span><br><span class="line"> this.fileArray = this.fileArray.concat(response.result);</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><h4 id="2-拖拽"><a href="#2-拖拽" class="headerlink" title="2.拖拽"></a>2.拖拽</h4><p>这个直接利用组件去实现，最开始的时候我选用的是<a href="https://github.com/SortableJS/Vue.Draggable" target="_blank" rel="noopener">vue.draggable</a>，star还不错，效果也有，但是问题出现了，保存之后的结果依然是未排序之前的？这，难道它只实现了拖拽效果，而没有实现排序之后的数据结构的改变？尴尬了。我要去怎么搞？再搞一插件？给每个类都加一个class？来存储这排序之后的东西么？网上查了很久，也没有发现特别有用的，有些垂直列表之类的可以利用偏移值，然而我这是不确定的一个个排列下来的行内元素啊。突然转机，发现一个感觉还可以的插件，既能排序，也能保存，开心。立马抛弃了之前的vue.draggable，换上了新的<a href="https://github.com/hilongjw/vue-dragging" target="_blank" rel="noopener">vue-dragging</a>。效果也是棒棒哒～开心！好景不长！当我把这个插件用到同一个页面中的另一个功能相同的组件中时，报错了！这里面一个非常关键的值就是找不到！悲伤的是，这个并不晓得去哪里解决这个问题，而且发现issue里面也有和我类似的问题，，，悲伤，，，好吧，再次回归到vue.draggable，star这么多一定是有的它的道理，而且人家应该也会考虑到这种问题吧。认真看了它的文档，重要的是down下它的demo。好吧，傻的人家有model用来存放他们的顺序。<br><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line"><draggable v-model="myArray" :options="{draggable:'.item'}"></span><br><span class="line"> <div v-for="item in fileArray"></span><br><span class="line"> <img src="item中存放的地址"> </span><br><span class="line"></div></span><br><span class="line"></draggable></span><br></pre></td></tr></table></figure></p><p>其中myArray就是用来存放顺序的数组，options呢暂时还没有发现它的作用。折腾来折腾去又回到了原点。</p><ul><li>学习一个插件最快的方式是它的demo</li><li>插件的话，一定要选择可用性可维护性更强的。</li><li>文档要好好读<h4 id="3-图片的查看"><a href="#3-图片的查看" class="headerlink" title="3.图片的查看"></a>3.图片的查看</h4>直接将图片放入一个对话框，并且通过查看按钮控制对话框的显示与隐藏即可。<figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">// 点击查看图片,注意此时还是利用数组下标来实现</span><br><span class="line">fnClickPreviewPic(index) {</span><br><span class="line"> this.布尔值 = true;</span><br><span class="line"> this.sImgUrl = 图片地址</span><br><span class="line">},</span><br></pre></td></tr></table></figure></li></ul><h4 id="4-删除"><a href="#4-删除" class="headerlink" title="4.删除"></a>4.删除</h4><p>与查看相似利用数组的原生方法即可<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">// 删除图片</span><br><span class="line">fnBsnRemovePic(index) {</span><br><span class="line"> this.fileArray.splice(index, 1);</span><br><span class="line">},</span><br></pre></td></tr></table></figure></p><h4 id="5-类似elementui的遮罩层和按钮的实现"><a href="#5-类似elementui的遮罩层和按钮的实现" class="headerlink" title="5. 类似elementui的遮罩层和按钮的实现"></a>5. 类似elementui的遮罩层和按钮的实现</h4><p><a href="http://blog.acwong.org/2015/03/17/common-picture-hover-effects/" target="_blank" rel="noopener">这个网站还不错，很多hover效果大家都可以好好参考一下</a><br>利用tranform和opacity，比较关键的点就是元素hover之后对其他标签做的效果。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><div class="mask mask1")></span><br><span class="line"> <i class="el-icon-zoom-in"></i></span><br><span class="line"> <i class="el-icon-delete"></i></span><br><span class="line"></div></span><br></pre></td></tr></table></figure></p><p>拖拽并没有单独做一个按钮，因为其实它的效果并不是你点到某个按钮才会去实现这个效果。而是随便点到图片的某个地方即可，因此只是将鼠标的样式改成了move。这样可能会和上面的按钮冲突，因此我们将按钮的点击区域设置为一个固定的很小的地方，在这里面cursor为pointer，而其他地方我们则给他换回move。</p><p>以上步骤都完成之后，看似很完美，但是如果你需要对上传的总数做限制，那么你就happy了，这个limit真的是脑细胞都要死光了。</p><h3 id="2-让我想砸电脑的limit"><a href="#2-让我想砸电脑的limit" class="headerlink" title="2.让我想砸电脑的limit"></a>2.让我想砸电脑的limit</h3><p>elementui里面实现一个这个真的是很简单啊，如果你设置了limit为一个数之后，只要它超过这个数，就是走到on-exceed函数。然而，我们现在弃用了它，只保留了上传的功能，如果只是将它设置为一个固定值，是肯定不行滴。</p><h4 id="think-one"><a href="#think-one" class="headerlink" title="think one"></a>think one</h4><p>因为我们能得到这次上传的值，以及我们已经上传的值，如果它超过这个值，就抛出错误，这样好像很完美，ok，试之。ok，为limit绑定一个值num，并且在初始化时将它的值设置为<code>总长度-已经上传的图片数量</code>,每次上传成功或者删除图片时都去修改这个值。ok，开始时没有问题，可是当我们删除几个再次添加时候函数走到on-exceed。失败～</p><h4 id="think-two"><a href="#think-two" class="headerlink" title="think two"></a>think two</h4><p>不绑变量了，ok，我们直接给他设置成<code>总长度-已经上传的图片数量</code>，并且我打印了这个值，嗯嗯，看起来好像很符合要求，简单试了一下上传多个的，ok，完全没有问题啊，就在我以为问题解决了而窃喜的时候，问题又来了、、、，如果我此时已经上传了4张，限制数量为6张，limit此时为3，而我即使只是上传一张，也没有成功。。。各个环节都没有问题啊，到底是为什么。</p><h4 id="think-three"><a href="#think-three" class="headerlink" title="think three"></a>think three</h4><p>在on-success中直接对fileArray做剪切，只显示其中的前6个，ok，这样确实看起来起到了效果，但是问题是，这些图片已经全部上传成功，对后端服务的压力很大，也并不符合我们设计的初衷。</p><h4 id="think-four"><a href="#think-four" class="headerlink" title="think four"></a>think four</h4><p>before-upload，这个函数是我曾经一度想使用看看的，可以在上传图片之前对图片做处理。如果超出限制，可以避免think three中的问题，然而，这个函数每上传一张都会执行一次，我们可以去维护一个变量监测到底有没有超出limit，但是当我们批量上传的时候，它可能还是存在只是没有超出limit的图片上传成功，而后面的都失败了，这样的用户体验并不好。也许排在后面的才是我们想上传的。</p><h4 id="think-five"><a href="#think-five" class="headerlink" title="think five"></a>think five</h4><p>想来想去，还是要从limit入手。到底为什么删删传传几次之后即使 <code>要上传的数量<limit</code>还是会执行on-exceed函数呢？？？后面查了很多资料，有些不太记得了，elementui的源码中，封装的这个函数的源码,如果<code>files的长度+fileList的长度>limit</code>那么就会执行这个函数。ok算是有点思路了，毕竟知道问题处在哪里，就有一点点儿方向了。</p><p>删除上传的时候，我们并没有对fileList做操作。导致它可能会有一个累加的效果。因此，我们要对这一部分数据做处理。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">limit长度=限制长度 - fileArray的长度 + fileList.length;</span><br></pre></td></tr></table></figure></p><p>这大概是最核心的地方了。虽然只有一行代码。</p><p>自己测试了一下，暂时并没有发现什么问题。</p><h3 id="3-写在最后"><a href="#3-写在最后" class="headerlink" title="3.写在最后"></a>3.写在最后</h3><ul><li>也许当你想修改一个东西的时候，搞清它的原理很重要，毕竟知己知彼方能百战不殆</li><li>要想学一个陌生的东西，demo是个不错的快速上手的方式</li><li>选择是一个很重要的方式，有些东西不必坚持，不必备选，有些需要坚持。看它的star值不值得了。</li><li>不得不说的是，写这个东西真的花费了我很多的时间，确实最后代码量并没有多少，让人觉得你可能有偷懒的成分在里面，但是我并不想因此被别人否定如果它的时间与代码的长度不成正比。因为我真的有认真思考这个东西。</li><li>有些你觉得不可能的事情还是会实现，比如这个东西我真的很想放弃它</li></ul>]]></content>
<tags>
<tag> elementui vue </tag>
</tags>
</entry>
<entry>
<title>前端面试总结————心理（二）</title>
<link href="/2018/03/25/20180325resume2/"/>
<content type="html"><![CDATA[<p><excerpt in="" index="" |="" 首页摘要=""><br>   阶段性总结二<br><a id="more"></a></excerpt></p><p><the rest="" of="" contents="" |="" 余下全文=""><br>这一周早出晚归去了很多地方，从北苑到亦庄，从望京到上地。有好有坏，有偏僻到我可能会生出大晚上怎么回家的担忧，有杂乱到让我觉得这也许不是一个正经的公司。有深夜加班的奋斗者，也有白天喝茶聊天就能轻松完成的工作。每个人的生活节奏都不尽相同。</the></p><p>依然还是会紧张，依然还是会失落，依然会有每次被问到问题不知道如何回答的挫败感，但是也依然在学习着、进步着。每个公司的侧重点不一样，也会被问到app的混合开发模式，编译器的运行原理和代码解析原理，java中的设计模式等等问题。。。有时也会发现在一些开发者眼里，前端做的依然是最简单的事情，依然是个切图仔。也会有人说我没有逻辑，讲话没有重点；说我不够坦诚，顾左右而言他；质疑我是否是统招本科、是否是通过正当途径通过公司的面试而工作。我也曾经因为听到这样的话而感到很失落？但是我真的是这样的么？也许我能展现给每个人的层面并不多，每个人对我的评价也大都不同。我可以认真聆听别人对我的评价，但是我内在真正是一个什么样的人还是要我自己去发现，去探索。我现在的心态依然像大学时一样，单纯而不做作，对未来充满期待，一遇到喜欢的人就叨叨叨的讲个不停，即使你是一个我的面试官决定我能否留在公司胜任工作的身份。</p><p>有人说也许我的性格适合做文职，适合做销售，适合做产品经理，也许以后我会尝试着跨足不同的领域，但是现在的我依然是想做一个前端的妹纸。认真的讲，实习的经历对一个学生来说确实是找工作的加分点，但是对于社会人士那听起来就有那么一些不值一提。实习的时候确实没有接触到很多东西，没有很多项目经验，但是我却体会到了与学校不一样的感觉，走入了不一样的世界，见识到了工作中的辛苦，体会到了什么叫team。你对这个行业有了入门性的认识，你才知道你需要学什么做什么，自己是否适合这个工作。《黑客与画家》中Paul Graham曾经说过是技术改变了这个世界，缩小了人与人之间的差距(大致就是这个意思哈，几年前看的了)。我一直很认同他这个观点，网络开阔了我们的眼界，技术便利了我们的生活。它仍在不断发展，未来我们很难预料。作为一个技术人员，不断学习才能跟上技术的发展，因为未来你也曾为大家做了什么而感到开心。</p><p>依然会好好学英语，自诩英文能力还好，口语和听力一直被诟病，看到全是英文的技术文档，即使能看懂，其实内心还是发怵，大概因为一直以来的模式都是中文。是时候理性的想想自己以后要做什么。可能之前离职是因为一些客观原因，但是好好想想，自己真的一点儿责任都没有么？学会理性的看待周围的人和事，也许才会真的长大。如果真的工作，能否去适应快节奏的生活呢？也许自己学习时候遇到问题，可以一想想很多天，可是工作是有时间限制的呢。哪份工作没有压力，如何转化压力，强大自己，找到工作中的正确方法，才是克服压力的正确方法。</p><p>很多时候面试都会向别人请教一些他们的学习方法，但是还是要找到适合自己的学习方式，才会提升自己的学习效率。也会因为不断发展的技术而感到焦虑，面对层出不穷的框架，不知道如何选择。其实想想还是打好基础吧，东西再变，它很多计算机方面的理念和思想还是大致是那样。摆正自己的心态，学一个框架首先了解它的思想。另外也从来没有人要求你把每个框架都要非常熟练，前端的每个点都要精通。你自己该学什么，自己的心里要有一杆秤啊。认真的试着用自己的专业去做点儿什么，也许能发现自己看书时候不会注意到的点。朋友说的对，好的笔记不是简单的重复，而是遇到问题时的解决方法和思路，项目中不断冒出的新想法。另外，其实能自己解决什么困难你很久的问题，真的是一件很有成就感让人很开心的事情。这些不断累积的点儿也许能让你最近不断受挫的自信提升点儿，找回那个意气风发、时时透露出对生活的热爱的girl啊。</p><p>开心消消乐我大概玩了几年了吧，大概一直处于它更新到哪我就跟到哪的状态，它和我们的生活工作何尝不是一样呢？时而轻松时而艰难，在一定的时间内完成一定的任务。有时候就是差那么一步，有时候被一个关卡到好几天不能动弹，坚持下去，不知道怎么的就幸运的通过了。和妹妹开玩笑的说，要是我的技术能像我玩游戏这样，那是不是很牛B呢～哈哈，小宝贝，继续加油哦，喜欢也不是大多数人想象中那样，是只有舒服没有不舒服的事情。喜欢，就是让您能够心甘情愿地啃下那些不喜欢的东西。而也只有忍受了不喜欢，你才能触及地下更有趣的世界。如果事情还不是你满意的状态，只能说明它还没有到最后啊~</p>]]></content>
<tags>
<tag> 读书笔记 </tag>
</tags>
</entry>
<entry>
<title>Vue.js高仿饿了么外卖App学习笔记(一)</title>
<link href="/2018/03/24/20180324vue1/"/>
<content type="html"><![CDATA[<p><excerpt in="" index="" |="" 首页摘要=""><br> 跟着视频里的老师做东西，一些不知道的知识的总结以及因为版本的问题出现的一些问题的解决。<br><a id="more"></a></excerpt></p><p><the rest="" of="" contents="" |="" 余下全文=""></the></p><h2 id="vue的介绍和安装"><a href="#vue的介绍和安装" class="headerlink" title="vue的介绍和安装"></a>vue的介绍和安装</h2><p><img src="http://image.bubuko.com/info/201801/20180125223609509164.jpg" alt="image"></p><p><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1329011648,3013880242&fm=27&gp=0.jpg" alt="image"></p><p>组件设计原则</p><ul><li>页面上每个独立的可视/可交互区域视为一个组件</li><li>每个组件对应一个工程目录，组件所需要的各种资源在这个目录下就近维护。</li><li>页面不过是组件容器，组件可以嵌套自由组合形成完整的页面。</li></ul><p>单元测试</p><ul><li><a href="http://hao.jobbole.com/karma/" target="_blank" rel="noopener">Karma</a></li><li><a href="https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00147203593334596b366f3fe0b409fbc30ad81a0a91c4a000" target="_blank" rel="noopener">Mocha</a>，JavaScript的一种单元测试框架，既可以在浏览器环境下运行，也可以在Node.js环境下运行。</li></ul><p>e2e测试</p><ul><li><a href="http://blog.csdn.net/panda_m/article/details/66973598?utm_source=itdadao&utm_medium=referral" target="_blank" rel="noopener">http://blog.csdn.net/panda_m/article/details/66973598?utm_source=itdadao&utm_medium=referral</a></li><li>e2e或者端到端（end-to-end）或者UI测试是一种测试方法，它用来测试一个应用从头到尾的流程是否和设计时候所想的一样。简而言之，它从一个用户的角度出发，认为整个系统都是一个黑箱，只有UI会暴露给用户。<h2 id="项目文件介绍"><a href="#项目文件介绍" class="headerlink" title="项目文件介绍"></a>项目文件介绍</h2></li><li>build,webpack配置相关</li><li>node_modules,通过node安装的项目依赖</li><li>src，源码</li><li>static，存放第三方静态资源，.gitkeep的用处是当该目录为空时，也可以将该代码提交到git仓库中。因为git会自动忽略空目录</li><li>babelsrc,babel的配置文件，presets转码规则，stage-2表示草案(ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个)</li><li>editencoding,编辑器的配置</li><li>eslintignore，忽略语法检查的目录文件</li><li>eslintsrc，eslint配置文件，rules用来自己定义部分规则</li><li>gitingore，提交到git时忽略到文件</li><li>postcssrc，postcss预处理器，而这是它的配置文件<h2 id="资源处理"><a href="#资源处理" class="headerlink" title="资源处理"></a>资源处理</h2><h3 id="icomoon"><a href="#icomoon" class="headerlink" title="icomoon"></a>icomoon</h3><a href="https://icomoon.io/app/" target="_blank" rel="noopener">icomoon</a>在线制作图标字体文件。可以随意选择已经存在的或者上传自己的图标生成字体文件。down下来的字体格式有多种，另外，配有demo及使用说明。</li></ul><p>—为什么要使用？</p><p>图片增加了总文件的大小和额外的”http请求”，会大大降低网页的性能。并且不能很好的进行“缩放”，因此，有时候在“响应式设计”中需要使用图像的最好解决方案就是不去使用图片。 </p><ul><li>很容易任意地缩放；</li><li>很容易地改变颜色；</li><li>很容易地产生阴影；</li><li>可以拥有透明效果；</li><li>一般来说，有先进的浏览器支持；</li><li>可以使用CSS来装饰（可以得到CSS很好支持）；</li><li>可以快速转化形态（做出一些变化，如 :hover等）；</li><li>可以做出跟图片一样可以做的事情（改变透明度、旋转度，等）；</li><li>本身体积更小，但携带的信息并没有削减。<h3 id="jsonview"><a href="#jsonview" class="headerlink" title="jsonview"></a>jsonview</h3>链接:<a href="https://pan.baidu.com/s/1OeWq9aDDxZDg2_9RqDQa6Q" target="_blank" rel="noopener">https://pan.baidu.com/s/1OeWq9aDDxZDg2_9RqDQa6Q</a> 密码:zy71</li></ul><p>可以将json数据格式化显示。更多工具–扩展程序，直接拖入即可。</p><h2 id="mock数据"><a href="#mock数据" class="headerlink" title="mock数据"></a>mock数据</h2><p>新版dev-client与dev-server不见的问题。</p><p>参考网址:<a href="https://www.xiuyuan.info/?p=230#comment-194" target="_blank" rel="noopener">https://www.xiuyuan.info/?p=230#comment-194</a></p><h2 id="样式重置"><a href="#样式重置" class="headerlink" title="样式重置"></a>样式重置</h2><p><a href="https://cssreset.com/" target="_blank" rel="noopener">cssreset</a>里面有很多种css样式重置的代码，可以选择其中一种，但是要注册，另外，我自己这边访问的时候挺慢的。其实网上也有很多将官网代码展示出来的，so我们就可以不用费事去注册了。比如<a href="https://meyerweb.com/eric/tools/css/reset/" target="_blank" rel="noopener">这个</a>，<a href="https://blog.csdn.net/liu857279611/article/details/52195906" target="_blank" rel="noopener">这个</a></p><h2 id="eslint"><a href="#eslint" class="headerlink" title="eslint"></a>eslint</h2><ul><li>semi,多余的分号错误</li><li>indent，缩进错误</li><li>no-multiple-empty-lines,空行太多，最多只允许有一行。</li><li>key-spacing,意思就是说属性的键后面跟的值要在紧挨着属性的冒号后再空一个格。</li><li>/<em> eslint-disable no-new </em>/在js里面，new 一个对象，需要赋值给某个值（变量），用Vue实例化的时候，不需要赋值给值（变量），所以要单独给配一条规则，给new Vue这行代码上面加这个注释，把这行代码规则的校验跳过，通过eslint-disable。eslint的常用技巧之一。如果我们去掉这个注释的话，会报这样的错误。<code>message: 'Do not use 'new' for side effects. (no-new)'</code><h2 id="vue模板设置"><a href="#vue模板设置" class="headerlink" title="vue模板设置"></a>vue模板设置</h2>参考网址:<a href="https://www.cnblogs.com/fayin/p/7910518.html" target="_blank" rel="noopener">https://www.cnblogs.com/fayin/p/7910518.html</a><br>mac下的话是code——首选项——用户代码片段——输入vue，会有vue.json与vue-html.json，这两个文件的话，要在vue.json里面进行设置。设置成功后，输入vue，enter即可。<h2 id="postcss"><a href="#postcss" class="headerlink" title="postcss"></a>postcss</h2>官方网站: <a href="http://postcss.org" target="_blank" rel="noopener">http://postcss.org</a><br>在安装vue的时候就已经将其安装好。它可以自动帮我们处理一些css兼容性的问题。<h2 id="错误"><a href="#错误" class="headerlink" title="错误"></a>错误</h2></li><li><a href="https://www.cnblogs.com/qingqingzou-143/p/7068514.html" target="_blank" rel="noopener">Do not use built-in or reserved HTML elements as id:header</a> 意思是说vue的组件命名不能与html5重复。另外那些不合法的、vue保留的也不能用作组件名。</li><li>错误如下:问题是我们使用less作为css预处理器，并将style的lang设置为less。但是此时没有加载node模块中的less-loader，因此，编译器不能识别less的语言。问题中讲的很清楚，npm install less-loader –save即可。<figure class="highlight plain"><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">This dependency was not found:</span><br><span class="line"></span><br><span class="line">* !!vue-style-loader!css-loader?{"sourceMap":true}!../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v</span><br><span class="line">-7ba5bd90","scoped":false,"hasInlineConfig":false}!less-loader?{"sourceMap":true}!../node_modules/vue-loader/lib/selector?type=</span><br><span class="line">styles&index=0!./App.vue in ./src/App.vue</span><br><span class="line"></span><br><span class="line">To install it, you can run: npm install --save !!vue-style-loader!css-loader?{"sourceMap":true}!../node_modules/vue-loader/lib/</span><br><span class="line">style-compiler/index?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!less-loader?{"sourceMap":true}!</span><br><span class="line">../node_modules/vue-loader/lib/selector?type=styles&index=0!./App.vue</span><br><span class="line">+</span><br></pre></td></tr></table></figure></li></ul>]]></content>
<tags>
<tag> vue </tag>
</tags>
</entry>
<entry>
<title>这两天做简历时遇到的问题及解决方案</title>
<link href="/2018/03/13/180313resume1/"/>
<content type="html"><![CDATA[<p><excerpt in="" index="" |="" 首页摘要=""><br> 作为一名前端开发工程师，大概只有多些网页之后才会有成长。在经过屡屡失败的面试后，我决定接收大家的建议，不光是在学习，另外多多的动手去做，沉寂了很多年的网页版简历，看来不久就要重见天日了。不过截止到这篇文章之时，我只是利用了html+css+jquery+插件做了简单的本地预览，接下来将进行改版工作，将朋友对我的建议用上，在学习vue的同时使用它重构我的代码和框架<br><a id="more"></a></excerpt></p><p><the rest="" of="" contents="" |="" 余下全文=""></the></p><h3 id="1-font-awsesome"><a href="#1-font-awsesome" class="headerlink" title="1.font-awsesome"></a>1.font-awsesome</h3><p>1.图标不显示</p><p>在4版本及以上的时候，引入内容要加上”fa”</p><p>2.ul不居中，有多余的margin<br>font-awesome本身有一个多余的margin-left值，将其设置为0，即可居中，多余的空间也去掉了。</p><p>3.图标与后面的文字格式混乱</p><p>其自身的li有一个position:absolute,并且设置了left值，将position设置为static即可。</p><h3 id="2-fullpage"><a href="#2-fullpage" class="headerlink" title="2.fullpage"></a>2.fullpage</h3><p>1.在设置全屏之后并没有滚动效果出现</p><p>官方文档中的section是一定要入div的class中去的，最外层的fullpage的命名就随便了，只要把下面的script中改成对应的就可以了</p><p>2.fullpage成功之后原本的样式下移，样式混乱</p><p>至今不知道原因是什么，只是给第一个加上了一个负的margin-top值，恢复原状。不知道具体产生的原因是什么，我想应该还有更好的解决方案，因为实际中并不喜欢过多的使用负值去实现布局。</p><h3 id="3-ps"><a href="#3-ps" class="headerlink" title="3. ps"></a>3. ps</h3><p>1.文字无法修改</p><p>注意文字的修改是要从psd文件上去改哦，而不是有个t的右边的字，那个只是这个文件的名字，另外，t可能右下角有个感叹号，注意这是因为你的ps不支持那种字体，可以双击后进行自主替换，然后再修改文字内容。</p><p>经过一天的研究，上网查找也没有什么收获，倒是偶尔在浏览器里调试，突然发现fullpage有一个class名为fp-tableCell的div，它的display为table-cell，去掉它(也就是将它的display设置为原本的block)就可以解决这个问题啦。</p><h3 id="4-css优先级"><a href="#4-css优先级" class="headerlink" title="4.css优先级"></a>4.css优先级</h3><p>1.*{}中的text-align影响到后面的ul，即使ul设置了text-align:left也不管用，即使设置了内部样式，也不管用，不知道是为什么</p><p>算了，暂时先不偷懒，先把*中的text-align去掉，每一个自己单独写一个好了。</p><h3 id="5-vue-devtools的安装"><a href="#5-vue-devtools的安装" class="headerlink" title="5.vue-devtools的安装"></a>5.vue-devtools的安装</h3><p>1.后面安装时候出现错误：无法加载背景脚本”build/background.js”是因为之前的npm run build 失败。</p><p>2.npm run build 一直失败<br>求你如果网速太慢请设置为淘宝镜像，另外，网上很多这的上一步直接是npm install，github也是这样写的，但是我自己实践的时候是npm install cross-env –save最后后面build才成功。可能这之间会报很多错误，不用太在一。另外可以在json文件里看到build 的含义，所以直接进入vue-devtools 的文件夹即可，不用再往里走</p><p>3.安装的时候，是在右上角的更多工具->扩展程序->勾选开发者模式->加载已解压的扩展程序即可自动安装</p><p>4.安装成功后，再打开chrome浏览器可以在右上角看到一饿vue的标记。再打开vue程序的时候，就可以在审查元素时候，对vue代码进行调试了。</p><h3 id="6-filter-alpha-opacity-30"><a href="#6-filter-alpha-opacity-30" class="headerlink" title="6.filter: alpha(opacity=30);"></a>6.filter: alpha(opacity=30);</h3><p>IE8 以及更早的版本支持替代的filter属性，与现在经常写的div{opacity=0.3;}等价</p><h3 id="7-ms-interpolation-mode"><a href="#7-ms-interpolation-mode" class="headerlink" title="7.-ms-interpolation-mode"></a>7.-ms-interpolation-mode</h3><p>思考网址：<a href="https://msdn.microsoft.com/en-us/library/ff521095" target="_blank" rel="noopener">https://msdn.microsoft.com/en-us/library/ff521095</a></p><p>ie8的私有属性，有时候如果图片缩放，可能使图片失真，在ie7,ie8有专有的属性去处理这样的问题。</p><p>两个可选属性：bicubic(表示以高质量显示图片)|nearest neighbor(以兼容性出现)</p><h3 id="8-IE下的filter属性、滤镜"><a href="#8-IE下的filter属性、滤镜" class="headerlink" title="8.IE下的filter属性、滤镜"></a>8.IE下的filter属性、滤镜</h3><figure class="highlight plain"><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">flx.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(' +</span><br><span class="line"> 'opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=' +</span><br><span class="line"> (img.height * .25) + ')';</span><br></pre></td></tr></table></figure><p>filter:alpha（允许您设置元素的透明度）<br>语法：<br>filter:alpha(opacity=20,finishopacity=100,style=1,startx=0,starty=0,finishx=140,finishy=270)</p><ul><li>opacity 属性定义整个元素的透明值，选值0-100，0是完全透明，100是不透明。</li><li>finishopacity用来设置结束时的透明度，以达到渐变效果。取值范围也是0-100。</li><li>style指渐变类型，0是无变化，1是线行渐变，2是放射渐变，3是X型渐变。</li><li>StartX和StartY是渐变效果开始坐标（代表渐变效果开始的X与Y坐标）</li><li>FinishX与FinishY是渐变效果结束坐标（代表渐变效果结束时的横纵坐标了）</li><li><a href="https://zhidao.baidu.com/question/321042077.html" target="_blank" rel="noopener">https://zhidao.baidu.com/question/321042077.html</a></li><li><a href="http://blog.csdn.net/yangzhihello/article/details/23851369" target="_blank" rel="noopener">http://blog.csdn.net/yangzhihello/article/details/23851369</a></li><li><a href="https://segmentfault.com/a/1190000002433305" target="_blank" rel="noopener">https://segmentfault.com/a/1190000002433305</a><h3 id="9-字体设置"><a href="#9-字体设置" class="headerlink" title="9.字体设置"></a>9.字体设置</h3>在看别人写的demo的源码时发现这样一段代码，不是很明白它想表达的意思。后查阅各种资料找到解释的比较我能接受的。<a href="https://www.cnblogs.com/design-engineer/p/5382051.html" target="_blank" rel="noopener">https://www.cnblogs.com/design-engineer/p/5382051.html</a> <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">html {</span><br><span class="line"> font-size: 62.5%;</span><br><span class="line">}</span><br><span class="line">body{</span><br><span class="line"> font-size:1.6rem;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ul><p>浏览器默认字体大小为16px，设置根元素html的字体大小为62.5%是为了方便我们日后对字体大小进行计算——10px。后面的body的1.6rem因为rem就是相对与根元素root嘛进行计算的，也理所当然的为1.6*10=16px咯。但是理论上是这样，它这样写不会多此一举么，人家浏览器默认就是16px呀？</p><h4 id="em"><a href="#em" class="headerlink" title="em"></a>em</h4><ul><li>值并不是固定的</li><li>继承父级元素的字体大小。<h4 id="px"><a href="#px" class="headerlink" title="px"></a>px</h4></li><li>精确，但是浏览器大小改变后布局可能会乱掉</li><li>IE无法调整那些使用px作为单位的字体大小</li><li>国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位</li><li>Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。<h4 id="重点⚠️"><a href="#重点⚠️" class="headerlink" title="重点⚠️"></a>重点⚠️</h4></li><li>rem是CSS3新引进来的一个度量单位，支持的浏览器：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。</li><li>不过使用单位设置字体，可不能完全不考虑IE了，如果你想使用这个REM，但也想兼容IE下的效果，你可考虑“px”和“rem”一起使用，用”px”来实现IE6-8下的效果，然后使用“Rem”来实现代浏览器的效果<h3 id="10-google字体"><a href="#10-google字体" class="headerlink" title="10 google字体"></a>10 google字体</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><link href='https://fonts.googleapis.com/css?family=Playfair+Display:700,900|Fira+Sans:400,400italic' rel='stylesheet' type='text/css'></span><br></pre></td></tr></table></figure></li></ul><p>参考网址:<a href="https://www.cnblogs.com/haogj/p/5483579.html" target="_blank" rel="noopener">https://www.cnblogs.com/haogj/p/5483579.html</a></p><p>这个网站详细说明了google fonts的使用方法，原来上面的代码就是这样生成的。另外font-family的值看起来就是取得link中的family。</p><p>下面这个是stackoverflow上对google fonts的一些简单说明。<br><a href="https://stackoverflow.com/tags/google-webfonts/info" target="_blank" rel="noopener">https://stackoverflow.com/tags/google-webfonts/info</a></p><p>之前因为google在国内无法访问的原因，google fonts也失效，查阅资料时，在这之后大家曾经使用过国内镜像如<a href="http://libs.useso.com" target="_blank" rel="noopener">360网站卫士常用前端公共库CDN服务</a>，但是截止我到我写这篇文章的时候，360已经发布公告该库停止运行。</p><p>知乎 <a href="https://www.zhihu.com/question/24955477" target="_blank" rel="noopener">https://www.zhihu.com/question/24955477</a><br>好在现在知乎上的大神说google fonts(地址:<a href="http://fonts.googleapis.com)已经可以访问，我刚刚自己ping的时候确实是通的。不过我直接访问的时候显示404，不过翻了下有人遇到同样的问题，说地址后面要加上有效的资源才有效。" target="_blank" rel="noopener">http://fonts.googleapis.com)已经可以访问，我刚刚自己ping的时候确实是通的。不过我直接访问的时候显示404，不过翻了下有人遇到同样的问题，说地址后面要加上有效的资源才有效。</a></p><h3 id="11-modernizr-js"><a href="#11-modernizr-js" class="headerlink" title="11.modernizr.js"></a>11.modernizr.js</h3><p><a href="https://modernizr.com" target="_blank" rel="noopener">官网</a></p><p><a href="http://modernizr.cn" target="_blank" rel="noopener">中文官网</a></p><p>它是一个 JavaScript 库，用于检测用户浏览器的 HTML5 与 CSS3 特性。使我们可以方便地为各种情况编写 JavaScript 和CSS，无论浏览器是否支持这些特性。这是处理渐进增强和优雅降级的完美方案。</p><p>Modernizr 会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，同时会在html元素上添加一批CSS的class名称，这些class名称标记当前浏览器支持哪些特性和不支持哪些特性，支持的特性就直接显示该天特性的名称作为一个class（例如:canvas,websockets），不支持的特性显示的class是“no-特性名称”（例如：no-flexbox）。</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><html lang="en" class="no-js"></span><br></pre></td></tr></table></figure><p>原来后面的no-js就是因为引入了这个库，以免浏览器禁用JavaScript。</p><h3 id="12-transition"><a href="#12-transition" class="headerlink" title="12.transition"></a>12.transition</h3><p>复习一下，transition这个东西每次看到它心里都怕怕的。觉得很复杂很高端的。一次次都记不住<br>transition:property|duration|transition-timing-function|transition-delay</p><ul><li>property:动画的名字，养兵千里用兵一时嘛，到时候一喊这个名字，它就来了</li><li>transition-duration，持续时间</li><li>transition-timing-function,旋转曲线</li><li>transition-delay，延迟时间</li><li>transition:width 5s linear 2s;//width，你2s之后用5s的时间直线跑到这里<h3 id="13-和"><a href="#13-和" class="headerlink" title="13.::和:"></a>13.::和:</h3>css3为了区分伪类和伪元素，伪元素采用双冒号写法。</li></ul><p>常见伪类——:hover,:link,:active,:target,:not(),:focus。</p><p>常见伪元素——::first-letter,::first-line,::before,::after,::selection。</p><p>伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。</p><p>伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。</p><p><div align="center"><img src="http://cdn.alloyteam.com/wp-content/uploads/2016/05/伪类.png" alt="image"></div></p><h3 id="14-pointer-events"><a href="#14-pointer-events" class="headerlink" title="14.pointer-events"></a>14.pointer-events</h3><p>参考网址：<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events" target="_blank" rel="noopener">https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events</a></p><p>属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。大部分的属性值都是适用于svg</p><p>⚠️使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永远不会触发。如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标，那么指向该元素的任何事件在事件传播过程中都将通过父元素，并以适当的方式触发其上的事件侦听器。当然，位于父元素但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获（鼠标活动将会穿过父元素而指向位于其下面的元素）。</p>]]></content>
<tags>
<tag> js html css </tag>
</tags>
</entry>
<entry>
<title>前端工程师面试第三弹--浮动</title>
<link href="/2018/03/06/20180316float/"/>
<content type="html"><![CDATA[<p><excerpt in="" index="" |="" 首页摘要=""><br>   最近因为面试的原因，梳理了很多之前都没有好好研究的东西。但是🙅的是每次还是能被问到各种各样我不会的问题，大概真的是学艺不精。确实每个人都有不懂的地方，但是这种老生常谈的问题，不应该成为你走的更高站的更远的绊脚石。大概会写好几篇相关的文章。<br><a id="more"></a></excerpt></p><p><the rest="" of="" contents="" |="" 余下全文=""></the></p><h2 id="浮动作用及如何清除浮动"><a href="#浮动作用及如何清除浮动" class="headerlink" title="浮动作用及如何清除浮动"></a>浮动作用及如何清除浮动</h2><p>参考网址： <a href="http://blog.csdn.net/FE_dev/article/details/68954481" target="_blank" rel="noopener">http://blog.csdn.net/FE_dev/article/details/68954481</a> 这篇文章写的真是太棒了。</p><p>参考网址： <a href="https://www.jianshu.com/p/09bd5873bed4" target="_blank" rel="noopener">https://www.jianshu.com/p/09bd5873bed4</a></p><h3 id="1-浮动"><a href="#1-浮动" class="headerlink" title="1.浮动"></a>1.浮动</h3><p>浮动元素可以脱离文档流并向左或者向右浮动，直至遇到父元素或者另一个浮动元素。</p><ul><li>脱离文档</li><li>内联排列</li><li>父元素坍塌(高度为0)<figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">### css</span><br><span class="line">.box-wrapper {</span><br><span class="line"> border: 5px solid red;</span><br><span class="line"> background-color: yellow;</span><br><span class="line">}</span><br><span class="line">.box-wrapper .box {</span><br><span class="line"> float: left; </span><br><span class="line"> width: 100px; </span><br><span class="line"> height: 100px; </span><br><span class="line"> margin: 20px; </span><br><span class="line"> background-color: green;</span><br><span class="line">}</span><br><span class="line">### html</span><br><span class="line"><div class="box-wrapper"></span><br><span class="line"> <div class="box"></div></span><br><span class="line"> <div class="box"></div></span><br><span class="line"> <div class="box"></div></span><br><span class="line"></div></span><br></pre></td></tr></table></figure></li></ul><p>此时由于子元素脱离了文档流，导致父元素未被撑开，所以此时的背景颜色并未显示，而我们只能看到边框单独的在浏览器上方。当然此时我们并没有设置height，而是让子元素自动撑开，如果你设置了高度的话，父元素可利用本身的高度将元素包裹进去。</p><h3 id="2-清除浮动"><a href="#2-清除浮动" class="headerlink" title="2.清除浮动"></a>2.清除浮动</h3><ul><li>clear<br>可以在div嵌套的最后一层加一个div并设置clear:both即可清除浮动</li><li>clearfix</li><li>bfc<h3 id="3-浮动应用场景"><a href="#3-浮动应用场景" class="headerlink" title="3.浮动应用场景"></a>3.浮动应用场景</h3></li><li>导航条</li><li>文字环绕效果</li><li>自适应多列布局。比如下面的左侧固定宽度，右侧自适应<figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">### css</span><br><span class="line">.left{</span><br><span class="line"> width: 200px;</span><br><span class="line"> height: 400px;</span><br><span class="line"> background-color: red;</span><br><span class="line"> float: left;</span><br><span class="line">}</span><br><span class="line">.right{</span><br><span class="line"> height: 400px;</span><br><span class="line"> background-color: yellow;</span><br><span class="line">}</span><br><span class="line">### html</span><br><span class="line"><div></span><br><span class="line"> <div class="left">左页面</div></span><br><span class="line"> <div class="right">右页面</div></span><br><span class="line"></div></span><br></pre></td></tr></table></figure></li></ul><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">参考网址: http://www.nenew.net/use-clearfix-to-clear-float-on-element.html</span><br><span class="line"></span><br><span class="line">构成Block Formatting Context的方法有下面几种： </span><br><span class="line"> </span><br><span class="line"> float的值不为none。 </span><br><span class="line"> overflow的值不为visible。 </span><br><span class="line"> display的值为table-cell, table-caption, inline-block中的任何一个。 </span><br><span class="line"> position的值不为relative和static。 </span><br><span class="line"> </span><br><span class="line">很明显，float和position不合适我们的需求。那只能从overflow或者display中选取一个。</span><br><span class="line">因为是应用了.clearfix和.menu的菜单极有可能是多级的，所以overflow: hidden或overflow: auto也不满足需求</span><br><span class="line">（会把下拉的菜单隐藏掉或者出滚动条），那么只能从display下手。 </span><br><span class="line"> </span><br><span class="line">我们可以将.clearfix的display值设为table-cell, table-caption, inline-block中的任何一个</span><br><span class="line">但是display: inline-block会产生多余空白，所以也排除掉。</span><br><span class="line">剩下的只有table-cell, table-caption，为了保证兼容可以用display: table来使.clearfix形成一个Block Formatting Context</span><br><span class="line">因为display: table会产生一些匿名盒子，这些匿名盒子的其中一个（display值为table-cell）会形成Block Formatting Context。</span><br><span class="line">这样我们新的.clearfix就会闭合内部元素的浮动。</span><br></pre></td></tr></table></figure>]]></content>
<tags>
<tag> html css </tag>
</tags>
</entry>
<entry>
<title>前端工程师面试第二弹——布局</title>
<link href="/2018/03/03/20180303/"/>
<content type="html"><![CDATA[<p><excerpt in="" index="" |="" 首页摘要=""><br> 曾经的面试中，布局都是问的比较多的，不过最近面试的几个公司，涉及到的都是js的问题相对多一些，我想大概是因为，最近框架用的越来越多，js的基础也就越来越重要，可能如果js水平欠缺的话，很难去掌握好一门框架，也就很难适应最近的前端开发工作。<br><a id="more"></a></excerpt></p><p><the rest="" of="" contents="" |="" 余下全文=""></the></p><h2 id="一栏固定，一栏自适应"><a href="#一栏固定，一栏自适应" class="headerlink" title="一栏固定，一栏自适应"></a>一栏固定，一栏自适应</h2><h3 id="1-float"><a href="#1-float" class="headerlink" title="1.float"></a>1.float</h3><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">### css</span><br><span class="line">*{</span><br><span class="line"> margin: 0;</span><br><span class="line"> padding: 0;</span><br><span class="line">}</span><br><span class="line">.left{</span><br><span class="line"> background-color: yellow;</span><br><span class="line"> float: left;</span><br><span class="line"> width: 300px;</span><br><span class="line"> height: 300px;</span><br><span class="line">}</span><br><span class="line">.right{</span><br><span class="line"> margin-left: 300px;</span><br><span class="line"> background-color: red;</span><br><span class="line"> height: 300px;</span><br><span class="line">}</span><br><span class="line">### html</span><br><span class="line"><div></span><br><span class="line"> <div class="left">左边部分</div></span><br><span class="line"> <div class="right">右边部分</div></span><br><span class="line"></div></span><br></pre></td></tr></table></figure><h3 id="2-flex布局"><a href="#2-flex布局" class="headerlink" title="2.flex布局"></a>2.flex布局</h3><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">### css</span><br><span class="line">*{</span><br><span class="line"> margin: 0;</span><br><span class="line"> padding: 0;</span><br><span class="line">}</span><br><span class="line">.all{</span><br><span class="line"> width: 100%;</span><br><span class="line"> height: 100px;</span><br><span class="line"> display: flex;</span><br><span class="line"> //下面的内容可以看实际情况添加，在不加的情况下已经可以实现</span><br><span class="line"> flex-direction: row;//主轴方向，即项目的排列方向</span><br><span class="line"> align-items: center;//交叉轴上如何对齐</span><br><span class="line"> border: 1px solid #c3c3c3;</span><br><span class="line">}</span><br><span class="line">.left {</span><br><span class="line"> flex-basis: 100px;//分配剩余空间前这个项目占据的大小，比如我们要求左边固定宽度为100px，所以此时的flex-basis为100px</span><br><span class="line"> -webkit-flex-basis: 100px; /* Safari 6.1+ */</span><br><span class="line"> background-color: red;</span><br><span class="line"> height: 100%;//这个也可以暂时不写</span><br><span class="line">}</span><br><span class="line">.right {</span><br><span class="line"> background-color: blue;</span><br><span class="line"> height: 100%;//这个可以暂时不写</span><br><span class="line"> flex-grow: 1;//项目的放大比例，因为是1，而且只有它自己，所以这个项目会独占剩余空间</span><br><span class="line">}</span><br><span class="line">### html</span><br><span class="line"><div class="all"></span><br><span class="line"> <div class="left">左边部分</div></span><br><span class="line"> <div class="right">右边部分</div></span><br><span class="line"></div></span><br></pre></td></tr></table></figure><h2 id="三栏布局-这个好像看了某个网站挺多的，但是忘记贴链接了，，，"><a href="#三栏布局-这个好像看了某个网站挺多的，但是忘记贴链接了，，，" class="headerlink" title="## 三栏布局(这个好像看了某个网站挺多的，但是忘记贴链接了，，，)"></a>## 三栏布局(这个好像看了某个网站挺多的，但是忘记贴链接了，，，)</h2><h3 id="1-float-margin"><a href="#1-float-margin" class="headerlink" title="1.float+margin"></a>1.float+margin</h3><p>使用左右两栏使用float属性，中间栏使用margin属性进行撑开。⚠️midlle是放在div中的最后的，而不是中间位置。<br><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">### CSS</span><br><span class="line">.left{</span><br><span class="line"> height: 600px;</span><br><span class="line"> width: 300px;</span><br><span class="line"> background-color: red;</span><br><span class="line"> float: left;</span><br><span class="line"> text-align: center;</span><br><span class="line"> line-height: 600px;</span><br><span class="line"> color: #fff;</span><br><span class="line">}</span><br><span class="line">.right{</span><br><span class="line"> width: 300px;</span><br><span class="line"> height: 600px;</span><br><span class="line"> background-color: yellow;</span><br><span class="line"> float: right;</span><br><span class="line"> line-height: 600px;</span><br><span class="line"> text-align: center;</span><br><span class="line"> color: #eee;</span><br><span class="line">}</span><br><span class="line">.middle{</span><br><span class="line"> margin-left: 330px;</span><br><span class="line"> margin-right: 330px;</span><br><span class="line"> background-color: green;</span><br><span class="line"> line-height: 600px;</span><br><span class="line"> text-align: center;</span><br><span class="line"> color: #eee;</span><br><span class="line">}</span><br><span class="line">### HTML</span><br><span class="line"><div></span><br><span class="line"> <div class="left">左边部分</div></span><br><span class="line"> <div class="right">右边部分</div></span><br><span class="line"> <div class="middle">中间部分</div></span><br><span class="line"></div></span><br></pre></td></tr></table></figure></p><ul><li>优点：我觉得是容易理解吧，很容易从两栏布局联想到这边的三栏布局。</li><li><p>缺点：1. 当浏览器宽度慢慢减小时，中间宽度也在慢慢减小直到减为0，当浏览器宽度小于左右两边宽度之和时，右侧栏会被挤下去；2. html的结构不正确</p><h3 id="2-position-margin"><a href="#2-position-margin" class="headerlink" title="2.position+margin"></a>2.position+margin</h3><p>使用position定位实现，即左右两栏使用position进行定位，中间栏使用margin进行定位</p><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">### css</span><br><span class="line">.left{</span><br><span class="line"> height: 600px;</span><br><span class="line"> width: 300px;</span><br><span class="line"> background-color: red;</span><br><span class="line"> position: absolute;</span><br><span class="line"> /*top: 0;*/</span><br><span class="line"> /*left: 0;*/</span><br><span class="line"> text-align: center;</span><br><span class="line"> line-height: 600px;</span><br><span class="line"> color: #fff;</span><br><span class="line">}</span><br><span class="line">.middle{</span><br><span class="line"> margin: 0 330px;</span><br><span class="line"> background-color: green;</span><br><span class="line"> line-height: 600px;</span><br><span class="line"> text-align: center;</span><br><span class="line"> color: #eee;</span><br><span class="line">}</span><br><span class="line">.right{</span><br><span class="line"> width: 300px;</span><br><span class="line"> height: 600px;</span><br><span class="line"> background-color: yellow;</span><br><span class="line"> position: absolute;</span><br><span class="line"> /*top: 0;</span><br><span class="line"> right: 0;*/</span><br><span class="line"> line-height: 600px;</span><br><span class="line"> text-align: center;</span><br><span class="line"> color: #eee;</span><br><span class="line">}</span><br><span class="line">### html</span><br><span class="line"><div></span><br><span class="line"> <div class="left">左边部分</div></span><br><span class="line"> <div class="middle">中间部分</div></span><br><span class="line"> <div class="right">右边部分</div></span><br><span class="line"></div></span><br></pre></td></tr></table></figure></li><li><p>优点：html结构正常</p></li><li>缺点：当父元素有内外边距时，会导致中间栏的位置出现偏差</li><li>其中左边部分的left和top值只不过是为了去掉左边和上边的空白部分，但是右边的top值不设置的话，右边部分会处在左边部分和中间部分的下面的文档流中，如果不设置right为0的话，那么它会覆盖左边部分。</li><li><p>另外我们可以通过设置top值来使他们三个都在同一条水平线上。</p><h3 id="3-flex布局"><a href="#3-flex布局" class="headerlink" title="3.flex布局"></a>3.flex布局</h3><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">### css</span><br><span class="line">.all{</span><br><span class="line"> display: flex;</span><br><span class="line">}</span><br><span class="line">.left{</span><br><span class="line"> height: 600px;</span><br><span class="line"> width: 300px;</span><br><span class="line"> background-color: red;</span><br><span class="line"> text-align: center;</span><br><span class="line"> line-height: 600px;</span><br><span class="line"> color: #fff;</span><br><span class="line">}</span><br><span class="line">.middle{</span><br><span class="line"> width: 100%;</span><br><span class="line"> background-color: green;</span><br><span class="line"> line-height: 600px;</span><br><span class="line"> text-align: center;</span><br><span class="line"> color: #eee;</span><br><span class="line">}</span><br><span class="line">.right{</span><br><span class="line"> width: 300px;</span><br><span class="line"> height: 600px;</span><br><span class="line"> background-color: yellow;</span><br><span class="line"> line-height: 600px;</span><br><span class="line"> text-align: center;</span><br><span class="line"> color: #eee;</span><br><span class="line">}</span><br><span class="line">### html</span><br><span class="line"><div class="all"></span><br><span class="line"> <div class="left">左边部分</div></span><br><span class="line"> <div class="middle">中间部分中间部分中间部分</div></span><br><span class="line"> <div class="right">右边部分</div></span><br><span class="line"></div></span><br></pre></td></tr></table></figure></li><li><p>除了兼容性，一般没有太大的缺陷</p></li><li>其中midlle部分的100%的作用是让其铺满除开左右部分的剩余部分宽度，但是如果不设置这个宽度的话，那么中间部分的宽度为内容能撑开的宽度。</li><li><p>我们可以根据需要再设置其他边距之类的样式。</p><h3 id="4-圣杯布局-float"><a href="#4-圣杯布局-float" class="headerlink" title="4.圣杯布局+float"></a>4.圣杯布局+float</h3><p>将middle的宽度设置为100%，然后将其float设置为left，其中的main块设置margin属性，然后左边栏设置float为left，之后设置margin为-100%，右栏也设置为float：left，之后margin-left为自身大小。</p><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">### css</span><br><span class="line">.all{</span><br><span class="line"> overflow: hidden; //清除浮动</span><br><span class="line">}</span><br><span class="line">.middle{</span><br><span class="line"> width: 100%;</span><br><span class="line"> float: left;</span><br><span class="line">}</span><br><span class="line">.middle .main{</span><br><span class="line"> margin: 0 220px;</span><br><span class="line"> height: 300px;//此处设置高度可以使三个平齐</span><br><span class="line"> background-color: red;</span><br><span class="line">}</span><br><span class="line">.left{</span><br><span class="line"> width: 200px;</span><br><span class="line"> height: 300px;</span><br><span class="line"> float: left;</span><br><span class="line"> background-color: green;</span><br><span class="line"> margin-left: -100%;</span><br><span class="line">}</span><br><span class="line">.right{</span><br><span class="line"> width: 200px;</span><br><span class="line"> height: 300px;</span><br><span class="line"> float: left;</span><br><span class="line"> background-color: yellow;</span><br><span class="line"> margin-left: -200px;</span><br><span class="line">}</span><br><span class="line">### html</span><br><span class="line"><div class="all"></span><br><span class="line"> <div class="middle"><div class="main">中间部分</div></div></span><br><span class="line"> <div class="left">左边部分</div></span><br><span class="line"> <div class="right">右边部分</div></span><br><span class="line"></div></span><br></pre></td></tr></table></figure></li><li><p>缺点：1. 结构不正确 2. 多了一层标签</p></li></ul>]]></content>
<tags>
<tag> css html </tag>
</tags>
</entry>
<entry>
<title>一个程序媛的心路历程</title>
<link href="/2018/03/03/0303get/"/>
<content type="html"><![CDATA[<hr><p><excerpt in="" index="" |="" 首页摘要=""><br>   一个执着的一心想要成为前端工程师的girl在其成长道路上的心路历程<br><a id="more"></a></excerpt></p><p><the rest="" of="" contents="" |="" 余下全文=""><br>2013年入学，第一次在大学课程中接触到了网页设计相关的知识，ps算是有了一个入门。当时还是最基本的使用txt文本制作网页，做出来的都是最基本的内容。</the></p><p>2014年大二，偶然的机会和同学一起进入老师的实验室，会用到一些网页的知识，自己回到寝室后翻看了大一那本没有怎么翻过的《网页制作》，听室友讲起现在html5已经出来了，再看看手中的大概10或者11年的教材，心中变得很迷茫。后面老师没有找过我，这件事情也因此不了了之。</p><p>2015年大二下学期，数据库老师布置了期末的课程设计，由几个同学组队完成一个项目，我和一个同学负责的是前台页面的设计，对于数据库、后台、前端的代码没有去了解过一点点儿。。。</p><p>2015年大三上学期，自告奋勇的向辅导员请求接手学校学生处那边网站制作的工作，面对陌生的CMS，不知道如何去操作，陌生的代码，不知道该如何修改，得知一个曾经的同学也在那里，已经能熟练运用，厚着脸皮向他请教了很多次，也许每个人都有自己的事情，别人能帮你那是你们之前的情谊，不是本分。面对大神的冷屁股，内心还是有一点儿不是滋味。期间也有请教过另一位通过同学介绍认识的前端方向的人，对于他所提到的div和span，一脸疑惑和不解。</p><p>2016年上学期，大家都开始找实习工作了，我内心一阵焦虑，这个时候真的不知道自己能做什么，真的是广撒网，新媒体运营，测试，运维，前端，，，，在一遍遍的分析和比对之后，觉得嗯前端好像更简单一些，当时只是单纯的想，不就是html+css+js么，在图书馆窝了一个星期，看完一本html+css的教程就去面试了。</p><p>其实像w3school中有很多html和css中的标签，我们看起来它真的很简单，很不起眼，尤其是在你的英语修养还不错的时候，大概就是种看到它我就知道它的作用是什么，只是越是这样简单基础的东西，越让人迷惑。就像一块块小小的积木，组合到一起就能堆砌出不一样的风景。也许你只知道它的表面，却没有深入去挖掘它内心的丰富，它的应用场景，它的兼容性，它和其他东西组合在一起又会出现什么样的问题，如何去解决它们，使用它的利弊又是什么。</p>]]></content>
<tags>
<tag> 读书笔记 </tag>
</tags>
</entry>
<entry>
<title>前端工程师面试第一弹——水平居中&垂直居中&水平垂直都居中</title>
<link href="/2018/03/02/20170302cen/"/>
<content type="html"><![CDATA[<p><excerpt in="" index="" |="" 首页摘要=""><br> 曾经的面试中，布局都是问的比较多的，不过最近面试的几个公司，涉及到的都是js的问题相对多一些，我想大概是因为，最近框架用的越来越多，js的基础也就越来越重要，可能如果js水平欠缺的话，很难去掌握好一门框架，也就很难适应最近的前端开发工作<br><a id="more"></a></excerpt></p><p><the rest="" of="" contents="" |="" 余下全文=""></the></p><h2 id="一、水平居中"><a href="#一、水平居中" class="headerlink" title="一、水平居中"></a>一、水平居中</h2><h3 id="1-普通块级元素"><a href="#1-普通块级元素" class="headerlink" title="1.普通块级元素"></a>1.普通块级元素</h3><p>比如div，p，h1～h6等等。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">text-align:center;</span><br></pre></td></tr></table></figure></p><h3 id="2-固定宽度的block元素"><a href="#2-固定宽度的block元素" class="headerlink" title="2.固定宽度的block元素"></a>2.固定宽度的block元素</h3><p>设置margin值,对于下面的div元素，在未设置margin值之前，文字在div中水平居中，但是div在整个浏览器中却并没有居中。使用该方法一定要注意需要有固定的宽度，因为默认的话占据100%的宽度。<br><figure class="highlight plain"><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">div{</span><br><span class="line"> width: 500px;</span><br><span class="line"> height: 300px;</span><br><span class="line"> text-align: center;</span><br><span class="line"> background-color: green;</span><br><span class="line"> margin: 0 auto;</span><br><span class="line">}</span><br><span class="line"><div>水平居中</div></span><br></pre></td></tr></table></figure></p><h3 id="3-内联元素"><a href="#3-内联元素" class="headerlink" title="3.内联元素"></a>3.内联元素</h3><p>只需要把内联元素包裹进一个属性display为block的父元素中并对父元素设置text-align属性即可。</p><p>适用元素:文字、链接以及其他inline或者inline-*类型元素(inline-block, inline-table, inline-flex)<br><figure class="highlight plain"><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">span{</span><br><span class="line"> display: block;</span><br><span class="line"> text-align: center;</span><br><span class="line">}</span><br><span class="line"><span></span><br><span class="line"> <a href="#">链接一</a></span><br><span class="line"> <a href="#">链接二</a></span><br><span class="line"> <a href="#">链接三</a></span><br><span class="line"></span></span><br></pre></td></tr></table></figure></p><h3 id="4-多个块状元素-一"><a href="#4-多个块状元素-一" class="headerlink" title="4.多个块状元素(一)"></a>4.多个块状元素(一)</h3><p>如果页面有多个块状元素需要水平排列居中，可以将元素的属性设置为display:inline-block，并且把父元素的text-align属性设置为center。</p><p>如果需要垂直排列居中的话，可以使用margin值<br><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">### css</span><br><span class="line">div{</span><br><span class="line"> text-align: center;</span><br><span class="line">}</span><br><span class="line">h2{</span><br><span class="line"> display: inline-block;</span><br><span class="line">}</span><br><span class="line">### html</span><br><span class="line"><div></span><br><span class="line"> <h2>二级标题一</h2></span><br><span class="line"> <h2>二级标题二</h2></span><br><span class="line"> <h2>二级标题三</h2></span><br><span class="line"></div></span><br></pre></td></tr></table></figure></p><h3 id="5-多个块状元素-二"><a href="#5-多个块状元素-二" class="headerlink" title="5.多个块状元素(二)"></a>5.多个块状元素(二)</h3><p>使用flexbox布局方式，只需要把需要设置的块状元素的父元素的display设置为flex，并且设置justify-content为center。<br><figure class="highlight plain"><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">### css</span><br><span class="line">div{</span><br><span class="line"> display: flex;</span><br><span class="line"> justify-content: center;</span><br><span class="line">}</span><br><span class="line">### html</span><br><span class="line"><div></span><br><span class="line"> <h2>二级标题一</h2></span><br><span class="line"> <h2>二级标题二</h2></span><br><span class="line"> <h2>二级标题三</h2></span><br><span class="line"></div></span><br></pre></td></tr></table></figure></p><h3 id="6-多个块状元素-三"><a href="#6-多个块状元素-三" class="headerlink" title="6.多个块状元素(三)"></a>6.多个块状元素(三)</h3><p>三个块状元素垂直排列水平居中<br><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">********使用text-align属性********</span><br><span class="line">### css</span><br><span class="line">div{</span><br><span class="line"> text-align: center;</span><br><span class="line">}</span><br><span class="line">### html</span><br><span class="line"><div></span><br><span class="line"> <h2>二级标题一</h2></span><br><span class="line"> <h2>二级标题二</h2></span><br><span class="line"> <h2>二级标题三</h2></span><br><span class="line"></div></span><br><span class="line">********使用flex属性********</span><br><span class="line">### css</span><br><span class="line">div{</span><br><span class="line"> display: flex;</span><br><span class="line"> justify-content: center;</span><br><span class="line"> flex-direction: column;</span><br><span class="line">}</span><br><span class="line">h2{</span><br><span class="line"> align-self: center;</span><br><span class="line">}</span><br><span class="line">### html</span><br><span class="line"><div></span><br><span class="line"> <h2>二级标题一</h2></span><br><span class="line"> <h2>二级标题二</h2></span><br><span class="line"> <h2>二级标题三</h2></span><br><span class="line"></div></span><br></pre></td></tr></table></figure></p><h3 id="7-使用table属性"><a href="#7-使用table属性" class="headerlink" title="7.使用table属性"></a>7.使用table属性</h3><p>对于父元素和子元素的宽度都确定的情况，适合通过display:table-cell和margin-left实现CSS水平居中。</p><p>使用时，父元素display:table-cell，子元素给剩余宽度一半的margin-left。<br><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">### css</span><br><span class="line">div{</span><br><span class="line"> background-color: red;</span><br><span class="line"> width: 500px;</span><br><span class="line"> height: 300px;</span><br><span class="line"> display: table-cell;</span><br><span class="line">}</span><br><span class="line">h2{</span><br><span class="line"> background-color: blue;</span><br><span class="line"> width: 200px;</span><br><span class="line"> margin-left: 150px;</span><br><span class="line">}</span><br><span class="line">### html</span><br><span class="line"><div></span><br><span class="line"> <h2>二级标题一</h2></span><br><span class="line"> <h2>二级标题二</h2></span><br><span class="line"> <h2>二级标题三</h2></span><br><span class="line"></div></span><br></pre></td></tr></table></figure></p><h3 id="8-使用绝对定位"><a href="#8-使用绝对定位" class="headerlink" title="8.使用绝对定位"></a>8.使用绝对定位</h3><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">### css</span><br><span class="line">div{</span><br><span class="line"> background-color: red;</span><br><span class="line"> width: 500px;</span><br><span class="line"> height: 300px;</span><br><span class="line"> position: absolute;</span><br><span class="line">}</span><br><span class="line">h2{</span><br><span class="line"> background-color: blue;</span><br><span class="line"> width: 200px;</span><br><span class="line"> margin-left: 150px;</span><br><span class="line">}</span><br><span class="line">### html</span><br><span class="line"><div></span><br><span class="line"> <h2>二级标题一</h2></span><br><span class="line"> <h2>二级标题二</h2></span><br><span class="line"> <h2>二级标题三</h2></span><br><span class="line"></div></span><br></pre></td></tr></table></figure><h3 id="9-fit-content"><a href="#9-fit-content" class="headerlink" title="9.fit-content"></a>9.fit-content</h3><p>使用fit-content与margin结合</p><ul><li>fit-content<br>大概理解就是包裹的意思，如果一个标签的属性设置为fit-content直观的感觉就是背景颜色在宽度上表现为紧紧包围着文字。<figure class="highlight plain"><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">### css</span><br><span class="line">div{</span><br><span class="line"> background-color: red;</span><br><span class="line"> width: 500px;</span><br><span class="line"> height: 300px;</span><br><span class="line">}</span><br><span class="line">h2{</span><br><span class="line"> background-color: blue;</span><br><span class="line"> width: fit-content;</span><br><span class="line"> margin: 0 auto;</span><br><span class="line">}</span><br><span class="line">### html</span><br><span class="line"><div></span><br><span class="line"> <h2>二级标题一</h2></span><br><span class="line"> <h2>二级标题二</h2></span><br><span class="line"> <h2>二级标题三</h2></span><br><span class="line"></div></span><br></pre></td></tr></table></figure></li></ul><h3 id="10-translate属性"><a href="#10-translate属性" class="headerlink" title="10.translate属性"></a>10.translate属性</h3><p>适用于display为block或者是inline-block的元素。另外如果有多个垂直排列的元素的话，会发生重叠。比如下面的例子中有多个p标签，那么他们会重合到一起去。<br><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">### css</span><br><span class="line">div{</span><br><span class="line"> position: relative;</span><br><span class="line">}</span><br><span class="line">span{</span><br><span class="line"> display: inline-block;</span><br><span class="line"> position: absolute;</span><br><span class="line"> left: 50%;</span><br><span class="line"> transform: translateX(-50%);</span><br><span class="line">}</span><br><span class="line">### html</span><br><span class="line"><div></span><br><span class="line"> <span>水平居中</span></span><br><span class="line"></div></span><br><span class="line">或者</span><br><span class="line"><div></span><br><span class="line"> <p>水平居中</p></span><br><span class="line"></div></span><br></pre></td></tr></table></figure></p><h3 id="11-使用绝对定位，父元素大小不知，但知道子元素的宽度"><a href="#11-使用绝对定位，父元素大小不知，但知道子元素的宽度" class="headerlink" title="11.使用绝对定位，父元素大小不知，但知道子元素的宽度"></a>11.使用绝对定位，父元素大小不知，但知道子元素的宽度</h3><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">### css</span><br><span class="line">div{</span><br><span class="line"> position: relative;</span><br><span class="line">}</span><br><span class="line">p{</span><br><span class="line"> position: absolute;</span><br><span class="line"> width: 宽度值;</span><br><span class="line"> left:50%;</span><br><span class="line"> margin-left: -(宽度值/2);</span><br><span class="line">}</span><br><span class="line">### html</span><br><span class="line"><div></span><br><span class="line"> <p>段落居中</p></span><br><span class="line"></div></span><br></pre></td></tr></table></figure><p>以上代码中，p元素相对于div元素确实是水平居中的，但是其中的文字却并没有居中，如果想要设置文字居中的话，可以再继续添加以恶搞text-align属性为center即可。</p><h2 id="二、垂直居中"><a href="#二、垂直居中" class="headerlink" title="二、垂直居中"></a>二、垂直居中</h2><h3 id="1-单行行内元素"><a href="#1-单行行内元素" class="headerlink" title="1.单行行内元素"></a>1.单行行内元素</h3><p>当一个行内元素，即inline，inline-*类型的元素需要居中的话，可将它的line-height同时设置为父元素的高度即可实现垂直居中效果。<br>height=line-height<br><figure class="highlight plain"><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">div{</span><br><span class="line"> height: 300px;</span><br><span class="line"> background-color: red;</span><br><span class="line">}</span><br><span class="line">span{</span><br><span class="line"> line-height: 300px;</span><br><span class="line">}</span><br><span class="line"><div></span><br><span class="line"> <span>水平垂直居中</span></span><br><span class="line"></div></span><br></pre></td></tr></table></figure></p><h3 id="2-多行行内元素"><a href="#2-多行行内元素" class="headerlink" title="2.多行行内元素"></a>2.多行行内元素</h3><p>组合使用display:table-cell和vertical-align:middle属性来定义需要居中的元素的父容器元素生成效果。<br><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">### css</span><br><span class="line">div{</span><br><span class="line"> background-color: red;</span><br><span class="line"> display: table-cell;</span><br><span class="line"> vertical-align: middle;</span><br><span class="line"> height: 300px;</span><br><span class="line">}</span><br><span class="line">span{</span><br><span class="line"> color: #fff;</span><br><span class="line">}</span><br><span class="line">### html</span><br><span class="line"><div></span><br><span class="line"> <span>时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。</span><br><span class="line"> 俨骖騑于上路，访风景于崇阿；临帝子之长洲，得天人之旧馆。</span><br><span class="line"> 层峦耸翠，上出重霄；飞阁流丹，下临无地。鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。</span></span><br><span class="line"></div></span><br></pre></td></tr></table></figure></p><h3 id="3-已知高度的块状元素"><a href="#3-已知高度的块状元素" class="headerlink" title="3.已知高度的块状元素"></a>3.已知高度的块状元素</h3><p>将待居中元素设置为绝地定位，并且设置margin为居中元素高度一半的负值<br><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">### css</span><br><span class="line"> div{</span><br><span class="line"> height: 100px;</span><br><span class="line"> width: 100px;</span><br><span class="line"> position: absolute;</span><br><span class="line"> top: 50%;</span><br><span class="line"> margin-top: -50px;</span><br><span class="line"> padding: 0;</span><br><span class="line"> background-color: red;</span><br><span class="line">}</span><br><span class="line">### html</span><br><span class="line"><div></div></span><br><span class="line">⚠️如果元素有padding值的话，此时margin-top 的负值要再减去相对应的padding-top值。比如上面的代码中如果padding-top为20px，那么，此时的margin-top等于-50—（20/2）=-60px；</span><br></pre></td></tr></table></figure></p><h3 id="4-未知高度的块状元素"><a href="#4-未知高度的块状元素" class="headerlink" title="4.未知高度的块状元素"></a>4.未知高度的块状元素</h3><p>使用transform属性来垂直移动来实现垂直居中：类似于水平居中，也曾使用过这个方法。只不过是translateX。<br><figure class="highlight plain"><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">### css</span><br><span class="line">div{</span><br><span class="line"> background-color: red;</span><br><span class="line"> top: 50%;</span><br><span class="line"> position: absolute;</span><br><span class="line"> transform: translateY(-50%);</span><br><span class="line">}</span><br><span class="line">### html</span><br><span class="line"><div>离离原上草一岁一枯荣</div></span><br></pre></td></tr></table></figure></p><h2 id="三、垂直水平都居中"><a href="#三、垂直水平都居中" class="headerlink" title="三、垂直水平都居中"></a>三、垂直水平都居中</h2><h3 id="1-已经宽度和高度的块状元素"><a href="#1-已经宽度和高度的块状元素" class="headerlink" title="1.已经宽度和高度的块状元素"></a>1.已经宽度和高度的块状元素</h3><p>使用绝对定位，将margin-left和margin-top分别设置为宽度和高度一半的负值即可。<br><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">### css</span><br><span class="line">div{</span><br><span class="line"> width: 300px;</span><br><span class="line"> height: 300px;</span><br><span class="line"> background-color: red;</span><br><span class="line"> top: 50%;</span><br><span class="line"> left: 50%;</span><br><span class="line"> position: absolute;</span><br><span class="line"> margin-top: -150px;</span><br><span class="line"> margin-left: -150px;</span><br><span class="line"> //这两行是为了使文字也水平垂直居中</span><br><span class="line"> text-align: center;</span><br><span class="line"> line-height: 300px;</span><br><span class="line">}</span><br><span class="line">### html</span><br><span class="line"><div>离离原上草一岁一枯荣</div></span><br></pre></td></tr></table></figure></p><h3 id="2-未知宽度和高度的元素"><a href="#2-未知宽度和高度的元素" class="headerlink" title="2.未知宽度和高度的元素"></a>2.未知宽度和高度的元素</h3><p>transform属性<br><figure class="highlight plain"><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">### css</span><br><span class="line">div{</span><br><span class="line"> background-color: red;</span><br><span class="line"> top: 50%;</span><br><span class="line"> left: 50%;</span><br><span class="line"> position: absolute;</span><br><span class="line"> transform: translate(-50%, -50%);</span><br><span class="line">}</span><br><span class="line">### html</span><br><span class="line"><div>离离原上草一岁一枯荣</div></span><br></pre></td></tr></table></figure></p><h3 id="3-flex"><a href="#3-flex" class="headerlink" title="3.flex"></a>3.flex</h3><p>⚠️上面几个都是div相对于整个浏览器是水平垂直居中的，但是这个呢，是div中包裹的文字相对于div元素的宽度(100%)高度水平垂直居中的。<br><figure class="highlight plain"><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">### css</span><br><span class="line">div{</span><br><span class="line"> background-color: red;</span><br><span class="line"> height: 300px;</span><br><span class="line"> display: flex;</span><br><span class="line"> justify-content: center;//水平方向</span><br><span class="line"> align-items: center;//垂直方向</span><br><span class="line">}</span><br><span class="line">### html</span><br><span class="line"><div>离离原上草一岁一枯荣</div></span><br></pre></td></tr></table></figure></p>]]></content>
<tags>
<tag> css html </tag>
</tags>
</entry>
<entry>
<title>前端工程师面试总结——心理</title>
<link href="/2018/03/01/20180316rew/"/>
<content type="html"><![CDATA[<p><excerpt in="" index="" |="" 首页摘要=""><br>   到现在大概面试的公司有七八家，对自己的面试和公司做一个小小的总结，从而吸取经验教训，继续前行。<br><a id="more"></a></excerpt></p><p><the rest="" of="" contents="" |="" 余下全文=""><br>裸辞到现在一个多月了吧，每天就是背单词->学习->投简历->面试。话说到现在面试这么多都工作都没有着落，可见我这水平啊可能差点儿意思。好羡慕周围的朋友们好的坏的，都能出去上班。嗯，我知道你们都很累。。。有点儿佩服考研的人呢，每天逼自己坐在这里学习，得是一件多么单调无聊需要毅力的事情。</the></p><p>其实也会怀疑自己是否太过执着，没有给自己哪怕多一个的选择。不过人就这一辈子能找到自己想要坚持下去的事情并付出行动，也是一件挺美好的事情。</p><p>1.一定要提前预备好充足的时间，以应对路上可能出现的堵车、导航错误等，尤其是最近北京两会，安检都是很严格的。另外在导航的时候一定要输出公司准确的地址，不然可能会像我一样去到相反的方向。</p><p>2.大冬天的出门一定要多穿点儿，尽量做地铁、公交，千万不要骑自行车，不然到时候面试时，四肢僵硬，坐在那里和面试官说话的时候你可能会哆哆嗦嗦的，思路都会受到影响的。</p><p>3.礼貌什么的都是必须的。</p><p>4.反正到现在我还是觉得如果遇到可能忘记的东西答不上来，还是要自己多思考，如果直接就说不会，感觉好像丧失了挣扎和努力思考的能力，很多时候也许换个思路问题就能解决了呢。也许这样有点儿耽误时间，大概是我有点儿习惯自己解决问题，虽然有的时候上网查资料都多次无果，毫无头绪，很想砸电脑，崩溃到干脆放到一边然后躺在床上玩手机。不过好在最后大部分都解决了。</p><p>5.真的非常讨厌那些邋里邋遢的、头发遮住脸、和你说话时一副我最屌的技术，真的让人非常讨厌好不。</p><p>6.适当的放松自己，不要太过紧张，之前去360面试的时候，紧张到面试前后大概背了2、3个小时的单词，结果可想而知。</p><p>7.面试前给自己做一份笔记，想想可能自己会被问到什么问题，路上或者是等待的时候看一看，比较能缓解自己的情绪，不至于心里没招没落的。</p><p>8.很多公司面试一开始都会让你做一个自我介绍，虽然我真的很不喜欢这个环节，不过还是挺重要的。从这一个自我介绍，就能对你有一个初步的了解。讲一些可能简历上没有的，自己的价值，能给公司带来什么创收，也许会对面试官留下一个特别深刻的印象。</p><p>9.程序员要张扬一些，没事儿的时候多写写博客啊，回答回答一些社区的问题，让自己有那么几个粉丝，有一定的浏览量，也许真的在面试过程中能为自己加分呢，毕竟陌生人通过这些能对你有更深的了解，知道你也曾经做过什么东西，而不是一张白纸，一张嘴就概括了你的过去的所有。</p><p>10.坦诚很重要。感觉一开口就会暴露自己的水平到底有多高，装13没什么用，只会让自己更加难堪。正视自己的不足，不要因为此而过于气馁，每个人都有很多不会的地方。</p><p>11.每个面试官的侧重点其实都不一样，所以能不能面试通过，除了自己的水平，大概运气也占了一点点儿比例。</p><p>12.最后一点儿，最重要，好喜欢今日头条的小哥哥！(很单纯的喜欢，不要想多～～～)单纯又可爱的呢😊，给了我很多学习上的建议，摆正了我最近的心态，真是后悔当初面试的时候没有弄个联系方式来呢，大概后面也没有什么机会见到了吧。～</p><p>13.对于技术来说，动手还是很重要的，感觉最近工作没有什么着落，倒是在准备学习的过程中，感觉自己进步了很多，很多其实工作时并不知道为什么的东西，大概只是会用，现在慢慢理解了各中缘由。很多问题解决起来也顺利了很多。扇贝还在坚持，大概月底就能实现小组200名之内的目标吧，哈哈哈～～</p><p>14.女孩纸在外奋斗不容易，擦亮眼睛，必要时候要懂得保护自己。继续加油，希望能在生日之前找到工作，大概是我送给自己的最好的生日礼物。</p><p>15.最后安利一下自己的博客(<a href="https://gentlelynn.github.io)(之前的因为换电脑没有及时备份的原因已经停止使用)，还有很多地方需要完善，还有很多私下的笔记还没有上传。室友说我的主题太小清新，不像一个技术大佬，后面找到好的主题再换。">https://gentlelynn.github.io)(之前的因为换电脑没有及时备份的原因已经停止使用)，还有很多地方需要完善，还有很多私下的笔记还没有上传。室友说我的主题太小清新，不像一个技术大佬，后面找到好的主题再换。</a></p>]]></content>
<tags>
<tag> 读书笔记 </tag>
</tags>
</entry>
<entry>
<title>由两个span元素引发的问题</title>
<link href="/2018/02/28/180228/"/>
<content type="html"><![CDATA[<p><excerpt in="" index="" |="" 首页摘要=""><br> 只是照着视频的内容对代码进行测试，没想到由于将div错写成span标签，引发出了这么多问题。算是意外收获了呢<br><a id="more"></a></excerpt></p><p><the rest="" of="" contents="" |="" 余下全文=""><br>解决方案参考网址:<a href="https://segmentfault.com/q/1010000008628181" target="_blank" rel="noopener">https://segmentfault.com/q/1010000008628181</a></the></p><p>解决方案中的word-spacing和letter-spacing没搞懂，后面参考大神的网站终于清楚了：<a href="http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-去除间距/" target="_blank" rel="noopener">http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-去除间距/</a></p><h3 id="一、关于内联元素的几点思考"><a href="#一、关于内联元素的几点思考" class="headerlink" title="一、关于内联元素的几点思考"></a>一、关于内联元素的几点思考</h3><ul><li><p>内联元素如果不转换为块级元素的话，设置背景颜色是不起作用的。</p><figure class="highlight plain"><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">width: 300px;</span><br><span class="line">height: 300px;</span><br><span class="line">background-color: green;</span><br></pre></td></tr></table></figure></li><li><p>即使转换为块级元素，如果没有设置宽度和高度，设置背景颜色也是不起作用的。</p><figure class="highlight plain"><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">display: inline-block;</span><br><span class="line">background-color: green;</span><br></pre></td></tr></table></figure></li><li><p>设置float也会将一个内联元素转换为块级元素。如下也是有效的。</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">float:left;</span><br><span class="line">width: 300px;</span><br><span class="line">height: 300px;</span><br><span class="line">background-color: green;</span><br></pre></td></tr></table></figure></li></ul><h3 id="二、关于布局问题的几点解决方法总结"><a href="#二、关于布局问题的几点解决方法总结" class="headerlink" title="二、关于布局问题的几点解决方法总结"></a>二、关于布局问题的几点解决方法总结</h3><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">### html</span><br><span class="line"><div></span><br><span class="line"> <span class="span1"></span></span><br><span class="line"> <span class="span2"></span></span><br><span class="line"></div></span><br><span class="line">### css</span><br><span class="line">*{</span><br><span class="line"> margin: 0;</span><br><span class="line"> padding: 0;</span><br><span class="line">}</span><br><span class="line">div{</span><br><span class="line"> width: 600px;</span><br><span class="line"> height: 600px;</span><br><span class="line"> background-color: #fff;</span><br><span class="line"> border: 1px solid green;</span><br><span class="line">}</span><br><span class="line">.span1{</span><br><span class="line"> width: 300px;</span><br><span class="line"> height: 300px;</span><br><span class="line"> background-color: green;</span><br><span class="line"> display: inline-block;</span><br><span class="line">}</span><br><span class="line">.span2{</span><br><span class="line"> width: 300px;</span><br><span class="line"> height: 300px;</span><br><span class="line"> background-color: yellow;</span><br><span class="line"> display: inline-block;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>以上代码的效果并没有像我想象中那样，而是第二个span被挤下来了。这就奇怪了。没有margin,padding,border之类的，怎么会被挤下去呢？后经查阅资料得知，display为inline和inline-block的时候，当你代码换行后，会在网页上产生一个空格，真是任性。不过好在魔高一尺，道高一丈。解决方案还是有很多中的。</p><ul><li>为父元素添加<code>font-size:0</code>属性，例如以上代码的话，在*或者div的style里面添加都可以</li><li><p>取消换行符，这种方法虽然可行，但是真的很影响美观和代码的可读性。</p><figure class="highlight plain"><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">### 写法一</span><br><span class="line"><div></span><br><span class="line"> <span class="span1"></span</span><br><span class="line"> ><span class="span2"></span></span><br><span class="line"></div></span><br><span class="line">### 写法二</span><br><span class="line"><div></span><br><span class="line"> <span class="span1"></span><span class="span2"></span></span><br><span class="line"></div></span><br></pre></td></tr></table></figure></li><li><p>margin负值，具体的像素值可以在控制台去调试。当然了可以随便为哪个span设置margin负值都可以。</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">### 方法一：为span1设置margin值</span><br><span class="line">margin-right:-6px;</span><br><span class="line">### 方法二：为span2设置margin值</span><br><span class="line">margin-left:-6px;</span><br></pre></td></tr></table></figure></li><li><p>float，可以为span添加float属性。当然了，可以选取其中一个设置float的left值或right值。当然了如果为左边的元素设置float的right值或者为右边的元素设置float的left值，虽然解决了换行的问题，但是原本的布局已经变化了。</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">### 方法一：为span1设置float值</span><br><span class="line">float:left;</span><br><span class="line">### 方法二：为span2设置float值</span><br><span class="line">float:right;</span><br></pre></td></tr></table></figure></li><li><p>为父元素设置word-sapcing为-6px;值的大小由控制台测试得来。</p></li><li>为父元素设置letter-sapcing为-6px;值的大小由控制台测试得来。</li><li>不过我有一点儿疑惑的是，对于以上两种方法，为什么word-spacing和letter-spacing是一样的，是因为我之间没有填写任何内容么？另外如果我填写了内容，我是不是也要对子元素的word-spacing和letter-spacing做设置呢？</li><li>根据测试，当我为子元素设置内容之后，确实也要同时为他们设置word-spacing和letter-spacing，不然内容会产生严重变形。只要添加一个word-spacing或者letter-spacing为0就可以了。</li></ul>]]></content>
<tags>
<tag> css </tag>
</tags>
</entry>
<entry>
<title>那些我觉得很美很美的句子</title>
<link href="/2018/02/27/sentences/"/>
<content type="html"><![CDATA[<p><excerpt in="" index="" |="" 首页摘要=""><br> 平常看书的时候我有摘抄我觉得很美的句子的习惯，在此记录下来与大家分享。<br><a id="more"></a></excerpt></p><p><the rest="" of="" contents="" |="" 余下全文=""></the></p><p><contents></contents></p><p></p><p style="text-indent: 40px"><br>1.如此情深，却难以启齿。原来你若真爱一个人，内心酸涩，反而说不出话来，甜言蜜语，多数说给不相干的人听。 ——亦舒《她的二三事》<br>2.I am just a girl, standing in front of a boy, asking him to love me.——《诺丁山》<br>3.自幼贫民窟长大的女子，侥幸多念了两本书，枉以为可以与人平起平坐。可是人生从来都是接力赛，我们却天真的当成了百米冲刺。你我都是凡人，能冲出原始阶层的人极少，女子尤甚。在婚姻面前，爱情太渺小，真正的阻力并非他人的压力和低看，那是流淌在骨子里的基因，敏感，脆弱。 ——亦舒《承欢记》<br>4.你是我温暖的手套，冰冷的啤酒，带着阳光味道的衬衫，日复一日的梦想。——《恋爱的犀牛》<br>5.宿夕不梳头，素发披两肩。婉伸郎膝上，何处不可怜。<br>6.不是世界不好，是你见的太少<br> ——我一直都很讨厌妄下判断与故作成熟这两件事。很多时候，我们轻易的判断某件事不好，没希望，没结果，不过是因为我们见的太少，或看见的东西层次不够。而仅仅凭借我们所见过的那些浅薄 世界，就去做出一脸的成熟去判断这个世界，其实并不明智。<br> ——相信美好的东西，却仅仅是因为迷恋美好的东西给你的愉悦。承认缺陷，而不沉浸于缺陷与黑暗面可能带来的痛苦。<br>7.如果生命只是一场碎梦 我为什么还在追逐。如果人们看到我的背影，还会不会为这个傻瓜而感动。——汪峰《碎梦》<br>8.生命可以随心所欲但不能随波逐流。 ——宫崎骏<br>9.总有那么一首歌写着我们的曾经，我对你最深沉的爱，就是活成你的样子。 ——罗大佑<br>10.那是我们有梦，关于文学，关于爱情，关于穿越世界的旅行。如今我们深夜饮酒，杯子碰到一起，都是梦破碎的声音。——北岛《波兰来客》</p><p>1.人生，其实无非是矛盾与选择的综合体，无关对错，仅仅在于我们能否有勇气在矛盾中作出选择并勇敢承担一切后果。——路遥《人生》<br>2.草在结它的种子，风在摇它的叶子。我们站着，不说话，就十分美好。——顾城《门前》<br>3.我天性不宜交际。在多数场合，我不是觉得对方乏味，就是害怕对方觉得我乏味。可是我既不愿意忍受对方的乏味，也不愿费劲使自己显得有趣，那都太累了。我独处时最轻松，因为我不觉得自己乏味，即使乏味，也自己承受，不累及他人，无需感到不安。——周国平《人与永恒》<br>4.If I should see you，after long year.如果我们再相见，事隔经年。<br>How should I greet, with tears, with silence.我将以何贺你，以眼泪，以沉默。<br>5.我把我整个灵魂都给你，连同它的怪癖，耍小脾气，忽明忽暗，一千八百种坏毛病。它真讨厌，只有一点好，爱你。——王小波《爱你就像爱生命》<br>6.林深时见鹿，海蓝时见鲸，梦醒时见你。<br> 林深时雾起，海深时浪涌，梦醒时夜继。不见鹿，不见鲸，不见你。<br>7.我一生渴望被人收藏好，妥善安放，细心保存。免我惊，免我苦，免我四下流离，免我无枝可依。但那人，我知，我一直知，他永不会来。——匡匡《时有女子》 </p>]]></content>
<tags>
<tag> 读书笔记 </tag>
</tags>
</entry>
<entry>
<title>nextjs学习笔记(一)</title>
<link href="/2018/01/30/180227next/"/>
<content type="html"><![CDATA[<p><excerpt in="" index="" |="" 首页摘要=""><br> 本文由我一边看网上的nextjs的资源(原文网址:<a href="https://segmentfault.com/a/1190000010311978)，" target="_blank" rel="noopener">https://segmentfault.com/a/1190000010311978)，</a><br> 一边根据自己的实际操作验证写成。<br><a id="more"></a></excerpt></p><p><the rest="" of="" contents="" |="" 余下全文=""></the></p><h2 id="nextjs"><a href="#nextjs" class="headerlink" title="nextjs"></a>nextjs</h2><h3 id="1-简介"><a href="#1-简介" class="headerlink" title="1.简介"></a>1.简介</h3><p>Next.js是一个基于React实现的服务端渲染框架，github地址为<a href="https://github.com/zeit/next.js#fetching-data-and-component-lifecycle" target="_blank" rel="noopener">next.js</a>。无需书写webpack等配置文件。</p><h3 id="2-初始化"><a href="#2-初始化" class="headerlink" title="2.初始化"></a>2.初始化</h3><p>与其他基于node的框架一样，mkdir->cd->init->install->mkdir->package.json->scripts->localhost://3000</p><ul><li>⚠️最后这里一定要创建pages目录哦，否则会报错的,如下。这是因为Next.js采用的是文件系统作为API，每一个放在pages中的文件都会映射为一个路由，路由名称与文件名相同。<figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">LynndeMacBook-Pro:myapp lynn$ npm run dev</span><br><span class="line"></span><br><span class="line">> my-app@0.1.0 dev /Users/lynn/Desktop/myapp</span><br><span class="line">> next</span><br><span class="line"></span><br><span class="line">> Couldn't find a `pages` directory. Please create one under the project root</span><br><span class="line">npm ERR! code ELIFECYCLE</span><br><span class="line">npm ERR! errno 1</span><br><span class="line">npm ERR! my-app@0.1.0 dev: `next`</span><br><span class="line">npm ERR! Exit status 1</span><br><span class="line">npm ERR! </span><br><span class="line">npm ERR! Failed at the my-app@0.1.0 dev script.</span><br><span class="line">npm ERR! This is probably not a problem with npm. There is likely additional logging output above.</span><br></pre></td></tr></table></figure></li></ul><p>index.js(我也不知道为什么一定要命名为index.js,总之我现在这样写成其他名字是不行的，也许是因为在编译的时候源文件的名字就是index.js。run之后会自动生成.next目录，包含了打包，es6的编译。)<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">import React from 'react';//这一句非常重要</span><br><span class="line">export default () => (</span><br><span class="line"> <h1>Hello Next.js</h1></span><br><span class="line">)</span><br></pre></td></tr></table></figure></p><h3 id="页面导航Link"><a href="#页面导航Link" class="headerlink" title="页面导航Link"></a>页面导航Link</h3><figure class="highlight plain"><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">import Link from 'next/link'</span><br><span class="line">export default () => (</span><br><span class="line"> <div></span><br><span class="line"> <Link href="/about" ></span><br><span class="line"> <a>About Page</a></span><br><span class="line"> </Link></span><br><span class="line"> <h1>Hello Next.js</h1></span><br><span class="line"> </div></span><br><span class="line">)</span><br></pre></td></tr></table></figure><h3 id="公用组件component"><a href="#公用组件component" class="headerlink" title="公用组件component"></a>公用组件component</h3><p>⚠️非常重要的一点是自己定义的组件的首字母一定要大写<br>import的顺序不重要</p><h4 id="Header-js"><a href="#Header-js" class="headerlink" title="Header.js"></a>Header.js</h4><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">import Link from 'next/link';</span><br><span class="line">import React from 'react';</span><br><span class="line">const listStyle = {</span><br><span class="line"> marginRight: 15</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">export default () => (</span><br><span class="line"> <div></span><br><span class="line"> <Link href = "/"></span><br><span class="line"> <a style={listStyle}>Home</a></span><br><span class="line"> </Link></span><br><span class="line"> <Link href = "/about"></span><br><span class="line"> <a style={listStyle}>About</a></span><br><span class="line"> </Link></span><br><span class="line"> </div></span><br><span class="line">)</span><br></pre></td></tr></table></figure><h4 id="Layout-js"><a href="#Layout-js" class="headerlink" title="Layout.js"></a>Layout.js</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">import React from 'react';</span><br><span class="line">import Header from './header';</span><br><span class="line"></span><br><span class="line">const layoutStyle = {</span><br><span class="line"> margin: 20,</span><br><span class="line"> padding: 20,</span><br><span class="line"> border: '1px solid #ddd'</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">export default (props) => (</span><br><span class="line"> <div style = {layoutStyle}></span><br><span class="line"> <Header />//此时就可以使用Header标签了，index.js中的layout也是同样的道理</span><br><span class="line"> {props.children}//组件嵌套时父组件用它来将所有组件显示出来，所有上面会有参数的传递</span><br><span class="line"> </div></span><br><span class="line">)</span><br></pre></td></tr></table></figure><h4 id="index-js"><a href="#index-js" class="headerlink" title="index.js"></a>index.js</h4><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">import React from 'react';</span><br><span class="line">import Layout from '../component/layout.js';</span><br><span class="line">export default () => (</span><br><span class="line"> <Layout></span><br><span class="line"> <h1>Hello Next.js</h1></span><br><span class="line"> </Layout></span><br><span class="line">)</span><br></pre></td></tr></table></figure><h3 id="动态页面"><a href="#动态页面" class="headerlink" title="动态页面"></a>动态页面</h3><h4 id="index-js-1"><a href="#index-js-1" class="headerlink" title="index.js"></a>index.js</h4><ul><li>as属性的作用是更改路由的名称,现在的地址栏的地址显示为<a href="http://localhost:3000/p/learn-nextjs。而如果不使用as属性，它会直接显示href的值http://localhost:3000/post?id=hello-nextjs" target="_blank" rel="noopener">http://localhost:3000/p/learn-nextjs。而如果不使用as属性，它会直接显示href的值http://localhost:3000/post?id=hello-nextjs</a><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">import React from 'react';</span><br><span class="line">import Layout from '../components/layout.js'</span><br><span class="line">import Link from 'next/link'</span><br><span class="line"></span><br><span class="line">const PostLink = (props) => (</span><br><span class="line"> <li></span><br><span class="line"> <Link as={`/p/${props.id}`} href={`/post?id=${props.id}`}</span><br><span class="line"> <a>{props.id}</a></span><br><span class="line"> </Link></span><br><span class="line"> </li></span><br><span class="line">)</span><br><span class="line">export default () => (</span><br><span class="line"> <Layout></span><br><span class="line"> <h1>My Blog</h1></span><br><span class="line"> <ul></span><br><span class="line"> <PostLink id="hello-nextjs" /></span><br><span class="line"> <PostLink id="learn-nextjs" /></span><br><span class="line"> <PostLink id="deploy-nextjs" /></span><br><span class="line"> </ul></span><br><span class="line"> </Layout></span><br><span class="line">)</span><br></pre></td></tr></table></figure></li></ul><h4 id="post-js"><a href="#post-js" class="headerlink" title="post.js"></a>post.js</h4><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">import Layout from '../components/Layout.js'</span><br><span class="line">export default (props) => (</span><br><span class="line"> <Layout></span><br><span class="line"> <h1>{props.url.query.id}</h1>//从url.query.id中拿到页面传过来的id</span><br><span class="line"> <p>This is the post page.</p></span><br><span class="line"> </Layout></span><br><span class="line">)</span><br></pre></td></tr></table></figure>]]></content>
<tags>
<tag> nextjs </tag>
</tags>
</entry>
<entry>
<title>菜鸟教程——HTML</title>
<link href="/2018/01/29/180227html/"/>
<content type="html"><![CDATA[<hr><p><excerpt in="" index="" |="" 首页摘要=""><br> 本文由我一边看菜鸟教程中的html教程(原文网址:<a href="https://segmentfault.com/a/1190000010311978)，" target="_blank" rel="noopener">https://segmentfault.com/a/1190000010311978)，</a> 一边根据自己的实际操作验证写成。其中包括一些我觉得可能需要注意的点，以及在实际操作之后总结的一些经验。<br><a id="more"></a></excerpt></p><p><the rest="" of="" contents="" |="" 余下全文=""></the></p><h3 id="1-html简介"><a href="#1-html简介" class="headerlink" title="1.html简介"></a>1.html简介</h3><ul><li><html>表示页面的跟元素，也就是dom节点中的root根节点</html></li><li><head>元素包含文档的元数据(<a href="http://blog.csdn.net/yjh314/article/details/53404797),文档的特征数据，比如编码方式、标题等。" target="_blank" rel="noopener">http://blog.csdn.net/yjh314/article/details/53404797),文档的特征数据，比如编码方式、标题等。</a></head></li><li>编码格式，<code>meta charest="utf-8"</code>当不写这个时候在chrome浏览器中并没有出现问题，但是在safari浏览器中出现乱码问题。<h3 id="2-html编辑器"><a href="#2-html编辑器" class="headerlink" title="2.html编辑器"></a>2.html编辑器</h3></li><li>emmet插件(x<a href="http://www.iteye.com/news/27580)很多快捷方式的使用可以大大提高我们的编码速度" target="_blank" rel="noopener">http://www.iteye.com/news/27580)很多快捷方式的使用可以大大提高我们的编码速度</a></li><li>GPL<h3 id="3-h1～h6"><a href="#3-h1～h6" class="headerlink" title="3.h1～h6"></a>3.h1～h6</h3></li><li>在标题中，会有明显的空行，也许是在编写标签的时候就已经将换行加入其中。段落同样也有这样的特性</li><li>1到6号标题与1到6号字体逆序对应，比如1号字体对应6号标题，2号字体对应5号标题。<code>font size = "1"</code>设置字体大小<h3 id="4-格式化标签"><a href="#4-格式化标签" class="headerlink" title="4.格式化标签"></a>4.格式化标签</h3>通常标签<code><strong></code>替换加粗标签<code><b></code>来使用,<code><em></code>替换<code><i></code>标签使用。然而，这些标签的含义是不同的：<code><b></code>与<code><i></code>定义粗体或斜体文本。<code><strong></code>或者<code><em></code>意味着你要呈现的文本是重要的，所以要突出显示。</li><li>b(bold)->strong加粗字体</li><li>i(italic)->em倾斜字体</li><li>small缩小字体</li><li>big放大字体</li><li>pre(prepare)预排版</li><li>sub(subscript)下标</li><li>sup(superior)上标</li><li>address地址，会以斜体的格式呈现</li><li>q(quote)引用，文字会自动加上双引号</li><li>ins(insert)定义插入文字，会有下划线效果</li><li>u(underline)下划线效果</li><li>del(delete)定义删除字，会在文字中间有一条删除线<h3 id="5-链接"><a href="#5-链接" class="headerlink" title="5.链接"></a>5.链接</h3>超链接并不一定是一个html地址，也有可能只是指向一段文字，一张图片，一个地址等等。</li><li>id，也就是可以设置锚点，指向指定的位置</li><li>target，打开超链接的方式，另外target还可以指定打开的页面<figure class="highlight plain"><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"><iframe src="http://www.baidu.com" frameborder="0" width="400px" name="iframe_a"></iframe></span><br><span class="line"><p><a href="http://www.runoob.com" target="iframe_a">显示到上面的框架中</a></p></span><br><span class="line">//点击链接，iframe中将会显示a标签指定的链接</span><br></pre></td></tr></table></figure></li></ul><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line"><a href="#C4>">指向章节4</a></span><br><span class="line"><p><a href="#C4">查看章节 4</a></p></span><br><span class="line"><h2>章节一</h2></span><br><span class="line"><p>这里显示的是章节一的内容</p></span><br><span class="line"><h2>章节二</h2></span><br><span class="line"><p>这里显示的是章节二的内容</p></span><br><span class="line"><h2>章节三</h2></span><br><span class="line"><p>这里显示的是章节三的内容</p></span><br><span class="line"><h2><a id="C4">章节四</a></h2></span><br><span class="line"><p>这里显示的是章节四的内容</p></span><br><span class="line"><h2>章节五</h2></span><br><span class="line"><p>这里显示的是章节五的内容</p></span><br><span class="line"><h2>章节六</h2></span><br><span class="line"><p>这里显示的是章节六的内容</p></span><br><span class="line"><h2>章节七</h2></span><br><span class="line"><p>这里显示的是章节七的内容</p></span><br></pre></td></tr></table></figure><p>在上面这个例子中，不加p标签的a链接并没有起到任何作用，并不知道是为什么。另外，如果像上面这样页面可以放下所有的内容，可能看不出来显示的效果。但是如果有了滚动条且内容足够多的时候，就会明显看出来章节4的内容显示在了浏览器的头部位置，如果虽然有滚动条，但是内容并不是很多，则会走到滚动条的尽头。</p><h3 id="6-邮件发送"><a href="#6-邮件发送" class="headerlink" title="6.邮件发送"></a>6.邮件发送</h3><ul><li>mailto发送邮件的方式</li><li>cc抄送</li><li>subject主题</li><li>body邮件正文<h3 id="7-base标签"><a href="#7-base标签" class="headerlink" title="7.base标签"></a>7.base标签</h3></li><li>base标签，基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接。也就是说如果一个a标签没有指定href属性，那么它会指向base的href属性中的链接。并且可以定义所有标签的默认属性，比如target=_blank，那么所有链接都会在新的页面打开<h3 id="8-图像映射"><a href="#8-图像映射" class="headerlink" title="8.图像映射"></a>8.图像映射</h3>图像映射指的是带有可点击区域的图像</li><li>usemap与map中的name属性对应</li><li>area定义映射区域，也就是图像中可点击的区域。包含shape、coords(coordinate)、href和alt属性等<figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line"><img src="" alt="猫咪" usemap="cat"></span><br><span class="line"> <map name="cat"></span><br><span class="line"> <area shape="circle" coords="200,300,60" href="http://www.baidu.com" alt="百度">//圆心为(200,300)半径为60的圆形</span><br><span class="line"> <area shape="rectangle" coords="12,16,22,26" href="http://www.runoob.com" alt="菜鸟教程">//左上顶点为(12,16),右上顶点为(22,26)的矩形</span><br><span class="line"> </map></span><br></pre></td></tr></table></figure></li></ul><h3 id="9-表格"><a href="#9-表格" class="headerlink" title="9.表格"></a>9.表格</h3><ul><li>table表格的开始</li><li>tr(table row)一行的开始，有几个就有几行</li><li>td(table date)单元格中的数据，也可以说有几个就有几列</li><li>th(table head)表格头</li><li>caption表格的标题</li><li>colspan，定义横向合并几个单元格</li><li>rowspan，定义纵向合并几个单元格</li><li>cellspacing，单元格之间的距离</li><li>cellpadding，内容与表格边框之间的距离</li><li>colgroup额外的定义表格的样式与col配合</li><li>thead ———表格的页眉</li><li>tbody ———表格的主体</li><li>tfoot ———定义表格的页脚<br><img src="http://www.runoob.com/wp-content/uploads/2014/08/learn-html5-tables-5-638.jpg" alt="image"><h3 id="10-列表"><a href="#10-列表" class="headerlink" title="10.列表"></a>10.列表</h3></li><li>发现一个有意思的现象，如果我定义了一个嵌套的无序列表，那么他们的前面的小点点是从实心原点、空心原点、实心方框这样的顺序表示的。</li><li>自定义列表，类似于table表格,dl(define list)、dt(define)和dd(define data/description)<h3 id="11-特殊知识"><a href="#11-特殊知识" class="headerlink" title="11.特殊知识"></a>11.特殊知识</h3></li><li>web安全色</li><li><a href="http://www.runoob.com/html/html-colornames.html" target="_blank" rel="noopener">141颜色名称</a>，是在HTML和CSS颜色规范定义的（17标准颜色，再加124）。17标准颜色：黑色，蓝色，水，紫红色，灰色，绿色，石灰，栗色，海军，橄榄，橙，紫，红，白，银，蓝绿色，黄色。</li><li><a href="http://www.runoob.com/tags/ref-entities.html" target="_blank" rel="noopener">字符实体</a>,大小写敏感<code>&nbsp;->(non-breaking space)</code><h3 id="12-url-uniform-resource-locator"><a href="#12-url-uniform-resource-locator" class="headerlink" title="12.url(uniform resource locator)"></a>12.url(uniform resource locator)</h3>scheme://host.domain:port/path/filename</li><li>scheme,因特网服务类型，比如http,https,ftp,file(本地)</li><li>host，主机名，默认是www</li><li>domain，域名，</li><li>post，主机上的端口号</li><li>path，服务器上的路径</li><li>filename，文件名</li><li>url使用ascii字符编码集，使用”%”其后跟随两位的十六进制数来替换非ASCII字符。不能包含空格。通常使用 + 来替换空格。</li><li><a href="https://www.cnblogs.com/xk-bench/p/7543500.html" target="_blank" rel="noopener">url中一些字符的作用</a>,比如&表示几个并列参数之间的连接。</li></ul>]]></content>
</entry>
<entry>
<title>《ThinkinJava》读书笔记就一篇</title>
<link href="/2017/12/04/20171204/"/>
<content type="html"><![CDATA[<p><excerpt in="" index="" |="" 首页摘要=""><br>   祭奠我那为了工作看了两页的《ThinkinJava》，做java的朋友说你一个初学者不适合看这种，多敲敲代码就好，于是就这样夭折了。不过不得不说，其实我觉得这本书写的真的挺好的。对于思想上的转变真的很有帮助。<br><a id="more"></a></excerpt></p><p><the rest="" of="" contents="" |="" 余下全文=""></the></p><h2 id="2017年11月29日"><a href="#2017年11月29日" class="headerlink" title="2017年11月29日"></a>2017年11月29日</h2><h3 id="1-句柄"><a href="#1-句柄" class="headerlink" title="1.句柄"></a>1.句柄</h3><p>我们对对象的操纵，实际上是通过对句柄的操作来实现的。拥有一个句柄，并不一定拥有一个对象同它有关系。因此创建句柄时最好进行初始化（通过new关键字）。</p><h3 id="2-存储"><a href="#2-存储" class="headerlink" title="2.存储"></a>2.存储</h3><ul><li>java对象保存在栈里，new即可，但时间耗费更长</li><li>java数据特别是对象句柄保存在堆栈里，java编译器必须准确的知道数据的长度及存储时间，缺少灵活性<h3 id="3-java数组"><a href="#3-java数组" class="headerlink" title="3.java数组"></a>3.java数组</h3>自动进行初始化和范围检查，null<h3 id="4-垃圾收集器"><a href="#4-垃圾收集器" class="headerlink" title="4.垃圾收集器"></a>4.垃圾收集器</h3>自动查找用new创建的对象，并辨别其中哪些不再被使用，随后它会自动释放由那些闲置对象占据的内存，以便能由新对象使用。<h3 id="5-class类"><a href="#5-class类" class="headerlink" title="5.class类"></a>5.class类</h3> class ATypeName{/*类主体置于这里，这样就引入了一种新类型，接下来就可以new创建这种类型的一个对象}<br> ATypeName a = new ATypeName();<h3 id="6-数据对象"><a href="#6-数据对象" class="headerlink" title="6.数据对象"></a>6.数据对象</h3>定义一个类时（我们在java里的全部工作就是定义类、制作那些类的对象以及将信息发给那些对象），可在自己的类里设置两种类型的元素：数据成员(字段)以及成员函数(方法)。数据对象如果是一个句柄，就必须使用构建器，若是主类型，则可以直接初始化。每个对象都为自己的数据成员保存有存储空间，数据成员不会在对象之间共享。<code>对象句柄.成员</code><h3 id="7-方法"><a href="#7-方法" class="headerlink" title="7.方法"></a>7.方法</h3> 返回类型 方法名(自变量列表){方法主体}<br> //返回类型是指调用方法之后的数值类型<br> //方法名的作用是对具体的方法进行标识和引用<br> //自变量列表列出了想传递给方法的信息类型和名称<br>对象名.方法名(自变量1，自变量2，自变量3…)</li></ul><p>面向对象的程序设计通常简单地归纳为“向对象发送消息”</p><h3 id="8-名字"><a href="#8-名字" class="headerlink" title="8.名字"></a>8.名字</h3><ul><li>c++采用命名空间</li><li>java采用与internet域名类似的库名字，反转域名，可将点号想象成子目录，以小写字母为准。</li><li>import关键字，准确的告诉编译器我们需要的类是什么，它的作用是指示编译器倒入一个包，或者说一个类库(其他语言里，可将库想象成一系列函数、数据以及类的集合，但是java中，所有的代码都必须写入一个类中)<figure class="highlight plain"><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">import java.util.Vector;</span><br><span class="line">import java.util.*;</span><br></pre></td></tr></table></figure></li></ul>]]></content>
<tags>
<tag> java </tag>
</tags>
</entry>
<entry>
<title>我想和你好好的</title>
<link href="/2017/12/02/180102/"/>
<content type="html"><![CDATA[<p><excerpt in="" index="" |="" 首页摘要=""><br> 《我想和你好好的》+《面纱》+ 《世间始终你好》观后感——记我对爱情的一点点儿浅薄的理解<br><a id="more"></a></excerpt></p><p><the rest="" of="" contents="" |="" 余下全文=""><br>偶然听到宋冬野的《平淡日子里的刺》很有感触，因取自原声带，饶有兴趣的去看了相关的电影《我想和你好好的》。该片豆瓣评分并不是很高，也许单身的人看了，都不想拥有一个女朋友吧。首先说说男主吧，从最开始就袒露了自己渣男的本质，不主动，不拒绝，不负责，但是从片子本身透露出的来看，体现的更多的是他对前女友的态度，照片，东西，大半夜给她送东西，以及后面和她的做爱。但是他又是爱女主的，为他紧张，被他管着，为他做饭，收起自己爱玩爱闹的心。偶尔同情男主。但是从他来看，他确实没有带给女生太多安全感，很多事情并不是嘴上说说就可以。从女主的角度，则觉得她确实很作，可是一个女孩子这样对你，不过是太过爱你，想和你一起生活，一起好好的生活，你可以有朋友，有自己的生活，但是我一定是你的唯一，我讨厌你有那么多过去，讨厌有人来分享你的爱，不管是朋友还是女生，讨厌你大半夜为了你的前女友特地跑出去，讨厌你烦心时需要的是他，讨厌你对我说谎，讨厌你让我如此爱你而丧失了自我。男主习惯了这样单调的生活，习惯了每天睡觉抱着女主的姿势。也许每个男孩子都要经历这么一个让你难忘的女孩子，才会真正成长为一个男人，也许每个女孩子都会经历这么一个让你如此奋不顾身的男人，才会变成更加独立成熟的人格。他的幼稚我的固执，都成为历史。<br>犹记得高中时非常喜欢“庭有枇杷树，吾妻死之年所植也，今已亭亭如盖矣”（出自归有光《项脊轩志》）读来非常感动，但是在前一阵，偶然得知，在妻子死之后，归有光又有了很多任妻子，很多人为此而声讨他，个人觉得其实这也很正常。爱情不应该是如此自私的。一生中可以喜欢很多人，但让你心疼的只有一个。如果激情退却之后，两个人在一起剩下的只有折磨，倒不如从此各安天涯，岁月安好。B站中曾经有人也为此文写过一段很动人的话，“有枇杷树,吾妻死之年所手植也,今已亭亭如盖矣。今伐之，为搏小娘子一笑。小娘子一笑，正若吾妻年少时。小娘子为吾妻与吾之女，今伐树，为小娘子造出嫁之物，愿伉俪情深，不输吾与亡妻。”开始认真的思考，到底什么样的相处模式才是爱情中最好的。<br>《面纱》这部小说中瓦尔特的深情告白曾经深深触动过我“我知道你愚蠢、轻浮、没有头脑，但是我爱你。我知道你的目标和理想既庸俗又普通，但是我爱你。我知道你是二流货色，但是我爱你。想一想真是好笑，我竭力去喜欢那些讨你喜欢的东西，忍受折磨也要对你隐瞒起自己，实际上我并不无知粗俗、不爱散播丑闻也不愚蠢。我知道你何等害怕智慧，便尽我所能让你觉得我是个大傻瓜，跟你认识的其他人一样。我知道你嫁给我只图一时利益，我是那样爱你，我不在乎。大多数人，就我所知，当他们爱一个人，却没有得到爱的回报时就会觉得委屈不平，甚至愈发愤怒和痛苦。我不是那样，我从来没有指望你爱我，我看不出任何理由让你爱我，我也从来没想过自己会被人爱。我很感激能被允许爱你，当我时常想起你高兴跟我在一起，或者当我发现你眼中闪烁着愉快的爱意时，我就会欣喜若狂。我尽量不让我的爱来烦扰你，我知道那会让我承受不起，所以我一直察言观色，留意我的爱让你厌烦的最初迹象。大部分丈夫认为那是一种权力，我却准备当成恩惠来接受。”。究竟是多深的爱，才能让一个人如此卑微。其实看完面纱以后，心里一直不是很舒服，突然对爱情产生了疑惑。我们决定和某个人结婚的原因到底是什么，像凯蒂一样的迫不得已而选择一个深爱自己的人么？当对年龄的恐惧和外人的闲言碎语将你包围的时候，你会不会选择一个合适的人而草草度过一生呢？我们总想遇到一个对的人，但是，每个人心里对对的人的标准都不一样，我也不知道什么样的人才是对的人。也许曾经遇到喜欢的人，你也曾经幻想过他或许就是你对的人，你用你脑海中仅存的小说和电视剧中的情节，幻想着，也许我们能共同度过今后漫长的人生之路。可是那个人，也许只是你生命中的一个过客而已，转眼就消失在你的生命中。分手后不做朋友挺好的，断了我们曾经所有的幻想，从今以后认真的开始新的生活。曾经的人教会我们成长，去变成一个不一样的，成熟的女孩。就像凯蒂一样，虽然我们曾经迷恋完美的肉体，动听的情话，但是当我们清楚的意识到自己在他心中的位置的时候，终究会学会成长。一直觉得，很多时候，女孩子在感情中，是弱势的一方，女生太容易付出自己的感情，一切，然而这些在男生的眼中，越多的主动，反而失去了探索的兴趣。我从不希望自己是一杯无味的白开水，也不希望自己是一杯碳酸饮料，将自己的热情释放完后，剩下的是什么，希望自己是一杯浓烈的酒，让人喝了，会醉。<br>最近恰好也看完了不知道在哪里了解到的《世间始终你好》(劳伦·弗莱施曼)，55对来自美国各地结婚至少50年的夫妻，也许我的年纪还不太能懂他们那种一辈子的婚姻，有时觉得一生太过漫长，有着太多的未知。也许那时的爱情会受到更多的来自于家庭、宗教、种族等地束缚，也有疾病和贫穷，也会争吵不休，但他们依然能携手度过一生。那时的女性大多步入婚姻，便将丈夫和孩子作为自己的重心，那时有什么问题会想着如何去修修补补，而现在的我们多想着去换一个新的。书中并没有提到什么浪漫的情节，反而更多的是生活中的琐事，娓娓道来。也许大多数爱情都是在经历过开始的激情过后，归于剩下平平淡淡的生活，也许这才是婚姻的本质。爱情过后，更多的是习惯和依赖，不在嘴上说我爱你，只想在生活中和你好好的在一起。始于感觉，陷于才华，忠于人品。也许最舒服的就是最好的吧。</the></p>]]></content>
<tags>
<tag> 读书笔记 </tag>
</tags>
</entry>
<entry>
<title>大话数据结构读书笔记(一)——冒泡排序</title>
<link href="/2017/10/18/20180110data1/"/>
<content type="html"><![CDATA[<h2 id="准备工作"><a href="#准备工作" class="headerlink" title="准备工作"></a>准备工作</h2><h3 id="1-指针与结构体"><a href="#1-指针与结构体" class="headerlink" title="1.指针与结构体"></a>1.指针与结构体</h3><p>参考网址: <a href="http://www.cnblogs.com/qyaizs/articles/2039101.html" target="_blank" rel="noopener">http://www.cnblogs.com/qyaizs/articles/2039101.html</a></p><p>指向结构体类型变量的使用<br><figure class="highlight plain"><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">定义结构体：</span><br><span class="line">struct stu{</span><br><span class="line"> char name[20];</span><br><span class="line"> long number;</span><br><span class="line"> float score[4];</span><br><span class="line">};</span><br><span class="line">//再定义指向结构体类型变量的指针变量</span><br><span class="line">struct stu *p1, *p2;</span><br><span class="line">//定义指针变量p1、p2，分别指向结构体类型变量。</span><br><span class="line">引用形式为：指针变量→成员;</span><br><span class="line">或者是指针变量.成员</span><br><span class="line">typedef struct{</span><br><span class="line"> char name[20];</span><br><span class="line"> long number;</span><br><span class="line"> float score[4];</span><br><span class="line">}Stu;</span><br><span class="line">//typedef(type define)在这里的作用是为结构体起了一个名为Stu的别名，当我们再次定义变量的时候，就可以直接使用Stu来定义了。</span><br></pre></td></tr></table></figure></p><h3 id="2-i"><a href="#2-i" class="headerlink" title="2.i++"></a>2.i++</h3><ul><li>i++ 返回原来的值，++i 返回加1后的值。</li><li>i++ 不能作为左值，而++i 可以。<h3 id="3-Status"><a href="#3-Status" class="headerlink" title="3. Status"></a>3. Status</h3></li><li>typedef int status;</li></ul><p>C语言中没有status这个关键字.但一般写程序时,会定义这样的一个类型,用来表示成功或失败状态.如：0表示成功,-1表示失败。这样status就可以定义成int类型,然后用它去定义变量或函数返回值类型。其实上面也已经提到过，typedef有重命名的意思，也就是说这一句话也可以表示又重新定义了一个变量表示int这种数据类型，然后这种数据类型可以专门用来表示状态。</p><h3 id="4-malloc函数的用法"><a href="#4-malloc函数的用法" class="headerlink" title="4.malloc函数的用法"></a>4.malloc函数的用法</h3><ul><li>须要包括头文件：#include ‘stdlib.h’</li><li>函数声明(函数原型)：void *malloc(int size);</li><li>malloc 向系统申请分配指定size个字节的内存空间。返回类型是 void<em> 类型。void</em> 表示未确定类型的指针</li><li>void* 类型能够强制转换为不论什么其他类型的指针</li><li>我们必须手动指定分配的空间的大小</li><li>int<em> TR=(int</em>)malloc(L->length <em> sizeof(int));/</em> 申请额外空间 */<figure class="highlight plain"><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">(分配类型*)malloc(分配元素个数*sizeof(分配类型))</span><br><span class="line">+ 此处的分配类型是为了将原来的void*类型强制转换为我们需要定义成的类型。</span><br></pre></td></tr></table></figure></li></ul><h3 id="5-一些基础准备"><a href="#5-一些基础准备" class="headerlink" title="5.一些基础准备"></a>5.一些基础准备</h3><ul><li>内排和外排<br>根据排序过程中待排序的记录是否全都放置在内存中。如果是则是内排序，否则由于排序的记录太多，不能同时放置在内存，整个排序过程需要在内外存之间多次交换数据，这样的排序称为外排序。</li><li>稳定性，⚠️<code>是否稳定由排序算法决定</code>。假定在待排序的记录序列中，存在多个具有相同的关键字的记录，若经过排序，这些记录的相对次序保持不变，即在原序列中，ri=rj，且ri在rj之前，而在排序后的序列中，ri仍在rj之前，则称这种排序算法是稳定的；否则称为不稳定的。</li><li><p>线性表的顺序存储结构</p><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">#define MAXSIZE 10///* 用于要排序数组个数最大值，可根据需要修改 */</span><br><span class="line">typedef struct {</span><br><span class="line"> int r[MAXSIZE +1];/* 用于存储要排序数组，r[0]用作哨兵或临时变量 */</span><br><span class="line"> int length;/* 用于记录顺序表的长度 */</span><br><span class="line">}SqList;</span><br></pre></td></tr></table></figure></li><li><p>swap函数</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">/* 交换L中数组r的下标为i和j的值 */</span><br><span class="line">void swap(SqList *L,int i,int j) { </span><br><span class="line"> int temp=L->r[i]; </span><br><span class="line"> L->r[i]=L->r[j]; </span><br><span class="line"> L->r[j]=temp; </span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ul><h2 id="2-冒泡排序-以递增为例"><a href="#2-冒泡排序-以递增为例" class="headerlink" title="2.冒泡排序(以递增为例)"></a>2.冒泡排序(以递增为例)</h2><p>依次比较相邻两个数据的大小，如果右边的数据比左边的数据小，那么交换两个数的位置，我想叫冒泡排序的原因就是因为本来大的数从原本队列中冒出到前面。</p><h3 id="c语言版"><a href="#c语言版" class="headerlink" title="c语言版"></a>c语言版</h3><p>⚠️⚠️⚠️在方法二和方法三中，j的条件是j>=<br>i,这样做的目的是在每次循环遍历排序的时候，最小值已经冒泡到了最前端，i的值也在不断变化着，所以j并不需要对i左边的数据进行比较和排序。<br>方法一并不满足冒泡排序的思想，只是简单的两两交换，虽然达到了排序的目的，但是效率低下。<br><figure class="highlight plain"><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">void BubbleSort0(SqList * L){</span><br><span class="line"> int i, j;</span><br><span class="line"> for (int i = 1; i < L->length; ++i){</span><br><span class="line"> for (int j = i+1; j <= L->length; j++){</span><br><span class="line"> if (L->r[i]>L->r[j]){</span><br><span class="line"> swap(L, i, j);</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">//对于一个数组下标为1-9，那么i的指针依次从1走到8，而j的指针呢，则是从2走到9</span><br></pre></td></tr></table></figure></p><p>方法二冒泡排序最后的小数据不断的网上冒，直到走到适合他的位置。<br><figure class="highlight plain"><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">void BubbleSort1(SqList * L){</span><br><span class="line"> int i, j;</span><br><span class="line"> for (int i = 1; i < L->length; ++i){</span><br><span class="line"> for (int j = L->length-1; j>=i; j--){</span><br><span class="line"> if (L->r[j+1]>L->r[j]){</span><br><span class="line"> swap(L, i, j);</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><p>方法三，改进的冒泡排序，增加了对数组某些数据是否已经有序的判断。避免对已经有序的数据进行遍历比较，增加不必要的时间消耗。<br><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">void BubbleSort2(SqList * L){</span><br><span class="line"> int i, j;</span><br><span class="line"> Status flag = true;</span><br><span class="line"> for (int i = 1; i < L->length && flag; ++i){</span><br><span class="line"> for (int j = L->length-1; j>=i; j--){</span><br><span class="line"> flag = false;</span><br><span class="line"> if (L->r[j+1]>L->r[j]){</span><br><span class="line"> swap(L, i, j);</span><br><span class="line"> flag = true;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><h3 id="时间复杂度分析"><a href="#时间复杂度分析" class="headerlink" title="时间复杂度分析"></a>时间复杂度分析</h3><ul><li>最好情况：需要排序的数据已经是一个有序的，故只需要遍历一次就可以确定这是一个排序完成的序列，此时时间复杂度为O(n)</li><li>最坏情况：需要排序的数据恰好是一个反序列的数据，所有的数据都需要进行一次循环遍历排序，此时的时间复杂度为1+2+..+(n-1)=(n-1)(n-1+1)/2=n(n-1)/2</li><li>综上所述，时间复杂度为O(n^2) </li></ul>]]></content>
<tags>
<tag> 数据结构 </tag>
</tags>
</entry>
<entry>
<title>express的安装和使用</title>
<link href="/2017/08/31/20171120express/"/>
<content type="html"><![CDATA[<h2 id="2017-8-31"><a href="#2017-8-31" class="headerlink" title="2017.8.31"></a>2017.8.31</h2><h3 id="1-git"><a href="#1-git" class="headerlink" title="1. git"></a>1. git</h3><ul><li>进入系统磁盘，那么则直接输入<code>cd \系统盘名称</code></li><li>进入某个文件夹，那么则直接输入<code>cd 文件夹名称</code></li><li>git 中不允许名称中包含有大写字母</li></ul><h3 id="2-express的安装和简单应用"><a href="#2-express的安装和简单应用" class="headerlink" title="2. express的安装和简单应用"></a>2. express的安装和简单应用</h3><ul><li><a href="http://weizhifeng.net/how-to-publish-a-node-module.html" target="_blank" rel="noopener">http://weizhifeng.net/how-to-publish-a-node-module.html</a></li></ul><p>如何发布Node模块到NPM社区</p><ul><li><a href="http://www.expressjs.com.cn/" target="_blank" rel="noopener">http://www.expressjs.com.cn/</a><br>express 官网</li></ul><p>如果只是全局的安装了express好像不可以，一定要在项目目录下再安装一次。</p><ul><li>服务启动不成功的时候，会生成一个express的debug的文件，记录调试信息，如果服务成功启动以后，那么这个文件会自动消失。</li><li>关于端口号被重复占用的问题</li></ul><p><code>Failed at the myresume@0.0.0 start script 'node ./bin/www'.</code>其实这个指的就是我们的文件夹目录下的www文件，在这里我们可以手动修改端口号的值。从而解决端口号被占用的问题。</p><h3 id="3-express不是内部或外部命令也不是可运行的程序？"><a href="#3-express不是内部或外部命令也不是可运行的程序？" class="headerlink" title="3.express不是内部或外部命令也不是可运行的程序？"></a>3.express不是内部或外部命令也不是可运行的程序？</h3><p>安装时请使用<code>npm install -g express</code>命令，另因express默认安装是最新的版本，已经是4.x.x的版本。而最新express4.0+版本中将命令工具分出来了，所以必须要安装express-generator，执行命令<code>npm install -g express-generator</code>命令即可。无需配置环境变量等东西。安装完成后，执行<code>express --version</code>命令，即可看到安装的express的版本号。另外，<code>npm -v</code>命令并不是查看版本号，而是 <code>-v, --view <engine> add view <engine> support (dust|ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)</code></p>]]></content>
<tags>
<tag> express </tag>
</tags>
</entry>
<entry>
<title>胆小的戏精女——独立回家</title>
<link href="/2017/08/26/20170826/"/>
<content type="html"><![CDATA[<p><excerpt in="" index="" |="" 首页摘要=""><br>   胆小的戏精女的一次夜雨晚上回家的经历，脑补各种画面，真是个名副其实的双鱼座<br><a id="more"></a></excerpt></p><p><the rest="" of="" contents="" |="" 余下全文=""><br>1.因为我在这个世界上，向来不觉得是芸芸众生里的一份子，我常常要跑出一般人生活着的轨道，做出解释不出原因的事情来。</the></p><p>2.有了人的地方，就有了说不出的生气和趣味。生命，在这样荒僻落后而贫苦的地方，一样欣欣向荣的滋长着，它，并不是挣扎着在生存，对于沙漠的居民而言，他们在此地的生老病死都好似是如此自然的事。我看着那些上升的烟火，觉得他们安详得近乎优雅起来。自由自在的生活，在我的解释里，就是精神的文明。</p><p>这两天上下班沉迷于看和听三毛的《撒哈拉的故事》，上学时经常听人提起三毛，也偶尔在书报上看到三毛和荷西的照片。却未看过他们的书，了解过他们的故事。</p><p>昨天下班路上很幸运的有座位，一路沉浸于三毛和荷西的讲述中， 冥冥之中，突然抬头，发现已经到站，踉踉跄跄的跑下车站，心里暗自庆幸。从地铁站到居所，为了安全，晚上的时候，我们总是会贯穿过一个小区。晚上八九点钟， 偶尔会有健身男女在绕着小区跑步，门，是刷卡那种，但是从里面出来，我们可以按下门柱上的开关即可。我们因为没有卡，每次只好跟着人流，或者利用长长的胳膊，伸手从里面把开关打开。偶尔出来时候，会碰到骑车的人，也会开门等他们进来，因为陌生人的一句谢谢而感动。出来的时候，刚好看到保安大叔，在看我，我望向他，报以傻瓜式的微笑，轻轻的离开了。</p><p>路上一边看着书，一边想着昨天差点儿坐过站的事情，一抬眼，又恰好到站，有点儿好笑呢。出来的时候楼梯有点儿怪怪的，我想丰台站挺大的，或许我之前没有注意到，也没有在意。而后刷卡出来之后越来越不对劲儿呢，转身望向旁边的路牌，心里暗惊：完了，真的坐过站了。然而此时我已经出站，再想想，也不过一站地而已，能有多远呢，回去又好麻烦的。骑个车回去算了。此时外面已经有闪电在闪烁，地铁口的摩拜在黑暗的天空下，怎么都卡不开，嘿嘿，还有输入车的编号，不过要是输错了，可是要赔偿至少2000块的损失，我还是为自己捏了把冷汗，仔细核对了好几遍以后，终于轻轻的点击了确定，随着车子咔哒一声，我也算是安心了。<br>打开高德地图，开始认认真真的查起路线，17分钟呢，看着手机上将近10点的时间，在看看路上稀少的行人，以及闪烁的天空，我还真心有点儿慌乱。骑上车，像疯子一样，疯狂而快速的蹬着车轮，最开始的时候，还因为想错方向，进入一个荒无人烟的地方，那是真心害怕，想到地图可能会给我指到什么荒无人烟小路，我的心跳霎时变快了好多，后面看看手机中的地图，还好，是我走错了，重新走回大路，并没有什么弯路，一路直行。偶尔也会有对面的车子和停在路边的汽车要掉头什么的，还好及时刹住了车。心里面一会儿想着可能会遇到的突发情况，一会儿想着同事前两天被飞车党将手机抢走的事情，而我的手机好像也不安全，就又攥紧了几分，想着如果我真遇到坏人，马路上疾驰的车子会停下来理我么？后面雨越下越大， 我身上湿漉漉的，不知是雨水还是汗水。</p><p>因为室友们今天都已经回了家的缘故，到家的时候我还是很害怕，关了车子之后，一面往前走着，一面回头观察身后的情况，在打开门的一刹那，瞬间逃进屋子，坐在床沿上发呆。</p><p>女孩子，还是要多考虑自己的自身安全，遇到事情不要太慌张。突然想找一个陪我的男朋友…..</p>]]></content>
<tags>
<tag> 读书笔记 </tag>
</tags>
</entry>
<entry>
<title>《坦白书》读书笔记</title>
<link href="/2017/07/20/20170720/"/>
<content type="html"><![CDATA[<p><excerpt in="" index="" |="" 首页摘要=""><br> 我所有的自负皆来自我的自卑，所有的英雄气概都来自于我的软弱。嘴里振振有词是因为心里满是怀疑，深情是因为痛恨自己无情。这世界没有一件事情是虚空而生的，站在光里，背后就会有阴影。这深夜里一片寂寞，是因为你还没有听见声音。<br><a id="more"></a></excerpt></p><p><the rest="" of="" contents="" |="" 余下全文=""></the></p><p><contents></contents></p><p></p><p style="text-indent: 40px"><br><strong>p2.1.</strong>我要在你平庸无奇的回忆里做一个闪闪发光的神经病。<br><strong>p6.2.</strong>我的身体里住过我一生至今每个冬天的雪，住过大海，住过这世间所有流浪的爱人。<br><strong>p17.3.</strong>就像生命力里所有的甜蜜和酸楚总是结伴而行，而疼痛总是四处追逐着快乐，片刻也不愿分开。<br><strong>p19.4.</strong>有些词在人生里是有时态的，过一定的年纪之后，这个词便和你无关了，和知了的聒噪声一样，远离了这个城市的夏天，从此属于回忆的一部分。我和所有过了保质期的少年一样，就这样自以为是的长大成人，和童话书以及书页里夹藏的所有秘密，从此分道扬镳，此生不再相遇。于是，在这个恍如隔世的夏夜，我又看到了小时候的自己，还躺在那时光里，已经死了很久很久，比我后来所经历的人生还要久，而那些些消失在书页里的花儿和蝴蝶，在那方舞台上漫天地飞舞。原来他们一直在那儿，一直陪着那寂寞的小小少年。<br><strong>p20.5.</strong>然后，我也永远记住了那种愚蠢地夺去别人生命的耻辱和最后遭到的报应。很多年以后，我还做过一个噩梦，我梦见自己就是那只小老鼠，在无数的雨点般跺下来的脚里，拼命地奔逃，烟尘滚滚，四面楚歌，我也不知道能不能逃掉，拼命地跑。再后来，我发现我们都是在跑，这个世界上谁也逃不掉。<br><strong>p25.6.</strong>他总是微笑告诉我，以后无论生活强加于你什么，都不能被挫折改变，应该保有自己的尊严和态度，这才是真正的绅士。<br><strong>p29.7.</strong>童年的痛苦在于，你总是无法说出你想说的话。长大后你可以说了，却没什么好说的了，不愿意说了，或者是不敢说了。我们的生命因为有死亡的存在，在本质上说是束缚和被定义的，人和人完全相互理解是很难的。那些不为人知的青春爱欲，成长的脆弱、酸楚和甜蜜，其实永远只属于你自己，如同草叶静静生长，然后静静地枯萎。我常常回忆起自己的过去，那些时光像是博物馆橱窗里的标本，安静，死寂。我们身处这个超速的时代，那曾经历过的生活，回头看已变得似是而非。它正以某种荒诞的速度，飞速地从我们的记忆力逃之夭夭,根本无法捉住它。只有在相互遗忘之前，用想象弥补初一个亦真亦幻的过去，沉溺其中片刻以获得某种温情的安抚，似乎时间从没有离弃过我，一切事物都可以坦然地归于最开始的地方，安静从容。乐此不疲于这一场时光旅行的游戏。虽然我也知道这是徒劳的。<br><strong>p55.6.</strong>毛姆曾经写过，今天我已经认识到这一点：卑鄙与伟大，恶毒与善良，仇恨和热爱是可以不排斥的存在同一颗心里的。所以，亲爱的朋友，请原谅我吧！对此，至少有一半的我是值得的。<br>——我所有的自负皆来自我的自卑，所有的英雄气概都来自于我的软弱。嘴里振振有词是因为心里满是怀疑，深情是因为痛恨自己无情。这世界没有一件事情是虚空而生的，站在光里，背后就会有阴影。这深夜里一片寂寞，是因为你还没有听见声音。<br>——每次见到不善言辞的年轻人，总很小心翼翼不多说话，希望不要因为自己的饶舌而让他们自卑。如今我终于明白，会说话并不是件必须的事情，生活志海，长风击浪固然风流，在水下深潜也是件美妙的事情。一直很怀念自己口不能言一个人沉在水底的青春岁月，后悔太早挣扎着想浮上来。如今阳光之下并无新事。眼看着手里值钱的东西，莫不是都来自那时光的沉默深处。只可惜早早学了弄潮儿，带出来的所剩无几。<br><strong>p65.9</strong>请给我一个温柔的理由吧，让我宽恕这个我如此深爱却几乎杀了我的世界。<br><strong>p66.10.</strong>所谓才华是不存在的。艺术创作只是选择了一种生活，瞪大眼睛，无论眼睛里看到了多少伤悲，有多少风沙迷雾只能狠狠地看着。把内心和盘托出，无论它多么敏感柔软，是把生命里的每一秒每一个瞬间都细细咀嚼，无论是蜜糖还是毒鸩都咽下去。没有平静可言，这是一条正常生活的背道之徒，精神上的亡命而已。<br><strong>p68.11.</strong>每次想到在有限的生命里，竟要被那些傻逼的人和事所束缚，便会油然而生一种没来由的斗志，瞬间满血复活。<br>——这世界每天产生很多很多的微小如尘埃的情感和秘密。只和当事人有关，随后就被时间洪流埋葬了。无关的我们无须也无法关注，因为我们自己也有无数的随流沙而去的情感来不及握住。但他们还是如此动人，尤其偶然从时光里惊鸿一瞥间。<br><strong>p74.12.</strong>一个生活里的小人物做着自己认为浪漫的工作，为陌生的人送信传情，尽管只是个邮差，但他自己觉得他自己是个温暖又重要的人。他有时觉得自己是个伟大的英雄，可以穿墙可以可以飞天，但有时他也知道自己只是一条落网的胖鱼，无处可逃；但信还是终归要送的，这是他的工作。<br>我一直觉得，这个世界本来的面目是索然无味的，还好我们有幻觉和想象力，它们在潜意识里辛苦地织补着我们破绽百出的生活，使之柔和并让人眷恋一些。<br><strong>p75.13.</strong>是烟云，是泡沫，也是一小勺膨胀出来的巨大的甜蜜和幸福。我想起了两年前写下的这句话，我一直很喜欢这句话，对此常常有些“自恋”。生活里很多东西都是会破灭的，但不妨碍我们相信生活在美好的幻觉里，享受幻觉放大的幸福感。人往往会先给自己算个卦，然后就心甘情愿地照这个卦象生活，所以我们要做个会作弊者，只给自己抽一根上上签，不好的就直接扔掉，读也别读，想都别再想。<br><strong>p77.14.</strong>生命只是一场寂寥的马戏，我们孤独地表演着自己。即使这只是一场寂寥的马戏，我们依然要活色生香地演下去。<br><strong>p82.14.</strong>我们站在舞台上，世界的手把帷幕慢慢地拉开，一开始有点刺眼，渐渐就可以看清楚了，幕布之外那未曾见过的一切，让人喜不自禁，可惜那只手不曾停下来。之后他会很慢很慢地合上大幕，人的一生就是这样。当你正面对完全打开的世界的时候，一定要好好地享受，拼命地记得。因为之后阴影将追着你，无处可逃。<br><strong>p85.14.</strong>所有的自我毁灭都带有极端的美感，但仅仅为了美感或者或死去都不太靠谱。大部分时候，所谓生活的抉择，无非就是选择要在一场古典悲剧里演一个执迷不悔的小丑，或是在一出肥皂剧里演一个愚蠢的没有悬念的英雄。<br><strong>p88.15.</strong>生活本身就是很现实的，每靠近完美一分便要付出一分的代价。浪漫的背后往往是最不浪漫的消磨，所以生活里仅存的那点儿浪漫才显得尤其可贵。努力存住那种情缘赴汤蹈火的勇敢吧，像护住那风中之烛，不能任其灭了。你知道的，那是我们获得幸福的唯一希望。<br><strong>p111.16.</strong>这时间最美丽却也残酷的一切，总是来去如朝雾，亦如闪电，于是我开始相信爱和自由，只存在于惊鸿一瞥间。<br><strong>p112.17.</strong>如果我们的生活里，没有痛苦，将不会更好，而会更糟，因为这样我们将不曾有过幸福，有过希望。《潜行者》塔科夫斯基</p>]]></content>
<tags>
<tag> 读书笔记 </tag>
</tags>
</entry>
<entry>
<title>记录一些我可能遇见的技术名词</title>
<link href="/2017/03/03/20170303/"/>
<content type="html"><![CDATA[<p><excerpt in="" index="" |="" 首页摘要=""><br> 记录一下我曾经见到过的技术名词，当然了也不是每个都会记录下来，而且有些时间已经很久远了，放在这就当复习啦～<br><a id="more"></a></excerpt></p><p><the rest="" of="" contents="" |="" 余下全文=""></the></p><h3 id="1-Sass"><a href="#1-Sass" class="headerlink" title="1.Sass"></a>1.Sass</h3><p>software-as-a-service软件即服务，一种通过internet提供软件的模式，厂商将应用软件统一部署在自己的服务器上，客户可以根据自己的需求通过互联网向厂商订购所需要的应用软件和服务</p><p>lass（infrastructure-as-service基础即服务）是卖笔记本电脑的，pass（platform-as-service平台即服务）是卖操作系统的（比如windows），sass是卖应用程序的（比如office等办公软件，普通用户能直接使用的东西）</p><h3 id="2-whatwg"><a href="#2-whatwg" class="headerlink" title="2.whatwg"></a>2.whatwg</h3><p>web超文本应用技术工作组(web hypertext application technology working group)</p><h3 id="3-w3c"><a href="#3-w3c" class="headerlink" title="3 w3c"></a>3 w3c</h3><p>万维网联盟(world wide web consortium)</p><h3 id="4-spa"><a href="#4-spa" class="headerlink" title="4.spa"></a>4.spa</h3><p>simple page applications单页面应用</p><h3 id="5-富应用技术"><a href="#5-富应用技术" class="headerlink" title="5.富应用技术"></a>5.富应用技术</h3><ul><li>adobe flex<br>由macromedia公司在2004年3月发布，基于其专有的macromedia flash平台，支持富应用开发和部署的技术组合。</li><li>javafx 由sun公司开发的一种声明性的、静态类型脚本语言，开发富互联网应用程序。</li><li>silverlight 融合了微软多种技术的web呈现技术，提供了一套开发框架，并通过使用基于向量的图像图层技术，支持任何尺寸图像的无缝整合，对基于asp.net、ajax在内的web开发环境实现了无缝对接。<h3 id="6-webGL"><a href="#6-webGL" class="headerlink" title="6.webGL"></a>6.webGL</h3>是一种3d绘图标准，这种绘图技术标准允许把javascript和openGL(open graphics library是指定义了一个跨编程语言、跨平台的编程借口规格的专业的图形程序接口。它用于三维图像，是一个功能强大调用方便的底层图形库) es2.0结合在一起，通过增加openGL ES2.0的一个javascript绑定，webGL可以为html5 canvas提供硬件3d加速渲染，这样web开发人员久可以借助系统显卡来在浏览器中更加流畅的展示3d场景和模型了，还能创建复杂的导航和数据视觉化。<h3 id="7-OLAP-联机分析处理"><a href="#7-OLAP-联机分析处理" class="headerlink" title="7.OLAP(联机分析处理)"></a>7.OLAP(联机分析处理)</h3>联机分析处理OLAP是一种软件技术，它使分析人员能够迅速、一致、交互地从各个方面观察信息，以达到深入理解数据的目的。它具有FASMI(Fast Analysis of Shared Multidimensional Information)，即共享多维信息的快速分析的特征。其中F是快速性(Fast)，指系统能在数秒内对用户的多数分析要求做出反应；A是可分析性(Analysis)，指用户无需编程就可以定义新的专门计算，将其作为分析的一部 分，并以用户所希望的方式给出报告；M是多维性(Multi—dimensional)，指提供对数据分析的多维视图和分析；I是信息性(Information)，指能及时获得信息，并且管理大容量信息。许多企业利用关系型数据库来存储和管理业务数据，并建立相应的应用系统来支持日常的业务运作。这种应用以支持业务处理为主要目的，被称为联机事务处理(On line Transaction Processing，OLTP)应用，它所存储的数据被称为操作数据或者业务数据。<h3 id="8-OLTP-联机事务处理过程"><a href="#8-OLTP-联机事务处理过程" class="headerlink" title="8.OLTP(联机事务处理过程)"></a>8.OLTP(联机事务处理过程)</h3>On-Line Transaction Processing联机事务处理过程(OLTP)<br>也称为面向交易的处理过程，其基本特征是前台接收的用户数据可以立即传送到计算中心进行处理，并在很短的时间内给出处理结果，是对用户操作快速响应的方式之一。<h3 id="9-ElasticSearch"><a href="#9-ElasticSearch" class="headerlink" title="9.ElasticSearch"></a>9.ElasticSearch</h3>ElasticSearch是一个基于Lucene的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎，基于RESTful web接口。Elasticsearch是用Java开发的，并作为Apache许可条款下的开放源码发布，是当前流行的企业级搜索引擎。设计用于云计算中，能够达到实时搜索，稳定，可靠，快速，安装使用方便。使用JSON通过HTTP来索引数据。</li><li>cluster<br>代表一个集群，集群中有多个节点，其中有一个为主节点，这个主节点是可以通过选举产生的，主从节点是对于集群内部来说的。es的一个概念就是去中心化，字面上理解就是无中心节点，这是对于集群外部来说的，因为从外部来看es集群，在逻辑上是个整体，你与任何一个节点的通信和与整个es集群通信是等价的。</li><li>replicas<br>代表索引副本，es可以设置多个索引的副本，副本的作用一是提高系统的容错性，当某个节点某个分片损坏或丢失时可以从副本中恢复。二是提高es的查询效率，es会自动对搜索请求进行负载均衡</li><li>elasticsearch-hadoop<br>是一个深度集成Hadoop和ElasticSearch的项目，也是ES官方来维护的一个子项目，通过实现Hadoop和ES之间的输入输出，可以在Hadoop里面对ES集群的数据进行读取和写入，充分发挥Map-Reduce并行处理的优势，为Hadoop数据带来实时搜索的可能。 </li><li>Apache Spark 是专为大规模数据处理而设计的快速通用的计算引擎。一种与 Hadoop 相似的开源集群计算环境，Spark是UC Berkeley AMP lab (加州大学伯克利分校的AMP实验室)所开源的类Hadoop MapReduce的通用并行框架，拥有Hadoop MapReduce所具有的优点；但不同于MapReduce的是——Job中间输出结果可以保存在内存中，从而不再需要读写HDFS，因此Spark能更好地适用于数据挖掘与机器学习等需要迭代的MapReduce的算法。</li><li>Chef是IT自动化平台，可让客户创建、部署、变更和管理基础设施运行时环境和应用。Chef是平台无关的，可以部署到云端、本地或作为虚机（VM）。Chef也被称为部署自动化工具和DevOps使能者，它是一款可以为不同规模企业提供许多集成选项的产品。<h3 id="10-BSD协议"><a href="#10-BSD协议" class="headerlink" title="10.BSD协议"></a>10.BSD协议</h3>berkeley software distribution伯克利软件发行版，是一整套软件发行版的统称，是自由软件中使用最广泛的许可证之一。该协议可以自由的使用并且修改源码，也可以将修改后的代码作为开源或者专利软件再发布。<h3 id="11-SQLite"><a href="#11-SQLite" class="headerlink" title="11.SQLite"></a>11.SQLite</h3>一种轻型的数据库，遵守ACID的关联式数据库管理系统，主要被用于嵌入式产品，占用资源非常低，在嵌入设备中，可能只需要几百k的内存就够了。<h3 id="12-面包屑导航"><a href="#12-面包屑导航" class="headerlink" title="12.面包屑导航"></a>12.面包屑导航</h3>面包屑导航(BreadcrumbNavigation)这个概念来自童话故事”汉赛尔和格莱特”，当汉赛尔和格莱特穿过森林时，不小心迷路了，但是他们发现在沿途走过的地方都撒下了面包屑，让这些面包屑来帮助他们找到回家的路。所以，面包屑导航的作用是告诉访问者他们目前在网站中的位置以及如何返回。格式类似主页 >栏目页>文章页面<h3 id="13-ruby-on-rails"><a href="#13-ruby-on-rails" class="headerlink" title="13.ruby on rails"></a>13.ruby on rails</h3>Ruby on Rails 是一个可以使你开发、部署、维护 web 应用程序变得简单的框架。<h3 id="14-express"><a href="#14-express" class="headerlink" title="14.express"></a>14.express</h3>express帮助创建各种web应用，丰富的http工具以及来自connect框架的中间件随取随用，创建强健友好的api。<h3 id="15-高内聚低耦合性"><a href="#15-高内聚低耦合性" class="headerlink" title="15.高内聚低耦合性"></a>15.高内聚低耦合性</h3>组件划分原则：</li><li>高内聚:把逻辑紧密相关的内容放在一个组件内。</li><li>低耦合:不同组件间的依赖关系要尽量弱化，也就是每个组件都保持独立。<h3 id="16-pwa"><a href="#16-pwa" class="headerlink" title="16.pwa"></a>16.pwa</h3>progressive web applications（<a href="https://juejin.im/entry/5a1c394a5188255851326da5）" target="_blank" rel="noopener">https://juejin.im/entry/5a1c394a5188255851326da5）</a> 渐进式网页应用程序<br><a href="http://blog.csdn.net/qq_19238139/article/details/77531191" target="_blank" rel="noopener">http://blog.csdn.net/qq_19238139/article/details/77531191</a><h3 id="17-eslint"><a href="#17-eslint" class="headerlink" title="17.eslint"></a>17.eslint</h3>EsLint帮助我们检查Javascript编程时的语法错误。比如：在Javascript应用中，你很难找到你漏泄的变量或者方法。EsLint能够帮助我们分析JS代码，找到bug并确保一定程度的JS语法书写的正确性。<h3 id="18-NPM"><a href="#18-NPM" class="headerlink" title="18.NPM"></a>18.NPM</h3><a href="https://segmentfault.com/a/1190000008634604" target="_blank" rel="noopener">https://segmentfault.com/a/1190000008634604</a></li></ul><p>NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：</p><ul><li>允许用户从NPM服务器下载别人编写的第三方包到本地使用。</li><li>允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。</li><li>允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。<h3 id="19-git-hook"><a href="#19-git-hook" class="headerlink" title="19.git hook"></a>19.git hook</h3>Git可以定制一些钩子，放在git/hooks/目录下。这些钩子可以在特定的情况下被执行，分为Client端的钩子和Server端的钩子。Client端钩子被operation触发，比如commit，merge等，Server端钩子被网络动作触发，比如pushed commits。<h3 id="20-用-husky-和-lint-staged-构建超溜的代码检查工作流"><a href="#20-用-husky-和-lint-staged-构建超溜的代码检查工作流" class="headerlink" title="20.用 husky 和 lint-staged 构建超溜的代码检查工作流"></a>20.用 husky 和 lint-staged 构建超溜的代码检查工作流</h3><a href="https://segmentfault.com/a/1190000009546913" target="_blank" rel="noopener">https://segmentfault.com/a/1190000009546913</a></li></ul><p>为了缩短 Lint 的反馈链条，把 Lint 挪到本地是最有效的办法。常见做法是使用 husky 或者 pre-commit 在本地提交之前做 Lint。</p><h3 id="21-prettier代码格式规范化工具"><a href="#21-prettier代码格式规范化工具" class="headerlink" title="21.prettier代码格式规范化工具"></a>21.prettier代码格式规范化工具</h3><p><a href="http://tech.it168.com/a2017/0420/3116/000003116939.shtml" target="_blank" rel="noopener">http://tech.it168.com/a2017/0420/3116/000003116939.shtml</a></p><h3 id="22-airbnbJavaScript规范"><a href="#22-airbnbJavaScript规范" class="headerlink" title="22.airbnbJavaScript规范"></a>22.airbnbJavaScript规范</h3><p><a href="https://github.com/yuche/javascript" target="_blank" rel="noopener">https://github.com/yuche/javascript</a></p>]]></content>
<tags>
<tag> 技术名词 </tag>
</tags>
</entry>
<entry>
<title>The art of writing small and plain functions</title>
<link href="/2016/09/12/zbj180227/"/>
<content type="html"><![CDATA[<p><excerpt in="" index="" |="" 首页摘要=""><br> 曾经在实习的时候徽大大布置的任务，其中部分由徽大大翻译，部分由我翻译。<br><a id="more"></a></excerpt></p><p><the rest="" of="" contents="" |="" 余下全文=""><br>原文地址：<a href="https://rainsoft.io/the-art-of-writing-small-and-plain-functions/?utm_source=codropscollective" target="_blank" rel="noopener">https://rainsoft.io/the-art-of-writing-small-and-plain-functions/?utm_source=codropscollective</a></the></p><p>The complexity of software applications is growing. The code quality is important in order to make the application stable and easily extensible.</p><p>随着应用软件的复杂度的不断增长，代码的质量在增加应用的稳定性和易扩展性方面起到了至关重要的作用。</p><p>Unfortunately almost every developer, including myself, in his career faced with bad quality code. And it’s a swamp. Such code has the following harmful characteristics:</p><p>然而不幸的是，包括我自己在内的每一位开发者在其职业生涯中都要不可避免地面对一些糟糕的代码。这些代码都有如下的不好的特点： </p><ol><li>Functions are too long and do too many things </li><li>Often functions have side effects that are difficult to understand or even debug </li><li>Unclear naming of functions and variables</li><li>Fragile code: a small modification unexpectedly breaks other application components</li><li>Poor or missing code coverage</li></ol><p>1.函数太长且实现了太多的功能</p><p>2.难以理解和调试</p><p>3.复杂多样的函数名称和变量声明</p><p>4.脆弱的代码：一个小小的修改可能会意外的导致其他组件崩溃</p><p>5.代码测试覆盖率低</p><p>It sounds very common: “I don’t understand how this code works”, “this code is a mess”,”it’s hard to modify this code” and the like.</p><p>我们可能经常会听到：“我真的不明白这个代码是如何执行的”，“这个代码真是坑”，“这个代码太难改了”诸如此类的抱怨。</p><p>Once I had a situation when my colleague quit his job because he dealt with a REST API on Ruby that was hard to maintain. He received this project from previous team of developers. </p><p>曾经有一次我的同事放弃了他的工作，只因为他要处理的一个用Ruby编写的REST API太难维护。而那个项目是由之前的开发团队手中接手的。</p><p>Fixing current bugs creates new ones, adding new features creates a new series of bugs and so on (fragile code). The client didn’t want to rebuild the application with a better design, and the developer made the correct decision to quit.</p><p>修改现有的bug会产生新的更多的bugs，添加一个新的功能会引发一连串的连锁反应，产生很多bugs等等诸如此类的情况（这也就是我们所说的fragile codes）。如果客户不想重构更好的应用设计，那么作为开发者最明智的决定就是退出。</p><p>Ok, such situations happen often and are sad. But what do to?</p><p>好吧，这个坑就是这样无处不在让人头疼，那么作为程序开发者的我们，该如何去应对或者说尽量避免这种情况的发生呢？</p><p>The first to keep in mind: simply making the application run and taking care of the code quality are different tasks.</p><p>牢记在心的一件事：代码的可运行性和注重代码质量是两件事。</p><p>On one side you implement the app requirements. But on the other side you should take time to verify if any function doesn’t have too much responsibility, write comprehensive variable and function names, avoid functions with side effects and so on.</p><p>一方面你需要完成应用开发需求，但是另一方面你要花时间去验证某个函数是否做了很多事情。命名容易理解的变量和函数名称，避免函数的耦合性等等。</p><p>The functions (including object methods) are the little gears that make the application run. First you should concentrate on their structure and composition. The current article covers best practices how to write plain, understandable and easy to test functions.</p><p>函数（包括对象方法）是保证应用运行的最小单元。首先你应该专注于他们的结构和组成。本文将通过实例很好的讲述了如何写出一个单一可读和可测试的函数。</p><h3 id="Functions-should-be-small-Really-small-函数要小且足够的小"><a href="#Functions-should-be-small-Really-small-函数要小且足够的小" class="headerlink" title="Functions should be small. Really small 函数要小且足够的小"></a>Functions should be small. Really small 函数要小且足够的小</h3><p>Big functions that have a lot of responsibility should be avoided and split into small ones. Big black box functions are difficult to understand, modify and especially test.</p><p>我们应该避免庞大的拥有很多功能的大函数，应该将其分解成相应的小函数。庞大的黑盒函数是很不可读，难以修改和不易测试的。</p><p>Suppose a scenario when a function should return the weight of an array, map or plain JavaScript object. The weight is calculated by summing the property values:</p><p>假设一个场景：当一个功能函数需要通过返回数组，map或者简单的js对象的值。而这个值是通过所有属性值的和而得到的。</p><ul><li>1 point for null or undefined </li><li>2 points for a primitive type</li><li>4 points for an object or function.</li><li>未定义和null值表示1分</li><li>一个简单对象是2分（含有零个或多个的key/value对）</li><li>函数和自定义对象是4分</li></ul><p>For example the weight of an array [null, ‘Hello World’, {}] is calculated this way: 1 (for null) + 2 (for string primitive type) + 4 (for an object) = 7.</p><p>例如一个对象集合是 [null,’hello world’,{}],计算公式是：1(for null) + 2(for string) + 4（for an object）= 7</p><h3 id="Step-0-The-initial-big-function-原始的庞大函数"><a href="#Step-0-The-initial-big-function-原始的庞大函数" class="headerlink" title="Step 0: The initial big function 原始的庞大函数"></a>Step 0: The initial big function 原始的庞大函数</h3><p>Let’s start with the worst practice. The logic is coded within a single big function</p><p>让我们从一个反面例子开始。将所有逻辑放在一个庞大的函数里面</p><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">function getCollectionWeight(collection) { </span><br><span class="line"> let collectionValues;</span><br><span class="line"> if (collection instanceof Array) {</span><br><span class="line"> collectionValues = collection;</span><br><span class="line"> } else if (collection instanceof Map) {</span><br><span class="line"> collectionValues = [...collection.values()];</span><br><span class="line"> } else {</span><br><span class="line"> collectionValues = Object.keys(collection).map(function (key) {</span><br><span class="line"> return collection[key];</span><br><span class="line"> });</span><br><span class="line"> }</span><br><span class="line"> return collectionValues.reduce(function(sum, item) {</span><br><span class="line"> if (item == null) {</span><br><span class="line"> return sum + 1;</span><br><span class="line"> } </span><br><span class="line"> if (typeof item === 'object' || typeof item === 'function') {</span><br><span class="line"> return sum + 4;</span><br><span class="line"> }</span><br><span class="line"> return sum + 2;</span><br><span class="line"> }, 0);</span><br><span class="line">}</span><br><span class="line">let myArray = [null, { }, 15]; </span><br><span class="line">let myMap = new Map([ ['functionKey', function() {}] ]); </span><br><span class="line">let myObject = { 'stringKey': 'Hello world' }; </span><br><span class="line">getCollectionWeight(myArray); // => 7 (1 + 4 + 2) </span><br><span class="line">getCollectionWeight(myMap); // => 4 </span><br><span class="line">getCollectionWeight(myObject); // => 2</span><br></pre></td></tr></table></figure><p>The problem is clearly visible. getCollectionWeight() function is too big and looks like a black box full of surprises.</p><p>这个问题很明确。getCollectionWeight()函数太大并且看起来像一个充满惊喜的黑洞</p><p>You probably find it difficult to understand what it does from the first sight. And imagine a bunch of such functions in an application.</p><p>当你第一眼看到他的时候你可能很难理解他到底在干嘛。想象一下在你的应用中有这样一大坨函数。</p><p>When you work with such code, you waste time and effort. On the other side the quality code doesn’t make you feel uncomfortable. Quality code with small and self-explanatory functions is a pleasure to read and easy to follow.</p><p>当你处理这种代码的时候，你会花费很多精力和时间。另外，这种质量的代码让人看起来很不爽。因为去阅读和理解易懂简小的高质量代码本身就是一种美的享受。</p><h3 id="Step-1-Extract-weight-by-type-and-drop-magic-numbers按照参数和类型简化代码的权重"><a href="#Step-1-Extract-weight-by-type-and-drop-magic-numbers按照参数和类型简化代码的权重" class="headerlink" title="Step 1: Extract weight by type and drop magic numbers按照参数和类型简化代码的权重"></a>Step 1: Extract weight by type and drop magic numbers按照参数和类型简化代码的权重</h3><p>Now the goal is to split the big function into smaller, independent and reusable ones. The first step is to extract the code that determines the weight of a value by its type. This new function will be named getWeight().</p><p>现在我们的目标是将整个大函数分割成小的独立的、可重用的函数。第一步就是分析代码将获取类型的大小值的功能分割出来，我们将整个函数命名为getWeight()</p><p> Also take a look at the magic weight numbers: 1, 2 and 4. Simply reading these numbers without knowing the whole story does not provide useful information. Fortunately ES2015 allows to declare const read-only references, so you can easily create constants with meaningful names to knockout the magic numbers.</p><p>另外我们来看一下整个功能大小的值：1,2,4.显然这些书和整个函数功能没有任何关系。正好ES2015提供了声明const的引用，因此可以轻松的创建一个常量去声明这些固定的值。</p><p>Let’s create the small function getWeightByType() and improve getCollectionWeight() accordingly:</p><p>让我们来创建一个更小的函数getWeightByType() 并优化一下getCollectionWeight() 如下</p><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line"> // Code extracted into getWeightByType()</span><br><span class="line">function getWeightByType(value) { </span><br><span class="line"> const WEIGHT_NULL_UNDEFINED = 1;</span><br><span class="line"> const WEIGHT_PRIMITIVE = 2;</span><br><span class="line"> const WEIGHT_OBJECT_FUNCTION = 4;</span><br><span class="line"> if (value == null) {</span><br><span class="line"> return WEIGHT_NULL_UNDEFINED;</span><br><span class="line"> } </span><br><span class="line"> if (typeof value === 'object' || typeof value === 'function') {</span><br><span class="line"> return WEIGHT_OBJECT_FUNCTION;</span><br><span class="line"> }</span><br><span class="line"> return WEIGHT_PRIMITIVE;</span><br><span class="line">}</span><br><span class="line">function getCollectionWeight(collection) { </span><br><span class="line"> let collectionValues;</span><br><span class="line"> if (collection instanceof Array) {</span><br><span class="line"> collectionValues = collection;</span><br><span class="line"> } else if (collection instanceof Map) {</span><br><span class="line"> collectionValues = [...collection.values()];</span><br><span class="line"> } else {</span><br><span class="line"> collectionValues = Object.keys(collection).map(function (key) {</span><br><span class="line"> return collection[key];</span><br><span class="line"> });</span><br><span class="line"> }</span><br><span class="line"> return collectionValues.reduce(function(sum, item) {</span><br><span class="line"> return sum + getWeightByType(item);</span><br><span class="line"> }, 0);</span><br><span class="line">}</span><br><span class="line">let myArray = [null, { }, 15]; </span><br><span class="line">let myMap = new Map([ ['functionKey', function() {}] ]); </span><br><span class="line">let myObject = { 'stringKey': 'Hello world' }; </span><br><span class="line">getCollectionWeight(myArray); // => 7 (1 + 4 + 2) </span><br><span class="line">getCollectionWeight(myMap); // => 4 </span><br><span class="line">getCollectionWeight(myObject); // => 2</span><br></pre></td></tr></table></figure><p>Looks better, right? </p><p>看起来好一点了，对吧？</p><p>getWeightByType() function is an independent component that simply determines the weight by type. And reusable, as you can execute it in any other function.</p><p>getWeightByType() 这个函数独立成一个部件，能够计算出当前的类型，可复用，你可以在其他任何函数里面调用。</p><p>getCollectionWeight() becomes a bit lighter.</p><p>getCollectionWeight()变得轻巧了很多。</p><p>WEIGHT_NULL_UNDEFINED, WEIGHT_PRIMITIVE and WEIGHT_OBJECT_FUNCTION are selfexplanatory constants that describe the type weights. You don’t have to guess what 1,2 and 4 numbers mean.</p><p>三个常量的声明似乎描述的更语义化，你不需要去猜测这几个值的意思。</p><h3 id="Step-2-Continue-splitting-and-make-it-extensible-继续分割，让它可扩展"><a href="#Step-2-Continue-splitting-and-make-it-extensible-继续分割，让它可扩展" class="headerlink" title="Step 2: Continue splitting and make it extensible 继续分割，让它可扩展"></a>Step 2: Continue splitting and make it extensible 继续分割，让它可扩展</h3><p>However the updated version still has drawbacks.</p><p>然而修改之后的版本仍有缺陷。</p><p>Imagine that you have the plan to implement the weight evaluation of a Set or even other custom collection. getCollectionWeight() will grow fast in size, because it contains the logic of collecting the values.</p><p>我们可以想象我们可能要扩展计算的值的数据类型比如set或者其他自定义的集合类型，getCollectionWeight()的体积也会变大，因此我们需要一个计算集合值的逻辑。</p><p>Let’s extract into separated functions the code that gathers values from maps getMapValues() and plain JavaScript objects getPlainObjectValues(). Take a look at the improved version: </p><p>让我们开始分割函数吧。函数getMapValues()和getPlainObjectValues()分别计算两种值。让我们看一下分割之后的版本。</p><figure class="highlight plain"><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><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line">function getWeightByType(value) { </span><br><span class="line"> const WEIGHT_NULL_UNDEFINED = 1;</span><br><span class="line"> const WEIGHT_PRIMITIVE = 2;</span><br><span class="line"> const WEIGHT_OBJECT_FUNCTION = 4;</span><br><span class="line"> if (value == null) {</span><br><span class="line"> return WEIGHT_NULL_UNDEFINED;</span><br><span class="line"> } </span><br><span class="line"> if (typeof value === 'object' || typeof value === 'function') {</span><br><span class="line"> return WEIGHT_OBJECT_FUNCTION;</span><br><span class="line"> }</span><br><span class="line"> return WEIGHT_PRIMITIVE;</span><br><span class="line">}</span><br><span class="line">// Code extracted into getMapValues()</span><br><span class="line">function getMapValues(map) { </span><br><span class="line"> return [...map.values()];</span><br><span class="line">}</span><br><span class="line">// Code extracted into getPlainObjectValues()</span><br><span class="line">function getPlainObjectValues(object) { </span><br><span class="line"> return Object.keys(object).map(function (key) {</span><br><span class="line"> return object[key];</span><br><span class="line"> });</span><br><span class="line">}</span><br><span class="line">function getCollectionWeight(collection) { </span><br><span class="line"> let collectionValues;</span><br><span class="line"> if (collection instanceof Array) {</span><br><span class="line"> collectionValues = collection;</span><br><span class="line"> } else if (collection instanceof Map) {</span><br><span class="line"> collectionValues = getMapValues(collection);</span><br><span class="line"> } else {</span><br><span class="line"> collectionValues = getPlainObjectValues(collection);</span><br><span class="line"> }</span><br><span class="line"> return collectionValues.reduce(function(sum, item) {</span><br><span class="line"> return sum + getWeightByType(item);</span><br><span class="line"> }, 0);</span><br><span class="line">}</span><br><span class="line">let myArray = [null, { }, 15]; </span><br><span class="line">let myMap = new Map([ ['functionKey', function() {}] ]); </span><br><span class="line">let myObject = { 'stringKey': 'Hello world' }; </span><br><span class="line">getCollectionWeight(myArray); // => 7 (1 + 4 + 2) </span><br><span class="line">getCollectionWeight(myMap); // => 4 </span><br><span class="line">getCollectionWeight(myObject); // => 2</span><br></pre></td></tr></table></figure><p>If you read getCollectionWeight() now, you find much easier figure out what it does. It looks like an interesting story.</p><p>当你现在再来阅读getCollectionWeight()这个函数的时候，你会发现你能轻而易举的发现函数到底在做什么。非常有趣的变化。</p><p>Every function is obvious and straightforward. You don’t waste time digging to realize what the code does. That’s how the clean code should be.</p><p>每一个函数都清晰直观，你不用花时间去研究他在做什么，这就是精干的代码应该有的样子。</p><h3 id="Step-3-Never-stop-to-improve不要停止重构"><a href="#Step-3-Never-stop-to-improve不要停止重构" class="headerlink" title="Step 3: Never stop to improve不要停止重构"></a>Step 3: Never stop to improve不要停止重构</h3><p>Even at this step you have a lot of space for improvement! </p><p>每一个逻辑都有优化的空间。</p><p>You can create getCollectionValues() as a separated function, which contains the if/else statements to differentiate the collection types:</p><p>你可以创建一个函数 getCollectionValues()作为独立的模块。用来通过判定语句区分不同的数据类型。</p><figure class="highlight plain"><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 getCollectionValues(collection) { </span><br><span class="line"> if (collection instanceof Array) {</span><br><span class="line"> return collection;</span><br><span class="line"> }</span><br><span class="line"> if (collection instanceof Map) {</span><br><span class="line"> return getMapValues(collection);</span><br><span class="line"> }</span><br><span class="line"> return getPlainObjectValues(collection);</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>Then getCollectionWeight() would become truly plain, because the only thing it needs to do is: get the collection values getCollectionValues() and apply the sum reducer on it.</p><p>getCollectionWeight()也因为只需要做一件事情而变得真正的纯粹：获取getCollectionValues()函数返回的值，并将其累加起来<br>。<br>You can also create a separated reducer function: </p><p>你也可以创建一个迭代函数循环的。</p><figure class="highlight plain"><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">function reduceWeightSum(sum, item) { </span><br><span class="line"> return sum + getWeightByType(item);</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>Because ideally getCollectionWeight() should not define functions.</p><p>因为其实理想的getCollectionWeight()函数内是不应该去定义任何函数的。</p><p>In the end the initial big function is transformed into the following small functions:</p><p>最后我们来看，最初这个庞大的函数被我们转换成了一个个小函数：</p><figure class="highlight plain"><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><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line">function getWeightByType(value) { </span><br><span class="line"> const WEIGHT_NULL_UNDEFINED = 1;</span><br><span class="line"> const WEIGHT_PRIMITIVE = 2;</span><br><span class="line"> const WEIGHT_OBJECT_FUNCTION = 4;</span><br><span class="line"> if (value == null) {</span><br><span class="line"> return WEIGHT_NULL_UNDEFINED;</span><br><span class="line"> } </span><br><span class="line"> if (typeof value === 'object' || typeof value === 'function') {</span><br><span class="line"> return WEIGHT_OBJECT_FUNCTION;</span><br><span class="line"> }</span><br><span class="line"> return WEIGHT_PRIMITIVE;</span><br><span class="line">}</span><br><span class="line">function getMapValues(map) { </span><br><span class="line"> return [...map.values()];</span><br><span class="line">}</span><br><span class="line">function getPlainObjectValues(object) { </span><br><span class="line"> return Object.keys(object).map(function (key) {</span><br><span class="line"> return object[key];</span><br><span class="line"> });</span><br><span class="line">}</span><br><span class="line">function getCollectionValues(collection) { </span><br><span class="line"> if (collection instanceof Array) {</span><br><span class="line"> return collection;</span><br><span class="line"> }</span><br><span class="line"> if (collection instanceof Map) {</span><br><span class="line"> return getMapValues(collection);</span><br><span class="line"> }</span><br><span class="line"> return getPlainObjectValues(collection);</span><br><span class="line">}</span><br><span class="line">function reduceWeightSum(sum, item) { </span><br><span class="line"> return sum + getWeightByType(item);</span><br><span class="line">}</span><br><span class="line">function getCollectionWeight(collection) { </span><br><span class="line"> return getCollectionValues(collection).reduce(reduceWeightSum, 0);</span><br><span class="line">}</span><br><span class="line">let myArray = [null, { }, 15]; </span><br><span class="line">let myMap = new Map([ ['functionKey', function() {}] ]); </span><br><span class="line">let myObject = { 'stringKey': 'Hello world' }; </span><br><span class="line">getCollectionWeight(myArray); // => 7 (1 + 4 + 2) </span><br><span class="line">getCollectionWeight(myMap); // => 4 </span><br><span class="line">getCollectionWeight(myObject); // => 2</span><br></pre></td></tr></table></figure><p>That’s the art of writing small and plain functions!</p><p>这就是编写小而单纯的函数的艺术！</p><p>After all these code quality optimizations, you get a bunch of nice benefits:</p><p>通过以上所有的这些代码质量的优化，你可以收获很多益处：</p><ul><li>The readability of getCollectionWeight() increased by self-explanatory code </li><li>The size of getCollectionWeight() reduced considerable getCollectionWeight() function is now protected from fast growth if you plan to implement the weight calculation of other collection types </li><li>The extracted functions are now decoupled and reusable components. Your colleague may ask you to import these nice functions into another project: and you can easily do that If accidentally a function generates an error, the call stack will be more precisebecause it contains the function names. </li><li>Almost instantly you could determine the function that makes problems The split functions are much easier to test and reach a high level of code coverage. Instead of testing one big function with all possible scenarios, you can structure your tests and verify each small function separately </li><li>You can benefit from CommonJS or ES2015 modules format. Create from extracted functions separated modules. This makes your project files lightweight and structured.</li><li>自解释代码使函数getCollectionWeight()的可读性大大增强了<ul><li>函数getCollectionWeight()的体积明显减小了</li><li>当你添加判定值的数量的时候，函数getCollectionWeight()保持稳定的增长的速度。</li><li>分离出来的代码成为具有低耦合性和可复用性的组件。你的同事或许会请求你将这些非常棒的小组件应用到其他项目中去，这是轻而易举就可以实现的。</li><li>如果一旦有代码报错，报错堆栈更清晰因为他包含了函数的具体名称。你可以轻而易举的判定出出错的部分。分割出来的代码更易测试并且可以达到一个很高的测试覆盖率，从而使代码的可测试性提高。相比于这个，测试巨大的函数是很糟糕的。你可以为每一个函数构造测试并且独立的进行验证工作。</li><li>你可以按照CommonJS或者ES2015的模式去构造你的函数，将其分割成独立的小函数。这会使你的项目文件变得更加轻量和更有结构。<br>These advantages help you survive in the complexity of the applications.<br>这些优点将你从复杂的应用中拯救出来。</li></ul></li></ul><p>As a general rule, your functions should not be longer than 20 lines of code. Smaller - better.</p><p>通常的规则是你的函数不应该超过20行，并且越小越好。</p><p>I think now you want to ask me a reasonable question: “I don’t want to create functions for each line of code. Is there a criteria when I should stop splitting?” This is a subject of the next chapter.</p><p>我想你现在有一个情理之中的问题想要问我：“让我为每一个函数写一行代码我是极不情愿的。请问对于拆分的原则有什么标准么？”这将会是我们下一个环节要解答的问题。</p><h3 id="2-Functions-should-be-plain-函数功能要单一"><a href="#2-Functions-should-be-plain-函数功能要单一" class="headerlink" title="2. Functions should be plain 函数功能要单一"></a>2. Functions should be plain 函数功能要单一</h3><p>Let’s relax a bit and think what is actually a software application?</p><p>让我们稍微放松一下然后仔细想想应用软件的实质是什么？</p><p>Every application is implementing a list of requirements. The role of developer is to divide these requirements into small executable components (namespaces, classes, functions, code blocks) that do a well determined task.</p><p>每个应用在本质上都是对一系列需求的实现，而开发者所扮演的角色就是将这些需求拆分成更小的可执行的可以更好的完成自身任务的模块（命名空间，类，函数，代码块）</p><p>A component consists of other smaller components. If you want to code a component, you need to create it from components at only one level down in abstraction.</p><p>一个组件包含了其他更小的组件们。如果你想编写编写其中一个组件，你需要将他从其他你创作的同一级别的组件中中抽象出来。</p><p>In other words, what you need is to decompose a function into smaller steps, but keep these steps at the same, one step down, level of abstraction. This is important because it makes the function plain and implies to “do one thing and do it well”.</p><p>换句话说，你需要做的就是将这些功能拆分成更小的步骤，但是需要保证这些小步骤是同样的，同一级别的，同等水平的抽象。这是非常重要的因为只有这样你才能使你的函数功能单一并且意味着你成功实现了“做一件事情并且把它做好”。</p><p>Why is this necessary? Because plain functions are obvious. Obvious means easy to read and modify.</p><p>说了这么多，为什么功能单一的代码是很重要的呢？因为清晰的代码的功能是显而易见的。而显而易见则意味着代码的易读性和易修改性。</p><p>Let’s follow an example. Suppose you want to implement a function that keeps onlyprime numbers (2, 3, 5, 7, 11, etc) in an array, removing non prime ones (1, 4, 6, 8, etc). The function is invoked this way:</p><p>让我们再来看一个例子。假设你想实现一个函数：去除数组中的合数（例如1,4,6,8等）而只保留其中的质数（例如2,3,5,7,11等等）。这个函数将会被这样调用：</p><p><code>getOnlyPrime([2, 3, 4, 5, 6, 8, 11]); // => [2, 3, 5, 11]</code></p><p>What are steps at one level down in abstraction to implement the functiongetOnlyPrime()? Let’s formulate this way:</p><p>那么函数getOnlyPrime()的实现在同一个抽象级别的步骤有多少呢？让我们一起用下面这种方式一步一步来实现;</p><p>To implement getOnlyPrime() function, filter the array of numbers using isPrime()function.</p><p>为了实现函数getOnlyPrime()，我们首先使用isPrime()函数来对数组中的数据进行过滤</p><p>Simply, just apply a filter function isPrime() over the array of numbers.</p><p>简单来说，就是创建一个过滤器函数isPrime() 对数组成员进行过滤。</p><p>Do you need to implement the details of isPrime() at this level? No, becausegetOnlyPrime() function would have steps from different level of abstractions. The function would take too much responsibility.</p><p>你需要的做的只是在这个抽象级别上实现isPrime() 的细节？不，你错了。因为getOnlyPrime()函数会有很多不同级别的抽象。这个函数包含太多的任务在身。</p><p>Having the plain idea in mind, let’s implement the body of getOnlyPrime() function:</p><p>在你的头脑中想象一下如何让这个函数变的单一。接下来让我们一起来实现getOnlyPrime()这个函数的主体部分。</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">function getOnlyPrime(numbers) { </span><br><span class="line"> return numbers.filter(isPrime);</span><br><span class="line">}</span><br><span class="line">getOnlyPrime([2, 3, 4, 5, 6, 8, 11]); // => [2, 3, 5, 11]</span><br></pre></td></tr></table></figure><p>As you can see, getOnlyPrime() is plain and simple. It contains steps from a single level of abstraction: .filter() array method and isPrime().</p><p>正如你所看到的一样，getOnlyPrime()这个函数是短小而又单一的。它包含了一个单一抽象级别的函数:.filter()数组方法isPrime（）</p><p>Now is the time move one level down in abstraction.</p><p>现在是时候再降低一下函数的抽象级别了。</p><p>The array method .filter() is provided by JavaScript engine and use it as is. Of course the standard describes exactly what it does.</p><p> .filter()这个方法提供了一个原生的javascript引擎。当然标准的描述是他做了什么。</p><p>Now you can detail into how isPrime() should be implemented:</p><p>现在你可以具体研究 isPrime()应该怎样被实现：<br><figure class="highlight plain"><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">To implement isPrime() function that checks if a number n is prime, verify if any number from 2 to Math.sqrt(n) evenly divides n.</span><br><span class="line">实现isPrime()这个函数就是要检查一个数n是否是素数，依次判断从2开始到√n之间的任何一个整数能否被n整除。</span><br></pre></td></tr></table></figure></p><p>Having this algorithm (yet not efficient, but used for simplicity), let’s code isPrime()function:</p><p>使用已有的算法来实现isPrime()函数（虽然效率不高，但是调用却很简单）。让我们一起来编写它的代码：</p><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">function isPrime(number) { </span><br><span class="line"> if (number === 3 || number === 2) {</span><br><span class="line"> return true;</span><br><span class="line"> }</span><br><span class="line"> if (number === 1) {</span><br><span class="line"> return false;</span><br><span class="line"> }</span><br><span class="line"> for (let divisor = 2; divisor <= Math.sqrt(number); divisor++) {</span><br><span class="line"> if (number % divisor === 0) {</span><br><span class="line"> return false;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> return true;</span><br><span class="line">}</span><br><span class="line">function getOnlyPrime(numbers) { </span><br><span class="line"> return numbers.filter(isPrime);</span><br><span class="line">}</span><br><span class="line">getOnlyPrime([2, 3, 4, 5, 6, 8, 11]); // => [2, 3, 5, 11]</span><br></pre></td></tr></table></figure><p>getOnlyPrime() is small and plain. It has only strictly necessary steps from one level down in abstraction.</p><p>getOnlyPrime()是小而单一的。它只有一个小于一个抽象级别的必要的步骤。</p><p>The readability of complex functions can be much improved if you follow the rule of making them plain. Having each level of abstraction coded precisely prevents the creation of big chunks of unmaintainable code.</p><p>如果你能按照这样的规则去使自己的代码的功能变得单一，那个抽象复杂的函数的可读性将会被大大的提高。对每一个抽象级别进行编码会很好的防止大的可维护性差的代码的产生。</p><h3 id="3-Use-concise-function-names使用简洁清晰的函数命名"><a href="#3-Use-concise-function-names使用简洁清晰的函数命名" class="headerlink" title="3. Use concise function names使用简洁清晰的函数命名"></a>3. Use concise function names使用简洁清晰的函数命名</h3><p>Function names should be concise: no more and no less. Ideally the name suggests clearly what the function does, without the necessity to dive into the implementation details.</p><p>函数命名应该是简洁明了的：不多不少。理想的命名应该是可以清楚地告诉人们这个函数实现了怎样的功能，没有必要再将它拆分成更小的细节去实现。</p><p>For function names use camel case format that starts with a lowercase letter: addItem(),saveToStore() or getFirstName().</p><p>函数命名一般会使用驼峰命名法——以小写字母开头，例如：addItem(),saveToStore() or getFirstName().</p><p>Because functions are actions, the name should contain at least one verb. For example deletePage(), verifyCredentials(). To get or set a property, use the standard set and getprefixes: getLastName() or setLastName().</p><p>因为函数是一种功能的实现，所以命名至少应该是包含一个动词。例如deletePage(), verifyCredentials().如果是为了设置或者是获取属性值，那个可以使用标准的set和get作为前缀：getLastName() 或者setLastName().</p><p>Avoid in the production code misleading names like foo(), bar(), a(), fun(), etc. Such names have no meaning.</p><p>并且要防止使用类似 foo(), bar(), a(), fun()等等的命名将我们带入歧途。这样的命名是无意义的。</p><p>If functions are small and plain, names are concise: the code is read as a wonderful prose.<br>如果你的函数是小而单一并且命名简洁的，这意味着读你的代码就像是在读一篇美妙的散文一样令人赏心悦目。</p><h3 id="4-Conclusion结论"><a href="#4-Conclusion结论" class="headerlink" title="4. Conclusion结论"></a>4. Conclusion结论</h3><p>Certainly the provided examples are quite simple. Real world applications are more complex. You may complain that writing plain functions, with only one level down in abstraction, is a tedious task. But it’s not that complicated if your practice right from the start of the project.</p><p>当然啦，上文提到的例子都是相当简单的。真实的应用都是相当复杂的。或许你会抱怨，这样将在同一个抽象级别的函数写的单一是一件很枯燥乏味的工作。但是如果你从开始你的项目的时候就正确的练习那将一点儿都不困难。</p><p>If an application already has functions with too much responsibility, you may find hard to reorganize the code. And in many cases impossible to do in a reasonable amount of time. At least start with small: extract something you can.</p><p>如果一个应用已经有了太多复杂的函数，你或许会发现去重构这个代码是很困难的。并且在很多情况下重构这些代码会花去超出预期的时间。至少，从小功能开始：拆分那些你可以拆分的。</p><p>Of course the correct solution is to implement the application correctly from the start. And dedicate time not only to implementation, but also to a correct structure of your functions: as suggested make them small and plain.</p><p>当然最好的解决方法就是你从项目最开始就正确的实现这些应用。其实你花费时间最多的不光是如何实现这些功能，还有就是你的函数有没有一个正确的结构：就像我所建议的，让你的代码短小精悍。</p><p><code>Measure seven times, cut once.</code></p><p>ES2015 implements a nice module system, that clearly suggest that small functions are a good practice.</p><p>ES2015定义了一个很棒的模块系统，其中清楚地建议我们实现小功能是一个很好的练习方式。</p><p>Just remember that clean and organized code always deserves investing time. You may find it hard to do. You may need a lot of practice. You may come back and modify a function multiple times.</p><p>你只需要记住清晰有条理的代码总是值得我们花费更多的时间。或许开始的时候你会觉得这很困难，但是或许你需要的只是多加练习。或许你会有很多次回过头来看你之前编写的代码并且重构他们的一个功能很多次。</p><figure class="highlight plain"><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">Nothing can be worse than messy code.</span><br><span class="line">没有什么能比糟糕的代码更糟糕的了。</span><br></pre></td></tr></table></figure><p>What practice do you use to make the code organized? Feel free to write a comment bellow!</p><p>在你的日常编码过程中你是如何练习把你的代码写的调理清晰的呢？放轻松，在下面留下你的留言吧~！</p>]]></content>
<tags>
<tag> 翻译 </tag>
</tags>
</entry>
<entry>
<title>hexo+github博客搭建</title>
<link href="/2016/08/27/180227blog/"/>
<content type="html"><![CDATA[<p><excerpt in="" index="" |="" 首页摘要=""><br> 作为一个技术开发人员，拥有一个属于自己的csdn、博客园等之外的完全属于自己的网站，好像也是一个必需的技能呢，之前大家可能都会使用wordpress、jekyll等搭建自己的博客，但是现在使用开源的github网站和hexo也可以轻松实现，而且重要的是不要花费金钱来购买域名或者服务器哦！大概是贫穷限制了我的想象力。<br><a id="more"></a></excerpt></p><p><the rest="" of="" contents="" |="" 余下全文=""></the></p><p><contents></contents></p><p></p><p style="text-indent: 40px"></p><h3 id="1-博客的搭建"><a href="#1-博客的搭建" class="headerlink" title="1.博客的搭建"></a>1.博客的搭建</h3><p>网址：<br><a href="http://www.jianshu.com/p/13e64c9e2295" target="_blank" rel="noopener">http://www.jianshu.com/p/13e64c9e2295</a><br>这篇文章可以说是讲的非常好，非常详细，按照这个步骤就能一步步的搭建好自己的个人博客。其中几个我们可能会出问题的点儿，该作者都详细的做了解释和解决方法。</p><p>需要注意的点</p><ul><li>启动hexo服务器的时候，所在的目录为blog目录下。不然会提示你hexo可能没有这种用法。</li><li>启动命令是<code>hexo s</code>不是<code>hexo --server</code>也不是<code>hexo -s</code>，因为习惯的原因，我很容易写成后两种形式。</li><li>⚠️一定要在github中为你的博客创建仓库和分支，不然到时候你的电脑出了什么问题，或者文件不小心删除，你是找不回你的原本的文章的哦。这样也可以方便的迁移哦～</li><li>另外，如果你像我一样使用yelee主题的话，它有两个_config.xml文件哦，记得两个文件都要简单配置一下下哦，不然可能有些功能无法使用哦～<h3 id="2-主题"><a href="#2-主题" class="headerlink" title="2.主题"></a>2.主题</h3>网址：<br><a href="https://www.zhihu.com/question/24422335" target="_blank" rel="noopener">https://www.zhihu.com/question/24422335</a><br>从中发现几个我个人觉得还不错的主题</li><li>next(<a href="http://theme-next.iissnan.com" target="_blank" rel="noopener">http://theme-next.iissnan.com</a>)</li><li>minos(<a href="https://github.com/ppoffice/hexo-theme-minos" target="_blank" rel="noopener">https://github.com/ppoffice/hexo-theme-minos</a>)</li><li>icarus(<a href="https://github.com/digitalcraftsman/hugo-icarus-theme" target="_blank" rel="noopener">https://github.com/digitalcraftsman/hugo-icarus-theme</a>)</li><li>yelee(<a href="http://moxfive.coding.me/yelee/" target="_blank" rel="noopener">http://moxfive.coding.me/yelee/</a>)</li></ul>]]></content>
<tags>
<tag> 博客搭建 </tag>
</tags>
</entry>
<entry>
<title>我的猫</title>
<link href="/2016/07/30/mycat/"/>
<content type="html"><![CDATA[<p><excerpt in="" index="" |="" 首页摘要=""><br> 谨以此文纪念我曾经可爱乖巧的猫儿<br><a id="more"></a></excerpt></p><p><the rest="" of="" contents="" |="" 余下全文=""></the></p><p><contents></contents></p><p style="text-indent: 40px">最近偶然看到顾湘的《好小猫》，愈发想自己养一只猫。自小喜猫，却因为妈妈的缘故，始终未曾养过，只在13岁的时候，小姨的婆家知我喜猫，从邻居家抱来一只1月大的小奶猫，印象中黑白花纹，两只眼睛周围黑个高，像只熊猫。一路上又顺路去了别人家，我只小心翼翼的抱着她，她也乖乖的在我怀里安稳的睡觉。那时的条件并没有想到要给她买猫粮，只是会用小碟子给她冲一些豆奶，她也乖乖的喝下，慢慢的和我熟络起来。学校离家很近，只有几分钟距离，放学以后，急匆匆回来和她玩耍，她很乖也很有灵气，抓着她的两只前爪，整个身体缩成一个球，甚是可爱。某天晚上，我一边和猫玩耍，一边和妈妈撒娇，让她晚上和我睡觉吧，我妈勉强同意，我高兴的很，把猫抱进被窝里，安心的睡了……第二天起来，只有台阶上的斑斑血迹，寻遍家里何处，也未曾寻不见我的猫，我只是一直的哭，我的猫，我和她只有5天的缘分。我还没有真的养猫，就失去了我最爱的猫。后面，在邻居家，在亲朋好友那里，也曾见到温驯可爱的猫，却再也没有我的猫那样招我喜爱。我一直很恨我自己，或许如果那天不是我坚持和猫一起睡觉，半夜里，她就不会被我妈抱出去留在门外，她才1月大，是我害死了她。自那之后，小学毕业，我还是住宿生活，从一个星期，到两个星期，到半年才回一次家，再也没有养过猫。如今，我很想念我的猫，想养一只猫，只是怕，上班不在家的我，如何照料好我的猫，只怕她终日寂寞孤苦，空惹一生感情。</p>]]></content>
<tags>
<tag> 读书笔记 </tag>
</tags>
</entry>
<entry>
<title>个人原创片段</title>
<link href="/2015/03/30/myself/"/>
<content type="html"><![CDATA[<p></p><p style="text-indent: 40px">我不是一个聪明的人，总是随心所欲，跟着感觉走。不是一个漂亮的人，每次想自拍的时候都发现原来自己长得这么丑。我不是一个认真的人，答应自己的事情，总是完不成。人丑还须多读书。我有点小骄傲，有些小任性，爱耍小脾气。我不会说话，不喜欢去伪装，有什么情绪都写在脸上。回顾过去的这些年，很多人渐渐在我生活中失去了踪影，但是也有他们，不管发生了什么，都会站在我这边，默默的支持我。感谢妈妈，给与我生命，感受这个世界的悲欢离合；感谢朋友们，让我在有生之年和你们一起欢笑一起哭泣一起成长；感谢我自己，虽然迷茫，但却还坚强的任性的执着的享受着这个世界带给你的一切。</p>]]></content>
<tags>
<tag> 读书笔记 </tag>
</tags>
</entry>
</search>