<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Javascript on sdvcrx - A tech blog</title><link>https://www.sdvcrx.com/tags/javascript/</link><description>Recent content in Javascript on sdvcrx - A tech blog</description><generator>Hugo</generator><language>zh</language><lastBuildDate>Sun, 30 Dec 2018 17:08:04 +0800</lastBuildDate><atom:link href="https://www.sdvcrx.com/tags/javascript/index.xml" rel="self" type="application/rss+xml"/><item><title>JavaScript 读写二进制数据</title><link>https://www.sdvcrx.com/post/2018-12-30-javascript-array-buffer-and-typed-array/</link><pubDate>Sun, 30 Dec 2018 17:08:04 +0800</pubDate><guid>https://www.sdvcrx.com/post/2018-12-30-javascript-array-buffer-and-typed-array/</guid><description>&lt;h2 id="预备知识"&gt;预备知识&lt;/h2&gt;&#10;&lt;p&gt;JS 操作二进制数据涉及到三个基本类型：&lt;/p&gt;&#10;&lt;p&gt;&lt;code&gt;ArrayBuffer&lt;/code&gt; 、 &lt;code&gt;TypedArray&lt;/code&gt; 和 &lt;code&gt;DataView&lt;/code&gt;&lt;/p&gt;&#10;&lt;p&gt;为了达到最大的灵活性和效率，JavaScript 类型数组（Typed Arrays）将实现拆分为 &lt;strong&gt;缓冲&lt;/strong&gt; 和 &lt;strong&gt;视图&lt;/strong&gt; 两部分。ArrayBuffer 作用是作为缓冲区存放实际的二进制数据，TypedArray 和 DataView 作为视图访问底层的 ArrayBuffer。&lt;/p&gt;</description></item><item><title>使用 SendBeacon API 上报数据</title><link>https://www.sdvcrx.com/post/2018-11-21-beancon-api/</link><pubDate>Wed, 21 Nov 2018 21:25:51 +0800</pubDate><guid>https://www.sdvcrx.com/post/2018-11-21-beancon-api/</guid><description>&lt;h2 id="前言"&gt;前言&lt;/h2&gt;&#10;&lt;p&gt;最近看过 Google Analytics 的客户端 &lt;a href="https://github.com/jehna/ga-lite"&gt;ga-lite&lt;/a&gt; 源码，它使用了 &lt;code&gt;SendBeacon&lt;/code&gt; API 来发送相关信息到 Google 服务器。简单查了查后发现，&lt;code&gt;SendBeacon&lt;/code&gt; API 现在已经广泛用于各种统计/追踪代码的实现中。于是我对 &lt;code&gt;SendBeacon&lt;/code&gt; API 做了下了解。&lt;/p&gt;</description></item><item><title>JavaScript 装饰器初探</title><link>https://www.sdvcrx.com/post/2017-10-07-typescript-decorators/</link><pubDate>Sat, 07 Oct 2017 13:47:23 +0800</pubDate><guid>https://www.sdvcrx.com/post/2017-10-07-typescript-decorators/</guid><description>&lt;p&gt;装饰器（Decorators）提供一种简练的语法糖，这种语言特性 为 &lt;code&gt;JavaScript&lt;/code&gt; / &lt;code&gt;TypeScript&lt;/code&gt; 注入了新的活力。目前 &lt;code&gt;Decorators&lt;/code&gt; 处于 &lt;a href="https://tc39.github.io/proposal-decorators/"&gt;&lt;code&gt;Stage-2&lt;/code&gt; 阶段&lt;/a&gt;，即规范初稿阶段。&lt;/p&gt;</description></item><item><title>解决Node.JS require 多级过于繁琐的问题</title><link>https://www.sdvcrx.com/post/2017-08-11-global-require/</link><pubDate>Fri, 11 Aug 2017 21:33:52 +0800</pubDate><guid>https://www.sdvcrx.com/post/2017-08-11-global-require/</guid><description>&lt;p&gt;在 NodeJS 中我们常常会写下面这种代码：&lt;/p&gt;&#10;&lt;div class="highlight"&gt;&lt;div class="chroma"&gt;&#10;&lt;table class="lntable"&gt;&lt;tr&gt;&lt;td class="lntd"&gt;&#10;&lt;pre tabindex="0" class="chroma"&gt;&lt;code&gt;&lt;span class="lnt"&gt;1&#10;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&#10;&lt;td class="lntd"&gt;&#10;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-javascript" data-lang="javascript"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="kr"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;userService&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;&amp;#39;../../../model/User/service&amp;#39;&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&#10;&lt;/div&gt;&#10;&lt;/div&gt;&lt;p&gt;&lt;code&gt;../../..&lt;/code&gt; 这种代码过多，既不好看也容易出错。在 &lt;a href="https://adonisjs.com/"&gt;AdonisJS&lt;/a&gt; 和 &lt;a href="https://webpack.github.io/"&gt;webpack&lt;/a&gt; 的启发下，我发现可以使用 &lt;code&gt;global&lt;/code&gt; 全局变量来解决这个问题。&lt;/p&gt;&#10;&lt;h2 id="require-加载原理解析"&gt;require 加载原理解析&lt;/h2&gt;&#10;&lt;p&gt;总所周知，Node.js 使用的模块格式为 &lt;a href="https://en.wikipedia.org/wiki/CommonJS"&gt;CommonJS&lt;/a&gt; 。&lt;/p&gt;</description></item><item><title>Promise：优化JS异步编程</title><link>https://www.sdvcrx.com/post/2015-04-07-javascript-promise/</link><pubDate>Tue, 07 Apr 2015 17:10:31 +0800</pubDate><guid>https://www.sdvcrx.com/post/2015-04-07-javascript-promise/</guid><description>&lt;p&gt;异步在JavaScript中最为常见，用最简单的回调函数&lt;code&gt;callback&lt;/code&gt;就解决问题。但是往往会陷入&lt;a href="http://callbackhell.com/"&gt;Callback Hell&lt;/a&gt;的困境之中。&lt;/p&gt;&#10;&lt;h2 id="callback-hell"&gt;Callback Hell&lt;/h2&gt;&#10;&lt;p&gt;以最常见的AJAX GET为例：&lt;/p&gt;</description></item><item><title>javascript中的那些坑</title><link>https://www.sdvcrx.com/post/2015-03-08-javascript-sucks/</link><pubDate>Sun, 08 Mar 2015 10:26:01 +0800</pubDate><guid>https://www.sdvcrx.com/post/2015-03-08-javascript-sucks/</guid><description>&lt;h2 id="arraysort"&gt;Array.sort()&lt;/h2&gt;&#10;&lt;p&gt;数组的默认排序是 &lt;strong&gt;按照字典排序&lt;/strong&gt; 的，即使用字符串比较(原因想想也知道)&lt;/p&gt;&#10;&lt;p&gt;所以就可能出现以下情况：&lt;/p&gt;&#10;&lt;div class="highlight"&gt;&lt;div class="chroma"&gt;&#10;&lt;table class="lntable"&gt;&lt;tr&gt;&lt;td class="lntd"&gt;&#10;&lt;pre tabindex="0" class="chroma"&gt;&lt;code&gt;&lt;span class="lnt"&gt;1&#10;&lt;/span&gt;&lt;span class="lnt"&gt;2&#10;&lt;/span&gt;&lt;span class="lnt"&gt;3&#10;&lt;/span&gt;&lt;span class="lnt"&gt;4&#10;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&#10;&lt;td class="lntd"&gt;&#10;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-javascript" data-lang="javascript"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;9&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;80&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;6&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nx"&gt;sort&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="c1"&gt;// [ 10, 3, 5, 6, 80, 9 ]&#10;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="c1"&gt;// Oops!&#10;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&#10;&lt;/div&gt;&#10;&lt;/div&gt;&lt;p&gt;教训：&lt;strong&gt;一定一定要在使用数组排序方法传入比较函数啊&lt;/strong&gt;&lt;/p&gt;</description></item><item><title>JavaScript函数</title><link>https://www.sdvcrx.com/post/2015-02-25-javascript-function/</link><pubDate>Wed, 25 Feb 2015 18:49:33 +0800</pubDate><guid>https://www.sdvcrx.com/post/2015-02-25-javascript-function/</guid><description>&lt;h2 id="this"&gt;this&lt;/h2&gt;&#10;&lt;h3 id="1-全局范围内使用this它会指向全局对象"&gt;1. 全局范围内使用&lt;code&gt;this&lt;/code&gt;，它会指向全局对象&lt;/h3&gt;&#10;&lt;div class="highlight"&gt;&lt;div class="chroma"&gt;&#10;&lt;table class="lntable"&gt;&lt;tr&gt;&lt;td class="lntd"&gt;&#10;&lt;pre tabindex="0" class="chroma"&gt;&lt;code&gt;&lt;span class="lnt"&gt;1&#10;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&#10;&lt;td class="lntd"&gt;&#10;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-javascript" data-lang="javascript"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&#10;&lt;/div&gt;&#10;&lt;/div&gt;&lt;blockquote&gt;&#10;&lt;p&gt;浏览器中的全局对象为&lt;code&gt;Window&lt;/code&gt;&lt;/p&gt;&#10;&lt;/blockquote&gt;&#10;&lt;h3 id="2-函数调用时this会指向全局对象"&gt;2. 函数调用时，&lt;code&gt;this&lt;/code&gt;会指向全局对象&lt;/h3&gt;&#10;&lt;div class="highlight"&gt;&lt;div class="chroma"&gt;&#10;&lt;table class="lntable"&gt;&lt;tr&gt;&lt;td class="lntd"&gt;&#10;&lt;pre tabindex="0" class="chroma"&gt;&lt;code&gt;&lt;span class="lnt"&gt;1&#10;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&#10;&lt;td class="lntd"&gt;&#10;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-javascript" data-lang="javascript"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="nx"&gt;foo&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&#10;&lt;/div&gt;&#10;&lt;/div&gt;&lt;blockquote&gt;&#10;&lt;p&gt;注意：在对象里调用函数（不是方法），&lt;code&gt;this&lt;/code&gt;也会指向全局对象，这会导致一些奇怪的问题&#10;&lt;code&gt;ECMAScript5&lt;/code&gt;严格模式下不存在全局对象，因此&lt;code&gt;this&lt;/code&gt;是&lt;code&gt;undefined&lt;/code&gt;&lt;/p&gt;</description></item></channel></rss>