r76/read.html · 约 2349 字符
1<!doctype html>
2<html lang="zh-CN">
3<head>
4<meta charset="utf-8">
5<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
6<title>笔记阅读</title>
7<link rel="stylesheet" href="style.css">
8</head>
9<body>
10<div class="app">
11 <header class="top">
12 <div class="top-l">夜读者 · 阿哲</div>
13 <div class="top-r">笔记阅读</div>
14 </header>
15 <main class="main">
16<div class="cover">📚</div>
17<div class="card">
18 <div class="row"><div class="nm" style="font-size:16px;font-weight:800">JavaScript 闭包与内存管理</div></div>
19 <div class="row" style="margin-top:10px"><div class="avatar">杰</div><div class="info" style="flex:1"><div class="nm" style="font-size:13px">阿杰 · 前端笔记</div><div class="muted">2026-07-12 · 阅读 5.4k</div></div>
20 <a class="btn sm" href="author.html">＋关注</a></div>
21</div>
22<div class="card">
23 <div class="sec-title"><span class="em">📖</span> 正文</div>
24 <div class="md">
25 <h2>什么是闭包</h2>
26 <p>闭包是函数与其词法环境的组合。函数<code>return</code>后，内部变量依然被引用而不被回收。</p>
27 <pre><code>function makeCounter(){
28 let n = 0;
29 return () => ++n;
30}</code></pre>
31 <h3>内存注意点</h3>
32 <ul><li>避免无意中持有大对象</li><li>事件监听及时解绑</li><li>用<code>WeakMap</code>替代强引用缓存</li></ul>
33 <h2>小结</h2>
34 <p>理解闭包即理解作用域链，是写出可维护前端的基石。</p>
35 </div>
36</div>
37<div class="row" style="gap:8px;margin:4px 2px 12px">
38 <button class="btn line flex" style="flex:1">👍 520</button>
39 <a class="btn line flex" style="flex:1;text-decoration:none;text-align:center;display:flex;align-items:center;justify-content:center" href="comment.html">💬 评论</a>
40 <button class="btn flex" style="flex:1">❤ 收藏</button>
41</div>
42</main>
43 <nav class="nav"><a class=" on" href="home.html"><span class="ic">🏠</span>首页</a><a class="" href="tags.html"><span class="ic">🏷️</span>标签</a><a class="" href="write.html"><span class="ic">✏️</span>编写</a><a class="" href="search.html"><span class="ic">🔍</span>搜索</a><a class="" href="me.html"><span class="ic">👤</span>我的</a></nav>
44</div>
45<script></script>
46</body>
47</html>