CINXE.COM

<!DOCTYPE html><html lang="zh" data-theme-enabled="1"><head><script>window.currentUser = null;</script><script>window.shopCurrency = "EUR";</script><script>window.localCurrency = "CNY";</script><script>window.countryCode = "cn";</script><script>window.rateShopTo = {"CNY":7.834670422523061,"EUR":1,"USD":1.0784426856242513,"AMD":422.9305849580972};</script><title itemprop="name">忍者代码</title><link href="/pack/styles.100020a0bc7cf13be729.css" rel="stylesheet"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, minimum-scale=1.0"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="google" content="notranslate"><script>if (window.devicePixelRatio > 1) document.cookie = 'pixelRatio=' + window.devicePixelRatio + ';path=/;expires=Tue, 19 Jan 2038 03:14:07 GMT';</script><link href="//fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic" rel="stylesheet"><link rel="apple-touch-icon-precomposed" href="/img/favicon/apple-touch-icon-precomposed.png"><link rel="canonical" href="https://zh.javascript.info/ninja-code"><meta name="msapplication-TileColor" content="#222A2C"><meta name="msapplication-TileImage" content="/img/favicon/tileicon.png"><link rel="icon" href="/img/favicon/favicon.png"><meta itemprop="image" content="https://zh.javascript.info/img/site_preview_en_512x512.png"><meta property="og:title" content="忍者代码"><meta property="og:image" content="https://zh.javascript.info/img/site_preview_en_1200x630.png"><meta property="og:image:type" content="image/png"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><meta property="fb:admins" content="100001562528165"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="忍者代码"><meta name="twitter:site" content="@iliakan"><meta name="twitter:creator" content="@iliakan"><meta name="twitter:image" content="https://zh.javascript.info/img/site_preview_en_512x512.png"><meta name="google-adsense-account" content="ca-pub-6204518652652613"><link rel="prev" href="/comments"><link rel="next" href="/testing-mocha"><script data-collect-dnt="true" async src="https://scripts.simpleanalyticscdn.com/latest.js"></script><script>window.GA_ID = "UA-2056213-15";</script><script>window.YANDEX_METRIKA_ID = 65598091;</script><script>{function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-2LWB61WGYJ")}</script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-2LWB61WGYJ"></script><script>window.metrika={reachGoal:function(){}},window.yandex_metrika_callbacks=[function(){try{window.metrika=new Ya.Metrika({id:YANDEX_METRIKA_ID,webvisor:!0,clickmap:!0,params:{user:window.currentUser&&window.currentUser.id}}),metrika.trackLinks({delay:150}),window.addEventListener("error",function(r){window.metrika.reachGoal("JSERROR",{src:(r.filename||r.errorUrl)+": "+(r.lineno||r.errorLine),stack:r.stack||r.error&&r.error.stack,message:r.message})})}catch(r){}}];</script><script src="//mc.yandex.ru/metrika/watch.js" async></script><script>window.RECAPTCHA_ID = "6LfmLAEVAAAAAJMykMnf7aY8nkyTRmYi2ynx51R1";</script><script src="/pack/init.352adc9f96be3655bb0a.js"></script><script src="/pack/head.2409f777a10dd3da24b7.js" defer></script><meta property="og:title" content="忍者代码"><meta property="og:type" content="article"><script src="/pack/tutorial.ad3cd9b17d623797fa41.js" defer></script><script src="/pack/footer.67a36ba7fd7c9d83f0bb.js" defer></script></head><body class="no-icons"><script>window.fontTest();</script><div class="page-wrapper page-wrapper_sidebar_on"><div class="sitetoolbar sitetoolbar_tutorial"><script>window.langs = [{"code":"ar","name":"Arabic"},{"code":"az","name":"Azerbaijani"},{"code":"bg","name":"Bulgarian"},{"code":"bn","name":"Bengali"},{"code":"bs","name":"Bosnian"},{"code":"ca","name":"Catalan"},{"code":"cs","name":"Czech"},{"code":"da","name":"Danish"},{"code":"de","name":"German"},{"code":"el","name":"Greek"},{"code":"en","name":"English"},{"code":"es","name":"Spanish"},{"code":"fa","name":"Persian (Farsi)"},{"code":"fi","name":"Finnish"},{"code":"fr","name":"French"},{"code":"he","name":"Hebrew"},{"code":"hi","name":"Hindi"},{"code":"hr","name":"Croatian"},{"code":"hu","name":"Hungarian"},{"code":"hy","name":"Armenian"},{"code":"id","name":"Indonesian"},{"code":"it","name":"Italian"},{"code":"ja","name":"Japanese"},{"code":"ka","name":"Georgian"},{"code":"kk","name":"Kazakh"},{"code":"km","name":"Central Khmer"},{"code":"ko","name":"Korean"},{"code":"ku","name":"Kurdish"},{"code":"ky","name":"Kyrgyz"},{"code":"lt","name":"Lithuanian"},{"code":"me","name":"Montenegrin"},{"code":"ml","name":"Malayalam"},{"code":"ms","name":"Malay"},{"code":"my","name":"Burmese"},{"code":"nl","name":"Dutch"},{"code":"no","name":"Norvegian"},{"code":"pa","name":"Punjabi"},{"code":"pl","name":"Polish"},{"code":"pt","name":"Portuguese"},{"code":"ro","name":"Romanian"},{"code":"ru","name":"Russian"},{"code":"si","name":"Sinhala"},{"code":"sk","name":"Slovak"},{"code":"sl","name":"Slovenian"},{"code":"sq","name":"Albanian"},{"code":"sr","name":"Serbian"},{"code":"ta","name":"Tamil"},{"code":"te","name":"Telugu"},{"code":"test","name":"Test"},{"code":"th","name":"Thai"},{"code":"tk","name":"Turkmen"},{"code":"tr","name":"Turkish"},{"code":"ug","name":"Uyghur"},{"code":"uk","name":"Ukrainian"},{"code":"ur","name":"Urdu"},{"code":"uz","name":"Uzbek"},{"code":"v2","name":"v2"},{"code":"vi","name":"Vietnamese"},{"code":"zh-hant","name":"Chinese Traditional"},{"code":"zh","name":"Chinese"}];</script><script>window.lang = "zh";</script><div class="sitetoolbar__content"><div class="sitetoolbar__lang-switcher"><button class="sitetoolbar__dropdown-button" data-dropdown-toggler>ZH</button><div class="sitetoolbar__dropdown-wrap"><div class="sitetoolbar__dropdown-body"><div class="sitetoolbar__lang-switcher-body"><div class="supported-langs supported-langs_toolbar"><div class="supported-langs__container"><ul class="supported-langs__list" style="height:200px"><li class="supported-langs__item"><a class="supported-langs__link" href="https://ar.javascript.info/ninja-code"><span class="supported-langs__brief">AR</span><span class="supported-langs__title">عربي</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://javascript.info/ninja-code"><span class="supported-langs__brief">EN</span><span class="supported-langs__title">English</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://es.javascript.info/ninja-code"><span class="supported-langs__brief">ES</span><span class="supported-langs__title">Español</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://fa.javascript.info/ninja-code"><span class="supported-langs__brief">FA</span><span class="supported-langs__title">فارسی</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://fr.javascript.info/ninja-code"><span class="supported-langs__brief">FR</span><span class="supported-langs__title">Français</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://id.javascript.info/ninja-code"><span class="supported-langs__brief">ID</span><span class="supported-langs__title">Indonesia</span></a></li></ul><ul class="supported-langs__list" style="height:200px"><li class="supported-langs__item"><a class="supported-langs__link" href="https://it.javascript.info/ninja-code"><span class="supported-langs__brief">IT</span><span class="supported-langs__title">Italiano</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://ja.javascript.info/ninja-code"><span class="supported-langs__brief">JA</span><span class="supported-langs__title">日本語</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://ko.javascript.info/ninja-code"><span class="supported-langs__brief">KO</span><span class="supported-langs__title">한국어</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://learn.javascript.ru/ninja-code"><span class="supported-langs__brief">RU</span><span class="supported-langs__title">Русский</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://tr.javascript.info/ninja-code"><span class="supported-langs__brief">TR</span><span class="supported-langs__title">Türkçe</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://uk.javascript.info/ninja-code"><span class="supported-langs__brief">UK</span><span class="supported-langs__title">Українська</span></a></li></ul><ul class="supported-langs__list" style="height:20px"><li class="supported-langs__item supported-langs__item_current"><a class="supported-langs__link" href="https://zh.javascript.info/ninja-code"><span class="supported-langs__brief">ZH</span><span class="supported-langs__title">简体中文</span></a></li></ul></div><div class="supported-langs__text">我们希望将这个开源项目提供给全世界的人。请帮助我们将教程的内容 <a href="https://javascript.info/translate#help" rel="noopener noreferrer" target="_blank">翻译为你所掌握的语言</a> 对应的版本。</div></div></div></div></div></div><div class="sitetoolbar__logo-wrap"><a class="sitetoolbar__link sitetoolbar__link_logo" href="/"><img class="sitetoolbar__logo sitetoolbar__logo_normal" src="/img/sitetoolbar__logo_en.svg" width="200" alt="" role="presentation"/><img class="sitetoolbar__logo sitetoolbar__logo_normal sitetoolbar__logo_dark" src="/img/sitetoolbar__logo_en-white.svg" width="200" alt="" role="presentation"/><img class="sitetoolbar__logo sitetoolbar__logo_small" src="/img/sitetoolbar__logo_small_en.svg" width="70" alt="" role="presentation"/><img class="sitetoolbar__logo sitetoolbar__logo_small sitetoolbar__logo_dark" src="/img/sitetoolbar__logo_small_en-white.svg" width="70" alt="" role="presentation"/><script>Array.prototype.forEach.call(document.querySelectorAll("img.sitetoolbar__logo"),function(e){let t=document.createElement("object");t.type="image/svg+xml",t.className=e.className,t.style.cssText="left:0;top:0;position:absolute",t.onload=function(){t.onload=null,e.style.visibility="hidden"},t.data=e.src,e.parentNode.insertBefore(t,e)});</script></a></div><div class="sitetoolbar__nav-toggle-wrap"><button class="sitetoolbar__nav-toggle" type="button"></button></div><nav class="sitetoolbar__sections"><ul class="sitetoolbar__sections-list"></ul></nav><div class="sitetoolbar__right-button-wrap"><a class="sitetoolbar-right-button sitetoolbar-right-button_courses" href="/ebook"><span class="sitetoolbar-right-button__extra-text">购买</span>EPUB/PDF</a></div><div class="sitetoolbar__theme-switcher"><div class="theme-changer"><label class="theme-changer__label" for="theme-changer-input" data-tooltip="Change theme"><input class="theme-changer__input" type="checkbox" id="theme-changer-input" data-theme-changer="data-theme-changer"/><span class="theme-changer__icon theme-changer__icon_light-theme"></span><span class="theme-changer__icon theme-changer__icon_dark-theme"></span></label></div></div><div class="sitetoolbar__search-wrap"><div class="sitetoolbar__search-content"><button class="sitetoolbar__search-toggle" type="button"></button><form class="sitetoolbar__search" method="GET" action="/search"><div class="sitetoolbar__search-input"><div class="text-input"><input class="text-input__control" name="query" placeholder="在 Javascript.info 网站中搜索" required="required" type="text"/></div><button class="sitetoolbar__find" type="submit">搜索</button></div></form></div></div></div><div class="tablet-menu"><div class="tablet-menu__line"><div class="tablet-menu__content"><form class="tablet-menu-search" action="/search/"><input class="tablet-menu-search__input" type="search" name="query" placeholder="在教程中搜索" required="required"/><button class="tablet-menu-search__button" type="submit" name="type" value="articles">搜索</button></form></div></div><div class="tablet-menu__line"><div class="tablet-menu__content"><a class="map" href="/tutorial/map" data-action="tutorial-map"><span class="map__text">教程路线图</span></a></div></div><div class="tablet-menu__line"><div class="tablet-menu__content"><div class="theme-changer theme-changer_tablet-menu theme-changer_has-label"><label class="theme-changer__label" for="theme-changer-input-tablet" data-tooltip="Change theme"><input class="theme-changer__input" type="checkbox" id="theme-changer-input-tablet" data-theme-changer="data-theme-changer"/><span class="theme-changer__icon theme-changer__icon_light-theme"></span><span class="theme-changer__icon theme-changer__icon_dark-theme"></span><span class="theme-changer__label-text theme-changer__label-text_light-theme">Light theme</span><span class="theme-changer__label-text theme-changer__label-text_dark-theme">Dark theme</span></label></div></div></div><div class="tablet-menu__line"><div class="tablet-menu__content"><div class="share-icons"><span class="share-icons__title">分享</span><a class="share share_tw" href="https://twitter.com/share?url=https%3A%2F%2Fzh.javascript.info%2Fninja-code" rel="nofollow"></a><a class="share share_fb" href="https://www.facebook.com/sharer/sharer.php?s=100&p%5Burl%5D=https%3A%2F%2Fzh.javascript.info%2Fninja-code" rel="nofollow"></a></div></div></div><div class="tablet-menu__line"><div class="tablet-menu__content"><select class="tablet-menu__nav input-select input-select input-select_small" onchange="if(this.value) window.location.href=this.value"><option value="https://ar.javascript.info/ninja-code">عربي</option><option value="https://javascript.info/ninja-code">English</option><option value="https://es.javascript.info/ninja-code">Español</option><option value="https://fa.javascript.info/ninja-code">فارسی</option><option value="https://fr.javascript.info/ninja-code">Français</option><option value="https://id.javascript.info/ninja-code">Indonesia</option><option value="https://it.javascript.info/ninja-code">Italiano</option><option value="https://ja.javascript.info/ninja-code">日本語</option><option value="https://ko.javascript.info/ninja-code">한국어</option><option value="https://learn.javascript.ru/ninja-code">Русский</option><option value="https://tr.javascript.info/ninja-code">Türkçe</option><option value="https://uk.javascript.info/ninja-code">Українська</option><option value="https://zh.javascript.info/ninja-code" selected>简体中文</option></select></div></div></div><progress class="tutorial-progress" data-sticky value="26" max="93" data-tooltip="第 26/93 节"></progress></div><div class="page page_sidebar_on page_inner_padding"><script>if(localStorage.noSidebar){document.querySelector(".page").classList.remove("page_sidebar_on");let e=document.querySelector(".page-wrapper");e&&e.classList.remove("page-wrapper_sidebar_on")}setTimeout(function(){document.querySelector(".page").classList.add("page_sidebar-animation-on")});</script><div class="page__inner"><main class="main main_width-limit"><header class="main__header"><div class="main__header-inner"><div class="main__header-group"><ol class="breadcrumbs"><li class="breadcrumbs__item breadcrumbs__item_home"><a class="breadcrumbs__link" href="/"><span class="breadcrumbs__hidden-text">教程</span></a></li><li class="breadcrumbs__item" id="breadcrumb-1"><a class="breadcrumbs__link" href="/js"><span>JavaScript 编程语言</span></a></li><li class="breadcrumbs__item" id="breadcrumb-2"><a class="breadcrumbs__link" href="/code-quality"><span>代码质量</span></a></li><script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"教程","item":"https://zh.javascript.info/"},{"@type":"ListItem","position":2,"name":"JavaScript 编程语言","item":"https://zh.javascript.info/js"},{"@type":"ListItem","position":3,"name":"代码质量","item":"https://zh.javascript.info/code-quality"}]}</script></ol><div class="updated-at" data-tooltip="最后修改在 2020年10月16日"><div class="updated-at__content">2020年10月16日</div></div></div><h1 class="main__header-title">忍者代码</h1></div></header><div class="content"><article class="formatted" itemscope itemtype="http://schema.org/TechArticle"><meta itemprop="name" content="忍者代码"><div itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="email" content="iliakan@gmail.com"><meta itemprop="name" content="Ilya Kantor"></div><div itemprop="articleBody"><blockquote class="quote"><div class="quote__i"><div class="quote__text"><p>学而不思则罔，思而不学则殆。</p> </div></div><footer class="quote__footer"> <cite class="quote__author">孔子《论语》</cite> </footer></blockquote><p>过去的程序员忍者使用这些技巧，来使代码维护者的头脑更加敏锐。</p> <p>代码审查大师在测试任务中寻找它们。</p> <p>一些新入门的开发者有时候甚至比忍者程序员能够更好地使用它们。</p> <p>仔细阅读本文，找出你是谁 —— 一个忍者、一个新手、或者一个代码审查者？</p> <div class="important important_warn"> <div class="important__header"><span class="important__type">检测到讽刺意味</span></div> <div class="important__content"><p>许多人试图追随忍者的脚步。只有极少数成功了。</p> </div></div> <h2><a class="main__anchor" name="jian-jie-shi-zhi-hui-de-ling-hun" href="#jian-jie-shi-zhi-hui-de-ling-hun">简洁是智慧的灵魂</a></h2><p>把代码尽可能写得短。展示出你是多么的聪明啊。</p> <p>在编程中，多使用一些巧妙的编程语言特性。</p> <p>例如，看一下这个三元运算符 <code>'?'</code>：</p> <div id="qoedbxx5pl" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>// 从一个著名的 JavaScript 库中截取的代码 i = i ? i < 0 ? Math.max(0, len + i) : i : 0;</code></pre> </div> </div> </div><p>很酷，对吗？如果你这样写了，那些看到这一行代码并尝试去理解 <code>i</code> 的值是什么的开发者们，就会有一个“快活的”的时光了。然后会来找你寻求答案。</p> <p>告诉他短一点总是更好的。引导他进入忍者之路。</p> <h2><a class="main__anchor" name="yi-ge-zi-mu-de-bian-liang" href="#yi-ge-zi-mu-de-bian-liang">一个字母的变量</a></h2><blockquote class="quote"><div class="quote__i"><div class="quote__text"><p>道隐无名。夫唯道善贷且成。</p> </div></div><footer class="quote__footer"> <cite class="quote__author">老子（道德经）</cite> </footer></blockquote><p>另一个缩减代码量的方法是，到处使用单字母的变量名。例如 <code>a</code>、<code>b</code> 或 <code>c</code>。</p> <p>短变量就像森林中真正的忍者一样，一下就找不到了。没有人能够通过编辑器的“搜索”功能找到它。即使有人做到了，他也不能“破译”出变量名 <code>a</code> 或 <code>b</code> 到底是什么意思。</p> <p>……但是有一个例外情况。一个真正的忍者绝不会在 <code>"for"</code> 循环中使用 <code>i</code> 作为计数器。在任何地方都可以，但是这里不会用。你随便一找，就能找到很多不寻常的字母。例如 <code>x</code> 或 <code>y</code>。</p> <p>使用一个不寻常的变量多酷啊，尤其是在长达 1-2 页（如果可以的话，你可以写得更长）的循环体中使用的时候。如果某人要研究循环内部实现的时候，他就很难很快地找出变量 <code>x</code> 其实是循环计数器啦。</p> <h2><a class="main__anchor" name="shi-yong-suo-xie" href="#shi-yong-suo-xie">使用缩写</a></h2><p>如果团队规则中禁止使用一个字母和模糊的命名 — 那就缩短命名，使用缩写吧。</p> <p>像这样：</p> <ul> <li><code>list</code> → <code>lst</code></li> <li><code>userAgent</code> → <code>ua</code></li> <li><code>browser</code> → <code>brsr</code></li> <li>……等</li> </ul> <p>只有具有真正良好直觉的人，才能够理解这样的命名。尽可能缩短一切。只有真正有价值的人，才能够维护这种代码的开发。</p> <h2><a class="main__anchor" name="soarhigh-chou-xiang-hua" href="#soarhigh-chou-xiang-hua">Soar high，抽象化。</a></h2><blockquote class="quote"><div class="quote__i"><div class="quote__text"><p>大方无隅，<br> 大器晚成，<br> 大音希声，<br> 大象无形。</p> </div></div><footer class="quote__footer"> <cite class="quote__author">老子（道德经）</cite> </footer></blockquote><p>当选择一个名字时，尽可能尝试使用最抽象的词语。例如 <code>obj</code>、<code>data</code>、<code>value</code>、<code>item</code> 和 <code>elem</code> 等。</p> <ul> <li> <p><strong>一个变量的理想名称是 <code>data</code>。</strong> 在任何能用的地方都使用它。的确，每个变量都持有 <strong>数据（data）</strong>，对吧？</p> <p>……但是 <code>data</code> 已经用过了怎么办？可以尝试一下 <code>value</code>，它也很普遍。毕竟，一个变量总会有一个 <strong>值（value）</strong>，对吧？</p> </li> <li> <p><strong>根据变量的类型为变量命名：<code>str</code>、<code>num</code>……</strong></p> <p>尝试一下吧。新手可能会诧异 — 这些名字对于忍者来说真的有用吗？事实上，有用的！</p> <p>一方面，变量名仍然有着一些含义。它说明了变量内是什么：一个字符串、一个数字或是其他的东西。但是当一个局外人试图理解代码时，他会惊讶地发现实际上没有任何有效信息！最终就无法修改你精心思考过的代码。</p> <p>我们可以通过代码调试，很容易地看出值的类型。但是变量名的含义呢？它存了哪一个字符串或数字？</p> <p>如果思考的深度不够，是没有办法搞明白的。</p> </li> <li> <p><strong>……但是如果找不到更多这样的名字呢？</strong> 可以加一个数字：<code>data1, item2, elem5</code>……</p> </li> </ul> <h2><a class="main__anchor" name="zhu-yi-ce-shi" href="#zhu-yi-ce-shi">注意测试</a></h2><p>只有一个真正细心的程序员才能理解你的代码。但是怎么检验呢？</p> <p><strong>方式之一 —— 使用相似的变量名，像 <code>date</code> 和 <code>data</code>。</strong></p> <p>尽你所能地将它们混合在一起。</p> <p>想快速阅读这种代码是不可能的。并且如果有一个错别字时……额……我们卡在这儿好长时间了，到饭点了 (⊙v⊙)。</p> <h2><a class="main__anchor" name="zhi-neng-tong-yi-ci" href="#zhi-neng-tong-yi-ci">智能同义词</a></h2><blockquote class="quote"><div class="quote__i"><div class="quote__text"><p>道，可道，非常道。名，可名，非常名。</p> </div></div><footer class="quote__footer"> <cite class="quote__author">老子《道德经》</cite> </footer></blockquote><p>对 <strong>同一个</strong> 东西使用 <strong>类似</strong> 的命名，可以使生活更有趣，并且能够展现你的创造力。</p> <p>例如，函数前缀。如果一个函数的功能是在屏幕上展示一个消息 — 名称可以以 <code>display…</code> 开头，例如 <code>displayMessage</code>。如果另一个函数展示别的东西，比如一个用户名，名称可以以 <code>show…</code> 开始（例如 <code>showName</code>）。</p> <p>暗示这些函数之间有微妙的差异，实际上并没有。</p> <p>与团队中的其他忍者们达成一个协议：如果张三在他的代码中以 <code>display...</code> 来开始一个“显示”函数，那么李四可以用 <code>render..</code>，王二可以使用 <code>paint...</code>。你可以发现代码变得多么地有趣多样呀。</p> <p>……现在是帽子戏法！</p> <p>对于有非常重要的差异的两个函数 — 使用相同的前缀。</p> <p>例如，<code>printPage(page)</code> 函数会使用一个打印机（printer）。<code>printText(text)</code> 函数会将文字显示到屏幕上。让一个不熟悉的读者来思考一下：“名字为 <code>printMessage(message)</code> 的函数会将消息放到哪里呢？打印机还是屏幕上？”。为了让代码真正耀眼，<code>printMessage(message)</code> 应该将消息输出到新窗口中！</p> <h2><a class="main__anchor" name="zhong-yong-ming-zi" href="#zhong-yong-ming-zi">重用名字</a></h2><blockquote class="quote"><div class="quote__i"><div class="quote__text"><p>始制有名，<br> 名亦既有，<br> 夫亦将知止，<br> 知止可以不殆。</p> </div></div><footer class="quote__footer"> <cite class="quote__author">老子（道德经）</cite> </footer></blockquote><p>仅在绝对必要时才添加新变量。</p> <p>否则，重用已经存在的名字。直接把新值写进变量即可。</p> <p>在一个函数中，尝试仅使用作为参数传递的变量。</p> <p>这样就很难确定这个变量的值现在是什么了。也不知道它是从哪里来的。目的是提高阅读代码的人的直觉和记忆力。一个直觉较弱的人必须逐行分析代码，跟踪每个代码分支中的更改。</p> <p><strong>这个方法的一个进阶方案是，在循环或函数中偷偷地替换掉它的值。</strong></p> <p>例如：</p> <div id="or1focv70k" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>function ninjaFunction(elem) { // 基于变量 elem 进行工作的 20 行代码 elem = clone(elem); // 又 20 行代码，现在使用的是 clone 后的 elem 变量。 }</code></pre> </div> </div> </div><p>想要在后半部分中使用 <code>elem</code> 的程序员会感到很诧异……只有在调试期间，检查代码之后，他才会发现他正在使用克隆过的变量！</p> <p>经常看到这样的代码，即使对经验丰富的忍者来说也是致命的。</p> <h2><a class="main__anchor" name="xia-hua-xian-de-le-qu" href="#xia-hua-xian-de-le-qu">下划线的乐趣</a></h2><p>在变量名前加上下划线 <code>_</code> 和 <code>__</code>。例如 <code>_name</code> 和 <code>__value</code>。如果只有你知道它们的含义，那就非常棒了。或者，加这些下划线只是为了好玩儿，没有任何含义，那就更棒了！</p> <p>加下划线可谓是一箭双雕。首先，代码变得更长，可读性更低；并且，你的开发者小伙伴可能会花费很长时间，来弄清楚下划线是什么意思。</p> <p>聪明的忍者会在代码的一个地方使用下划线，然后在其他地方刻意避免使用它们。这会使代码变得更加脆弱，并提高了代码未来出现错误的可能性。</p> <h2><a class="main__anchor" name="zhan-shi-ni-de-ai" href="#zhan-shi-ni-de-ai">展示你的爱</a></h2><p>向大家展现一下你那丰富的情感！像 <code>superElement</code>、<code>megaFrame</code> 和 <code>niceItem</code> 这样的名字一定会启发读者。</p> <p>事实上，从一方面来说，看似写了一些东西：<code>super..</code>、<code>mega..</code>、<code>nice..</code>。但从另一方面来说 — 并没有提供任何细节。阅读代码的人可能需要耗费一到两个小时的带薪工作时间，冥思苦想来寻找一个隐藏的含义。</p> <h2><a class="main__anchor" name="chong-die-wai-bu-bian-liang" href="#chong-die-wai-bu-bian-liang">重叠外部变量</a></h2><blockquote class="quote"><div class="quote__i"><div class="quote__text"><p>处明者不见暗中一物，<br> 处暗者能见明中区事。</p> </div></div><footer class="quote__footer"> <cite class="quote__author">关尹子</cite> </footer></blockquote><p>对函数内部和外部的变量，使用相同的名称。很简单，不用费劲想新的名称。</p> <div id="eobgc54gaw" data-trusted="1" class="code-example" data-highlight="[{"start":3,"cols":[{"start":6,"end":10}]},{"start":0,"cols":[{"start":4,"end":8}]}]"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let user = authenticateUser(); function render() { let user = anotherValue(); ... ...许多行代码... ... ... // <-- 某个程序员想要在这里使用 user 变量…… ... }</code></pre> </div> </div> </div><p>在研究 <code>render</code> 内部代码的程序员可能不会注意到，有一个内部变量 <code>user</code> 屏蔽了外部的 <code>user</code> 变量。</p> <p>然后他会假设 <code>user</code> 仍然是外部的变量然后使用它，<code>authenticateUser()</code> 的结果……陷阱出来啦！你好呀，调试器……</p> <h2><a class="main__anchor" name="wu-chu-bu-zai-de-fu-zuo-yong" href="#wu-chu-bu-zai-de-fu-zuo-yong">无处不在的副作用！</a></h2><p>有些函数看起来它们不会改变任何东西。例如 <code>isReady()</code>，<code>checkPermission()</code>，<code>findTags()</code>……它们被假定用于执行计算、查找和返回数据，而不会更改任何它们自身之外的数据。这被称为“无副作用”。</p> <p><strong>一个非常惊喜的技巧就是，除了主要任务之外，给它们添加一个“有用的”行为。</strong></p> <p>当你的同事看到被命名为 <code>is..</code>、<code>check..</code> 或 <code>find...</code> 的函数改变了某些东西的时候，他脸上肯定是一脸懵逼的表情 — 这会扩大你的理性界限。</p> <p><strong>另一个惊喜的方式是，返回非标准的结果。</strong></p> <p>展示你原来的想法！让调用 <code>checkPermission</code> 时的返回值不是 <code>true/false</code>，而是一个包含检查结果的复杂对象。</p> <p>那些尝试写 <code>if (checkPermission(..))</code> 的开发者，会很疑惑为什么它不能工作。告诉他们：“去读文档吧”。然后给出这篇文章。</p> <h2><a class="main__anchor" name="qiang-da-de-han-shu" href="#qiang-da-de-han-shu">强大的函数！</a></h2><blockquote class="quote"><div class="quote__i"><div class="quote__text"><p>大道泛兮，<br> 其左可右。</p> </div></div><footer class="quote__footer"> <cite class="quote__author">老子（道德经）</cite> </footer></blockquote><p>不要让函数受限于名字中写的内容。拓宽一些。</p> <p>例如，函数 <code>validateEmail(email)</code> 可以（除了检查邮件的正确性之外）显示一个错误消息并要求重新输入邮件。</p> <p>额外的行为在函数名称中不应该很明显。一个真正的忍者会使它们在代码中也不明显。</p> <p><strong>将多个行为合并到一起，可以保护你的代码不被重用。</strong></p> <p>想象一下，另一个开发者只想检查邮箱而不想输出任何信息。你的函数 <code>validateEmail(email)</code> 对他而言就不合适啦。所以他不会找你问关于这些函数的任何事而打断你的思考。</p> <h2><a class="main__anchor" name="zong-jie" href="#zong-jie">总结</a></h2><p>上面的所有“建议”都是从真实的代码中提炼而来的……有时候，这些代码是由有经验的开发者写的。也许比你更有经验 ;）</p> <ul> <li>遵从其中的一丢丢，你的代码就会变得充满惊喜。</li> <li>遵从其中的一大部分，你的代码将真正成为你的代码，没有人会想改变它。</li> <li>遵从所有，你的代码将成为寻求启发的年轻开发者的宝贵案例。</li> </ul> </div></article></div><div class="page__nav-wrap"><a class="page__nav page__nav_prev" href="/comments" data-tooltip="注释"><span class="page__nav-text"><span class="page__nav-text-shortcut"></span></span><span class="page__nav-text-alternate">上一节</span></a><a class="page__nav page__nav_next" href="/testing-mocha" data-tooltip="使用 Mocha 进行自动化测试"><span class="page__nav-text"><span class="page__nav-text-shortcut"></span></span><span class="page__nav-text-alternate">下一节</span></a></div><div class="article-tablet-foot tablet-only"><div class="article-tablet-foot__layout"><div class="share-icons"><span class="share-icons__title">分享</span><a class="share share_tw" href="https://twitter.com/share?url=https%3A%2F%2Fzh.javascript.info%2Fninja-code" rel="nofollow"></a><a class="share share_fb" href="https://www.facebook.com/sharer/sharer.php?s=100&p%5Burl%5D=https%3A%2F%2Fzh.javascript.info%2Fninja-code" rel="nofollow"></a></div><div class="article-tablet-foot__map"><a class="map" href="/tutorial/map" data-action="tutorial-map"><span class="map__text">教程路线图</span></a></div></div></div><div class="comments formatted" id="comments"><div class="comments__header"><h2 class="comments__header-title"><a href="#comments" name="comments">评论</a></h2><div class="comments__read-before"><span class="comments__read-before-link">在评论之前先阅读本内容…</span><div class="comments__read-before-popup"><div class="comments__read-before-popup-i"><ul><li>如果你发现教程有错误，或者有其他需要修改和提升的地方 — 请 <a href="https://github.com/javascript-tutorial/zh.javascript.info/issues">提交一个 GitHub issue</a> 或 pull request，而不是在这评论。</li><li>如果你对教程的内容有不理解的地方 — 请详细说明。</li><li>使用 <code><code></code> 标签插入只有几个词的代码，插入多行代码可以使用 <code><pre></code> 标签，对于超过 10 行的代码，建议你使用沙箱（<a href='https://plnkr.co/edit/?p=preview'>plnkr</a>，<a href='https://jsbin.com'>JSBin</a>，<a href='http://codepen.io'>codepen</a>…）</li></ul></div></div></div></div><div id="disqus_thread"></div><script>var disqus_config = function() { if (!this.page) this.page = {}; Object.assign(this.page, {"url":"https:\/\/zh.javascript.info\/ninja-code","identifier":"\/ninja-code"}); };</script><script>var disqus_shortname = "zh-javascript-info";</script><script>var disqus_enabled = true;</script></div></script></main></div><div class="sidebar page__sidebar sidebar sidebar_sticky-footer"><button class="sidebar__toggle" data-sidebar-toggle></button><a class="map" href="/tutorial/map" data-action="tutorial-map" data-tooltip="教程路线图"></a><div class="sidebar__inner"><div class="sidebar__content"><div class="sidebar__section"><h4 class="sidebar__section-title">章节</h4><nav class="sidebar__navigation"><ul class="sidebar__navigation-links"><li class="sidebar__navigation-link"><a class="sidebar__link" href="/code-quality">代码质量</a></li></ul></nav></div><div class="sidebar__section"><h4 class="sidebar__section-title">课程导航</h4><nav class="sidebar__navigation"><ul class="sidebar__navigation-links"><li class="sidebar__navigation-link"><a class="sidebar__link" href="#jian-jie-shi-zhi-hui-de-ling-hun">简洁是智慧的灵魂</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#yi-ge-zi-mu-de-bian-liang">一个字母的变量</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#shi-yong-suo-xie">使用缩写</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#soarhigh-chou-xiang-hua">Soar high，抽象化。</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#zhu-yi-ce-shi">注意测试</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#zhi-neng-tong-yi-ci">智能同义词</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#zhong-yong-ming-zi">重用名字</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#xia-hua-xian-de-le-qu">下划线的乐趣</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#zhan-shi-ni-de-ai">展示你的爱</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#chong-die-wai-bu-bian-liang">重叠外部变量</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#wu-chu-bu-zai-de-fu-zuo-yong">无处不在的副作用！</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#qiang-da-de-han-shu">强大的函数！</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#zong-jie">总结</a></li></ul></nav></div><div class="sidebar__section"><nav class="sidebar__navigation"><ul class="sidebar__navigation-links"><li class="sidebar__navigation-link"><a class="sidebar__link" href="#comments">评论</a></li></ul></nav></div><div class="sidebar__section"><div class="sidebar__section-title">分享</div><a class="share share_tw sidebar__share" href="https://twitter.com/share?url=https%3A%2F%2Fzh.javascript.info%2Fninja-code" rel="nofollow"></a><a class="share share_fb sidebar__share" href="https://www.facebook.com/sharer/sharer.php?s=100&p[url]=https%3A%2F%2Fzh.javascript.info%2Fninja-code" rel="nofollow"></a></div><div class="sidebar__section"><a class="sidebar__link" href="https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/03-code-quality/04-ninja-code" rel="nofollow">在 GitHub 上编辑</a></div></div></div></div></div></div><div class="page-footer"><ul class="page-footer__list"><li class="page-footer__item page-footer__item_copy">© 2007—2025  Ilya Kantor</li><li class="page-footer__item page-footer__item_about"><a class="page-footer__link" href="/about">关于本项目</a></li><li class="page-footer__item page-footer__item_contact"><a class="page-footer__link" href="/about#contact-us">联系我们</a></li></ul></div></body></html>