1740 lines
272 KiB
HTML
1740 lines
272 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>
|
||
码场悟道
|
||
</title>
|
||
<meta name="description" content="">
|
||
<meta name="keywords" content="">
|
||
<meta name="author" content="Mozzie">
|
||
<link rel="canonical" href="https://mozzie.cn/2023/11/06/front-end/%E7%A0%81%E5%9C%BA%E6%82%9F%E9%81%93/">
|
||
|
||
|
||
<link rel="icon" type="image/svg" href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 7h1a2 2 0 0 1 2 2v.5a.5.5 0 0 0 .5.5a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5a.5.5 0 0 0-.5.5v.5a2 2 0 0 1-2 2h-2"></path><path d="M8 7H6a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h1"></path><path d="M12 8l-2 4h3l-2 4"></path></g></svg>'>
|
||
|
||
|
||
|
||
|
||
<link rel="stylesheet" href="/css/4d4ea9c6.css">
|
||
|
||
<meta name="generator" content="Hexo 6.3.0"></head>
|
||
|
||
<body id="app">
|
||
<!-- 响应式布局按钮 -->
|
||
<a class="side-navigation btn-hover btn-hover-bg tip left" data-tip="Expand">
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
|
||
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<rect x="4" y="4" width="16" height="16" rx="2"></rect>
|
||
<path d="M9 4v16"></path>
|
||
</g>
|
||
</svg>
|
||
</a>
|
||
<aside>
|
||
<div>
|
||
|
||
<link rel="stylesheet" href="/css/5bfc518f.css">
|
||
|
||
|
||
<div class="home-bar">
|
||
<a href="/" class="tip" data-tip="Home">
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
|
||
<path
|
||
d="M172.2 226.8c-14.6-2.9-28.2 8.9-28.2 23.8V301c0 10.2 7.1 18.4 16.7 22c18.2 6.8 31.3 24.4 31.3 45c0 26.5-21.5 48-48 48s-48-21.5-48-48V120c0-13.3-10.7-24-24-24H24c-13.3 0-24 10.7-24 24v248c0 89.5 82.1 160.2 175 140.7c54.4-11.4 98.3-55.4 109.7-109.7c17.4-82.9-37-157.2-112.5-172.2zM209 0c-9.2-.5-17 6.8-17 16v31.6c0 8.5 6.6 15.5 15 15.9c129.4 7 233.4 112 240.9 241.5c.5 8.4 7.5 15 15.9 15h32.1c9.2 0 16.5-7.8 16-17C503.4 139.8 372.2 8.6 209 0zm.3 96c-9.3-.7-17.3 6.7-17.3 16.1v32.1c0 8.4 6.5 15.3 14.8 15.9c76.8 6.3 138 68.2 144.9 145.2c.8 8.3 7.6 14.7 15.9 14.7h32.2c9.3 0 16.8-8 16.1-17.3c-8.4-110.1-96.5-198.2-206.6-206.7z"
|
||
fill="currentColor"></path>
|
||
</svg>
|
||
<span>Mozzie</span>
|
||
</a>
|
||
<!-- 切换主题 -->
|
||
<a id="toggle-theme" class="tip left" data-tip="Switch Theme">
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
|
||
<path d="M256 118a22 22 0 0 1-22-22V48a22 22 0 0 1 44 0v48a22 22 0 0 1-22 22z" fill="currentColor"></path>
|
||
<path d="M256 486a22 22 0 0 1-22-22v-48a22 22 0 0 1 44 0v48a22 22 0 0 1-22 22z" fill="currentColor"></path>
|
||
<path
|
||
d="M369.14 164.86a22 22 0 0 1-15.56-37.55l33.94-33.94a22 22 0 0 1 31.11 31.11l-33.94 33.94a21.93 21.93 0 0 1-15.55 6.44z"
|
||
fill="currentColor"></path>
|
||
<path
|
||
d="M108.92 425.08a22 22 0 0 1-15.55-37.56l33.94-33.94a22 22 0 1 1 31.11 31.11l-33.94 33.94a21.94 21.94 0 0 1-15.56 6.45z"
|
||
fill="currentColor"></path>
|
||
<path d="M464 278h-48a22 22 0 0 1 0-44h48a22 22 0 0 1 0 44z" fill="currentColor"></path>
|
||
<path d="M96 278H48a22 22 0 0 1 0-44h48a22 22 0 0 1 0 44z" fill="currentColor"></path>
|
||
<path
|
||
d="M403.08 425.08a21.94 21.94 0 0 1-15.56-6.45l-33.94-33.94a22 22 0 0 1 31.11-31.11l33.94 33.94a22 22 0 0 1-15.55 37.56z"
|
||
fill="currentColor"></path>
|
||
<path
|
||
d="M142.86 164.86a21.89 21.89 0 0 1-15.55-6.44l-33.94-33.94a22 22 0 0 1 31.11-31.11l33.94 33.94a22 22 0 0 1-15.56 37.55z"
|
||
fill="currentColor"></path>
|
||
<path d="M256 358a102 102 0 1 1 102-102a102.12 102.12 0 0 1-102 102z" fill="currentColor"></path>
|
||
</svg>
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
|
||
<path
|
||
d="M264 480A232 232 0 0 1 32 248c0-94 54-178.28 137.61-214.67a16 16 0 0 1 21.06 21.06C181.07 76.43 176 104.66 176 136c0 110.28 89.72 200 200 200c31.34 0 59.57-5.07 81.61-14.67a16 16 0 0 1 21.06 21.06C442.28 426 358 480 264 480z"
|
||
fill="currentColor"></path>
|
||
</svg>
|
||
|
||
</a>
|
||
</div>
|
||
|
||
|
||
|
||
<script src="/js/ae2a0e7b.js"></script>
|
||
|
||
<!-- search -->
|
||
|
||
|
||
<link rel="stylesheet" href="/css/3320a187.css">
|
||
|
||
<form class="search-group">
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
|
||
<g fill="currentColor">
|
||
<path d="M8.5 3a5.5 5.5 0 0 1 4.383 8.823l4.147 4.147a.75.75 0 0 1-.976 1.133l-.084-.073l-4.147-4.147A5.5 5.5 0 1 1 8.5 3zm0 1.5a4 4 0 1 0 0 8a4 4 0 0 0 0-8z" fill="currentColor"></path>
|
||
</g>
|
||
</svg>
|
||
<span id="search-input">Search...</span>
|
||
<div class="short-key">
|
||
<kbd class="key-cap"><span>Ctrl K</span></kbd>
|
||
</div>
|
||
</form>
|
||
|
||
<script>
|
||
window.algolia = {
|
||
appId: "5DTW808BZ8",
|
||
SearchOnlyAPIKey: "27845b245efc8a2853cc0bdc7366ea26"
|
||
}
|
||
window.search = {
|
||
enable: "true"
|
||
}
|
||
</script>
|
||
|
||
|
||
<script src="/js/1a086ffc.js"></script>
|
||
|
||
|
||
<!-- navigation -->
|
||
|
||
<link rel="stylesheet" href="/css/3efc6cb5.css">
|
||
|
||
|
||
<section class="category-nav scrollbar-obtrusive">
|
||
<ul class="nav-items">
|
||
<li data-path="archives">
|
||
<a href="/archives">
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
|
||
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M12 7v14"></path>
|
||
<path d="M9 18l3 3l3-3"></path>
|
||
<circle cx="12" cy="5" r="2"></circle>
|
||
</g>
|
||
</svg>
|
||
<div class="ellipsis">Timeline</div>
|
||
</a>
|
||
</li>
|
||
<li data-path="roadmap">
|
||
<a href="/roadmap">
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
|
||
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M10.5 20.4l-6.9-6.9c-.781-.781-.781-2.219 0-3l6.9-6.9c.781-.781 2.219-.781 3 0l6.9 6.9c.781.781.781 2.219 0 3l-6.9 6.9c-.781.781-2.219.781-3 0z"></path>
|
||
<path d="M9 14v-2c0-.59.414-1 1-1h5"></path>
|
||
<path d="M13 9l2 2l-2 2"></path>
|
||
</g>
|
||
</svg>
|
||
<div class="ellipsis">Roadmap</div>
|
||
</a>
|
||
</li>
|
||
<li data-path="resume">
|
||
<a href="/resume">
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
|
||
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
|
||
<path d="M5 8V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2h-5"></path>
|
||
<circle cx="6" cy="14" r="3"></circle>
|
||
<path d="M4.5 17L3 22l3-1.5L9 22l-1.5-5"></path>
|
||
</g>
|
||
</svg>
|
||
<div class="ellipsis">Resume</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
<p>Category</p>
|
||
<ul>
|
||
|
||
<li class="">
|
||
<a href="/categories/Hexo/">
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5.636 5.636a9 9 0 0 1 13.397.747L13.414 12l5.619 5.617A9 9 0 1 1 5.636 5.636z"></path><circle cx="11.5" cy="7.5" r="1" fill="currentColor"></circle></g></svg>
|
||
<div class="ellipsis">
|
||
<span>
|
||
Hexo
|
||
</span>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="">
|
||
<a href="/categories/EQ/">
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 17v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-1"></path><path d="M8 16h8"></path><path d="M8.322 12.582l7.956.836"></path><path d="M8.787 9.168l7.826 1.664"></path><path d="M10.096 5.764l7.608 2.472"></path></g></svg>
|
||
<div class="ellipsis">
|
||
<span>
|
||
EQ
|
||
</span>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="">
|
||
<a href="/categories/Finance/">
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M14.8 9A2 2 0 0 0 13 8h-2a2 2 0 0 0 0 4h2a2 2 0 0 1 0 4h-2a2 2 0 0 1-1.8-1"></path><path d="M12 6v2m0 8v2"></path></g></svg>
|
||
<div class="ellipsis">
|
||
<span>
|
||
Finance
|
||
</span>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="active">
|
||
<a href="/categories/Front-End/">
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 4l-2 14.5l-6 2l-6-2L4 4z"></path><path d="M7.5 8h3v8l-2-1"></path><path d="M16.5 8H14a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h1.423a.5.5 0 0 1 .495.57L15.5 15.5l-2 .5"></path></g></svg>
|
||
<div class="ellipsis">
|
||
<span>
|
||
Front-End
|
||
</span>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
|
||
</ul>
|
||
</section>
|
||
|
||
|
||
<script src="/js/f8b20eb9.js"></script>
|
||
|
||
<!-- icp -->
|
||
|
||
<div class="icp">
|
||
<a target="_blank" rel="noopener" href="http://beian.miit.gov.cn/">苏ICP备19008833号-4</a>
|
||
</div>
|
||
|
||
</div>
|
||
</aside>
|
||
<main>
|
||
|
||
<link rel="stylesheet" href="/css/3d0c4c23.css">
|
||
|
||
|
||
<div class="post-container">
|
||
<div class="content">
|
||
<header>
|
||
|
||
<link rel="stylesheet" href="/css/de5de8fb.css">
|
||
|
||
<nav class="breadcrumb">
|
||
<a href="/" class="home tip btn-hover right" data-tip="Home">
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
|
||
<path d="M172.2 226.8c-14.6-2.9-28.2 8.9-28.2 23.8V301c0 10.2 7.1 18.4 16.7 22c18.2 6.8 31.3 24.4 31.3 45c0 26.5-21.5 48-48 48s-48-21.5-48-48V120c0-13.3-10.7-24-24-24H24c-13.3 0-24 10.7-24 24v248c0 89.5 82.1 160.2 175 140.7c54.4-11.4 98.3-55.4 109.7-109.7c17.4-82.9-37-157.2-112.5-172.2zM209 0c-9.2-.5-17 6.8-17 16v31.6c0 8.5 6.6 15.5 15 15.9c129.4 7 233.4 112 240.9 241.5c.5 8.4 7.5 15 15.9 15h32.1c9.2 0 16.5-7.8 16-17C503.4 139.8 372.2 8.6 209 0zm.3 96c-9.3-.7-17.3 6.7-17.3 16.1v32.1c0 8.4 6.5 15.3 14.8 15.9c76.8 6.3 138 68.2 144.9 145.2c.8 8.3 7.6 14.7 15.9 14.7h32.2c9.3 0 16.8-8 16.1-17.3c-8.4-110.1-96.5-198.2-206.6-206.7z" fill="currentColor"></path>
|
||
</svg>
|
||
</a>
|
||
|
||
|
||
<em>
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
|
||
<g fill="none">
|
||
<path d="M7.733 4.207a.75.75 0 0 1 1.06.026l5.001 5.25a.75.75 0 0 1 0 1.035l-5 5.25a.75.75 0 1 1-1.087-1.034L12.216 10l-4.51-4.734a.75.75 0 0 1 .027-1.06z" fill="currentColor"></path>
|
||
</g>
|
||
</svg>
|
||
</em>
|
||
<a href="/categories/Front-End/">
|
||
Front-End
|
||
</a>
|
||
|
||
|
||
|
||
<em>
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
|
||
<g fill="none">
|
||
<path d="M7.733 4.207a.75.75 0 0 1 1.06.026l5.001 5.25a.75.75 0 0 1 0 1.035l-5 5.25a.75.75 0 1 1-1.087-1.034L12.216 10l-4.51-4.734a.75.75 0 0 1 .027-1.06z" fill="currentColor"></path>
|
||
</g>
|
||
</svg>
|
||
</em>
|
||
<span class="ellipsis">
|
||
码场悟道
|
||
</span>
|
||
|
||
</nav>
|
||
|
||
|
||
<script src="/js/31d6cfe0.js"></script>
|
||
|
||
</header>
|
||
<main class="scrollbar-obtrusive">
|
||
<div class="article-container">
|
||
<!-- 文章tags -->
|
||
|
||
<!-- 渲染文章内容 -->
|
||
<article><h1 id="模板引擎"><a href="#模板引擎" class="headerlink" title="模板引擎"></a>模板引擎</h1><p>严格的模板引擎的定义，输入模板字符串 + 数据，得到渲染过的字符串。实现上，从正则替换到拼 function 字符串到正经的 AST 解析各种各样，但从定义上来说都是差不多的。字符串渲染的性能其实也就在后端比较有意义，毕竟每一次渲染都是在消耗服务器资源，但在前端，用户只有一个，几十毫秒的渲染时间跟请求延迟比起来根本不算瓶颈。倒是前端的后续更新是字符串模板引擎的软肋，因为用渲染出来的字符串整个替换 innerHTML 是一个效率很低的更新方式。所以这样的模板引擎如今在纯前端情境下已经不再是好的选择，意义更多是在于方便前后端共用模板。</p>
|
||
<h1 id="古老数据渲染-vm-的方式"><a href="#古老数据渲染-vm-的方式" class="headerlink" title="古老数据渲染 vm 的方式"></a>古老数据渲染 vm 的方式</h1><p>这种写法，弊端太多了，玩具车</p>
|
||
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>app<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
<span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span>
|
||
<span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"小明"</span><span class="token punctuation">,</span> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">11</span><span class="token punctuation">,</span> <span class="token literal-property property">sex</span><span class="token operator">:</span> <span class="token string">"男"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"小红"</span><span class="token punctuation">,</span> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">22</span><span class="token punctuation">,</span> <span class="token literal-property property">sex</span><span class="token operator">:</span> <span class="token string">"女"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">var</span> listDOM <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"app"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
arr<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">let</span> _li <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"li"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
_li<span class="token punctuation">.</span>innerText <span class="token operator">=</span> item<span class="token punctuation">.</span>name<span class="token punctuation">;</span>
|
||
listDOM<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>_li<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h1 id="mustache-原理"><a href="#mustache-原理" class="headerlink" title="mustache 原理"></a>mustache 原理</h1><ul>
|
||
<li>1、先把模板字符串编译成 tokens(代号)</li>
|
||
<li>2、根据 tokens，结合数据渲染成 dom</li>
|
||
</ul>
|
||
<blockquote>
|
||
<p>本质上，tokens 是一个 js 嵌套数组没事模板字符串 js 的表示，他是<code>抽象语法树</code>，<code>虚拟节点</code>的开山鼻祖</p>
|
||
</blockquote>
|
||
<p>假设有这么一个模板字符串</p>
|
||
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>我买了一个{{thing}},好{{mood}}啊<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||
|
||
<p>会编译成 tokens，如下：</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">// 这里面每一个数组行都是一个 token，组起来就是 tokens</span>
|
||
<span class="token comment">// html 标签也会被看成纯文本</span>
|
||
<span class="token punctuation">[</span>
|
||
<span class="token punctuation">[</span><span class="token string">"text"</span><span class="token punctuation">,</span> <span class="token string">"<h1>我买了一个"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">[</span><span class="token string">"name"</span><span class="token punctuation">,</span> <span class="token string">"thing"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">[</span><span class="token string">"text"</span><span class="token punctuation">,</span> <span class="token string">"好"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">[</span><span class="token string">"name"</span><span class="token punctuation">,</span> <span class="token string">"mood"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">[</span><span class="token string">"text"</span><span class="token punctuation">,</span> <span class="token string">"啊</h1>"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">]</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<p>当模板存在循环式，带层级嵌套，如下：</p>
|
||
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
|
||
{{#arr}}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>{{.}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||
{{/arr}}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<p>会被编译成</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token punctuation">[</span>
|
||
<span class="token punctuation">[</span><span class="token string">"text"</span><span class="token punctuation">,</span> <span class="token string">"<div><ul>"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">[</span>
|
||
<span class="token string">"#"</span><span class="token punctuation">,</span>
|
||
<span class="token string">"arr"</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">[</span>
|
||
<span class="token punctuation">[</span><span class="token string">"text"</span><span class="token punctuation">,</span> <span class="token string">"li"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">[</span><span class="token string">"name"</span><span class="token punctuation">,</span> <span class="token string">"."</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">[</span><span class="token string">"text"</span><span class="token punctuation">,</span> <span class="token string">"</li>"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">[</span><span class="token string">"text"</span><span class="token punctuation">,</span> <span class="token string">"</ul></div>"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">]</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<p>如果是双重循环，带层级嵌套继续加一层，例如：</p>
|
||
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span>
|
||
{{#students}}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>
|
||
学生{{item.name}}的爱好是
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span>
|
||
{{#item.hobbies}}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>{{.}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||
{{/#item.hobbies}}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||
{{/#students}}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<p>会被编译成</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token punctuation">[</span>
|
||
<span class="token punctuation">[</span><span class="token string">"text"</span><span class="token punctuation">,</span> <span class="token string">"<div><ol>"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">[</span>
|
||
<span class="token string">"#"</span><span class="token punctuation">,</span>
|
||
<span class="token string">"students"</span><span class="token punctuation">,</span>
|
||
<span class="token keyword">null</span><span class="token punctuation">,</span>
|
||
<span class="token keyword">null</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token string">"text"</span><span class="token punctuation">,</span> <span class="token string">"<li>学生"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">"name"</span><span class="token punctuation">,</span> <span class="token string">"name"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">"text"</span><span class="token punctuation">,</span> <span class="token string">"的爱好是<ol>"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">"#"</span><span class="token punctuation">,</span> <span class="token string">"hobbies"</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>
|
||
<span class="token punctuation">[</span><span class="token string">'text'</span><span class="token punctuation">,</span><span class="token string">'<li>'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">[</span><span class="token string">'name'</span><span class="token punctuation">,</span><span class="token string">'.'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">[</span><span class="token string">'text'</span><span class="token punctuation">,</span><span class="token string">'</li>'</span><span class="token punctuation">]</span>
|
||
<span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">[</span><span class="token string">'text'</span><span class="token punctuation">,</span><span class="token string">'<ol></li>'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">[</span><span class="token string">'text'</span><span class="token punctuation">,</span><span class="token string">'</ol></div>'</span><span class="token punctuation">]</span>
|
||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">]</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<blockquote>
|
||
<p>在<code>mustache.js</code>中完成上述这一过程的函数<code>parseTemplate</code>，可以去找源代码看</p>
|
||
</blockquote>
|
||
<h2 id="tokens-生成算法"><a href="#tokens-生成算法" class="headerlink" title="tokens 生成算法"></a>tokens 生成算法</h2><p>用简单的模板字符串举例：</p>
|
||
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup">我买了一个{{thing}},好{{mood}}啊<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||
|
||
<p>有一个指针往右遍历，从<code>我</code>开始，遍历到<code>啊</code>结束，如下：</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">/**
|
||
*
|
||
* 我买了一个{{thing}},好{{mood}}啊
|
||
* ↑
|
||
*
|
||
* Step1：指针位置 = 1
|
||
*
|
||
* 我买了一个{{thing}},好{{mood}}啊
|
||
* ↑
|
||
*
|
||
* Step2：指针位置 = 2
|
||
*
|
||
* 我买了一个{{thing}},好{{mood}}啊
|
||
* ↑
|
||
*
|
||
* Step3：指针位置 = 4
|
||
*
|
||
* 我买了一个{{thing}},好{{mood}}啊
|
||
* ↑
|
||
*
|
||
* Step4：指针位置 = 11
|
||
*
|
||
* 我买了一个{{thing}},好{{mood}}啊
|
||
* ↑
|
||
*
|
||
* Step5：指针位置 = 15
|
||
*
|
||
* 我买了一个{{thing}},好{{mood}}啊
|
||
* ↑
|
||
*
|
||
* ... while(指针位置 >= 模板字符串.length)
|
||
*
|
||
* /</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<ul>
|
||
<li>Step1:</li>
|
||
</ul>
|
||
<p>指针右移 1 个长度，以指针位置切割，字符串被分成<code>我</code>+<code>买了一个{{thing}},好{{mood}}啊</code></p>
|
||
<ul>
|
||
<li>Step2:</li>
|
||
</ul>
|
||
<p>指针右移 1 个长度，以指针位置切割，字符串被分成<code>我买</code>+<code>了一个{{thing}},好{{mood}}啊</code></p>
|
||
<ul>
|
||
<li>Step3:</li>
|
||
</ul>
|
||
<p>第一次遇到，通过 <code>indexOf("{{") == 0` 判断
|
||
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">// 标记为 text 放到 tokens 中</span>
|
||
token<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">"text"</span><span class="token punctuation">,</span> <span class="token string">"我买了一个"</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// tokens: [['text', '我买了一个']]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>
|
||
|
||
结束，此时指针位置 = 4
|
||
|
||
- Step4:
|
||
|
||
指针右移 2 个长度，跳过`{{`，暂存此时`pos_last = 6`
|
||
|
||
此时，右边字符串(尾字符串)`thing}},好{{mood}}啊</code></p>
|
||
<p>右移 5 个长度，识别<code>模板内部数据对象</code>：</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token function">substring</span><span class="token punctuation">(</span>post_last<span class="token punctuation">,</span> <span class="token number">6</span> <span class="token operator">+</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// thing 5个长度</span>
|
||
<span class="token comment">// 标记为 name 放到 tokens 中</span>
|
||
token<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">"name"</span><span class="token punctuation">,</span> <span class="token string">"thing"</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// tokens: [['text', '我买了一个']], ['name', 'thing']]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<p>结束，此时指针位置 = 11</p>
|
||
<ul>
|
||
<li>Step5:</li>
|
||
</ul>
|
||
<blockquote>
|
||
<p>遇到 <code>}}</code>，通过 <code>indexOf("}}") == 0</code>判断</p>
|
||
</blockquote>
|
||
<p>指针右移 2 个长度，跳过<code>}}</code>，暂存此时<code>post_last = 13</code>，继续右移 2 个长度</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token function">substring</span><span class="token punctuation">(</span>post_last<span class="token punctuation">,</span> <span class="token number">13</span> <span class="token operator">+</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ,好 2个长度</span>
|
||
<span class="token comment">// 标记为 text 放到 tokens 中</span>
|
||
token<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">"text"</span><span class="token punctuation">,</span> <span class="token string">",好"</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// tokens: [['text', '我买了一个']], ['name', 'thing'],['text', ',好' ]]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<blockquote>
|
||
<p>第二次，遇到 <code>{{`
|
||
|
||
剩下循环执行就行了，这个过程，我们可以称作`扫描 Scan`
|
||
|
||
## 扫描器 Scanner
|
||
|
||
新建一个 `Scanner.js`，用来扫描模板字符串，实现上面的原理
|
||
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">/**
|
||
* 模板字符串扫描器
|
||
*/</span>
|
||
|
||
<span class="token keyword">class</span> <span class="token class-name">Scanner</span> <span class="token punctuation">{</span>
|
||
<span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">templ</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>templ <span class="token operator">=</span> templ<span class="token punctuation">;</span> <span class="token comment">// 模板字符串</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>tail <span class="token operator">=</span> templ<span class="token punctuation">;</span> <span class="token comment">// 尾字符串</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>pPos <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token comment">// 指针位置</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token comment">/**
|
||
* 指针跳过模板标签
|
||
* @param {模板语法包围标签} tag
|
||
*/</span>
|
||
<span class="token function">jumpTag</span><span class="token punctuation">(</span><span class="token parameter">tag</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>tail<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>tag<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>pPos <span class="token operator">+=</span> tag<span class="token punctuation">.</span>length<span class="token punctuation">;</span> <span class="token comment">// 指针右移 tag.length 个长度</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>tail <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>templ<span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>pPos<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 尾字符串更新</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token comment">/**
|
||
* 指针遇见模板标签 {{
|
||
* @param {模板语法包围标签} tag
|
||
*/</span>
|
||
<span class="token function">missTag</span><span class="token punctuation">(</span><span class="token parameter">tag</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">let</span> pPos_last <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>pPos<span class="token punctuation">;</span>
|
||
<span class="token keyword">while</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">eof</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">&&</span> <span class="token keyword">this</span><span class="token punctuation">.</span>tail<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>tag<span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>pPos<span class="token operator">++</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>tail <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>templ<span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>pPos<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>templ<span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span>pPos_last<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>pPos<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token function">eof</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>pPos <span class="token operator">>=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>templ<span class="token punctuation">.</span>length<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
## 分析器 Parser
|
||
|
||
调用`Scanner.js`
|
||
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">let</span> tmpl <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">我买了一个{{thing}},好{{mood}}啊</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||
<span class="token comment">// 编译 模板字符串 => tokens</span>
|
||
<span class="token keyword">const</span> Parser <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
<span class="token function-variable function">createTokens</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">tmpl</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">let</span> scanner <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Scanner</span><span class="token punctuation">(</span>tmpl<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">let</span> tokens <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token comment">// scanner 循环执行</span>
|
||
<span class="token keyword">while</span> <span class="token punctuation">(</span><span class="token operator">!</span>scanner<span class="token punctuation">.</span><span class="token function">eof</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
ctx <span class="token operator">=</span> scanner<span class="token punctuation">.</span><span class="token function">missTag</span><span class="token punctuation">(</span><span class="token string">"{{"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 返回 头字符串</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>ctx <span class="token operator">!=</span> <span class="token string">""</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
tokens<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">"text"</span><span class="token punctuation">,</span> ctx<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
scanner<span class="token punctuation">.</span><span class="token function">jumpTag</span><span class="token punctuation">(</span><span class="token string">"{{"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 跳过 模板字符</span>
|
||
ctx <span class="token operator">=</span> scanner<span class="token punctuation">.</span><span class="token function">missTag</span><span class="token punctuation">(</span><span class="token string">"}}"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 返回 {{ x }}</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>ctx <span class="token operator">!=</span> <span class="token string">""</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
tokens<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">"name"</span><span class="token punctuation">,</span> ctx<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
scanner<span class="token punctuation">.</span><span class="token function">jumpTag</span><span class="token punctuation">(</span><span class="token string">"}}"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">return</span> tokens<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Parser<span class="token punctuation">.</span><span class="token function">createTokens</span><span class="token punctuation">(</span>tmpl<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token comment">// 输出，非常的 奈一丝</span>
|
||
<span class="token comment">// ["text", "我买了一个"]</span>
|
||
<span class="token comment">// ["name", "thing"]</span>
|
||
<span class="token comment">// ["text", ",好"]</span>
|
||
<span class="token comment">// ["name", "mood"]</span>
|
||
<span class="token comment">// ["text", "啊"]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
## 扫描器 Scanner 增强
|
||
|
||
上面的`Parser`只能识别`{{`和`}}</code>，如果模板语法复杂一点，比如加入 <code>{{#list}}...{{/list}}</code>，需要增强<code>Parser</code></p>
|
||
</blockquote>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">const</span> template <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||
哈哈哈
|
||
{{#students}}
|
||
我买了一个 {{ thing }},好{{mood}}啊{{a}}
|
||
{{item.name}}
|
||
{{/students}}
|
||
</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> Parser <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
<span class="token function-variable function">createTokens</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">tmpl</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">let</span> scanner <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Scanner</span><span class="token punctuation">(</span>tmpl<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">let</span> tokens <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">let</span> ctx <span class="token operator">=</span> <span class="token string">""</span><span class="token punctuation">;</span>
|
||
<span class="token comment">// scanner 循环执行</span>
|
||
<span class="token keyword">while</span> <span class="token punctuation">(</span><span class="token operator">!</span>scanner<span class="token punctuation">.</span><span class="token function">eof</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
ctx <span class="token operator">=</span> scanner<span class="token punctuation">.</span><span class="token function">missTag</span><span class="token punctuation">(</span><span class="token string">"{{"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 返回 头字符串</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>ctx <span class="token operator">!=</span> <span class="token string">""</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
tokens<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">"text"</span><span class="token punctuation">,</span> ctx<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
scanner<span class="token punctuation">.</span><span class="token function">jumpTag</span><span class="token punctuation">(</span><span class="token string">"{{"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 跳过 模板字符</span>
|
||
ctx <span class="token operator">=</span> scanner<span class="token punctuation">.</span><span class="token function">missTag</span><span class="token punctuation">(</span><span class="token string">"}}"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 返回 {{ x }}</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>ctx <span class="token operator">!=</span> <span class="token string">""</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">switch</span> <span class="token punctuation">(</span>ctx<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">case</span> <span class="token string">"#"</span><span class="token operator">:</span>
|
||
tokens<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">"#"</span><span class="token punctuation">,</span> ctx<span class="token punctuation">.</span><span class="token function">substr</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// {{# x }}</span>
|
||
<span class="token keyword">break</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">case</span> <span class="token string">"/"</span><span class="token operator">:</span>
|
||
tokens<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">"/"</span><span class="token punctuation">,</span> ctx<span class="token punctuation">.</span><span class="token function">substr</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">break</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">default</span><span class="token operator">:</span>
|
||
tokens<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">"name"</span><span class="token punctuation">,</span> ctx<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">break</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
scanner<span class="token punctuation">.</span><span class="token function">jumpTag</span><span class="token punctuation">(</span><span class="token string">"}}"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">return</span> tokens<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Parser<span class="token punctuation">.</span><span class="token function">createTokens</span><span class="token punctuation">(</span>template<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 输出</span>
|
||
<span class="token comment">// ["text", "↵ 哈哈哈↵ "]</span>
|
||
<span class="token comment">// ["#", "students"]</span>
|
||
<span class="token comment">// ["text", "↵ 我买了一个 "]</span>
|
||
<span class="token comment">// ["name", " thing "]</span>
|
||
<span class="token comment">// ["text", ",好"]</span>
|
||
<span class="token comment">// ["name", "mood"]</span>
|
||
<span class="token comment">// ["text", "啊"]</span>
|
||
<span class="token comment">// ["name", "a"]</span>
|
||
<span class="token comment">// ["text", "↵ "]</span>
|
||
<span class="token comment">// ["name", "item.name"]</span>
|
||
<span class="token comment">// ["text", "↵ "]</span>
|
||
<span class="token comment">// ["/", "students"]</span>
|
||
<span class="token comment">// ["text", "↵ "]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h2 id="栈队列算法"><a href="#栈队列算法" class="headerlink" title="栈队列算法"></a>栈队列算法</h2><p>上一步最后的输出，只有单层嵌套，如果是两层嵌套怎么办？</p>
|
||
<p>例如模板语法如下：</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> template <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||
哈哈哈
|
||
{{#students}}
|
||
{{#stu}}
|
||
{{stu.name}}买了一个 {{ thing }},好{{mood}}啊{{a}}
|
||
{{/stu}}
|
||
{{item.name}}
|
||
{{/students}}
|
||
</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<p>经过<code>Parser</code>处理得到：</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">/**
|
||
*
|
||
* ["text", "↵ 哈哈哈↵ "]
|
||
* ["#", "students"]
|
||
* ["text", "↵ "]
|
||
* ["#", "stu"]
|
||
* ["text", "↵ "]
|
||
* ["name", "stu.name"]
|
||
* ["text", "买了一个 "]
|
||
* ["name", " thing "]
|
||
* ["text", ",好"]
|
||
* ["name", "mood"]
|
||
* ["text", "啊"]
|
||
* ["name", "a"]
|
||
* ["text", "↵ "]
|
||
* ["/", "stu"]
|
||
* ["text", "↵ "]
|
||
* ["name", "item.name"]
|
||
* ["text", "↵ "]
|
||
* ["/", "students"]
|
||
* ["text", "↵ "]
|
||
*
|
||
* /</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<p>此时<code>students</code>和<code>stu</code>都是<code>#</code>标记，我们需要利用算法处理他们的嵌套结构，处理成大约如下这样的结构：</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">/**
|
||
*
|
||
* ["text", "↵ 哈哈哈↵ "]
|
||
* Array(3)
|
||
* "#"
|
||
* "students"
|
||
* Array(5)
|
||
* ["text", "↵ "]
|
||
* ["#", "stu", Array(9)]
|
||
* ["text", "↵ "]
|
||
* ["name", "item.name"]
|
||
* ["text", "↵ "]
|
||
* ["text", "↵ "]
|
||
*
|
||
* /</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h1 id="常用工具类"><a href="#常用工具类" class="headerlink" title="常用工具类"></a>常用工具类</h1><h2 id="递归"><a href="#递归" class="headerlink" title="递归"></a>递归</h2><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">/**
|
||
* {string} dir 递归根目录
|
||
* {object} list 暂存参数
|
||
*/</span>
|
||
<span class="token keyword">const</span> <span class="token function-variable function">deep</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">dir<span class="token punctuation">,</span> list <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> dirs <span class="token operator">=</span> <span class="token keyword">await</span> fs<span class="token punctuation">.</span>promises<span class="token punctuation">.</span><span class="token function">readdir</span><span class="token punctuation">(</span>dir<span class="token punctuation">)</span>
|
||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> dirs<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> item <span class="token operator">=</span> dirs<span class="token punctuation">[</span>i<span class="token punctuation">]</span>
|
||
<span class="token keyword">const</span> itemPath <span class="token operator">=</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>dir<span class="token punctuation">,</span> item<span class="token punctuation">)</span>
|
||
<span class="token keyword">const</span> isDir <span class="token operator">=</span> fs<span class="token punctuation">.</span><span class="token function">statSync</span><span class="token punctuation">(</span>itemPath<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">isDirectory</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
isDir <span class="token operator">?</span> <span class="token keyword">await</span> <span class="token function">deep</span><span class="token punctuation">(</span>itemPath<span class="token punctuation">,</span> list<span class="token punctuation">)</span> <span class="token operator">:</span> list<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>itemPath<span class="token punctuation">)</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">return</span> list
|
||
<span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h2 id="自增id短码"><a href="#自增id短码" class="headerlink" title="自增id短码"></a>自增id短码</h2><p>用于连接分享</p>
|
||
<pre class="line-numbers language-typescript" data-language="typescript"><code class="language-typescript"><span class="token keyword">const</span> <span class="token function-variable function">createAscString</span> <span class="token operator">=</span> <span class="token punctuation">(</span>id<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> dictionary <span class="token operator">=</span> <span class="token punctuation">[</span>
|
||
<span class="token string">"0123456789"</span><span class="token punctuation">,</span>
|
||
<span class="token string">"abcdefghigklmnopqrstuvwxyz"</span><span class="token punctuation">,</span>
|
||
<span class="token string">"ABCDEFGHIGKLMNOPQRSTUVWXYZ"</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">let</span> chars <span class="token operator">=</span> dictionary<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
radix <span class="token operator">=</span> chars<span class="token punctuation">.</span>length<span class="token punctuation">,</span>
|
||
qutient <span class="token operator">=</span> <span class="token number">1000</span> <span class="token operator">*</span> <span class="token number">1000</span> <span class="token operator">*</span> <span class="token number">9999</span> <span class="token operator">+</span> <span class="token operator">+</span>id<span class="token punctuation">,</span>
|
||
arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">while</span> <span class="token punctuation">(</span>qutient<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
mod <span class="token operator">=</span> qutient <span class="token operator">%</span> radix<span class="token punctuation">;</span>
|
||
qutient <span class="token operator">=</span> <span class="token punctuation">(</span>qutient <span class="token operator">-</span> mod<span class="token punctuation">)</span> <span class="token operator">/</span> radix<span class="token punctuation">;</span>
|
||
arr<span class="token punctuation">.</span><span class="token function">unshift</span><span class="token punctuation">(</span>chars<span class="token punctuation">[</span>mod<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">return</span> arr<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">createAscString</span><span class="token punctuation">(</span><span class="token number">100000000</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h2 id="手动实现-eventBus"><a href="#手动实现-eventBus" class="headerlink" title="手动实现 eventBus"></a>手动实现 eventBus</h2><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">EventBus</span> <span class="token punctuation">{</span>
|
||
<span class="token function">constructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// key-value : eventName-date</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>callbacks <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token comment">/**
|
||
* 监听事件
|
||
* @param {事件名} eventName
|
||
* @param {回调函数} callback
|
||
*/</span>
|
||
<span class="token function">on</span><span class="token punctuation">(</span><span class="token parameter">eventName<span class="token punctuation">,</span> callback</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">checkType</span><span class="token punctuation">(</span>eventName<span class="token punctuation">)</span><span class="token punctuation">.</span>callbacks<span class="token punctuation">[</span>eventName<span class="token punctuation">]</span>
|
||
<span class="token operator">?</span> <span class="token function">callback</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>callbacks<span class="token punctuation">[</span>eventName<span class="token punctuation">]</span><span class="token punctuation">)</span>
|
||
<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">The event has not been declared</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token comment">/**
|
||
* 注册一个事件
|
||
* @param {事件名} eventName
|
||
* @param {传递的对象} data
|
||
*/</span>
|
||
<span class="token function">emit</span><span class="token punctuation">(</span><span class="token parameter">eventName<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">checkType</span><span class="token punctuation">(</span>eventName<span class="token punctuation">)</span><span class="token punctuation">.</span>callbacks<span class="token punctuation">[</span>eventName<span class="token punctuation">]</span> <span class="token operator">=</span> data<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token comment">/**
|
||
* 注销事件，不传参数默认注销全部事件
|
||
* @param {事件名} eventName
|
||
*/</span>
|
||
<span class="token function">off</span><span class="token punctuation">(</span><span class="token parameter">eventName</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
eventName
|
||
<span class="token operator">?</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">checkType</span><span class="token punctuation">(</span>eventName<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">removeEvent</span><span class="token punctuation">(</span>eventName<span class="token punctuation">)</span>
|
||
<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">emptyEvent</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token comment">/**
|
||
* 移出事件
|
||
* @param {事件名} eventName
|
||
*/</span>
|
||
<span class="token function">removeEvent</span><span class="token punctuation">(</span><span class="token parameter">eventName</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
Reflect<span class="token punctuation">.</span><span class="token function">deleteProperty</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>callbacks<span class="token punctuation">,</span> eventName<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token comment">/**
|
||
* 清空全部事件
|
||
*/</span>
|
||
<span class="token function">emptyEvent</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>callbacks <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token comment">/**
|
||
* 参数类型校验
|
||
* @param {参数} param
|
||
* @param {合法的类型} validType
|
||
*/</span>
|
||
<span class="token function">checkType</span><span class="token punctuation">(</span>param<span class="token punctuation">,</span> validType <span class="token operator">=</span> <span class="token string">"string"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> param <span class="token operator">!==</span> validType<span class="token punctuation">)</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">(param, </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>param<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">) should be of </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>validType<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> type</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">;</span> <span class="token comment">// 缅怀jQ链式调用</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token comment">/**
|
||
* 错误提示
|
||
* @param {提示文字} text
|
||
*/</span>
|
||
<span class="token function">error</span><span class="token punctuation">(</span><span class="token parameter">text</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span>text<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<p>调用</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">// 省略import</span>
|
||
<span class="token keyword">const</span> eventBus <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">EventBus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
eventBus<span class="token punctuation">.</span><span class="token function">emit</span><span class="token punctuation">(</span><span class="token string">"login"</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">d</span><span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
eventBus<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token number">123</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">d</span><span class="token punctuation">)</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>d<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [{...}]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h2 id="判断对象是否有某个-key"><a href="#判断对象是否有某个-key" class="headerlink" title="判断对象是否有某个 key"></a>判断对象是否有某个 key</h2><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">alias</span><span class="token operator">:</span> <span class="token string">"es6"</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token string">"alias"</span> <span class="token keyword">in</span> obj<span class="token punctuation">;</span> <span class="token comment">// true</span>
|
||
Reflect<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token string">"alias"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h2 id="浏览器"><a href="#浏览器" class="headerlink" title="浏览器"></a>浏览器</h2><h2 id="版本信息"><a href="#版本信息" class="headerlink" title="版本信息"></a>版本信息</h2><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">window<span class="token punctuation">.</span>navigator<span class="token punctuation">.</span>userAgent<span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||
|
||
<h2 id="兼容事件绑定"><a href="#兼容事件绑定" class="headerlink" title="兼容事件绑定"></a>兼容事件绑定</h2><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">/*
|
||
兼容低版本IE，ele为需要绑定事件的元素，
|
||
eventName为事件名（保持addEventListener语法，去掉on），fun为事件响应函数
|
||
*/</span>
|
||
|
||
<span class="token keyword">function</span> <span class="token function">addEvent</span><span class="token punctuation">(</span><span class="token parameter">ele<span class="token punctuation">,</span> eventName<span class="token punctuation">,</span> fun</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
ele<span class="token punctuation">.</span>addEventListener
|
||
<span class="token operator">?</span> ele<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> fun<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span>
|
||
<span class="token operator">:</span> ele<span class="token punctuation">.</span><span class="token function">attachEvent</span><span class="token punctuation">(</span><span class="token string">"on"</span> <span class="token operator">+</span> eventNme<span class="token punctuation">,</span> fun<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h2 id="数组对象"><a href="#数组对象" class="headerlink" title="数组对象"></a>数组对象</h2><h2 id="reduce"><a href="#reduce" class="headerlink" title="reduce"></a>reduce</h2><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">var</span> sum <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">prev<span class="token punctuation">,</span> cur<span class="token punctuation">,</span> index<span class="token punctuation">,</span> arr</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>prev<span class="token punctuation">,</span> cur<span class="token punctuation">,</span> index<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">return</span> prev <span class="token operator">+</span> cur<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>，<span class="token number">0</span><span class="token punctuation">)</span> <span class="token comment">//注意这里设置了初始值</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">,</span> sum<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 求和</span>
|
||
<span class="token keyword">const</span> sum <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">p<span class="token punctuation">,</span>c</span><span class="token punctuation">)</span> <span class="token operator">=></span> p<span class="token operator">+</span>c<span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h2 id="对象内部根据-key-对-value-进行排序-取前-3"><a href="#对象内部根据-key-对-value-进行排序-取前-3" class="headerlink" title="对象内部根据 key 对 value 进行排序,取前 3"></a>对象内部根据 key 对 value 进行排序,取前 3</h2><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">let</span> datasource <span class="token operator">=</span> <span class="token punctuation">[</span>
|
||
<span class="token punctuation">{</span> <span class="token literal-property property">price</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">alias</span><span class="token operator">:</span> <span class="token string">"watermelon"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">{</span> <span class="token literal-property property">price</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token literal-property property">alias</span><span class="token operator">:</span> <span class="token string">"orange"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">{</span> <span class="token literal-property property">price</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token literal-property property">alias</span><span class="token operator">:</span> <span class="token string">"banana"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">{</span> <span class="token literal-property property">price</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token literal-property property">alias</span><span class="token operator">:</span> <span class="token string">"apple"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token comment">// 降序排列</span>
|
||
<span class="token keyword">let</span> <span class="token function-variable function">compare</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">key</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token operator">=></span> b<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">-</span> a<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">let</span> sorted <span class="token operator">=</span> datasource
|
||
<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token function">compare</span><span class="token punctuation">(</span><span class="token string">"price"</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||
<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span>
|
||
<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">i</span><span class="token punctuation">)</span> <span class="token operator">=></span> i<span class="token punctuation">[</span><span class="token string">"alias"</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token comment">// 返回 ["apple", "orange", "banana"]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h2 id="随机字符串"><a href="#随机字符串" class="headerlink" title="随机字符串"></a>随机字符串</h2><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">const</span> <span class="token function-variable function">getRandomRangeNum</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">len <span class="token operator">=</span> <span class="token number">32</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// 略去不宜辨识字符</span>
|
||
<span class="token keyword">let</span> dictionary <span class="token operator">=</span> <span class="token string">"ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz"</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">let</span> maxPos <span class="token operator">=</span> dictionary<span class="token punctuation">.</span>length<span class="token punctuation">;</span>
|
||
<span class="token keyword">let</span> res <span class="token operator">=</span> <span class="token string">""</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> len<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
res <span class="token operator">+=</span> dictionary<span class="token punctuation">.</span><span class="token function">charAt</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> maxPos<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">return</span> res<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h2 id="类型检测"><a href="#类型检测" class="headerlink" title="类型检测"></a>类型检测</h2><p>Q：使用<code>typeof foo === "object"</code>检测<code>foo</code>是否为对象有什么缺点？如何避免？</p>
|
||
<p>A：用 <code>typeof</code> 是否能准确判断一个对象变量，答案是否定的，<code>null</code> 的结果也是 <code>object</code>，<code>Array</code> 的结果也是 <code>object</code>，有时候我们需要的是 “纯粹” 的 <code>object</code> 对象</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token class-name">Object</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token string">"[object Object]"</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||
|
||
<h2 id="倒计时"><a href="#倒计时" class="headerlink" title="倒计时"></a>倒计时</h2><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">class</span> <span class="token class-name">Countdown</span> <span class="token punctuation">{</span>
|
||
<span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">startNum<span class="token punctuation">,</span> endNum<span class="token punctuation">,</span> interval</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>startNum<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>endNum<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>interval<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span>startNum<span class="token punctuation">,</span> endNum<span class="token punctuation">,</span> interval<span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token function">execute</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">var</span> timer <span class="token operator">=</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>startNum <span class="token operator">>=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>endNum<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>startNum<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>startNum <span class="token operator">-=</span> <span class="token number">1</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">execute</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
|
||
<span class="token function">clearTimeout</span><span class="token punctuation">(</span>timer<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>interval<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token comment">// 实例化调用</span>
|
||
<span class="token keyword">var</span> countdown <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Countdown</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">execute</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h2 id="范围随机数"><a href="#范围随机数" class="headerlink" title="范围随机数"></a>范围随机数</h2><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">// 能取到 min，取不到 max</span>
|
||
<span class="token keyword">function</span> <span class="token function">getRandomRangeNum</span><span class="token punctuation">(</span><span class="token parameter">min<span class="token punctuation">,</span> max</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> min <span class="token operator">+</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token punctuation">(</span>max <span class="token operator">-</span> min<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h2 id="获取当前月的天数"><a href="#获取当前月的天数" class="headerlink" title="获取当前月的天数"></a>获取当前月的天数</h2><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">const</span> getCurMonthDays <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>
|
||
<span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
<span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||
<span class="token number">0</span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
|
||
<h1 id="对象小操作"><a href="#对象小操作" class="headerlink" title="对象小操作"></a>对象小操作</h1><h2 id="去虚假值"><a href="#去虚假值" class="headerlink" title="去虚假值"></a>去虚假值</h2><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">let</span> arr4 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"小明"</span><span class="token punctuation">,</span> <span class="token string">"小蓝"</span><span class="token punctuation">,</span> <span class="token string">""</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token string">" "</span><span class="token punctuation">,</span> <span class="token keyword">undefined</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">NaN</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr4<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>Boolean<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => ['小明', '小蓝', ' ', true]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>
|
||
|
||
<h2 id="头尾插入"><a href="#头尾插入" class="headerlink" title="头尾插入"></a>头尾插入</h2><p>效率比 <code>unshift()</code> 高</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token comment">// 头插入</span>
|
||
<span class="token punctuation">[</span><span class="token string">"haha"</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token comment">// 尾插入</span>
|
||
arr<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">"haha"</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
|
||
<h2 id="删除属性"><a href="#删除属性" class="headerlink" title="删除属性"></a>删除属性</h2><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">function</span> <span class="token function">deleteA</span><span class="token punctuation">(</span><span class="token parameter">obj</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">delete</span> obj<span class="token punctuation">.</span><span class="token constant">A</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">return</span> obj<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token comment">// 使用解构赋值</span>
|
||
<span class="token keyword">const</span> <span class="token function-variable function">deleteA</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> <span class="token constant">A</span><span class="token punctuation">,</span> <span class="token operator">...</span>rest <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> rest<span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h1 id="生产、加工、消费分离"><a href="#生产、加工、消费分离" class="headerlink" title="生产、加工、消费分离"></a>生产、加工、消费分离</h1><ul>
|
||
<li>从接口拿数据到视图 fetch api</li>
|
||
<li>加工 computed</li>
|
||
<li>消费 v-for</li>
|
||
</ul>
|
||
<h1 id="元数据"><a href="#元数据" class="headerlink" title="元数据"></a>元数据</h1><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">import</span> <span class="token string">"reflect-metadata"</span><span class="token punctuation">;</span> <span class="token comment">// npm install reflect-metadata</span>
|
||
|
||
<span class="token keyword">function</span> <span class="token function">Role</span><span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">name</span><span class="token operator">:</span> string</span><span class="token punctuation">)</span><span class="token operator">:</span> ClassDecorator <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token parameter">target</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
Reflect<span class="token punctuation">.</span><span class="token function">defineMetadata</span><span class="token punctuation">(</span><span class="token string">"role"</span><span class="token punctuation">,</span> name<span class="token punctuation">,</span> target<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
@<span class="token function">Role</span><span class="token punctuation">(</span><span class="token string">"admin"</span><span class="token punctuation">)</span>
|
||
<span class="token keyword">class</span> <span class="token class-name">Post</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
|
||
|
||
<span class="token keyword">const</span> metadata <span class="token operator">=</span> Reflect<span class="token punctuation">.</span><span class="token function">getMetadata</span><span class="token punctuation">(</span><span class="token string">"role"</span><span class="token punctuation">,</span> Post<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
Reflect<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span>Post<span class="token punctuation">,</span> <span class="token string">"role2"</span><span class="token punctuation">,</span> metadata<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Reflect<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>Post<span class="token punctuation">,</span> <span class="token string">"role2"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// admin</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h1 id="防抖与节流"><a href="#防抖与节流" class="headerlink" title="防抖与节流"></a>防抖与节流</h1><p>在页面上监听诸如<code>scroll</code>（页面滚动），<code>mousemove</code>（鼠标移动） ，<code>keydown</code>， <code>keyup</code>， <code>keypress</code>（按下键盘）等等一系列事件的时候，我们并不希望频繁的触发这类监听，尤其当请求非常消耗资源时，这种操作会导致服务器性能急剧下降。</p>
|
||
<h2 id="Debounce"><a href="#Debounce" class="headerlink" title="Debounce"></a>Debounce</h2><p>把触发非常频繁的事件合并成一次延迟执行，如果对监听函数使用 100ms 的容忍时间，那么时间在第 3.1s 的时候执行</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">// 默认延时100ms</span>
|
||
<span class="token keyword">function</span> <span class="token function">debounce</span><span class="token punctuation">(</span><span class="token parameter">func<span class="token punctuation">,</span> dealy <span class="token operator">=</span> <span class="token number">100</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">let</span> timer<span class="token punctuation">;</span>
|
||
<span class="token keyword">return</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// 暂存this和参数</span>
|
||
<span class="token keyword">let</span> _this <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">let</span> args <span class="token operator">=</span> arguments<span class="token punctuation">;</span>
|
||
<span class="token comment">// 清除定时器，确保不执行func</span>
|
||
<span class="token function">clearTimeout</span><span class="token punctuation">(</span>timer<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
timer <span class="token operator">=</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token function">func</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>_this<span class="token punctuation">,</span> args<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span> dealy<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token comment">// 执行函数</span>
|
||
<span class="token keyword">function</span> <span class="token function">handler</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">delay 100ms ,then handle</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token comment">// dom添加监听</span>
|
||
document
|
||
<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#someNode"</span><span class="token punctuation">)</span>
|
||
<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"scroll"</span><span class="token punctuation">,</span> <span class="token function">debounce</span><span class="token punctuation">(</span>handler<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h2 id="Throttle"><a href="#Throttle" class="headerlink" title="Throttle"></a>Throttle</h2><p>固定函数执行的速率，即所谓的“节流”。设置一个阀值，在阀值内，把触发的事件合并成一次执行；当到达阀值，必定执行一次事件。</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">function</span> <span class="token function">throttle</span><span class="token punctuation">(</span><span class="token parameter">func<span class="token punctuation">,</span> delay</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">let</span> statTime <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">return</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">let</span> currentTime <span class="token operator">=</span> <span class="token operator">+</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>currentTime <span class="token operator">-</span> statTime <span class="token operator">></span> delay<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token function">func</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> arguments<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
statTime <span class="token operator">=</span> currentTime<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token comment">// 执行函数</span>
|
||
<span class="token keyword">function</span> <span class="token function">resizeHandler</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">resize</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token comment">// window添加监听</span>
|
||
window<span class="token punctuation">.</span>onresize <span class="token operator">=</span> <span class="token function">throttle</span><span class="token punctuation">(</span>resizeHandler<span class="token punctuation">,</span> <span class="token number">300</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h1 id="this-指向"><a href="#this-指向" class="headerlink" title="this 指向"></a>this 指向</h1><h2 id="全局环境"><a href="#全局环境" class="headerlink" title="全局环境"></a>全局环境</h2><p>全局环境下，this 始终指向全局对象（window），无论是否严格模式</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span> <span class="token operator">===</span> window<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>a <span class="token operator">=</span> <span class="token number">37</span><span class="token punctuation">;</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 37</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h2 id="函数上下文调用"><a href="#函数上下文调用" class="headerlink" title="函数上下文调用"></a>函数上下文调用</h2><ul>
|
||
<li>非严格模式</li>
|
||
</ul>
|
||
<p>没有被上一级的对象所调用, this 默认指向全局对象 window</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">function</span> <span class="token function">f1</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token function">f1</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">===</span> window<span class="token punctuation">;</span> <span class="token comment">// true</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<ul>
|
||
<li>严格模式</li>
|
||
</ul>
|
||
<p>this 指向 undefined</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">function</span> <span class="token function">f2</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token string">"use strict"</span><span class="token punctuation">;</span> <span class="token comment">// 这里是严格模式</span>
|
||
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token function">f2</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token keyword">undefined</span><span class="token punctuation">;</span> <span class="token comment">// true</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h2 id="箭头函数"><a href="#箭头函数" class="headerlink" title="箭头函数"></a>箭头函数</h2><blockquote>
|
||
<p>箭头函数中，call()、apply()、bind()方法无效</p>
|
||
</blockquote>
|
||
<p>在全局代码中，箭头函数被设置为全局对象，总之箭头函数不改变 this 指向</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> globalObject <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">var</span> <span class="token function-variable function">foo</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">this</span><span class="token punctuation">;</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">===</span> globalObject<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<p>箭头函数作为对象的方法使用，指向全局 window 对象</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
<span class="token literal-property property">i</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
|
||
<span class="token function-variable function">b</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>i<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
<span class="token function-variable function">c</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>i<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
obj<span class="token punctuation">.</span><span class="token function">b</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// undefined window{...}</span>
|
||
obj<span class="token punctuation">.</span><span class="token function">c</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 10 Object {...}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<p>箭头函数可以让 this 指向固化，这种特性很有利于封装回调函数</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">// 总是指向 handler 对象。如果不使用箭头函数则指向全局 document 对象</span>
|
||
<span class="token keyword">var</span> handler <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
<span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">"123456"</span><span class="token punctuation">,</span>
|
||
|
||
<span class="token function-variable function">init</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>
|
||
<span class="token string">"click"</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">doSomething</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>type<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
<span class="token boolean">false</span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
|
||
<span class="token function-variable function">doSomething</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">type</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Handling "</span> <span class="token operator">+</span> type <span class="token operator">+</span> <span class="token string">" for "</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h1 id="call-apply-bind-与-es6"><a href="#call-apply-bind-与-es6" class="headerlink" title="call, apply, bind 与 es6"></a>call, apply, bind 与 es6</h1><p>js 的函数继承于<code>Function.prototype</code>对象，因此每个函数都会有 apply、call、bind 方法</p>
|
||
<blockquote>
|
||
<p>call 和 apply 的作用，完全一样，唯一的区别就是在参数上面。</p>
|
||
</blockquote>
|
||
<p><code>call, apply, bind</code>改变函数中 <code>this 指向</code> 的三兄弟，把<code>this</code>绑定到第一个参数对象上</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">function</span> <span class="token function">displayHobbies</span><span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>hobbies</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> likes </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>hobbies<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">", "</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token comment">// 下面两个等价</span>
|
||
<span class="token function">displayHobbies</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"Bob"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">"swimming"</span><span class="token punctuation">,</span> <span class="token string">"basketball"</span><span class="token punctuation">,</span> <span class="token string">"anime"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Bob likes swimming, basketball, anime.</span>
|
||
<span class="token function">displayHobbies</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"Bob"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">"swimming"</span><span class="token punctuation">,</span> <span class="token string">"basketball"</span><span class="token punctuation">,</span> <span class="token string">"anime"</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Bob likes swimming, basketball, anime.</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<p><code>bind</code>返回的是一个函数，需要手动执行</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> p1 <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"张三"</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">12</span><span class="token punctuation">,</span>
|
||
<span class="token function-variable function">func</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">姓名:</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">,年龄:</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>age<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">var</span> p2 <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"李四"</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">15</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
|
||
p1<span class="token punctuation">.</span><span class="token function">func</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span>p2<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//姓名:李四,年龄:15</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h1 id="for-循环优化"><a href="#for-循环优化" class="headerlink" title="for 循环优化"></a>for 循环优化</h1><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">// 每次都要计算array.length</span>
|
||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> array<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token comment">// 使用leng缓存array长度</span>
|
||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> length <span class="token operator">=</span> array<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i <span class="token operator"><</span> length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h1 id="数组"><a href="#数组" class="headerlink" title="数组"></a>数组</h1><h2 id="扁平化去重升序排列"><a href="#扁平化去重升序排列" class="headerlink" title="扁平化去重升序排列"></a>扁平化去重升序排列</h2><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">13</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">14</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
arr<span class="token punctuation">.</span><span class="token function">flat</span><span class="token punctuation">(</span><span class="token number">Infinity</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [1, 2, 2, 3, 4, 5, 5, 6, 7, 8, 9, 11, 12, 12, 13, 14, 10]</span>
|
||
|
||
<span class="token keyword">let</span> result <span class="token operator">=</span> Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>arr<span class="token punctuation">.</span><span class="token function">flat</span><span class="token punctuation">(</span><span class="token number">Infinity</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token operator">=></span> a <span class="token operator">-</span> b<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h1 id="前端页面埋点-1x1-gif"><a href="#前端页面埋点-1x1-gif" class="headerlink" title="前端页面埋点 - 1x1.gif"></a>前端页面埋点 - 1x1.gif</h1><p>通常用在，统计页面点击，曝光，停留时间，签发……等场景</p>
|
||
<ul>
|
||
<li>比 PNG/JPG 体积小</li>
|
||
<li>天然跨域</li>
|
||
</ul>
|
||
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token special-attr"><span class="token attr-name">onClick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">countClick</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>haorooms<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
<span class="token keyword">function</span> <span class="token function">countClick</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">new</span> <span class="token class-name">Image</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>src <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">./haorooms.gif?</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>key<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>value<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h1 id="事件委托"><a href="#事件委托" class="headerlink" title="事件委托"></a>事件委托</h1><p>利用冒泡原理，委托父元素执行</p>
|
||
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>苹果<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>香蕉<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>凤梨<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"ul"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">let</span> target <span class="token operator">=</span> event<span class="token punctuation">.</span>target<span class="token punctuation">;</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>target<span class="token punctuation">.</span>nodeName <span class="token operator">===</span> <span class="token string">"LI"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>target<span class="token punctuation">.</span>innerHTML<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h1 id="构造函数-原型模式"><a href="#构造函数-原型模式" class="headerlink" title="构造函数 + 原型模式"></a>构造函数 + 原型模式</h1><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">function</span> <span class="token function">Person</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> age<span class="token punctuation">,</span> job</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> age<span class="token punctuation">;</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>job <span class="token operator">=</span> job<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token class-name">Person</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">say</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">text</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">say:</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>text<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h1 id="剩余参数…args"><a href="#剩余参数…args" class="headerlink" title="剩余参数…args"></a>剩余参数…args</h1><p>剩余参数<code>args</code>数个数组，<code>...</code>解构符</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">function</span> <span class="token function">fun1</span><span class="token punctuation">(</span><span class="token parameter">param<span class="token punctuation">,</span> <span class="token operator">...</span>args</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token function">alert</span><span class="token punctuation">(</span>args<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h1 id="跨页面通信"><a href="#跨页面通信" class="headerlink" title="跨页面通信"></a>跨页面通信</h1><ul>
|
||
<li>cookie</li>
|
||
<li>web worker</li>
|
||
<li>localstorage</li>
|
||
</ul>
|
||
<h1 id="iframe-跨域通信和不跨域通信"><a href="#iframe-跨域通信和不跨域通信" class="headerlink" title="iframe 跨域通信和不跨域通信"></a>iframe 跨域通信和不跨域通信</h1><h2 id="不跨域"><a href="#不跨域" class="headerlink" title="不跨域"></a>不跨域</h2><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">// fatherSay是父页面全局方法</span>
|
||
window<span class="token punctuation">.</span>parent<span class="token punctuation">.</span><span class="token function">fatherSay</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token comment">// 父页面Dom</span>
|
||
window<span class="token punctuation">.</span>parent<span class="token punctuation">.</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"元素id"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token comment">// 副业页面获取frameID为`iframe_ID`的子页面的Dom</span>
|
||
window<span class="token punctuation">.</span>frames<span class="token punctuation">[</span><span class="token string">"iframe_ID"</span><span class="token punctuation">]</span><span class="token punctuation">.</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"元素id"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h2 id="跨域-postMessage"><a href="#跨域-postMessage" class="headerlink" title="跨域 postMessage"></a>跨域 postMessage</h2><p>子页面</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">window<span class="token punctuation">.</span>parent<span class="token punctuation">.</span><span class="token function">postMessage</span><span class="token punctuation">(</span><span class="token string">"hello"</span><span class="token punctuation">,</span> <span class="token string">"http://127.0.0.1:8089"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
|
||
|
||
<p>父页面接受</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"message"</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token number">123</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h1 id="对象类型判断"><a href="#对象类型判断" class="headerlink" title="对象类型判断"></a>对象类型判断</h1><h2 id="数组-1"><a href="#数组-1" class="headerlink" title="数组"></a>数组</h2><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
arr <span class="token keyword">instanceof</span> <span class="token class-name">Array</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
|
||
Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
|
||
<span class="token class-name">Object</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "[object Array]"</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h1 id="js-单线程，如何异步"><a href="#js-单线程，如何异步" class="headerlink" title="js 单线程，如何异步"></a>js 单线程，如何异步</h1><ul>
|
||
<li><p>主线程 执行 js 中所有的代码。</p>
|
||
</li>
|
||
<li><p>主线程 在执行过程中发现了需要异步的任务任务后扔给浏览器（浏览器创建多个线程执行，顺便创造一个<code>回调队列</code>。</p>
|
||
</li>
|
||
<li><p>主线程 已经执行完毕所有同步代码。监听<code>回调队列</code>一旦 浏览器 中某个线程任务完成将会改变回调函数的状态。主线程查看到某个函数的状态为已完成，就会执行该<code>回调队列</code>中对应的回调函数。</p>
|
||
</li>
|
||
</ul>
|
||
<h1 id="移动端最小触控区域"><a href="#移动端最小触控区域" class="headerlink" title="移动端最小触控区域"></a>移动端最小触控区域</h1><p>苹果推荐是 44pt x 44pt 「具体看 WWDC 14」,通过<code>padding</code>、<code>margin</code>、<code>height</code>等方式进行点击区域扩展</p>
|
||
<h1 id="js-精度问题"><a href="#js-精度问题" class="headerlink" title="js 精度问题"></a>js 精度问题</h1><p>常用类库：<code>Math.js</code>、<code>Big.js</code>、<code>decimal.js</code></p>
|
||
<h1 id="冻结-Object-freeze"><a href="#冻结-Object-freeze" class="headerlink" title="冻结 Object. freeze()"></a>冻结 Object. freeze()</h1><p><code>const</code>生命的简单变量不可修改，但是复杂对象可以被修改，<code>Object. freeze()</code>：可以冻结对象</p>
|
||
<ul>
|
||
<li>不能添加新属性</li>
|
||
<li>不能删除已有属性</li>
|
||
<li>不能修改已有属性的可枚举性、可配置性、可写性</li>
|
||
<li>不能修改已有属性的值</li>
|
||
<li>不能修改原型</li>
|
||
</ul>
|
||
<p>浅冻结</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">const</span> obj1 <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
<span class="token literal-property property">internal</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
|
||
Object<span class="token punctuation">.</span><span class="token function">freeze</span><span class="token punctuation">(</span>obj1<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
obj1<span class="token punctuation">.</span>internal<span class="token punctuation">.</span>a <span class="token operator">=</span> <span class="token string">"aValue"</span><span class="token punctuation">;</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj1<span class="token punctuation">.</span>internal<span class="token punctuation">.</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// aValue</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<p>递归冻结</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">function</span> <span class="token function">deepFreeze</span><span class="token punctuation">(</span><span class="token parameter">obj</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// 获取定义在obj上的属性名</span>
|
||
<span class="token keyword">var</span> propNames <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">getOwnPropertyNames</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token comment">// 在冻结自身之前冻结属性</span>
|
||
propNames<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">var</span> prop <span class="token operator">=</span> obj<span class="token punctuation">[</span>name<span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token comment">// 如果prop是个对象，冻结它</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> prop <span class="token operator">==</span> <span class="token string">"object"</span> <span class="token operator">&&</span> prop <span class="token operator">!==</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token function">deepFreeze</span><span class="token punctuation">(</span>prop<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">return</span> Object<span class="token punctuation">.</span><span class="token function">freeze</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h1 id="Reflect"><a href="#Reflect" class="headerlink" title="Reflect"></a>Reflect</h1><h2 id="Reflect-get-target-propertyKey-value-receiver"><a href="#Reflect-get-target-propertyKey-value-receiver" class="headerlink" title="Reflect.get(target, propertyKey, value[receiver])"></a>Reflect.get(target, propertyKey, value[receiver])</h2><p>获取对象身上某个属性的值，类似于 target[name]。</p>
|
||
<h2 id="Reflect-set-target-propertyKey-value-receiver"><a href="#Reflect-set-target-propertyKey-value-receiver" class="headerlink" title="Reflect.set(target, propertyKey, value[receiver])"></a>Reflect.set(target, propertyKey, value[receiver])</h2><p>将值分配给属性的函数。返回一个 Boolean，如果更新成功，则返回 true。</p>
|
||
<h2 id="Reflect-has-target-propertyKey"><a href="#Reflect-has-target-propertyKey" class="headerlink" title="Reflect.has(target, propertyKey)"></a>Reflect.has(target, propertyKey)</h2><p>判断一个对象是否存在某个属性，和 in 运算符 的功能完全相同。</p>
|
||
<h1 id="if-else-优化"><a href="#if-else-优化" class="headerlink" title="if else 优化"></a>if else 优化</h1><h2 id="表驱动编程"><a href="#表驱动编程" class="headerlink" title="表驱动编程"></a>表驱动编程</h2><p>空间换时间，设置<code>obj={key:value}</code>，通过<code>obj[key]</code>取值</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token function">calculateGrade</span><span class="token punctuation">(</span><span class="token parameter">score</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> table <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
<span class="token number">100</span><span class="token operator">:</span> <span class="token string">'A'</span><span class="token punctuation">,</span>
|
||
<span class="token number">90</span><span class="token operator">:</span> <span class="token string">'A'</span><span class="token punctuation">,</span>
|
||
<span class="token number">80</span><span class="token operator">:</span> <span class="token string">'B'</span><span class="token punctuation">,</span>
|
||
<span class="token number">70</span><span class="token operator">:</span> <span class="token string">'C'</span><span class="token punctuation">,</span>
|
||
<span class="token number">60</span><span class="token operator">:</span> <span class="token string">'D'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">others</span><span class="token operator">:</span> <span class="token string">'E'</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">return</span> table<span class="token punctuation">[</span>Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>score<span class="token operator">/</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token operator">*</span><span class="token number">10</span><span class="token punctuation">]</span> <span class="token operator">||</span> table<span class="token punctuation">[</span><span class="token string">'others'</span><span class="token punctuation">]</span>
|
||
<span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h2 id="短路运算"><a href="#短路运算" class="headerlink" title="短路运算"></a>短路运算</h2><p>react 没有<code>v-if</code>，运用比较频繁</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">// 函数组件</span>
|
||
<span class="token keyword">const</span> <span class="token function-variable function">Home</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token operator"><</span>div<span class="token operator">></span>home<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">{</span>
|
||
<span class="token boolean">true</span> <span class="token operator">&&</span> <span class="token operator"><</span>Home <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h1 id="使用有意义且易读的变量名"><a href="#使用有意义且易读的变量名" class="headerlink" title="使用有意义且易读的变量名"></a>使用有意义且易读的变量名</h1><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">👎 <span class="token keyword">const</span> yyyymmdstr <span class="token operator">=</span> <span class="token function">moment</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">format</span><span class="token punctuation">(</span><span class="token string">"YYYY/MM/DD"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
👍 <span class="token keyword">const</span> currentDate <span class="token operator">=</span> <span class="token function">moment</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">format</span><span class="token punctuation">(</span><span class="token string">"YYYY/MM/DD"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h1 id="使用有意义的变量代替数组下标"><a href="#使用有意义的变量代替数组下标" class="headerlink" title="使用有意义的变量代替数组下标"></a>使用有意义的变量代替数组下标</h1><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">👎
|
||
<span class="token keyword">const</span> address <span class="token operator">=</span> <span class="token string">"One Infinite Loop, Cupertino 95014"</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> cityZipCodeRegex <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">;</span>
|
||
<span class="token function">saveCityZipCode</span><span class="token punctuation">(</span>
|
||
address<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span>cityZipCodeRegex<span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
address<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span>cityZipCodeRegex<span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
👍
|
||
<span class="token keyword">const</span> address <span class="token operator">=</span> <span class="token string">"One Infinite Loop, Cupertino 95014"</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> cityZipCodeRegex <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> <span class="token punctuation">[</span>_<span class="token punctuation">,</span> city<span class="token punctuation">,</span> zipCode<span class="token punctuation">]</span> <span class="token operator">=</span> address<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span>cityZipCodeRegex<span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token function">saveCityZipCode</span><span class="token punctuation">(</span>city<span class="token punctuation">,</span> zipCode<span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h1 id="变量名要简洁"><a href="#变量名要简洁" class="headerlink" title="变量名要简洁"></a>变量名要简洁</h1><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">👎
|
||
<span class="token keyword">const</span> Car <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
<span class="token literal-property property">carMake</span><span class="token operator">:</span> <span class="token string">"Honda"</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">carModel</span><span class="token operator">:</span> <span class="token string">"Accord"</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">carColor</span><span class="token operator">:</span> <span class="token string">"Blue"</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">function</span> <span class="token function">paintCar</span><span class="token punctuation">(</span><span class="token parameter">car<span class="token punctuation">,</span> color</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
car<span class="token punctuation">.</span>carColor <span class="token operator">=</span> color<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
👍
|
||
<span class="token keyword">const</span> Car <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
<span class="token literal-property property">make</span><span class="token operator">:</span> <span class="token string">"Honda"</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">model</span><span class="token operator">:</span> <span class="token string">"Accord"</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">"Blue"</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">function</span> <span class="token function">paintCar</span><span class="token punctuation">(</span><span class="token parameter">car<span class="token punctuation">,</span> color</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
car<span class="token punctuation">.</span>color <span class="token operator">=</span> color<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h1 id="消除魔术字符串"><a href="#消除魔术字符串" class="headerlink" title="消除魔术字符串"></a>消除魔术字符串</h1><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">👎 <span class="token function">setTimeout</span><span class="token punctuation">(</span>blastOff<span class="token punctuation">,</span> <span class="token number">86400000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
👍 <span class="token keyword">const</span> <span class="token constant">MILLISECONDS_PER_DAY</span> <span class="token operator">=</span> <span class="token number">60</span> <span class="token operator">*</span> <span class="token number">60</span> <span class="token operator">*</span> <span class="token number">24</span> <span class="token operator">*</span> <span class="token number">1000</span><span class="token punctuation">;</span> <span class="token comment">//86400000;</span>
|
||
<span class="token function">setTimeout</span><span class="token punctuation">(</span>blastOff<span class="token punctuation">,</span> <span class="token constant">MILLISECONDS_PER_DAY</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h1 id="使用默认参数替代短路运算符"><a href="#使用默认参数替代短路运算符" class="headerlink" title="使用默认参数替代短路运算符"></a>使用默认参数替代短路运算符</h1><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">👎
|
||
<span class="token keyword">function</span> <span class="token function">createMicrobrewery</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> breweryName <span class="token operator">=</span> name <span class="token operator">||</span> <span class="token string">"Hipster Brew Co."</span><span class="token punctuation">;</span>
|
||
<span class="token comment">// ...</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
👍
|
||
<span class="token keyword">function</span> <span class="token function">createMicrobrewery</span><span class="token punctuation">(</span>name <span class="token operator">=</span> <span class="token string">"Hipster Brew Co."</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// ...</span>
|
||
<span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h1 id="一个函数"><a href="#一个函数" class="headerlink" title="一个函数"></a>一个函数</h1><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">👎
|
||
<span class="token keyword">function</span> <span class="token function">emailClients</span><span class="token punctuation">(</span><span class="token parameter">clients</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
clients<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">client</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> clientRecord <span class="token operator">=</span> database<span class="token punctuation">.</span><span class="token function">lookup</span><span class="token punctuation">(</span>client<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>clientRecord<span class="token punctuation">.</span><span class="token function">isActive</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token function">email</span><span class="token punctuation">(</span>client<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
👍
|
||
<span class="token keyword">function</span> <span class="token function">emailActiveClients</span><span class="token punctuation">(</span><span class="token parameter">clients</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
clients<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>isActiveClient<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span>email<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">function</span> <span class="token function">isActiveClient</span><span class="token punctuation">(</span><span class="token parameter">client</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> clientRecord <span class="token operator">=</span> database<span class="token punctuation">.</span><span class="token function">lookup</span><span class="token punctuation">(</span>client<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">return</span> clientRecord<span class="token punctuation">.</span><span class="token function">isActive</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">-</span>分割线<span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">-</span>
|
||
|
||
👎
|
||
<span class="token keyword">function</span> <span class="token function">createFile</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> temp</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>temp<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
fs<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">./temp/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
|
||
fs<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
👍
|
||
<span class="token keyword">function</span> <span class="token function">createFile</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
fs<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">function</span> <span class="token function">createTempFile</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token function">createFile</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">./temp/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h1 id="函数参数不多于-2-个，如果有很多参数就利用-object-传递，并使用解构"><a href="#函数参数不多于-2-个，如果有很多参数就利用-object-传递，并使用解构" class="headerlink" title="函数参数不多于 2 个，如果有很多参数就利用 object 传递，并使用解构"></a>函数参数不多于 2 个，如果有很多参数就利用 object 传递，并使用解构</h1><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">👎
|
||
<span class="token keyword">function</span> <span class="token function">createMenu</span><span class="token punctuation">(</span><span class="token parameter">title<span class="token punctuation">,</span> body<span class="token punctuation">,</span> buttonText<span class="token punctuation">,</span> cancellable</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// ...</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token function">createMenu</span><span class="token punctuation">(</span><span class="token string">"Foo"</span><span class="token punctuation">,</span> <span class="token string">"Bar"</span><span class="token punctuation">,</span> <span class="token string">"Baz"</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
👍
|
||
<span class="token keyword">function</span> <span class="token function">createMenu</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> title<span class="token punctuation">,</span> body<span class="token punctuation">,</span> buttonText<span class="token punctuation">,</span> cancellable <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// ...</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token function">createMenu</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
<span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"Foo"</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">body</span><span class="token operator">:</span> <span class="token string">"Bar"</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">buttonText</span><span class="token operator">:</span> <span class="token string">"Baz"</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">cancellable</span><span class="token operator">:</span> <span class="token boolean">true</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h1 id="函数名应该直接反映函数的作用"><a href="#函数名应该直接反映函数的作用" class="headerlink" title="函数名应该直接反映函数的作用"></a>函数名应该直接反映函数的作用</h1><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">👎
|
||
<span class="token keyword">function</span> <span class="token function">addToDate</span><span class="token punctuation">(</span><span class="token parameter">date<span class="token punctuation">,</span> month</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// ...</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">const</span> date <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token comment">// It's hard to tell from the function name what is added</span>
|
||
<span class="token function">addToDate</span><span class="token punctuation">(</span>date<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
👍
|
||
<span class="token keyword">function</span> <span class="token function">addMonthToDate</span><span class="token punctuation">(</span><span class="token parameter">month<span class="token punctuation">,</span> date</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// ...</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">const</span> date <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token function">addMonthToDate</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> date<span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h1 id="尽量使用纯函数"><a href="#尽量使用纯函数" class="headerlink" title="尽量使用纯函数"></a>尽量使用纯函数</h1><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">👎
|
||
<span class="token keyword">const</span> programmerOutput <span class="token operator">=</span> <span class="token punctuation">[</span>
|
||
<span class="token punctuation">{</span>
|
||
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"Uncle Bobby"</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">linesOfCode</span><span class="token operator">:</span> <span class="token number">500</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">{</span>
|
||
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"Suzie Q"</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">linesOfCode</span><span class="token operator">:</span> <span class="token number">1500</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">{</span>
|
||
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"Jimmy Gosling"</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">linesOfCode</span><span class="token operator">:</span> <span class="token number">150</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">{</span>
|
||
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"Gracie Hopper"</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">linesOfCode</span><span class="token operator">:</span> <span class="token number">1000</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">let</span> totalOutput <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> programmerOutput<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
totalOutput <span class="token operator">+=</span> programmerOutput<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>linesOfCode<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
👍
|
||
<span class="token keyword">const</span> programmerOutput <span class="token operator">=</span> <span class="token punctuation">[</span>
|
||
<span class="token punctuation">{</span>
|
||
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"Uncle Bobby"</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">linesOfCode</span><span class="token operator">:</span> <span class="token number">500</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">{</span>
|
||
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"Suzie Q"</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">linesOfCode</span><span class="token operator">:</span> <span class="token number">1500</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">{</span>
|
||
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"Jimmy Gosling"</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">linesOfCode</span><span class="token operator">:</span> <span class="token number">150</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">{</span>
|
||
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"Gracie Hopper"</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">linesOfCode</span><span class="token operator">:</span> <span class="token number">1000</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> totalOutput <span class="token operator">=</span> programmerOutput<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span>
|
||
<span class="token punctuation">(</span><span class="token parameter">totalLines<span class="token punctuation">,</span> output</span><span class="token punctuation">)</span> <span class="token operator">=></span> totalLines <span class="token operator">+</span> output<span class="token punctuation">.</span>linesOfCode<span class="token punctuation">,</span>
|
||
<span class="token number">0</span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h1 id="不要过度优化"><a href="#不要过度优化" class="headerlink" title="不要过度优化"></a>不要过度优化</h1><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">👎
|
||
<span class="token comment">// 现代浏览器对于迭代器做了内部优化</span>
|
||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> len <span class="token operator">=</span> list<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i <span class="token operator"><</span> len<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// ...</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
👍
|
||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> list<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// ...</span>
|
||
<span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
|
||
<h1 id="关于模块化"><a href="#关于模块化" class="headerlink" title="关于模块化"></a>关于模块化</h1><h2 id="无模块化"><a href="#无模块化" class="headerlink" title="无模块化"></a>无模块化</h2><blockquote>
|
||
<p>污染全局作用域、维护成本高、依赖关系不明显</p>
|
||
</blockquote>
|
||
<p>script 标签引入 js 文件，相互罗列，但是被依赖的放在前面，否则使用就会报错。如下：</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token operator"><</span>script src<span class="token operator">=</span><span class="token string">"jquery.js"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
|
||
<span class="token operator"><</span>script src<span class="token operator">=</span><span class="token string">"main.js"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
|
||
<span class="token operator"><</span>script src<span class="token operator">=</span><span class="token string">"other1.js"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
|
||
<span class="token operator"><</span>script src<span class="token operator">=</span><span class="token string">"other2.js"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
|
||
<span class="token operator"><</span>script src<span class="token operator">=</span><span class="token string">"other3.js"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h2 id="CommonJS-规范-同步"><a href="#CommonJS-规范-同步" class="headerlink" title="CommonJS 规范(同步)"></a>CommonJS 规范(同步)</h2><p>该规范最初是用在服务器端的 node 的，它有四个重要的环境变量为模块化的实现提供支持：module、exports、require、global。实际使用时，用 module.exports 定义当前模块对外输出的接口（不推荐直接用 exports），用 require 加载模块(同步)</p>
|
||
<blockquote>
|
||
<p>module.exports 本身就是一个对象</p>
|
||
</blockquote>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">foo</span><span class="token operator">:</span> <span class="token string">"bar"</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token comment">//true</span>
|
||
module<span class="token punctuation">.</span>exports<span class="token punctuation">.</span>foo <span class="token operator">=</span> <span class="token string">"bar"</span><span class="token punctuation">;</span> <span class="token comment">//true。</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>
|
||
|
||
<p>CommonJS 用同步的方式加载模块。在服务端，模块文件都存在本地磁盘，读取非常快，所以这样做不会有问题。但是在浏览器端，限于网络原因，CommonJS 不适合浏览器端模块加载，更合理的方案是使用异步加载，比如下边 AMD 规范。</p>
|
||
<h2 id="AMD-规范-RequireJS"><a href="#AMD-规范-RequireJS" class="headerlink" title="AMD 规范(RequireJS)"></a>AMD 规范(RequireJS)</h2><p>承接上文，AMD 规范则是非同步加载模块，允许指定回调函数，AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。</p>
|
||
<ul>
|
||
<li><code>require([module], callback)</code>：加载模块</li>
|
||
<li><code>define(id, [depends], callback)</code>：定义模块</li>
|
||
<li><code>require.config()</code>：配置路径、依赖关系</li>
|
||
</ul>
|
||
<h2 id="CMD-规范-SeaJS"><a href="#CMD-规范-SeaJS" class="headerlink" title="CMD 规范(SeaJS)"></a>CMD 规范(SeaJS)</h2><p>CMD 是 在推广过程中对模块定义的规范化产出</p>
|
||
<h2 id="ES6-import-x2F-export"><a href="#ES6-import-x2F-export" class="headerlink" title="ES6 import/export"></a>ES6 import/export</h2><p>通过 babel 将不被支持的 import 编译为当前受到广泛支持的 AMD 规范</p>
|
||
<h1 id="AMD模块化实现"><a href="#AMD模块化实现" class="headerlink" title="AMD模块化实现"></a>AMD模块化实现</h1><h2 id="define-函数"><a href="#define-函数" class="headerlink" title="define 函数"></a>define 函数</h2><p>用来声明模块名<code>module</code>，依赖数组<code>deps</code>，以及模块的作用<code>callback</code></p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> module <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">var</span> stack <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token comment">//模块存储栈，存的是模块执行后的结果</span>
|
||
|
||
<span class="token keyword">function</span> <span class="token function">define</span><span class="token punctuation">(</span><span class="token parameter">module<span class="token punctuation">,</span> deps<span class="token punctuation">,</span> callback</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
stack<span class="token punctuation">[</span>module<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">callback</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> deps<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 压栈</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>stack<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 查看栈存储的模块</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token keyword">return</span> <span class="token punctuation">{</span> <span class="token literal-property property">define</span><span class="token operator">:</span> define <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<p>调用<code>define</code>试试，发现 <code>calc</code>模块被压入了<code>stack 模块栈中</code></p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">module<span class="token punctuation">.</span><span class="token function">define</span><span class="token punctuation">(</span><span class="token string">"calc"</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||
<span class="token function-variable function">first</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">arr</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> arr<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token comment">// {calc: { first: ƒ }}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h2 id="deps-依赖-导入"><a href="#deps-依赖-导入" class="headerlink" title="deps 依赖(导入)"></a>deps 依赖(导入)</h2><p>对上面的 <code>define</code>函数稍加改造，这一步过程的本质，就是对 deps</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> module <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">window</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">var</span> stack <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token comment">//模块存储栈，</span>
|
||
|
||
<span class="token keyword">function</span> <span class="token function">define</span><span class="token punctuation">(</span><span class="token parameter">module<span class="token punctuation">,</span> deps<span class="token punctuation">,</span> callback</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// 把 define 函数依赖数组中的模块从 stack 模块中拿出</span>
|
||
deps<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">mod<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
deps<span class="token punctuation">[</span>index<span class="token punctuation">]</span> <span class="token operator">=</span> stack<span class="token punctuation">[</span>mod<span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// 赋值给当前模块的 deps</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
stack<span class="token punctuation">[</span>module<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">callback</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> deps<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>stack<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 查看栈存储的模块</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token keyword">return</span> <span class="token punctuation">{</span> <span class="token literal-property property">define</span><span class="token operator">:</span> define <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>window<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
module<span class="token punctuation">.</span><span class="token function">define</span><span class="token punctuation">(</span><span class="token string">"calc"</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||
<span class="token function-variable function">first</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">arr</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> arr<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
module<span class="token punctuation">.</span><span class="token function">define</span><span class="token punctuation">(</span><span class="token string">"number"</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">"calc"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">calc</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||
<span class="token literal-property property">res</span><span class="token operator">:</span> calc<span class="token punctuation">.</span><span class="token function">first</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">//4</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 此时 stack 打印的结果为</span>
|
||
<span class="token comment">//> calc: {first: ƒ}</span>
|
||
<span class="token comment">//> number: {res: 4}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<blockquote>
|
||
<p>从本质上看，define 函数的第二个参数 deps 数组，相当于 import 导入，并且如果第三个参数 callback 采用 <code>return { }</code>，也就相当于 export 导出</p>
|
||
</blockquote>
|
||
<h2 id="老生常谈的指针"><a href="#老生常谈的指针" class="headerlink" title="老生常谈的指针"></a>老生常谈的指针</h2><p>说到底，<code>stack</code>中 <code>a模块</code> export 是一个指针，<code>{a:value}</code>(内存地址)，所以，<code>b 模块</code>会改变<code>a.a</code>的值，这点和 <code>cmd</code>不同</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">module<span class="token punctuation">.</span><span class="token function">define</span><span class="token punctuation">(</span><span class="token string">"a"</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||
<span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
module<span class="token punctuation">.</span><span class="token function">define</span><span class="token punctuation">(</span><span class="token string">"b"</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">"a"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">a</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
a<span class="token punctuation">.</span>a <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
module<span class="token punctuation">.</span><span class="token function">define</span><span class="token punctuation">(</span><span class="token string">"c"</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">"a"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">a</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">.</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 2</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
|
||
<h1 id="缘起-Object-defineProperty"><a href="#缘起-Object-defineProperty" class="headerlink" title="缘起 Object.defineProperty()"></a>缘起 Object.defineProperty()</h1><p>给<code>目标对象</code>上定义一个新属性，或者修改<code>目标对象</code>属性，并且返回新对象</p>
|
||
<h1 id="上帝的钥匙-get-amp-set"><a href="#上帝的钥匙-get-amp-set" class="headerlink" title="上帝的钥匙 get & set"></a>上帝的钥匙 get & set</h1><p>属性的<code>getter</code>函数，如果没有 <code>getter</code>则尾 <code>undefined</code>。当访问该属性时，会调用此函数.</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
|
||
Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token string">"a"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
<span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token number">7</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token function">set</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">FAILED！改变 a 属性，新值为：</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>val<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">，但是被重写 set 劫持了</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">.</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
obj<span class="token punctuation">.</span>a <span class="token operator">=</span> <span class="token number">4</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<blockquote>
|
||
<p>上帝的钥匙被找到了</p>
|
||
</blockquote>
|
||
<p>劫持！劫持！还是 TMD 劫持！</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">let</span> tempValue <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||
|
||
Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token string">"a"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
<span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> tempValue<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token function">set</span><span class="token punctuation">(</span>newValue<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
tempValue <span class="token operator">=</span> newValue<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">.</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 0</span>
|
||
obj<span class="token punctuation">.</span>a <span class="token operator">=</span> <span class="token number">4</span><span class="token punctuation">;</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">.</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 4</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h1 id="封装-defineReactive-obj-prop-val"><a href="#封装-defineReactive-obj-prop-val" class="headerlink" title="封装 defineReactive(obj, prop, val)"></a>封装 defineReactive(obj, prop, val)</h1><blockquote>
|
||
<p>这里 defineReactive 第三个参数 val 替代了上一步中全局变量<code>tempValue</code>，对于 get()、set()来说，访问到了其他函数内部的变量，所以形成了闭包</p>
|
||
</blockquote>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">function</span> <span class="token function">defineReactive</span><span class="token punctuation">(</span><span class="token parameter">obj<span class="token punctuation">,</span> prop<span class="token punctuation">,</span> val</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> prop<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
<span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">劫持，你访问了</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>prop<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">属性</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">return</span> val<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token function">set</span><span class="token punctuation">(</span>newValue<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>val <span class="token operator">===</span> newValue<span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">劫持，你改变了</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>prop<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">属性</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
val <span class="token operator">=</span> newValue<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token function">defineReactive</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token string">"a"</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">.</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 劫持，你访问了a属性 4</span>
|
||
obj<span class="token punctuation">.</span>a <span class="token operator">=</span> <span class="token number">7</span><span class="token punctuation">;</span> <span class="token comment">// 劫持，你改变了a属性</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">.</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 劫持，你访问了a属性 7</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h1 id="递归侦测"><a href="#递归侦测" class="headerlink" title="递归侦测"></a>递归侦测</h1><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">c</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token function">defineReactive</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token string">"a"</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>
|
||
|
||
<blockquote>
|
||
<p>?? 如何自动让<code>obj</code>对象的全部属性都<code>reactive</code>呢？</p>
|
||
</blockquote>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
<span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
<span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
<span class="token literal-property property">c</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">d</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<p>定义个方法<code>observe</code>，递归 <code>obj</code> 的每一层的每个 <code>prop</code>，检测是否有<code>__ob__</code>，如果没有，<code>defineReactive</code>，并且挂一个<code>Observer</code>实例在这个<code>props</code>上，例如：</p>
|
||
<p><code>Observer对象</code></p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">class</span> <span class="token class-name">Observer</span> <span class="token punctuation">{</span>
|
||
<span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token function">def</span><span class="token punctuation">(</span>value<span class="token punctuation">,</span> <span class="token string">"__ob__"</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 不可枚举，不能给__ob__添加__ob__</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">walk</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token comment">// 遍历每一个 prop的 value</span>
|
||
<span class="token function">walk</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> prop <span class="token keyword">in</span> value<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token function">defineReactive</span><span class="token punctuation">(</span>value<span class="token punctuation">,</span> prop<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<p><code>defineReactive.js</code></p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">defineReactive</span><span class="token punctuation">(</span><span class="token parameter">obj<span class="token punctuation">,</span> prop<span class="token punctuation">,</span> val</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>arguments<span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">2</span><span class="token punctuation">)</span> val <span class="token operator">=</span> obj<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// 如果2个参数</span>
|
||
<span class="token keyword">let</span> childNode <span class="token operator">=</span> <span class="token function">observe</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> prop<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
<span class="token literal-property property">enumerable</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">configurable</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
<span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">你访问了</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>prop<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">属性</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">return</span> val<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token function">set</span><span class="token punctuation">(</span>newValue<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>val <span class="token operator">===</span> newValue<span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">你改变了</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>prop<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">属性</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
val <span class="token operator">=</span> newValue<span class="token punctuation">;</span>
|
||
childNode <span class="token operator">=</span> <span class="token function">observe</span><span class="token punctuation">(</span>newValue<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<p><code>observe.js</code></p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">/**
|
||
* 检测 obj 身上有没有 __ob__(Observer 实例)
|
||
* @param {*} value
|
||
* @returns
|
||
*/</span>
|
||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">observe</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> value <span class="token operator">!=</span> <span class="token string">"object"</span><span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">let</span> ob<span class="token punctuation">;</span>
|
||
<span class="token comment">//! 用__ob__是为了属性不重名，被覆盖</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> value<span class="token punctuation">.</span>__ob__ <span class="token operator">!=</span> <span class="token string">"undefined"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
ob <span class="token operator">=</span> value<span class="token punctuation">.</span>__ob__<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
|
||
ob <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Observer</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">return</span> ob<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
|
||
<h1 id="前端微应用-single-spa"><a href="#前端微应用-single-spa" class="headerlink" title="前端微应用 single-spa"></a>前端微应用 single-spa</h1><p>随着<code>Node</code>革新的这一波工程化潮流，前端项目复杂度指数级增加，某个项目，可能由<code>团队A</code>负责，但当后续迭代，需要渐进增强，加入新的模块，<code>团队A</code>不足以支撑业务，需要引入新的开发<code>团队B</code>，为了维持生产环境业务的统一性和用户体验，新的模块也需要在统一的入口下，例如：</p>
|
||
<p><img src="/data/img/single-spa-1.png" alt="single-spa-1"></p>
|
||
<p>传统的方案，肯定是<code>iframe</code>去做，但通常会遇到一些麻烦的事情，处理起来很不优雅，例如：</p>
|
||
<ul>
|
||
<li><p>显示区域受限制，比如子项目中显示弹窗蒙层时，蒙层只会覆盖 iframe 区域，无法覆盖整个页面，内容也无法真正居中。</p>
|
||
</li>
|
||
<li><p>页面浏览记录无法自动被记录，刷新页面后 iframe 又自动回到首页。</p>
|
||
</li>
|
||
<li><p>全局上下文完全隔离，变量不共享，页面间通信比较麻烦，比如子项目与主题框架、子项目之间通信等，只能采用 postMessage 方式。</p>
|
||
</li>
|
||
<li><p>速度较慢，每次进入子应用时都要重建整个上下文。</p>
|
||
</li>
|
||
</ul>
|
||
<p>单页面集成多个应用的架构诞生，例如阿里的<code>qiankun.js</code>，</p>
|
||
<blockquote>
|
||
<p>single-spa 够减少公司整体开发限制，团队 B 的技术选型完全可以不依赖团队 A</p>
|
||
</blockquote>
|
||
<p><code>single-spa</code> 实现微前端的整体流程</p>
|
||
<p><img src="/data/img/single-spa-2.png" alt="single-spa-2"></p>
|
||
<ul>
|
||
<li><p>资源模块加载器：用来加载子项目初始化资源。我们将子项目的入口 js 构建成 umd 格式，然后使用模块加载器远程加载，通常会使用 SystemJs（不是必须）通用模块加载器来进行加载。</p>
|
||
</li>
|
||
<li><p>子应用资源配置表：用来记录各个子应用的入口资源 url 信息，以便在切换不同子应用时使用模块加载器去远程加载。因为每次子应用更新后入口资源的 hash 通常会变化，所以需要服务端定时去更新该配置表，以便框架能及时加载子应用最新的资源。</p>
|
||
</li>
|
||
</ul>
|
||
<blockquote>
|
||
<p>注意：single-spa 本身是不支持子应用资源列表的，每个子应用只能将自己所有初始化资源打包到一个入口 js 中。如果子应用初始化资源有多个文件（可以通过 webpack-manifest-plugin 生成应用初始化资源清单），就需要按照上述方式来添加额外处理。</p>
|
||
</blockquote>
|
||
</article>
|
||
|
||
|
||
<link rel="stylesheet" href="/css/80d65618.css">
|
||
|
||
|
||
<div class="copyright">
|
||
<a target="_blank" href="https://mozzie.cn/2023/11/06/front-end/%E7%A0%81%E5%9C%BA%E6%82%9F%E9%81%93/">
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
|
||
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0"></path>
|
||
<path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0"></path>
|
||
<path d="M3 6v13"></path>
|
||
<path d="M12 6v13"></path>
|
||
<path d="M21 6v13"></path>
|
||
</g>
|
||
</svg>
|
||
<span>码场悟道</span>
|
||
</a>
|
||
<ul>
|
||
<li>
|
||
<span>Author</span>
|
||
<p> Mozzie</p>
|
||
</li>
|
||
<li>
|
||
<span>Published on</span>
|
||
<p>2023-11-06</p>
|
||
</li>
|
||
<li>
|
||
<span>License</span>
|
||
<p><a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a></p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
<script src="/js/31d6cfe0.js"></script>
|
||
|
||
|
||
<!-- 评论 -->
|
||
<div id="vcomments"></div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<div class="meta-container">
|
||
<div class="toc-wrapper content-dialog">
|
||
<p class="catalog">
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
|
||
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M4 6h16"></path>
|
||
<path d="M4 12h16"></path>
|
||
<path d="M4 18h12"></path>
|
||
</g>
|
||
</svg>
|
||
<span>Catalog</span>
|
||
</p>
|
||
<!-- 文章toc -->
|
||
<ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E"><span class="toc-number">1.</span> <span class="toc-text">模板引擎</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%8F%A4%E8%80%81%E6%95%B0%E6%8D%AE%E6%B8%B2%E6%9F%93-vm-%E7%9A%84%E6%96%B9%E5%BC%8F"><span class="toc-number">2.</span> <span class="toc-text">古老数据渲染 vm 的方式</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#mustache-%E5%8E%9F%E7%90%86"><span class="toc-number">3.</span> <span class="toc-text">mustache 原理</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#tokens-%E7%94%9F%E6%88%90%E7%AE%97%E6%B3%95"><span class="toc-number">3.1.</span> <span class="toc-text">tokens 生成算法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A0%88%E9%98%9F%E5%88%97%E7%AE%97%E6%B3%95"><span class="toc-number">3.2.</span> <span class="toc-text">栈队列算法</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%B8%B8%E7%94%A8%E5%B7%A5%E5%85%B7%E7%B1%BB"><span class="toc-number">4.</span> <span class="toc-text">常用工具类</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%80%92%E5%BD%92"><span class="toc-number">4.1.</span> <span class="toc-text">递归</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%87%AA%E5%A2%9Eid%E7%9F%AD%E7%A0%81"><span class="toc-number">4.2.</span> <span class="toc-text">自增id短码</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%89%8B%E5%8A%A8%E5%AE%9E%E7%8E%B0-eventBus"><span class="toc-number">4.3.</span> <span class="toc-text">手动实现 eventBus</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%88%A4%E6%96%AD%E5%AF%B9%E8%B1%A1%E6%98%AF%E5%90%A6%E6%9C%89%E6%9F%90%E4%B8%AA-key"><span class="toc-number">4.4.</span> <span class="toc-text">判断对象是否有某个 key</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B5%8F%E8%A7%88%E5%99%A8"><span class="toc-number">4.5.</span> <span class="toc-text">浏览器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%89%88%E6%9C%AC%E4%BF%A1%E6%81%AF"><span class="toc-number">4.6.</span> <span class="toc-text">版本信息</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%BC%E5%AE%B9%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A"><span class="toc-number">4.7.</span> <span class="toc-text">兼容事件绑定</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E5%AF%B9%E8%B1%A1"><span class="toc-number">4.8.</span> <span class="toc-text">数组对象</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#reduce"><span class="toc-number">4.9.</span> <span class="toc-text">reduce</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AF%B9%E8%B1%A1%E5%86%85%E9%83%A8%E6%A0%B9%E6%8D%AE-key-%E5%AF%B9-value-%E8%BF%9B%E8%A1%8C%E6%8E%92%E5%BA%8F-%E5%8F%96%E5%89%8D-3"><span class="toc-number">4.10.</span> <span class="toc-text">对象内部根据 key 对 value 进行排序,取前 3</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%9A%8F%E6%9C%BA%E5%AD%97%E7%AC%A6%E4%B8%B2"><span class="toc-number">4.11.</span> <span class="toc-text">随机字符串</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%B1%BB%E5%9E%8B%E6%A3%80%E6%B5%8B"><span class="toc-number">4.12.</span> <span class="toc-text">类型检测</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%80%92%E8%AE%A1%E6%97%B6"><span class="toc-number">4.13.</span> <span class="toc-text">倒计时</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%8C%83%E5%9B%B4%E9%9A%8F%E6%9C%BA%E6%95%B0"><span class="toc-number">4.14.</span> <span class="toc-text">范围随机数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%8E%B7%E5%8F%96%E5%BD%93%E5%89%8D%E6%9C%88%E7%9A%84%E5%A4%A9%E6%95%B0"><span class="toc-number">4.15.</span> <span class="toc-text">获取当前月的天数</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%AF%B9%E8%B1%A1%E5%B0%8F%E6%93%8D%E4%BD%9C"><span class="toc-number">5.</span> <span class="toc-text">对象小操作</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8E%BB%E8%99%9A%E5%81%87%E5%80%BC"><span class="toc-number">5.1.</span> <span class="toc-text">去虚假值</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A4%B4%E5%B0%BE%E6%8F%92%E5%85%A5"><span class="toc-number">5.2.</span> <span class="toc-text">头尾插入</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%88%A0%E9%99%A4%E5%B1%9E%E6%80%A7"><span class="toc-number">5.3.</span> <span class="toc-text">删除属性</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E7%94%9F%E4%BA%A7%E3%80%81%E5%8A%A0%E5%B7%A5%E3%80%81%E6%B6%88%E8%B4%B9%E5%88%86%E7%A6%BB"><span class="toc-number">6.</span> <span class="toc-text">生产、加工、消费分离</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%85%83%E6%95%B0%E6%8D%AE"><span class="toc-number">7.</span> <span class="toc-text">元数据</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E9%98%B2%E6%8A%96%E4%B8%8E%E8%8A%82%E6%B5%81"><span class="toc-number">8.</span> <span class="toc-text">防抖与节流</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#Debounce"><span class="toc-number">8.1.</span> <span class="toc-text">Debounce</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Throttle"><span class="toc-number">8.2.</span> <span class="toc-text">Throttle</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#this-%E6%8C%87%E5%90%91"><span class="toc-number">9.</span> <span class="toc-text">this 指向</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%A8%E5%B1%80%E7%8E%AF%E5%A2%83"><span class="toc-number">9.1.</span> <span class="toc-text">全局环境</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%87%BD%E6%95%B0%E4%B8%8A%E4%B8%8B%E6%96%87%E8%B0%83%E7%94%A8"><span class="toc-number">9.2.</span> <span class="toc-text">函数上下文调用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0"><span class="toc-number">9.3.</span> <span class="toc-text">箭头函数</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#call-apply-bind-%E4%B8%8E-es6"><span class="toc-number">10.</span> <span class="toc-text">call, apply, bind 与 es6</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#for-%E5%BE%AA%E7%8E%AF%E4%BC%98%E5%8C%96"><span class="toc-number">11.</span> <span class="toc-text">for 循环优化</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%95%B0%E7%BB%84"><span class="toc-number">12.</span> <span class="toc-text">数组</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%89%81%E5%B9%B3%E5%8C%96%E5%8E%BB%E9%87%8D%E5%8D%87%E5%BA%8F%E6%8E%92%E5%88%97"><span class="toc-number">12.1.</span> <span class="toc-text">扁平化去重升序排列</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%89%8D%E7%AB%AF%E9%A1%B5%E9%9D%A2%E5%9F%8B%E7%82%B9-1x1-gif"><span class="toc-number">13.</span> <span class="toc-text">前端页面埋点 - 1x1.gif</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%BA%8B%E4%BB%B6%E5%A7%94%E6%89%98"><span class="toc-number">14.</span> <span class="toc-text">事件委托</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0-%E5%8E%9F%E5%9E%8B%E6%A8%A1%E5%BC%8F"><span class="toc-number">15.</span> <span class="toc-text">构造函数 + 原型模式</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%89%A9%E4%BD%99%E5%8F%82%E6%95%B0%E2%80%A6args"><span class="toc-number">16.</span> <span class="toc-text">剩余参数…args</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E8%B7%A8%E9%A1%B5%E9%9D%A2%E9%80%9A%E4%BF%A1"><span class="toc-number">17.</span> <span class="toc-text">跨页面通信</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#iframe-%E8%B7%A8%E5%9F%9F%E9%80%9A%E4%BF%A1%E5%92%8C%E4%B8%8D%E8%B7%A8%E5%9F%9F%E9%80%9A%E4%BF%A1"><span class="toc-number">18.</span> <span class="toc-text">iframe 跨域通信和不跨域通信</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%8D%E8%B7%A8%E5%9F%9F"><span class="toc-number">18.1.</span> <span class="toc-text">不跨域</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%B7%A8%E5%9F%9F-postMessage"><span class="toc-number">18.2.</span> <span class="toc-text">跨域 postMessage</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%AF%B9%E8%B1%A1%E7%B1%BB%E5%9E%8B%E5%88%A4%E6%96%AD"><span class="toc-number">19.</span> <span class="toc-text">对象类型判断</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%95%B0%E7%BB%84-1"><span class="toc-number">19.1.</span> <span class="toc-text">数组</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#js-%E5%8D%95%E7%BA%BF%E7%A8%8B%EF%BC%8C%E5%A6%82%E4%BD%95%E5%BC%82%E6%AD%A5"><span class="toc-number">20.</span> <span class="toc-text">js 单线程，如何异步</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E7%A7%BB%E5%8A%A8%E7%AB%AF%E6%9C%80%E5%B0%8F%E8%A7%A6%E6%8E%A7%E5%8C%BA%E5%9F%9F"><span class="toc-number">21.</span> <span class="toc-text">移动端最小触控区域</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#js-%E7%B2%BE%E5%BA%A6%E9%97%AE%E9%A2%98"><span class="toc-number">22.</span> <span class="toc-text">js 精度问题</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%86%BB%E7%BB%93-Object-freeze"><span class="toc-number">23.</span> <span class="toc-text">冻结 Object. freeze()</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#Reflect"><span class="toc-number">24.</span> <span class="toc-text">Reflect</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#Reflect-get-target-propertyKey-value-receiver"><span class="toc-number">24.1.</span> <span class="toc-text">Reflect.get(target, propertyKey, value[receiver])</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Reflect-set-target-propertyKey-value-receiver"><span class="toc-number">24.2.</span> <span class="toc-text">Reflect.set(target, propertyKey, value[receiver])</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Reflect-has-target-propertyKey"><span class="toc-number">24.3.</span> <span class="toc-text">Reflect.has(target, propertyKey)</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#if-else-%E4%BC%98%E5%8C%96"><span class="toc-number">25.</span> <span class="toc-text">if else 优化</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A1%A8%E9%A9%B1%E5%8A%A8%E7%BC%96%E7%A8%8B"><span class="toc-number">25.1.</span> <span class="toc-text">表驱动编程</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%9F%AD%E8%B7%AF%E8%BF%90%E7%AE%97"><span class="toc-number">25.2.</span> <span class="toc-text">短路运算</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8%E6%9C%89%E6%84%8F%E4%B9%89%E4%B8%94%E6%98%93%E8%AF%BB%E7%9A%84%E5%8F%98%E9%87%8F%E5%90%8D"><span class="toc-number">26.</span> <span class="toc-text">使用有意义且易读的变量名</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8%E6%9C%89%E6%84%8F%E4%B9%89%E7%9A%84%E5%8F%98%E9%87%8F%E4%BB%A3%E6%9B%BF%E6%95%B0%E7%BB%84%E4%B8%8B%E6%A0%87"><span class="toc-number">27.</span> <span class="toc-text">使用有意义的变量代替数组下标</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%8F%98%E9%87%8F%E5%90%8D%E8%A6%81%E7%AE%80%E6%B4%81"><span class="toc-number">28.</span> <span class="toc-text">变量名要简洁</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%B6%88%E9%99%A4%E9%AD%94%E6%9C%AF%E5%AD%97%E7%AC%A6%E4%B8%B2"><span class="toc-number">29.</span> <span class="toc-text">消除魔术字符串</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8%E9%BB%98%E8%AE%A4%E5%8F%82%E6%95%B0%E6%9B%BF%E4%BB%A3%E7%9F%AD%E8%B7%AF%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-number">30.</span> <span class="toc-text">使用默认参数替代短路运算符</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0"><span class="toc-number">31.</span> <span class="toc-text">一个函数</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%87%BD%E6%95%B0%E5%8F%82%E6%95%B0%E4%B8%8D%E5%A4%9A%E4%BA%8E-2-%E4%B8%AA%EF%BC%8C%E5%A6%82%E6%9E%9C%E6%9C%89%E5%BE%88%E5%A4%9A%E5%8F%82%E6%95%B0%E5%B0%B1%E5%88%A9%E7%94%A8-object-%E4%BC%A0%E9%80%92%EF%BC%8C%E5%B9%B6%E4%BD%BF%E7%94%A8%E8%A7%A3%E6%9E%84"><span class="toc-number">32.</span> <span class="toc-text">函数参数不多于 2 个，如果有很多参数就利用 object 传递，并使用解构</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%87%BD%E6%95%B0%E5%90%8D%E5%BA%94%E8%AF%A5%E7%9B%B4%E6%8E%A5%E5%8F%8D%E6%98%A0%E5%87%BD%E6%95%B0%E7%9A%84%E4%BD%9C%E7%94%A8"><span class="toc-number">33.</span> <span class="toc-text">函数名应该直接反映函数的作用</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%B0%BD%E9%87%8F%E4%BD%BF%E7%94%A8%E7%BA%AF%E5%87%BD%E6%95%B0"><span class="toc-number">34.</span> <span class="toc-text">尽量使用纯函数</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%B8%8D%E8%A6%81%E8%BF%87%E5%BA%A6%E4%BC%98%E5%8C%96"><span class="toc-number">35.</span> <span class="toc-text">不要过度优化</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%85%B3%E4%BA%8E%E6%A8%A1%E5%9D%97%E5%8C%96"><span class="toc-number">36.</span> <span class="toc-text">关于模块化</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%97%A0%E6%A8%A1%E5%9D%97%E5%8C%96"><span class="toc-number">36.1.</span> <span class="toc-text">无模块化</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#CommonJS-%E8%A7%84%E8%8C%83-%E5%90%8C%E6%AD%A5"><span class="toc-number">36.2.</span> <span class="toc-text">CommonJS 规范(同步)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#AMD-%E8%A7%84%E8%8C%83-RequireJS"><span class="toc-number">36.3.</span> <span class="toc-text">AMD 规范(RequireJS)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#CMD-%E8%A7%84%E8%8C%83-SeaJS"><span class="toc-number">36.4.</span> <span class="toc-text">CMD 规范(SeaJS)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ES6-import-x2F-export"><span class="toc-number">36.5.</span> <span class="toc-text">ES6 import/export</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#AMD%E6%A8%A1%E5%9D%97%E5%8C%96%E5%AE%9E%E7%8E%B0"><span class="toc-number">37.</span> <span class="toc-text">AMD模块化实现</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#define-%E5%87%BD%E6%95%B0"><span class="toc-number">37.1.</span> <span class="toc-text">define 函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#deps-%E4%BE%9D%E8%B5%96-%E5%AF%BC%E5%85%A5"><span class="toc-number">37.2.</span> <span class="toc-text">deps 依赖(导入)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%80%81%E7%94%9F%E5%B8%B8%E8%B0%88%E7%9A%84%E6%8C%87%E9%92%88"><span class="toc-number">37.3.</span> <span class="toc-text">老生常谈的指针</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E7%BC%98%E8%B5%B7-Object-defineProperty"><span class="toc-number">38.</span> <span class="toc-text">缘起 Object.defineProperty()</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%B8%8A%E5%B8%9D%E7%9A%84%E9%92%A5%E5%8C%99-get-amp-set"><span class="toc-number">39.</span> <span class="toc-text">上帝的钥匙 get & set</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%B0%81%E8%A3%85-defineReactive-obj-prop-val"><span class="toc-number">40.</span> <span class="toc-text">封装 defineReactive(obj, prop, val)</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E9%80%92%E5%BD%92%E4%BE%A6%E6%B5%8B"><span class="toc-number">41.</span> <span class="toc-text">递归侦测</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%89%8D%E7%AB%AF%E5%BE%AE%E5%BA%94%E7%94%A8-single-spa"><span class="toc-number">42.</span> <span class="toc-text">前端微应用 single-spa</span></a></li></ol>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
window.katex = {
|
||
enable: "true",
|
||
jsCdn: "//cdn.jsdelivr.net/npm/katex@0.13.18/dist/katex.min.js",
|
||
cssCdn: "//cdn.jsdelivr.net/npm/katex@0.13.18/dist/katex.min.css"
|
||
}
|
||
window.mermaid = {
|
||
enable: "true",
|
||
cdn: "//cdn.jsdelivr.net/npm/mermaid@10.4.0/dist/mermaid.min.js",
|
||
}
|
||
window.valine = {
|
||
enable: "false",
|
||
appId: 'TisMit6uhflounFqAN3ZGjgq-MdYXbMMI',
|
||
appKey: 'CdjirjYdz07U5i62ElsJvXUh',
|
||
avatar: 'monsterid',
|
||
cdn: '//unpkg.com/valine@latest/dist/Valine.min.js',
|
||
serverURLs: '//tismit6u.api.lncldglobal.com'
|
||
};
|
||
</script>
|
||
|
||
|
||
<script src="/js/a02fa72b.js"></script>
|
||
|
||
</main>
|
||
</body>
|
||
<script>
|
||
window.i18n = {
|
||
"tip-collapse": "Collapse",
|
||
"tip-expand": "Expand",
|
||
"text-select": "select",
|
||
"text-move": "movement",
|
||
"text-esc": "close",
|
||
"tip-status-done": "Done",
|
||
"tip-status-doing": "In Progress",
|
||
"tip-status-todo": "Todo",
|
||
"tip-status-other": "Duplicate",
|
||
"tip-status-default": "Default",
|
||
"tip-roadmap-today": "Positioning to the today",
|
||
"text-search": "Search...",
|
||
"text-today": "Today",
|
||
// month
|
||
"January": "January",
|
||
"February": "February",
|
||
"March": "March",
|
||
"April": "April",
|
||
"May": "May",
|
||
"June": "June",
|
||
"July": "July",
|
||
"August": "August",
|
||
"September": "September",
|
||
"October": "October",
|
||
"November": "November",
|
||
"December": "December",
|
||
}
|
||
</script>
|
||
|
||
<script src="/js/58c91c4e.js"></script>
|
||
|
||
|
||
</html> |