-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
284 lines (179 loc) · 15.2 KB
/
index.html
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
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Z World</title>
<meta name="author" content="Zelig Zhou">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta property="og:site_name" content="Z World"/>
<meta property="og:image" content="undefined"/>
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicons/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/favicons/manifest.json">
<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
<link rel="alternate" href="/atom.xml" title="Z World" type="application/atom+xml">
<link rel="stylesheet" href="/css/style.css" media="screen" type="text/css">
</head>
<body>
<header id="header"><div class="meta inner">
<h1><a href="/">Z World</a></h1>
<h2 id="header-h2"></h2>
<nav id="main-nav">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/archives">Archives</a></li>
<li><a href="/about">About</a></li>
</ul>
<div class="clearfix"></div>
</nav>
</div>
<div class="clearfix"></div>
</header>
<div id="content" class="inner">
<div id="main-col" class="alignleft"><div id="wrapper">
<article class="post">
<div class="post-content">
<header>
<h1 class="title"><a href="/2017/07/22/svg-ssr/">SVG服务器渲染</a></h1>
<time datetime="2017-07-22T09:35:21.000Z">Jul 22 2017</time>
</header>
<div class="entry">
<p>这个月几乎全部精力都在完成公司图表库的<em>Server-side Rendering</em>，摆脱echarts投入d3的怀抱，旨在毫秒级的性能改善和预备以后反爬虫的可能性，不过性能表现的提升还得跟踪一段时间才能得到毕竟准确的结果。</p>
<h3 id="Canvas和SVG的选择"><a href="#Canvas和SVG的选择" class="headerlink" title="Canvas和SVG的选择"></a>Canvas和SVG的选择</h3><p>Canvas似乎是现在的主流选择，Flipboard甚至不惜用Canvas代替DOM来改善交互，表现大家自有定论。但在服务器端渲染，Canvas不具备交互的条件，所以SVG是唯一的选择。</p>
<h3 id="虚拟DOM的那些事儿"><a href="#虚拟DOM的那些事儿" class="headerlink" title="虚拟DOM的那些事儿"></a>虚拟DOM的那些事儿</h3><p>其实在服务器端渲染需要解决的一个最大的问题，便是<em>虚拟DOM</em>的操作了。虚拟DOM这个概念最近肯定是耳熟能详，为什么浏览器里需要一个虚拟DOM——还不是嫌DOM操作慢。而服务器端也面临同样的问题，有PhantomJS和JSDOM这样的完全模拟出浏览器环境进行DOM操作，但性能完全不能如意啊。<br>个人在做这个SVG服务器渲染的时候一开始是使用JSDOM（D3官方推荐），但渲染一个折线图（X轴50个点以内）大约需要80ms以上。这样的速度我们来进行SSR就是得不偿失了。所以我尝试了好几种方案：</p>
<ul>
<li>cheerio：性能非常好，但仅仅提供简单的DOM树形结构，但不包含任何DOM方法，无法对节点进行操作。</li>
<li>minidom：提供了DOM2大部分方法，但仅限于HTML文档，缺少D3需要的createElementNS。</li>
<li>xmldom：提供了DOM2大部分方法，性能能够满足要求。但缺少D3需要的Selectors API。<br>于是我给xmldom打了一个补丁，叫<a href="https://www.npmjs.com/package/xmldom-qsa" title="xmldom-qsa" target="_blank" rel="external">xmldom-qsa</a>，让其DOM节点包含querySelector等方法。这样就可以在服务器端完美地调用各种D3的API进行SVG绘图。粗略测试它的性能大概是JSDOM的4倍左右。
</div>
<footer>
<div class="alignleft">
<a href="/2017/07/22/svg-ssr/#more" class="more-link">阅读全文 ></a>
</div>
<div class="clearfix"></div>
</footer>
</div>
</article>
<article class="post">
<div class="post-content">
<header>
<h1 class="title"><a href="/2017/04/16/event-loop/">事件循环</a></h1>
<time datetime="2017-04-16T12:00:21.000Z">Apr 16 2017</time>
</header>
<div class="entry">
<blockquote>
<p>我们知道JavaScript的一大特点就是单线程，而这个线程中拥有唯一的一个事件循环。JavaScript代码的执行过程中，除了依靠函数调用栈来搞定函数的执行顺序外，还依靠任务队列(task queue)来搞定另外一些代码的执行。</p>
</blockquote>
<h3 id="事件循环是什么"><a href="#事件循环是什么" class="headerlink" title="事件循环是什么"></a>事件循环是什么</h3><p>“任务队列”是一个事件的队列（也可以理解成消息的队列），IO设备完成一项任务，就在”任务队列”中添加一个事件，表示相关的异步任务可以进入”执行栈”了。主线程读取”任务队列”，就是读取里面有哪些事件。</p>
<blockquote>
<p>“任务队列”中的事件，除了IO设备的事件以外，还包括一些用户产生的事件（比如鼠标点击、页面滚动等等）。只要指定过回调函数，这些事件发生时就会进入”任务队列”，等待主线程读取。</p>
</blockquote>
<p>主线程从”任务队列”中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）。<br>事件循环的过程就是等待一个消息：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">while</span>(queue.waitForMessage()){</div><div class="line"> queue.processNextMessage();</div><div class="line">}</div></pre></td></tr></table></figure></p>
<p>在浏览器里，当一个事件出现且有一个事件监听器被绑定时，消息会被随时添加。如果没有事件监听器，事件会丢失。所以点击一个附带点击事件处理函数的元素会添加一个消息。</p>
</div>
<footer>
<div class="alignleft">
<a href="/2017/04/16/event-loop/#more" class="more-link">阅读全文 ></a>
</div>
<div class="clearfix"></div>
</footer>
</div>
</article>
<article class="post">
<div class="post-content">
<header>
<h1 class="title"><a href="/2017/01/06/design-pattern-of-js/">Javascript中的设计模式</a></h1>
<time datetime="2017-01-06T10:28:21.000Z">Jan 6 2017</time>
</header>
<div class="entry">
<p>设计模式（Design Pattern）是一套被反复使用、多数人知晓的、经过分类的、代码设计经验的总结。我们写代码总是会无意识的接触到别人的设计模式，例如每种语言都有自己的监听机制，这么看来其实设计模式从我们学编程起就一直伴随左右了。其实说到设计模式就离不开经验，当我们不断在一门语言里实践的过程中，总会用自己的理解组织代码。例如我每次重新写一个功能，都会总结哪里可以抽出来复用，哪里改动之后可以作为插件供其他人使用，这样就无意识的使用了一种设计模式。<br>使用设计模式都是为了让代码好维护，可读性更高，调用更合理。尤其是面向对象程序设计里，要遵循一些原则才具有良好的设计。</p>
<h3 id="设计原则"><a href="#设计原则" class="headerlink" title="设计原则"></a>设计原则</h3><p>面向对象程序设计有几个原则：单一职责原则 （Single Responsiblity Principle SRP）、里氏代换原则（Liskov Substitution Principle，LSP）、依赖倒转原则（Dependency Inversion Principle，DIP）、接口隔离原则（Interface Segregation Principle，ISP）、最小知识原则（Principle of Least Knowledge，PLK，也叫迪米特法则）、开闭原则（Open Closed Principle，OCP）。开闭原则具有理想主义的色彩，它是面向对象设计的终极目标。其他几条，则可以看做是开闭原则的实现方法。<br>我先简单介绍以下这几个原则的意思：</p>
<ul>
<li>单一职责原则：一个类只负责一项职责。在JS里即一个对象只做一件事情。</li>
<li>里氏代换原则：类B继承类A时，除添加新的方法完成新增功能P2外，尽量不要重写父类A的方法，也尽量不要重载父类A的方法。</li>
<li>依赖倒转原则：高层模块不应该依赖低层模块，二者都应该依赖其抽象；抽象不应该依赖细节；细节应该依赖抽象。</li>
<li>接口隔离原则：客户端不应该依赖它不需要的接口；一个类对另一个类的依赖应该建立在最小的接口上。 </li>
<li>最小知识原则：一个对象应该对其他对象保持最少的了解。也就是对象之间耦合度要小。</li>
<li>开闭原则：一个软件实体如类、模块和函数应该可以扩展，但不可以修改。</li>
</ul>
</div>
<footer>
<div class="alignleft">
<a href="/2017/01/06/design-pattern-of-js/#more" class="more-link">阅读全文 ></a>
</div>
<div class="clearfix"></div>
</footer>
</div>
</article>
<article class="post">
<div class="post-content">
<header>
<h1 class="title"><a href="/2016/11/26/webpack-in-use/">Webpack模块化</a></h1>
<time datetime="2016-11-26T07:46:21.000Z">Nov 26 2016</time>
</header>
<div class="entry">
<h2 id="Webpack模块化的实践"><a href="#Webpack模块化的实践" class="headerlink" title="Webpack模块化的实践"></a>Webpack模块化的实践</h2><p>Webpack 是德国开发者 Tobias Koppers 开发的模块加载器，在 Webpack 当中, 所有的资源都被当作是模块, js, css, 图片等等，对应各种不同文件类型的资源, Webpack 有对应的模块 loader，Webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。</p>
<h3 id="一步一步来配置"><a href="#一步一步来配置" class="headerlink" title="一步一步来配置"></a>一步一步来配置</h3><p>它的配置文件是 webpack.config.js.<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// webpack.config.js</span></div><div class="line"><span class="built_in">module</span>.exports = {</div><div class="line"> <span class="attr">entry</span>: {</div><div class="line"> <span class="attr">bundle1</span>: <span class="string">'./main1.js'</span>,</div><div class="line"> <span class="attr">bundle2</span>: <span class="string">'./main2.js'</span></div><div class="line"> },</div><div class="line"> <span class="attr">output</span>: {</div><div class="line"> <span class="attr">filename</span>: <span class="string">'[name].js'</span></div><div class="line"> }</div><div class="line">};</div></pre></td></tr></table></figure></p>
</div>
<footer>
<div class="alignleft">
<a href="/2016/11/26/webpack-in-use/#more" class="more-link">阅读全文 ></a>
</div>
<div class="clearfix"></div>
</footer>
</div>
</article>
<article class="post">
<div class="post-content">
<header>
<h1 class="title"><a href="/2016/08/13/vue-and-practice/">Vue实践</a></h1>
<time datetime="2016-08-13T12:26:21.000Z">Aug 13 2016</time>
</header>
<div class="entry">
<h2 id="Vue和一些7788"><a href="#Vue和一些7788" class="headerlink" title="Vue和一些7788"></a>Vue和一些7788</h2><p>最近公司的朋友都很疑惑，前端这阵子真的是日新月异，我们还用着jquery，underscore和knockout这些“小玩具”好像步入了中年一样。没办法啊，现在的前端大兴土木搞组件，搞模块化，我们也得跟，不过老项目总有钉子户，不能一口啃下来，所以就出了一个兼容并包的demo。</p>
<h3 id="简单的模板"><a href="#简单的模板" class="headerlink" title="简单的模板"></a>简单的模板</h3><p>初始化这些到处可以搜到的东西就不重复写了。<br>直接上手写组件。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line">Vue.component(<span class="string">'section1'</span>,{</div><div class="line"> <span class="attr">template</span>:<span class="string">'<section><h2>{{title}}</h2><div>{{message}}</div></section>'</span>,</div><div class="line"> <span class="attr">data</span>:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</div><div class="line"> <span class="keyword">return</span> {</div><div class="line"> <span class="attr">title</span>:<span class="string">'示例1：独立组件'</span>,</div><div class="line"> <span class="attr">message</span>:<span class="string">'data必须是function'</span></div><div class="line"> }</div><div class="line"> }</div><div class="line">});</div></pre></td></tr></table></figure></p>
</div>
<footer>
<div class="alignleft">
<a href="/2016/08/13/vue-and-practice/#more" class="more-link">阅读全文 ></a>
</div>
<div class="clearfix"></div>
</footer>
</div>
</article>
<div class="pagination">
<table width='100%'>
<tbody>
<tr>
<td width='120' align='left'>
</td>
<td width='auto' align='center'>
<a href="/archives/">文章归档</a>
</td>
<td width='120' align='right'>
<div class="alignright">
<a href="/page/2/" class="alignright next">Next ›</a>
</div>
</td>
</tr>
</tbody>
</table>
</div></div></div>
<div class="clearfix"></div>
</div>
<footer id="footer"><div class="inner"><div class="alignleft">
<p>
© 2017 Zelig Zhou
</p>
<p>
Theme By <a href="https://github.com/zeligzhou/macarons" >Zelig</a> based on <a href="https://github.com/willerce/hexo-theme-noderce" >Noderce</a>
</p>
</div>
<div class="clearfix"></div></div></footer>
<script type="text/javascript">
</script>
<script src="/js/main.js"></script>
</body>
</html>