-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
17 lines (17 loc) · 10.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8"><meta name="X-UA-Compatible" content="IE=edge"><meta name="baidu-site-verification" content="sR4b4WnW4b"><title> zhao.zhang</title><meta name="description" content="Web developer. Interested in JS, C, collaboration, open source and explore principle. Previous intern at @ShanbayFE, @DDFE"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" href="/favicon.png"><link rel="stylesheet" href="/css/apollo.css"><link rel="search" type="application/opensearchdescription+xml" href="https://zhangzhao.name/atom.xml" title="zhao.zhang"></head><body><div class="wrap"><header><a href="/" class="logo-link"><img src="/favicon.png" alt="logo"></a><ul class="nav nav-list"><li class="nav-list-item"><a href="/" target="_self" class="nav-list-link active">博客</a></li><li class="nav-list-item"><a href="/archives/" target="_self" class="nav-list-link">归档</a></li><li class="nav-list-item"><a href="https://weibo.com/loatheb" target="_blank" class="nav-list-link">微博</a></li><li class="nav-list-item"><a href="https://github.com/loatheb" target="_blank" class="nav-list-link">GITHUB</a></li><li class="nav-list-item"><a href="/atom.xml" target="_self" class="nav-list-link">RSS 订阅</a></li></ul></header><main class="container"><ul class="home post-list"><li class="post-list-item"><article class="post-block"><h2 class="post-title"><a href="/posts/100-lines-of-code-web-module-resolver-1/" class="post-title-link">100 行代码实现一个前端 JS 模块打包工具 - 1 - 模块化概览</a></h2><div class="post-info">2019年11月10日</div><div class="post-content"><p>在 WEB 开发的早期,为了团队协作和代码维护的方便,许多开发者会选择将 JavaScript 代码分开写在不同的文件里面,然后通过多个 script 标签来加载它们。</p>
<figure class="highlight html"><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"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./a.js"</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./b.js"</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./c.js"</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure>
<p>虽然每个代码块处在不同的文件中,但最终所有 JS 变量还是会处在同一个 <strong>全局作用域</strong> 下,这时候就需要额外注意由于作用域<code>变量提升</code>所带来的问题。</p>
<figure class="highlight html"><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 class="comment"><!-- index.html --></span></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="undefined"></span></span><br><span class="line"><span class="javascript"> <span class="comment">// a.js</span></span></span><br><span class="line"><span class="javascript"> <span class="keyword">var</span> num = <span class="number">1</span>;</span></span><br><span class="line"><span class="javascript"> setTimeout(<span class="function"><span class="params">()</span> =></span> <span class="built_in">console</span>.log(num), <span class="number">1000</span>);</span></span><br><span class="line"><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="undefined"></span></span><br><span class="line"><span class="javascript"> <span class="comment">// b.js</span></span></span><br><span class="line"><span class="javascript"> <span class="keyword">var</span> num = <span class="number">2</span>;</span></span><br><span class="line"><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure>
<p>在这个例子中,我们分别加载了两个 script 标签,两段 JS 都声明了 <code>num</code> 变量。第一段脚本的本意本来是希望在 1s 后打印自己声明的 <code>num</code> 变量 <strong> 1 </strong>。但最终运行结果却打印了第二段脚本中的 <code>num</code> 变量的结果 <strong> 2 </strong>。虽然两段代码写在不同的文件中,但是因为运行时声明变量都在全局下,最终产生了冲突。</p>
<p>同时,如果代码块之间有依赖关系的话,需要额外关注脚本加载的顺序。如果文件依赖顺序有改动,就需要在 html 手动变更加载标签的顺序,非常麻烦。</p></div><a href="/posts/100-lines-of-code-web-module-resolver-1/" class="read-more">...阅读全文</a></article></li><li class="post-list-item"><article class="post-block"><h2 class="post-title"><a href="/posts/how-commonjs-load-url-module/" class="post-title-link">使 node 也支持从 url 加载一个 module</a></h2><div class="post-info">2018年6月3日</div><div class="post-content"><p>最近两天 ry 的新项目 deno 火了一把。作为 node 项目的发起人,如今基于 go 重新写了一个服务端 JS 上下文(后来又改成了 rust = =),同时项目名 deno 也是 “n”, “o”, “d”, “e” 四个字母更换了一下顺序,引发了大家的强烈关注以及联想。</p>
<p>与 node 相比,deno 项目在 readme 的一开始就列举出了这个项目的优势和需要解决的问题。里面最让人瞩目的就是所有模块原生支持 ts ,同时也必须从 url 来加载一个模块,这也是与现有的 node.js 里的 CommonJS 模块化最大的不同。</p></div><a href="/posts/how-commonjs-load-url-module/" class="read-more">...阅读全文</a></article></li><li class="post-list-item"><article class="post-block"><h2 class="post-title"><a href="/posts/immer-immutable/" class="post-title-link">immer.js 简介及源码简析:更简单,更快速的创建不可变数据类型</a></h2><div class="post-info">2018年2月1日</div><div class="post-content"><p>JS 里面的变量类型可以大致分为基本类型和引用类型。在使用过程中,引用类型经常会产生一些无法意识到的副作用,所以在现代 JS 开发过程中,有经验的开发者都会在特定位置有意识的写下断开引用的不可变数据类型。</p>
<figure class="highlight js"><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"><span class="comment">// 引用带来的副作用</span></span><br><span class="line"><span class="keyword">var</span> a = [{ <span class="attr">val</span>: <span class="number">1</span> }]</span><br><span class="line"><span class="keyword">var</span> b = a.map(<span class="function"><span class="params">item</span> =></span> item.val = <span class="number">2</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 期望:b 的每一个元素的 val 值变为 2</span></span><br><span class="line"><span class="built_in">console</span>.log(a[<span class="number">0</span>].val) <span class="comment">// 2</span></span><br></pre></td></tr></table></figure></div><a href="/posts/immer-immutable/" class="read-more">...阅读全文</a></article></li><li class="post-list-item"><article class="post-block"><h2 class="post-title"><a href="/posts/make-a-1-a-2-a-3-evaluate-true/" class="post-title-link">如何让 (a == 1 && a == 2 && a == 3) 返回 true</a></h2><div class="post-info">2018年1月18日</div><div class="post-content"><p>前两天在网上看到了一道很有趣的题目,题目大意为:<strong>JS 环境下,如何让 <code>a == 1 && a == 2 && a == 3</code> 这个表达式返回 <code>true</code> ?</strong>。</p>
<p>这道题目乍看之下似乎不太可能,因为在正常情况下,一个变量的值如果没有手动修改,在一个表达式中是不会变化的。当时我也冥思苦想很久,甚至一度怀疑这道题目的答案就是 <strong>不能</strong>。直到在 stackoverflow 上面竟然真的发现了解法 <a href="https://stackoverflow.com/questions/48270127/can-a-1-a-2-a-3-ever-evaluate-to-true" target="_blank" rel="noopener">can-a-1-a-2-a-3-ever-evaluate-to-true</a>。</p>
<p>让这个表达式成为 <code>true</code> 的关键就在于这里的宽松相等,JS 在处理宽松相等时会对一些变量进行隐式转换。在这种隐式转换的作用下,真的可以让一个变量在一个表达式中变成不同的值。</p></div><a href="/posts/make-a-1-a-2-a-3-evaluate-true/" class="read-more">...阅读全文</a></article></li></ul></main><footer><div class="paginator"></div><div class="copyright"><p>© 2017 - 2019 <a href="https://zhangzhao.name">loatheb</a>, powered by <a href="https://hexo.io/" target="_blank">Hexo</a> and <a href="https://github.com/pinggod/hexo-theme-apollo" target="_blank">hexo-theme-apollo</a>.</p></div></footer></div><script async src="//cdn.bootcss.com/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_CHTML" integrity="sha384-crwIf/BuaWM9rM65iM+dWFldgQ1Un8jWZMuh3puxb8TOY9+linwLoI7ZHZT+aekW" crossorigin="anonymous"></script><script>(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;e=o.createElement(i);r=o.getElementsByTagName(i)[0];e.src='//www.google-analytics.com/analytics.js';r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));ga('create',"UA-113346354-1",'auto');ga('send','pageview');</script><script>var ba = 'b0c67e473d188544afaabed16e997cf5';
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?" + ba;
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();</script></body></html>