-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
299 lines (205 loc) · 9.36 KB
/
index.html
File metadata and controls
299 lines (205 loc) · 9.36 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" >
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>lucefer</title>
<meta name="description" content="details is the key to success" />
<meta name="HandheldFriendly" content="True" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="/css/screen.css" />
<!--<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Noto+Serif:400,700,400italic|Open+Sans:700,400" />
-->
<meta name="generator" content="lucefer">
</head>
<body class="nav-closed">
<nav class="nav">
<h3 class="nav-title">Menu</h3>
<a href="#" class="nav-close">
<span class="hidden">Close</span>
</a>
<ul id="menu" class="menu">
<li class="menu-item menu-item-/">
<a href="/" rel="section">
首页
</a>
</li>
<li class="menu-item menu-item-/archives">
<a href="/archives" rel="section">
归档
</a>
</li>
</ul>
</nav>
<span class="nav-cover"></span>
<div class="site-wrapper">
<header class="site-head" style="background-image: url(
//ifanqi.top/img/header-bg.jpg)"
>
<nav class="main-nav overlay clearfix"><a class="menu-button" href="#"><span class="burger">☰</span><span class="word">Menu</span></a></nav>
<div class="vertical">
<div class="site-head-content inner">
<h1 class="blog-title"><a href="/">lucefer</a></h1>
<h2 class="blog-description">details is the key to success</h2>
</div>
<a class="bloglogo" href="https://github.com/lucefer" target="_blank">
<span class="icon-github" style="color:white;font-size:2em"></span>
</a>
</div>
<a class="scroll-down icon-arrow-left" href="#content"><span class="hidden">Scroll Down</span></a>
</header>
<main class="content" id="content" role="main">
<article class="post">
<header class="post-header">
<h2 class="post-title"><a href="/2017/08/08/js-define-property/">浅谈Object.defineProperty</a></h2>
</header>
<section class="post-excerpt">
<p>
Object.defineProperty是伴随着ES5的发布而出现的，是一个很强大的属性，著名的前端框架vuejs就是借用它实现的数据变动检测，接下来我们学习一下它的用法。
传统方法如果不使用defineProperty，我们可以用以下两种方式定义属性：var a = {}// 通过.定义属性a.name = 'fanqi'// 通过属性字符串索引定义属性a["age"] = 10a.age = 20
上面两种方式
</p>
<p>
<a href="/2017/08/08/js-define-property/" class="excerpt-link">Read More...</a>
</p>
</section>
<span class="post-meta">
<time datetime="2017-08-08T08:25:05.000Z" itemprop="datePublished">
2017-08-08
</time>
</span>
</article>
<article class="post">
<header class="post-header">
<h2 class="post-title"><a href="/2017/08/01/vue-bubble/">基于vuejs的消息气泡插件</a></h2>
</header>
<section class="post-excerpt">
<p>
之前介绍了一款基于vue的文本折行显示组件ellipisis-plus，今天介绍一款仿照QQ消息气泡的插件vue-bubble，演示地址在这里。
仿照QQ消息气泡想法的起源是来自掘金的安卓小伙伴们，看到他们在安卓平台实现了这种效果，所以想迁移到web上。在这里要感谢他们。
先放张图看一下效果：
实现原理
使用SVG绘制贝塞尔曲线以及圆形气泡。
关键点的坐标计算借鉴这位小伙伴的思路高仿QQ未读消息气泡拖拽黏连效果，非常感谢他。
气泡
</p>
<p>
<a href="/2017/08/01/vue-bubble/" class="excerpt-link">Read More...</a>
</p>
</section>
<span class="post-meta">
<time datetime="2017-08-01T06:09:42.000Z" itemprop="datePublished">
2017-08-01
</time>
</span>
</article>
<article class="post">
<header class="post-header">
<h2 class="post-title"><a href="/2017/07/28/js-variable-memory/">可视化分析js的内存分配与回收</a></h2>
</header>
<section class="post-excerpt">
<p>
之前写了一篇文章浏览器是怎么看闭包的，发现有些读者对js内存分配与回收懵懵懂懂，理解文章的配图比较困难，我想主要是因为配图省略了一些细节，所以导致大家理解困难。今天专门写一篇关于js内存分配回收的文章，帮助大家理解js代码的内存表示。
数据类型先唠叨些基本知识：
javascript的数据类型分为基本类型和引用类型（对象）。基本类型分为如下几种：
数字字面量
字符串字面量
布尔字面量
undefined
null
引用类型分为
</p>
<p>
<a href="/2017/07/28/js-variable-memory/" class="excerpt-link">Read More...</a>
</p>
</section>
<span class="post-meta">
<time datetime="2017-07-28T03:54:46.000Z" itemprop="datePublished">
2017-07-28
</time>
</span>
</article>
<article class="post">
<header class="post-header">
<h2 class="post-title"><a href="/2017/07/25/you-can-understand-closure/">浏览器是怎么看闭包的。</a></h2>
</header>
<section class="post-excerpt">
<p>
闭包，是javascript的一大理解难点，网上关于闭包的文章也很多，但是很少有能让人看了就彻底明白的文章。究其原因，我想是因为闭包涉及了一连串的知识点。只有把这一连串的知识点都理解透彻，实现一个概念的闭环，才可以真正理解它。今天打算换个角度来理解闭包，从内存分配与回收的角度阐述，希望能帮助你真正消化掉所看到的闭包知识，同时也希望本文是你看的最后一篇关于闭包的文章。
大家看本文中的配图时，请牢记箭头的指向。因为它是根对象window遍
</p>
<p>
<a href="/2017/07/25/you-can-understand-closure/" class="excerpt-link">Read More...</a>
</p>
</section>
<span class="post-meta">
<time datetime="2017-07-25T09:36:54.000Z" itemprop="datePublished">
2017-07-25
</time>
</span>
</article>
<article class="post">
<header class="post-header">
<h2 class="post-title"><a href="/2017/07/17/js-ellipsis/">【文本截断】知多少</a></h2>
</header>
<section class="post-excerpt">
<p>
文本截断是我们前端经常会碰到的需求，有些文本比较长，设计师往往会在有限的空间内限制字符数量，以确保界面的美观性，而且会在一些字符后面加上省略号来表示截断，这个时候我们往往会使用css3的text-overflow:ellipisis来解决，单行文本截断没什么问题，多行文本我们也可以借助webkit的私有属性-webkit-line-clamp来解决。但是这是一个不规范的属性，并没有出现在CSS规范草案中，所以只能在webkit内核的浏览
</p>
<p>
<a href="/2017/07/17/js-ellipsis/" class="excerpt-link">Read More...</a>
</p>
</section>
<span class="post-meta">
<time datetime="2017-07-17T06:31:33.000Z" itemprop="datePublished">
2017-07-17
</time>
</span>
</article>
<article class="post">
<header class="post-header">
<h2 class="post-title"><a href="/2017/07/03/how-to-write-compiler/">如何实现一个简易编译器</a></h2>
</header>
<section class="post-excerpt">
<p>
本篇文章的内容是设计一个新语法，并实现能够解析该语法的编译器，将新语法编译成javascript的标准语法，使之能够正常运行在生产环境中。读完这篇文章，再结合自身的实践，大家就能知道该如何写一个小型编译器了。如果对源码感兴趣，请移步这里进行查看。
OK，总结一下接下来要做的事情：
语法设计
编译器的实现
如何下手
词法分析
语法分析
语法树遍历器
目标代码生成
1.变量定义
2.变量赋值
结语
语法设计我们做的第一件事就是设
</p>
<p>
<a href="/2017/07/03/how-to-write-compiler/" class="excerpt-link">Read More...</a>
</p>
</section>
<span class="post-meta">
<time datetime="2017-07-03T05:59:54.000Z" itemprop="datePublished">
2017-07-03
</time>
</span>
</article>
<nav class="pagination" role="pagination">
<span class="page-number">Page 1 of 1</span>
</nav>
</main>
<footer class="site-footer">
<div class="inner">
<section class="copyright">All content copyright <a href="/">lucefer</a><br/> © 2014 • All rights reserved.</section>
</div>
</footer>
<script src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.fitvids.js"></script>
<script type="text/javascript" src="/js/index.js"></script>
<script type="text/javascript" src="http://tajs.qq.com/stats?sId=63051648" charset="UTF-8"></script>
</div>
</body>
</html>