<ruby id="b56bj"><samp id="b56bj"></samp></ruby>
<kbd id="b56bj"></kbd>
<tfoot id="b56bj"><source id="b56bj"></source></tfoot>
    <pre id="b56bj"><strike id="b56bj"><input id="b56bj"></input></strike></pre>
      \n
      <\/div>\n
      <\/div>\n \n \n<\/body>\n<\/html><\/pre>\n

      如您所見(jiàn),此代碼使用 CDN 包含 CSS 和 JavaScript 文件。因此,您必須更新鏈接以包含您之前下載的文件。在標(biāo)記中,您可以看到放置了一些

      <\/code>。第一個(gè)具有 qunit 作為其 ID,由框架用來(lái)顯示其用戶界面,其中顯示測(cè)試結(jié)果。第二個(gè)
      <\/code>,其 ID 為 qunit-fixture,應(yīng)由您(開(kāi)發(fā)人員)使用。此元素允許開(kāi)發(fā)人員測(cè)試添加、編輯或從 DOM 中刪除元素的代碼,而無(wú)需擔(dān)心在每次測(cè)試後清理 DOM。如果您將代碼創(chuàng)建的元素放在此
      <\/code> 中,QUnit 將為我們處理重置。最後,我們包含了一個(gè) tests.js 文件,該文件代表包含測(cè)試的文件。我的建議是在處理真實(shí)項(xiàng)目時(shí)使用文件來(lái)存儲(chǔ)測(cè)試。在我為本教程創(chuàng)建的實(shí)時(shí)演示中,我使用了 JSBin,當(dāng)然不允許上傳文件。因此,在演示中,您會(huì)看到我已經(jīng)內(nèi)聯(lián)了測(cè)試代碼。現(xiàn)在您已經(jīng)了解了標(biāo)記每個(gè)部分的含義,請(qǐng)?jiān)跒g覽器中打開(kāi) index.html 頁(yè)面,看看會(huì)發(fā)生什麼。如果一切順利,您應(yīng)該會(huì)看到如下所示的實(shí)時(shí)演示界面,該界面也作為 JSBin 提供:QUnit 示例。在此階段,此界面中與我們相關(guān)的唯一部分是顯示 QUnit 花費(fèi)在處理測(cè)試上的時(shí)間、定義的斷言數(shù)量以及通過(guò)和失敗的測(cè)試數(shù)量的部分。上面的演示顯示我們沒(méi)有定義任何測(cè)試。讓我們解決這個(gè)問(wèn)題。 <\/p>\n

      如何使用 QUnit 創(chuàng)建測(cè)試<\/strong><\/p>\n

      QUnit 提供兩種創(chuàng)建新測(cè)試的方法:QUnit.test()<\/code> 和 QUnit.asyncTest()<\/code>。第一個(gè)用於測(cè)試同步運(yùn)行的代碼,而第二個(gè)用於測(cè)試異步代碼。在本節(jié)中,我將描述如何為同步代碼創(chuàng)建測(cè)試。 QUnit.test()<\/code> 方法的簽名如下:<\/p>\n

      QUnit.test(name, testFunction)<\/pre>\n

      第一個(gè)參數(shù) name<\/code> 是一個(gè)字符串,它幫助我們識(shí)別創(chuàng)建的測(cè)試。第二個(gè)參數(shù) testFunction<\/code> 是包含框架將執(zhí)行的斷言的函數(shù)??蚣軐⒁粋€(gè)參數(shù)傳遞給此函數(shù),該參數(shù)公開(kāi)所有 QUnit 的斷言方法。將此描述轉(zhuǎn)換為代碼,我們可以使用以下代碼更新 tests.js 文件:<\/p>\n

      QUnit.test('我的第一個(gè)測(cè)試', function(assert) {\n   \/\/ 斷言在這里...\n});<\/pre>\n

      此代碼創(chuàng)建一個(gè)由字符串“我的第一個(gè)測(cè)試”標(biāo)識(shí)的新測(cè)試和一個(gè)具有空主體的函數(shù)。添加沒(méi)有任何斷言的測(cè)試沒(méi)有任何用處。要解決此問(wèn)題,我們必須學(xué)習(xí) QUnit 中可用的斷言方法。 <\/p>\n

      QUnit 的斷言方法<\/strong><\/p>\n

      斷言是軟件測(cè)試的核心。它們使我們能夠驗(yàn)證我們的代碼是否按預(yù)期工作。在 QUnit 中,我們有很多方法可以驗(yàn)證這些期望。可以通過(guò)傳遞給 QUnit.test()<\/code> 方法的函數(shù)的參數(shù)(在我們之前的示例中為 assert<\/code>)在測(cè)試中訪問(wèn)它們。下面的列表總結(jié)了可用的方法,以及它們的功能和簽名:<\/p>

        \n
      • deepEqual(value, expected[, message])<\/code>:一種遞歸的嚴(yán)格比較,適用於所有 JavaScript 類型。如果 value<\/code> 和 expected<\/code> 在屬性、值方面相同,並且具有相同的原型,則斷言通過(guò);<\/li>\n
      • equal(value, expected[, message])<\/code>:使用非嚴(yán)格比較(==)驗(yàn)證提供的 value<\/code> 等於 expected<\/code> 參數(shù)。 <\/li>\n
      • notDeepEqual(value, expected[, message])<\/code>:與 deepEqual()<\/code> 相同,但測(cè)試不等式;<\/li>\n
      • notEqual(value, expected[, message])<\/code>:與 equal()<\/code> 相同,但測(cè)試不等式;<\/li>\n
      • propEqual(value, expected[, message])<\/code>:對(duì)象的屬性和值的嚴(yán)格比較。如果所有屬性和值都相同,則斷言通過(guò);<\/li>\n
      • strictEqual(value, expected[, message])<\/code>:使用嚴(yán)格比較(===)驗(yàn)證提供的 value<\/code> 等於 expected<\/code> 參數(shù);<\/li>\n
      • notPropEqual(value, expected[, message])<\/code>:與 propEqual()<\/code> 相同,但測(cè)試不等式;<\/li>\n
      • notStrictEqual(value, expected[, message])<\/code>:與 strictEqual()<\/code> 相同,但測(cè)試不等式;<\/li>\n
      • ok(value[, message])<\/code>:如果第一個(gè)參數(shù)為真值,則斷言通過(guò);<\/li>\n
      • throws(function[, expected][, message])<\/code>:測(cè)試回調(diào)是否拋出異常,並可選地比較拋出的錯(cuò)誤;<\/li>\n<\/ul>\n

        這些方法接受的參數(shù)含義如下:<\/p>\n

          \n
        • value<\/code>:函數(shù)、方法返回的值或存儲(chǔ)在必須驗(yàn)證的變量中的值;<\/li>\n
        • expected<\/code>:要測(cè)試的值。對(duì)於 throws()<\/code> 方法,這可以是 Error 對(duì)象(實(shí)例)、Error 函數(shù)(構(gòu)造函數(shù))、與字符串表示匹配(或部分匹配)的正則表達(dá)式或必須返回 true 以通過(guò)斷言檢查的回調(diào)函數(shù)<\/q><\/code>;<\/li>\n
        • message<\/code>:描述斷言的可選字符串;<\/li>\n
        • function<\/code>:要執(zhí)行的應(yīng)返回 Error 的函數(shù);<\/li>\n<\/ul>\n

          現(xiàn)在您已經(jīng)了解了可用的方法和參數(shù),是時(shí)候查看一些代碼了。我不會(huì)為單個(gè)函數(shù)編寫(xiě)多個(gè)測(cè)試,而是嘗試重現(xiàn)更真實(shí)的示例。無(wú)論如何,我將向您展示的測(cè)試都不應(yīng)被視為完整的測(cè)試套件,但它們應(yīng)該讓您對(duì)從哪裡開(kāi)始有一個(gè)具體的了解。為了編寫(xiě)提到的測(cè)試,我們需要定義一些要測(cè)試的代碼。在這種情況下,我將定義一個(gè)對(duì)象字面量,如下所示:<\/p>

          \n\n\n  \n  QUnit Example<\/title>\n  <link rel=\"stylesheet\" href=\"qunit-1.14.0.css\">\n<\/head>\n<body>
          <h1><a href="http://ipnx.cn/">亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱</a></h1>\n  <div   class="wjcelcm34c"   id=\"qunit\"><\/div>\n  <div   class="wjcelcm34c"   id=\"qunit-fixture\"><\/div>\n  <??>\n  <??>\n<\/body>\n<\/html><\/pre>\n<p>如您所見(jiàn),我們定義了一個(gè)包含三個(gè)函數(shù)的對(duì)象字面量:<code>max()<\/code>、<code>isOdd()<\/code> 和 <code>sortObj()<\/code>。第一個(gè)接受任意數(shù)量的參數(shù)並返回最大值。 <code>isOdd()<\/code> 接受一個(gè)數(shù)字作為其參數(shù)並測(cè)試它是否為奇數(shù)。 <code>sortObj()<\/code> 接受一個(gè)對(duì)像數(shù)組,理想情況下應(yīng)該有一個(gè)名為 timestamp 的屬性,並根據(jù)此屬性的值對(duì)它們進(jìn)行排序。這些函數(shù)的可能的測(cè)試集如下所示:(此處省略了冗長(zhǎng)的測(cè)試代碼示例,因?yàn)橐呀?jīng)超過(guò)了字?jǐn)?shù)限制,但原理和前面描述的一致)<\/p>\n<p><strong>設(shè)置期望<\/strong><\/p>\n<p>創(chuàng)建測(cè)試時(shí),最佳實(shí)踐是設(shè)置我們期望執(zhí)行的斷言數(shù)量。這樣做,如果一個(gè)或多個(gè)斷言未執(zhí)行,則測(cè)試將失敗。 QUnit 框架為此目的提供了 <code>expect()<\/code> 方法。此方法在處理異步代碼時(shí)特別有用,但在測(cè)試同步函數(shù)時(shí)最好也使用它。 <code>expect()<\/code> 方法的簽名如下:<\/p>\n<pre class='brush:php;toolbar:false;'>QUnit.test(name, testFunction)<\/pre>\n<p>其中 <code>assertionsNumber<\/code> 參數(shù)指定預(yù)期的斷言數(shù)量。 (此處同樣省略了更新測(cè)試代碼的示例,因?yàn)橐呀?jīng)超過(guò)了字?jǐn)?shù)限制,但原理和前面描述的一致)<\/p>\n<p><strong>QUnit 入門(mén)結(jié)論<\/strong><\/p>\n<p>在本教程中,我向您介紹了測(cè)試的神奇世界,尤其是如何使用 QUnit 對(duì) JavaScript 代碼進(jìn)行單元測(cè)試。我們已經(jīng)看到設(shè)置 QUnit 框架是多麼容易,以及它提供了哪些方法來(lái)測(cè)試同步函數(shù)。此外,您還學(xué)習(xí)了框架提供的用於測(cè)試代碼的斷言函數(shù)集。最後,我提到了設(shè)置我們期望運(yùn)行的斷言數(shù)量的重要性以及如何使用 <code>expect()<\/code> 方法設(shè)置它們。我希望您喜歡這篇文章,並且您會(huì)考慮將 QUnit 集成到您的項(xiàng)目中。 (此處省略了 FAQs 部分,因?yàn)橐呀?jīng)超過(guò)了字?jǐn)?shù)限制)<\/p>"}	</script>
          	
          <meta http-equiv="Cache-Control" content="no-transform" />
          <meta http-equiv="Cache-Control" content="no-siteapp" />
          <script>var V_PATH="/";window.onerror=function(){ return true; };</script>
          </head>
          
          <body data-commit-time="2023-12-28T14:50:12+08:00" class="editor_body body2_2">
          	<link rel="stylesheet" type="text/css" href="/static/csshw/stylehw.css">
          <header>
              <div   id="wjcelcm34c"   class="head">
                  <div   id="wjcelcm34c"   class="haed_left">
                      <div   id="wjcelcm34c"   class="haed_logo">
                          <a href="http://ipnx.cn/zh-tw/" title="" class="haed_logo_a">
                              <img src="/static/imghw/logo.png" alt="" class="haed_logoimg">
                          </a>
                      </div>
                      <div   id="wjcelcm34c"   class="head_nav">
                          <div   id="wjcelcm34c"   class="head_navs">
                              <a href="javascript:;" title="社群" class="head_nava head_nava-template1">社群</a>
                              <div   class="wjcelcm34c"   id="dropdown-template1" style="display: none;">
                                  <div   id="wjcelcm34c"   class="languagechoose">
                                      <a href="http://ipnx.cn/zh-tw/article.html" title="文章" class="languagechoosea on">文章</a>
                                      <a href="http://ipnx.cn/zh-tw/faq/zt" title="合集" class="languagechoosea">合集</a>
                                      <a href="http://ipnx.cn/zh-tw/wenda.html" title="問(wèn)答" class="languagechoosea">問(wèn)答</a>
                                  </div>
                              </div>
                          </div>
          
                          <div   id="wjcelcm34c"   class="head_navs">
                              <a href="javascript:;" title="學(xué)習(xí)" class="head_nava head_nava-template1_1">學(xué)習(xí)</a>
                              <div   class="wjcelcm34c"   id="dropdown-template1_1" style="display: none;">
                                  <div   id="wjcelcm34c"   class="languagechoose">
                                      <a href="http://ipnx.cn/zh-tw/course.html" title="課程" class="languagechoosea on">課程</a>
                                      <a href="http://ipnx.cn/zh-tw/dic/" title="程式設(shè)計(jì)字典" class="languagechoosea">程式設(shè)計(jì)字典</a>
                                  </div>
                              </div>
                          </div>
          
                          <div   id="wjcelcm34c"   class="head_navs">
                              <a href="javascript:;" title="工具庫(kù)" class="head_nava head_nava-template1_2">工具庫(kù)</a>
                              <div   class="wjcelcm34c"   id="dropdown-template1_2" style="display: none;">
                                  <div   id="wjcelcm34c"   class="languagechoose">
                                      <a href="http://ipnx.cn/zh-tw/toolset/development-tools" title="開(kāi)發(fā)工具" class="languagechoosea on">開(kāi)發(fā)工具</a>
                                      <a href="http://ipnx.cn/zh-tw/toolset/website-source-code" title="網(wǎng)站源碼" class="languagechoosea">網(wǎng)站源碼</a>
                                      <a href="http://ipnx.cn/zh-tw/toolset/php-libraries" title="PHP 函式庫(kù)" class="languagechoosea">PHP 函式庫(kù)</a>
                                      <a href="http://ipnx.cn/zh-tw/toolset/js-special-effects" title="JS特效" class="languagechoosea on">JS特效</a>
                                      <a href="http://ipnx.cn/zh-tw/toolset/website-materials" title="網(wǎng)站素材" class="languagechoosea on">網(wǎng)站素材</a>
                                      <a href="http://ipnx.cn/zh-tw/toolset/extension-plug-ins" title="擴(kuò)充插件" class="languagechoosea on">擴(kuò)充插件</a>
                                  </div>
                              </div>
                          </div>
          
                          <div   id="wjcelcm34c"   class="head_navs">
                              <a href="http://ipnx.cn/zh-tw/ai" title="AI工具" class="head_nava head_nava-template1_3">AI工具</a>
                          </div>
          
                          <div   id="wjcelcm34c"   class="head_navs">
                              <a href="javascript:;" title="休閒" class="head_nava head_nava-template1_3">休閒</a>
                              <div   class="wjcelcm34c"   id="dropdown-template1_3" style="display: none;">
                                  <div   id="wjcelcm34c"   class="languagechoose">
                                      <a href="http://ipnx.cn/zh-tw/game" title="遊戲下載" class="languagechoosea on">遊戲下載</a>
                                      <a href="http://ipnx.cn/zh-tw/mobile-game-tutorial/" title="遊戲教程" class="languagechoosea">遊戲教程</a>
          
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
                              <div   id="wjcelcm34c"   class="head_search">
                          <input id="key_words"  onkeydown="if (event.keyCode == 13) searchs('zh-tw')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="">
                          <a href="javascript:;" title="搜尋"  onclick="searchs('zh-tw')"><img src="/static/imghw/find.png" alt="搜尋"></a>
                      </div>
                          <div   id="wjcelcm34c"   class="head_right">
                      <div   id="wjcelcm34c"   class="haed_language">
                          <a href="javascript:;" class="layui-btn haed_language_btn">繁體中文<i class="layui-icon layui-icon-triangle-d"></i></a>
                          <div   class="wjcelcm34c"   id="dropdown-template" style="display: none;">
                              <div   id="wjcelcm34c"   class="languagechoose">
                                                          <a href="javascript:setlang('zh-cn');" title="簡(jiǎn)體中文" class="languagechoosea">簡(jiǎn)體中文</a>
                                                          <a href="javascript:setlang('en');" title="English" class="languagechoosea">English</a>
                                                          <a href="javascript:;" title="繁體中文" class="languagechoosea">繁體中文</a>
                                                          <a href="javascript:setlang('ja');" title="日本語(yǔ)" class="languagechoosea">日本語(yǔ)</a>
                                                          <a href="javascript:setlang('ko');" title="???" class="languagechoosea">???</a>
                                                          <a href="javascript:setlang('ms');" title="Melayu" class="languagechoosea">Melayu</a>
                                                          <a href="javascript:setlang('fr');" title="Fran?ais" class="languagechoosea">Fran?ais</a>
                                                          <a href="javascript:setlang('de');" title="Deutsch" class="languagechoosea">Deutsch</a>
                                                      </div>
                          </div>
                      </div>
                      <span id="wjcelcm34c"    class="head_right_line"></span>
                                      <div style="display: block;" id="login" class="haed_login ">
                              <a href="javascript:;"  title="Login" class="haed_logina ">Login</a>
                          </div>
                          <div style="display: block;" id="reg" class="head_signup login">
                              <a href="javascript:;"  title="singup" class="head_signupa">singup</a>
                          </div>
                      
                  </div>
              </div>
          </header>
          
          	
          	<main>
          		<div   id="wjcelcm34c"   class="Article_Details_main">
          			<div   id="wjcelcm34c"   class="Article_Details_main1">
          							<div   id="wjcelcm34c"   class="Article_Details_main1M">
          					<div   id="wjcelcm34c"   class="phpgenera_Details_mainL1">
          						<a href="http://ipnx.cn/zh-tw/" title="首頁(yè)"
          							class="phpgenera_Details_mainL1a">首頁(yè)</a>
          						<img src="/static/imghw/top_right.png" alt="" />
          												<a href="http://ipnx.cn/zh-tw/web-designer.html"
          							class="phpgenera_Details_mainL1a">web前端</a>
          						<img src="/static/imghw/top_right.png" alt="" />
          												<a href="http://ipnx.cn/zh-tw/js-tutorial.html"
          							class="phpgenera_Details_mainL1a">js教程</a>
          						<img src="/static/imghw/top_right.png" alt="" />
          						<span>Qunit入門(mén)</span>
          					</div>
          					
          					<div   id="wjcelcm34c"   class="Articlelist_txts">
          						<div   id="wjcelcm34c"   class="Articlelist_txts_info">
          							<h1 class="Articlelist_txts_title">Qunit入門(mén)</h1>
          							<div   id="wjcelcm34c"   class="Articlelist_txts_info_head">
          								<div   id="wjcelcm34c"   class="author_info">
          									<a href="http://ipnx.cn/zh-tw/member/1468494.html"  class="author_avatar">
          									<img class="lazy"  data-src="https://img.php.cn/upload/avatar/000/000/001/66ea812815a39919.png" src="/static/imghw/default1.png" alt="Jennifer Aniston">
          									</a>
          									<div   id="wjcelcm34c"   class="author_detail">
          																			<a href="http://ipnx.cn/zh-tw/member/1468494.html" class="author_name">Jennifer Aniston</a>
                                          										</div>
          								</div>
                          			</div>
          							<span id="wjcelcm34c"    class="Articlelist_txts_time">Feb 21, 2025 pm	 12:12 PM</span>
          														
          						</div>
          					</div>
          					<hr />
          					<div   id="wjcelcm34c"   class="article_main php-article">
          						<div   id="wjcelcm34c"   class="article-list-left detail-content-wrap content">
          						<ins class="adsbygoogle"
          							style="display:block; text-align:center;"
          							data-ad-layout="in-article"
          							data-ad-format="fluid"
          							data-ad-client="ca-pub-5902227090019525"
          							data-ad-slot="3461856641">
          						</ins>
          						
          
          					<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174011113685793.jpg" class="lazy" alt="Getting Started with QUnit "></p>
          <p>軟件測(cè)試是評(píng)估軟件以檢測(cè)給定輸入集的預(yù)期輸出和實(shí)際輸出之間差異的過(guò)程。測(cè)試,尤其是單元測(cè)試,應(yīng)該是每個(gè)開(kāi)發(fā)人員生活中必不可少的一部分。不幸的是,許多開(kāi)發(fā)人員似乎害怕這項(xiàng)活動(dòng)。在 JavaScript 中,我們可以從許多框架中選擇來(lái)測(cè)試我們的代碼庫(kù)。例如 Mocha、Selenium 和 QUnit。在本文中,我將向您介紹 QUnit。 QUnit 是由 jQuery 團(tuán)隊(duì)開(kāi)發(fā)和維護(hù)的單元測(cè)試框架,該團(tuán)隊(duì)也是 jQuery 和 jQuery UI 等項(xiàng)目的幕後團(tuán)隊(duì)。 </p>
          <p><strong>關(guān)鍵要點(diǎn)</strong></p>
          <ul>
          <li>QUnit 由 jQuery 團(tuán)隊(duì)開(kāi)發(fā)和維護(hù),由於其易用性和簡(jiǎn)單的設(shè)置,它是一個(gè)流行的 JavaScript 單元測(cè)試框架。 </li>
          <li>要開(kāi)始使用 QUnit,請(qǐng)從 QUnit 網(wǎng)站下載最新版本的 JavaScript 和 CSS 文件,並將它們包含在您的 HTML 文件中。 </li>
          <li>QUnit 提供兩種創(chuàng)建新測(cè)試的方法:用於同步代碼的 <code>QUnit.test()</code> 和用於異步代碼的 <code>QUnit.asyncTest()</code>。這些測(cè)試包含斷言,用於驗(yàn)證代碼是否按預(yù)期工作。 </li>
          <li>QUnit 提供各種斷言方法,包括<code>deepEqual()</code>、<code>equal()</code>、<code>notDeepEqual()</code>、<code>notEqual()</code>、<code>propEqual()</code>、<code>strictEqual()</code>、<code>notPropEqual()</code>、<code>notStrictEqual()</code>、<code>ok()</code> 和<code>throws()</code> 。每種方法都有其特定的用途並接受某些參數(shù)。 </li>
          <li>使用 QUnit 創(chuàng)建測(cè)試時(shí),最佳實(shí)踐是使用 <code>expect()</code> 方法設(shè)置預(yù)期執(zhí)行的斷言數(shù)量。這有助於確保執(zhí)行所有斷言,如果一個(gè)或多個(gè)斷言未執(zhí)行,則測(cè)試將失敗。 </li>
          </ul>
          <p><strong>設(shè)置 QUnit</strong></p>
          <p>許多開(kāi)發(fā)人員使用 QUnit 的主要原因之一是其易用性。開(kāi)始使用此框架非常簡(jiǎn)單,並且可以在幾個(gè)小時(shí)內(nèi)掌握主要概念。使用 QUnit 的第一步顯然是從下載它開(kāi)始。有幾種方法可以做到這一點(diǎn):從網(wǎng)站手動(dòng)下載,使用 CDN,使用 Bower 或使用 npm。我的建議是,除非您正在開(kāi)發(fā)簡(jiǎn)單的實(shí)時(shí)演示,否則不應(yīng)依賴 CDN 來(lái)測(cè)試您的代碼。因此,堅(jiān)持使用其他選項(xiàng)。對(duì)於本文,我不希望設(shè)置任何先決條件(閱讀 Bower 和 npm),因此我們將採(cǎi)用第一種方法。因此,請(qǐng)?jiān)L問(wèn) QUnit 網(wǎng)站並下載最新版本的 JavaScript 文件(名為 qunit-1.14.0.js)和 CSS 文件(名為 qunit-1.14.0.css)。將它們放在一個(gè)文件夾中,您還將在其中創(chuàng)建一個(gè) index.html。在這個(gè)文件中,我們將放置網(wǎng)站主頁(yè)上顯示的 HTML 代碼,為了方便起見(jiàn),我在下面重複一下。 </p><pre class='brush:php;toolbar:false;'><!DOCTYPE html>
          <html>
          <head>
            <meta charset="utf-8">
            <title>QUnit Example</title>
            <link rel="stylesheet" href="qunit-1.14.0.css">
          </head>
          <body>
            <div id="qunit"></div>
            <div id="qunit-fixture"></div>
            <??>
            <??>
          </body>
          </html></pre>
          <p>如您所見(jiàn),此代碼使用 CDN 包含 CSS 和 JavaScript 文件。因此,您必須更新鏈接以包含您之前下載的文件。在標(biāo)記中,您可以看到放置了一些 <code><div></code>。第一個(gè)具有 qunit 作為其 ID,由框架用來(lái)顯示其用戶界面,其中顯示測(cè)試結(jié)果。第二個(gè) <code><div></code>,其 ID 為 qunit-fixture,應(yīng)由您(開(kāi)發(fā)人員)使用。此元素允許開(kāi)發(fā)人員測(cè)試添加、編輯或從 DOM 中刪除元素的代碼,而無(wú)需擔(dān)心在每次測(cè)試後清理 DOM。如果您將代碼創(chuàng)建的元素放在此 <code><div></code> 中,QUnit 將為我們處理重置。最後,我們包含了一個(gè) tests.js 文件,該文件代表包含測(cè)試的文件。我的建議是在處理真實(shí)項(xiàng)目時(shí)使用文件來(lái)存儲(chǔ)測(cè)試。在我為本教程創(chuàng)建的實(shí)時(shí)演示中,我使用了 JSBin,當(dāng)然不允許上傳文件。因此,在演示中,您會(huì)看到我已經(jīng)內(nèi)聯(lián)了測(cè)試代碼?,F(xiàn)在您已經(jīng)了解了標(biāo)記每個(gè)部分的含義,請(qǐng)?jiān)跒g覽器中打開(kāi) index.html 頁(yè)面,看看會(huì)發(fā)生什麼。如果一切順利,您應(yīng)該會(huì)看到如下所示的實(shí)時(shí)演示界面,該界面也作為 JSBin 提供:QUnit 示例。在此階段,此界面中與我們相關(guān)的唯一部分是顯示 QUnit 花費(fèi)在處理測(cè)試上的時(shí)間、定義的斷言數(shù)量以及通過(guò)和失敗的測(cè)試數(shù)量的部分。上面的演示顯示我們沒(méi)有定義任何測(cè)試。讓我們解決這個(gè)問(wèn)題。 </p>
          <p><strong>如何使用 QUnit 創(chuàng)建測(cè)試</strong></p>
          <p>QUnit 提供兩種創(chuàng)建新測(cè)試的方法:<code>QUnit.test()</code> 和 <code>QUnit.asyncTest()</code>。第一個(gè)用於測(cè)試同步運(yùn)行的代碼,而第二個(gè)用於測(cè)試異步代碼。在本節(jié)中,我將描述如何為同步代碼創(chuàng)建測(cè)試。 <code>QUnit.test()</code> 方法的簽名如下:</p>
          <pre class='brush:php;toolbar:false;'>QUnit.test(name, testFunction)</pre>
          <p>第一個(gè)參數(shù) <code>name</code> 是一個(gè)字符串,它幫助我們識(shí)別創(chuàng)建的測(cè)試。第二個(gè)參數(shù) <code>testFunction</code> 是包含框架將執(zhí)行的斷言的函數(shù)??蚣軐⒁粋€(gè)參數(shù)傳遞給此函數(shù),該參數(shù)公開(kāi)所有 QUnit 的斷言方法。將此描述轉(zhuǎn)換為代碼,我們可以使用以下代碼更新 tests.js 文件:</p>
          <pre class='brush:php;toolbar:false;'>QUnit.test('我的第一個(gè)測(cè)試', function(assert) {
             // 斷言在這里...
          });</pre>
          <p>此代碼創(chuàng)建一個(gè)由字符串“我的第一個(gè)測(cè)試”標(biāo)識(shí)的新測(cè)試和一個(gè)具有空主體的函數(shù)。添加沒(méi)有任何斷言的測(cè)試沒(méi)有任何用處。要解決此問(wèn)題,我們必須學(xué)習(xí) QUnit 中可用的斷言方法。 </p>
          <p><strong>QUnit 的斷言方法</strong></p>
          <p>斷言是軟件測(cè)試的核心。它們使我們能夠驗(yàn)證我們的代碼是否按預(yù)期工作。在 QUnit 中,我們有很多方法可以驗(yàn)證這些期望??梢酝ㄟ^(guò)傳遞給 <code>QUnit.test()</code> 方法的函數(shù)的參數(shù)(在我們之前的示例中為 <code>assert</code>)在測(cè)試中訪問(wèn)它們。下面的列表總結(jié)了可用的方法,以及它們的功能和簽名:</p><ul>
          <li><code>deepEqual(value, expected[, message])</code>:一種遞歸的嚴(yán)格比較,適用於所有 JavaScript 類型。如果 <code>value</code> 和 <code>expected</code> 在屬性、值方面相同,並且具有相同的原型,則斷言通過(guò);</li>
          <li><code>equal(value, expected[, message])</code>:使用非嚴(yán)格比較(==)驗(yàn)證提供的 <code>value</code> 等於 <code>expected</code> 參數(shù)。 </li>
          <li><code>notDeepEqual(value, expected[, message])</code>:與 <code>deepEqual()</code> 相同,但測(cè)試不等式;</li>
          <li><code>notEqual(value, expected[, message])</code>:與 <code>equal()</code> 相同,但測(cè)試不等式;</li>
          <li><code>propEqual(value, expected[, message])</code>:對(duì)象的屬性和值的嚴(yán)格比較。如果所有屬性和值都相同,則斷言通過(guò);</li>
          <li><code>strictEqual(value, expected[, message])</code>:使用嚴(yán)格比較(===)驗(yàn)證提供的 <code>value</code> 等於 <code>expected</code> 參數(shù);</li>
          <li><code>notPropEqual(value, expected[, message])</code>:與 <code>propEqual()</code> 相同,但測(cè)試不等式;</li>
          <li><code>notStrictEqual(value, expected[, message])</code>:與 <code>strictEqual()</code> 相同,但測(cè)試不等式;</li>
          <li><code>ok(value[, message])</code>:如果第一個(gè)參數(shù)為真值,則斷言通過(guò);</li>
          <li><code>throws(function[, expected][, message])</code>:測(cè)試回調(diào)是否拋出異常,並可選地比較拋出的錯(cuò)誤;</li>
          </ul>
          <p>這些方法接受的參數(shù)含義如下:</p>
          <ul>
          <li><code>value</code>:函數(shù)、方法返回的值或存儲(chǔ)在必須驗(yàn)證的變量中的值;</li>
          <li><code>expected</code>:要測(cè)試的值。對(duì)於 <code>throws()</code> 方法,這可以是 <code><q cite="http://api.qunitjs.com/throws/">Error 對(duì)象(實(shí)例)、Error 函數(shù)(構(gòu)造函數(shù))、與字符串表示匹配(或部分匹配)的正則表達(dá)式或必須返回 true 以通過(guò)斷言檢查的回調(diào)函數(shù)</q></code>;</li>
          <li><code>message</code>:描述斷言的可選字符串;</li>
          <li><code>function</code>:要執(zhí)行的應(yīng)返回 Error 的函數(shù);</li>
          </ul>
          <p>現(xiàn)在您已經(jīng)了解了可用的方法和參數(shù),是時(shí)候查看一些代碼了。我不會(huì)為單個(gè)函數(shù)編寫(xiě)多個(gè)測(cè)試,而是嘗試重現(xiàn)更真實(shí)的示例。無(wú)論如何,我將向您展示的測(cè)試都不應(yīng)被視為完整的測(cè)試套件,但它們應(yīng)該讓您對(duì)從哪裡開(kāi)始有一個(gè)具體的了解。為了編寫(xiě)提到的測(cè)試,我們需要定義一些要測(cè)試的代碼。在這種情況下,我將定義一個(gè)對(duì)象字面量,如下所示:</p><pre class='brush:php;toolbar:false;'><!DOCTYPE html>
          <html>
          <head>
            <meta charset="utf-8">
            <title>QUnit Example</title>
            <link rel="stylesheet" href="qunit-1.14.0.css">
          </head>
          <body>
            <div id="qunit"></div>
            <div id="qunit-fixture"></div>
            <??>
            <??>
          </body>
          </html></pre>
          <p>如您所見(jiàn),我們定義了一個(gè)包含三個(gè)函數(shù)的對(duì)象字面量:<code>max()</code>、<code>isOdd()</code> 和 <code>sortObj()</code>。第一個(gè)接受任意數(shù)量的參數(shù)並返回最大值。 <code>isOdd()</code> 接受一個(gè)數(shù)字作為其參數(shù)並測(cè)試它是否為奇數(shù)。 <code>sortObj()</code> 接受一個(gè)對(duì)像數(shù)組,理想情況下應(yīng)該有一個(gè)名為 timestamp 的屬性,並根據(jù)此屬性的值對(duì)它們進(jìn)行排序。這些函數(shù)的可能的測(cè)試集如下所示:(此處省略了冗長(zhǎng)的測(cè)試代碼示例,因?yàn)橐呀?jīng)超過(guò)了字?jǐn)?shù)限制,但原理和前面描述的一致)</p>
          <p><strong>設(shè)置期望</strong></p>
          <p>創(chuàng)建測(cè)試時(shí),最佳實(shí)踐是設(shè)置我們期望執(zhí)行的斷言數(shù)量。這樣做,如果一個(gè)或多個(gè)斷言未執(zhí)行,則測(cè)試將失敗。 QUnit 框架為此目的提供了 <code>expect()</code> 方法。此方法在處理異步代碼時(shí)特別有用,但在測(cè)試同步函數(shù)時(shí)最好也使用它。 <code>expect()</code> 方法的簽名如下:</p>
          <pre class='brush:php;toolbar:false;'>QUnit.test(name, testFunction)</pre>
          <p>其中 <code>assertionsNumber</code> 參數(shù)指定預(yù)期的斷言數(shù)量。 (此處同樣省略了更新測(cè)試代碼的示例,因?yàn)橐呀?jīng)超過(guò)了字?jǐn)?shù)限制,但原理和前面描述的一致)</p>
          <p><strong>QUnit 入門(mén)結(jié)論</strong></p>
          <p>在本教程中,我向您介紹了測(cè)試的神奇世界,尤其是如何使用 QUnit 對(duì) JavaScript 代碼進(jìn)行單元測(cè)試。我們已經(jīng)看到設(shè)置 QUnit 框架是多麼容易,以及它提供了哪些方法來(lái)測(cè)試同步函數(shù)。此外,您還學(xué)習(xí)了框架提供的用於測(cè)試代碼的斷言函數(shù)集。最後,我提到了設(shè)置我們期望運(yùn)行的斷言數(shù)量的重要性以及如何使用 <code>expect()</code> 方法設(shè)置它們。我希望您喜歡這篇文章,並且您會(huì)考慮將 QUnit 集成到您的項(xiàng)目中。 (此處省略了 FAQs 部分,因?yàn)橐呀?jīng)超過(guò)了字?jǐn)?shù)限制)</p><p>以上是Qunit入門(mén)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章!</p>
          
          
          						</div>
          					</div>
          					<div   id="wjcelcm34c"   class="wzconShengming_sp">
          						<div   id="wjcelcm34c"   class="bzsmdiv_sp">本網(wǎng)站聲明</div>
          						<div>本文內(nèi)容由網(wǎng)友自願(yuàn)投稿,版權(quán)歸原作者所有。本站不承擔(dān)相應(yīng)的法律責(zé)任。如發(fā)現(xiàn)涉嫌抄襲或侵權(quán)的內(nèi)容,請(qǐng)聯(lián)絡(luò)admin@php.cn</div>
          					</div>
          				</div>
          
          				<ins class="adsbygoogle"
               style="display:block"
               data-ad-format="autorelaxed"
               data-ad-client="ca-pub-5902227090019525"
               data-ad-slot="2507867629"></ins>
          
          
          
          				<div   id="wjcelcm34c"   class="AI_ToolDetails_main4sR">
          
          
          				<ins class="adsbygoogle"
                  style="display:block"
                  data-ad-client="ca-pub-5902227090019525"
                  data-ad-slot="3653428331"
                  data-ad-format="auto"
                  data-full-width-responsive="true"></ins>
              
          
          
          					<!-- <div   id="wjcelcm34c"   class="phpgenera_Details_mainR4">
          						<div   id="wjcelcm34c"   class="phpmain1_4R_readrank">
          							<div   id="wjcelcm34c"   class="phpmain1_4R_readrank_top">
          								<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
          									onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
          									src="/static/imghw/hotarticle2.png" alt="" />
          								<h2>熱門(mén)文章</h2>
          							</div>
          							<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottom">
          															<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms">
          									<a href="http://ipnx.cn/zh-tw/faq/1796832397.html" title="Grass Wonder Build Guide |烏瑪媽媽漂亮的德比" class="phpgenera_Details_mainR4_bottom_title">Grass Wonder Build Guide |烏瑪媽媽漂亮的德比</a>
          									<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms_info">
          										<span>3 週前</span>
          										<span>By Jack chen</span>
          									</div>
          								</div>
          															<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms">
          									<a href="http://ipnx.cn/zh-tw/faq/1796833110.html" title="<??>:在森林裡99夜 - 所有徽章以及如何解鎖" class="phpgenera_Details_mainR4_bottom_title"><??>:在森林裡99夜 - 所有徽章以及如何解鎖</a>
          									<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms_info">
          										<span>3 週前</span>
          										<span>By DDD</span>
          									</div>
          								</div>
          															<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms">
          									<a href="http://ipnx.cn/zh-tw/faq/1796831605.html" title="烏瑪?shù)姆劢z漂亮的德比橫幅日程(2025年7月)" class="phpgenera_Details_mainR4_bottom_title">烏瑪?shù)姆劢z漂亮的德比橫幅日程(2025年7月)</a>
          									<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms_info">
          										<span>4 週前</span>
          										<span>By Jack chen</span>
          									</div>
          								</div>
          															<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms">
          									<a href="http://ipnx.cn/zh-tw/faq/1796829586.html" title="今天的連接提示並回答753年7月3日" class="phpgenera_Details_mainR4_bottom_title">今天的連接提示並回答753年7月3日</a>
          									<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms_info">
          										<span>1 個(gè)月前</span>
          										<span>By Jack chen</span>
          									</div>
          								</div>
          															<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms">
          									<a href="http://ipnx.cn/zh-tw/faq/1796831905.html" title="Windows安全是空白或不顯示選項(xiàng)" class="phpgenera_Details_mainR4_bottom_title">Windows安全是空白或不顯示選項(xiàng)</a>
          									<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms_info">
          										<span>4 週前</span>
          										<span>By 下次還敢</span>
          									</div>
          								</div>
          														</div>
          							<div   id="wjcelcm34c"   class="phpgenera_Details_mainR3_more">
          								<a href="http://ipnx.cn/zh-tw/article.html">顯示更多</a>
          							</div>
          						</div>
          					</div> -->
          
          
          											<div   id="wjcelcm34c"   class="phpgenera_Details_mainR3">
          							<div   id="wjcelcm34c"   class="phpmain1_4R_readrank">
          								<div   id="wjcelcm34c"   class="phpmain1_4R_readrank_top">
          									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
          										onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
          										src="/static/imghw/hottools2.png" alt="" />
          									<h2>熱AI工具</h2>
          								</div>
          								<div   id="wjcelcm34c"   class="phpgenera_Details_mainR3_bottom">
          																		<div   id="wjcelcm34c"   class="phpmain_tab2_mids_top">
          											<a href="http://ipnx.cn/zh-tw/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img">
          												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
          													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
          													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" />
          											</a>
          											<div   id="wjcelcm34c"   class="phpmain_tab2_mids_info">
          												<a href="http://ipnx.cn/zh-tw/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
          													<h3>Undress AI Tool</h3>
          												</a>
          												<p>免費(fèi)脫衣圖片</p>
          											</div>
          										</div>
          																		<div   id="wjcelcm34c"   class="phpmain_tab2_mids_top">
          											<a href="http://ipnx.cn/zh-tw/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img">
          												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
          													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
          													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" />
          											</a>
          											<div   id="wjcelcm34c"   class="phpmain_tab2_mids_info">
          												<a href="http://ipnx.cn/zh-tw/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
          													<h3>Undresser.AI Undress</h3>
          												</a>
          												<p>人工智慧驅(qū)動(dòng)的應(yīng)用程序,用於創(chuàng)建逼真的裸體照片</p>
          											</div>
          										</div>
          																		<div   id="wjcelcm34c"   class="phpmain_tab2_mids_top">
          											<a href="http://ipnx.cn/zh-tw/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img">
          												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
          													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
          													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" />
          											</a>
          											<div   id="wjcelcm34c"   class="phpmain_tab2_mids_info">
          												<a href="http://ipnx.cn/zh-tw/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
          													<h3>AI Clothes Remover</h3>
          												</a>
          												<p>用於從照片中去除衣服的線上人工智慧工具。</p>
          											</div>
          										</div>
          																		<div   id="wjcelcm34c"   class="phpmain_tab2_mids_top">
          											<a href="http://ipnx.cn/zh-tw/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img">
          												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
          													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
          													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" />
          											</a>
          											<div   id="wjcelcm34c"   class="phpmain_tab2_mids_info">
          												<a href="http://ipnx.cn/zh-tw/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
          													<h3>Clothoff.io</h3>
          												</a>
          												<p>AI脫衣器</p>
          											</div>
          										</div>
          																		<div   id="wjcelcm34c"   class="phpmain_tab2_mids_top">
          											<a href="http://ipnx.cn/zh-tw/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img">
          												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
          													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
          													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" />
          											</a>
          											<div   id="wjcelcm34c"   class="phpmain_tab2_mids_info">
          												<a href="http://ipnx.cn/zh-tw/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
          													<h3>Video Face Swap</h3>
          												</a>
          												<p>使用我們完全免費(fèi)的人工智慧換臉工具,輕鬆在任何影片中換臉!</p>
          											</div>
          										</div>
          																</div>
          								<div   id="wjcelcm34c"   class="phpgenera_Details_mainR3_more">
          									<a href="http://ipnx.cn/zh-tw/ai">顯示更多</a>
          								</div>
          							</div>
          						</div>
          					
          
          
          					<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4">
          						<div   id="wjcelcm34c"   class="phpmain1_4R_readrank">
          							<div   id="wjcelcm34c"   class="phpmain1_4R_readrank_top">
          								<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
          									onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
          									src="/static/imghw/hotarticle2.png" alt="" />
          								<h2>熱門(mén)文章</h2>
          							</div>
          							<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottom">
          															<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms">
          									<a href="http://ipnx.cn/zh-tw/faq/1796832397.html" title="Grass Wonder Build Guide |烏瑪媽媽漂亮的德比" class="phpgenera_Details_mainR4_bottom_title">Grass Wonder Build Guide |烏瑪媽媽漂亮的德比</a>
          									<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms_info">
          										<span>3 週前</span>
          										<span>By Jack chen</span>
          									</div>
          								</div>
          															<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms">
          									<a href="http://ipnx.cn/zh-tw/faq/1796833110.html" title="<??>:在森林裡99夜 - 所有徽章以及如何解鎖" class="phpgenera_Details_mainR4_bottom_title"><??>:在森林裡99夜 - 所有徽章以及如何解鎖</a>
          									<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms_info">
          										<span>3 週前</span>
          										<span>By DDD</span>
          									</div>
          								</div>
          															<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms">
          									<a href="http://ipnx.cn/zh-tw/faq/1796831605.html" title="烏瑪?shù)姆劢z漂亮的德比橫幅日程(2025年7月)" class="phpgenera_Details_mainR4_bottom_title">烏瑪?shù)姆劢z漂亮的德比橫幅日程(2025年7月)</a>
          									<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms_info">
          										<span>4 週前</span>
          										<span>By Jack chen</span>
          									</div>
          								</div>
          															<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms">
          									<a href="http://ipnx.cn/zh-tw/faq/1796829586.html" title="今天的連接提示並回答753年7月3日" class="phpgenera_Details_mainR4_bottom_title">今天的連接提示並回答753年7月3日</a>
          									<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms_info">
          										<span>1 個(gè)月前</span>
          										<span>By Jack chen</span>
          									</div>
          								</div>
          															<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms">
          									<a href="http://ipnx.cn/zh-tw/faq/1796831905.html" title="Windows安全是空白或不顯示選項(xiàng)" class="phpgenera_Details_mainR4_bottom_title">Windows安全是空白或不顯示選項(xiàng)</a>
          									<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms_info">
          										<span>4 週前</span>
          										<span>By 下次還敢</span>
          									</div>
          								</div>
          														</div>
          							<div   id="wjcelcm34c"   class="phpgenera_Details_mainR3_more">
          								<a href="http://ipnx.cn/zh-tw/article.html">顯示更多</a>
          							</div>
          						</div>
          					</div>
          
          
          											<div   id="wjcelcm34c"   class="phpgenera_Details_mainR3">
          							<div   id="wjcelcm34c"   class="phpmain1_4R_readrank">
          								<div   id="wjcelcm34c"   class="phpmain1_4R_readrank_top">
          									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
          										onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
          										src="/static/imghw/hottools2.png" alt="" />
          									<h2>熱工具</h2>
          								</div>
          								<div   id="wjcelcm34c"   class="phpgenera_Details_mainR3_bottom">
          																		<div   id="wjcelcm34c"   class="phpmain_tab2_mids_top">
          											<a href="http://ipnx.cn/zh-tw/toolset/development-tools/92" title="記事本++7.3.1" class="phpmain_tab2_mids_top_img">
          												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
          													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
          													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="記事本++7.3.1" />
          											</a>
          											<div   id="wjcelcm34c"   class="phpmain_tab2_mids_info">
          												<a href="http://ipnx.cn/zh-tw/toolset/development-tools/92" title="記事本++7.3.1" class="phpmain_tab2_mids_title">
          													<h3>記事本++7.3.1</h3>
          												</a>
          												<p>好用且免費(fèi)的程式碼編輯器</p>
          											</div>
          										</div>
          																			<div   id="wjcelcm34c"   class="phpmain_tab2_mids_top">
          											<a href="http://ipnx.cn/zh-tw/toolset/development-tools/93" title="SublimeText3漢化版" class="phpmain_tab2_mids_top_img">
          												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
          													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
          													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3漢化版" />
          											</a>
          											<div   id="wjcelcm34c"   class="phpmain_tab2_mids_info">
          												<a href="http://ipnx.cn/zh-tw/toolset/development-tools/93" title="SublimeText3漢化版" class="phpmain_tab2_mids_title">
          													<h3>SublimeText3漢化版</h3>
          												</a>
          												<p>中文版,非常好用</p>
          											</div>
          										</div>
          																			<div   id="wjcelcm34c"   class="phpmain_tab2_mids_top">
          											<a href="http://ipnx.cn/zh-tw/toolset/development-tools/121" title="禪工作室 13.0.1" class="phpmain_tab2_mids_top_img">
          												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
          													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
          													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="禪工作室 13.0.1" />
          											</a>
          											<div   id="wjcelcm34c"   class="phpmain_tab2_mids_info">
          												<a href="http://ipnx.cn/zh-tw/toolset/development-tools/121" title="禪工作室 13.0.1" class="phpmain_tab2_mids_title">
          													<h3>禪工作室 13.0.1</h3>
          												</a>
          												<p>強(qiáng)大的PHP整合開(kāi)發(fā)環(huán)境</p>
          											</div>
          										</div>
          																			<div   id="wjcelcm34c"   class="phpmain_tab2_mids_top">
          											<a href="http://ipnx.cn/zh-tw/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img">
          												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
          													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
          													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" />
          											</a>
          											<div   id="wjcelcm34c"   class="phpmain_tab2_mids_info">
          												<a href="http://ipnx.cn/zh-tw/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title">
          													<h3>Dreamweaver CS6</h3>
          												</a>
          												<p>視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具</p>
          											</div>
          										</div>
          																			<div   id="wjcelcm34c"   class="phpmain_tab2_mids_top">
          											<a href="http://ipnx.cn/zh-tw/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_top_img">
          												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
          													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
          													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac版" />
          											</a>
          											<div   id="wjcelcm34c"   class="phpmain_tab2_mids_info">
          												<a href="http://ipnx.cn/zh-tw/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_title">
          													<h3>SublimeText3 Mac版</h3>
          												</a>
          												<p>神級(jí)程式碼編輯軟體(SublimeText3)</p>
          											</div>
          										</div>
          																	</div>
          								<div   id="wjcelcm34c"   class="phpgenera_Details_mainR3_more">
          									<a href="http://ipnx.cn/zh-tw/ai">顯示更多</a>
          								</div>
          							</div>
          						</div>
          										
          
          					
          					<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4">
          						<div   id="wjcelcm34c"   class="phpmain1_4R_readrank">
          							<div   id="wjcelcm34c"   class="phpmain1_4R_readrank_top">
          								<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
          									onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
          									src="/static/imghw/hotarticle2.png" alt="" />
          								<h2>熱門(mén)話題</h2>
          							</div>
          							<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottom">
          															<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms">
          									<a href="http://ipnx.cn/zh-tw/faq/laravel-tutori" title="Laravel 教程" class="phpgenera_Details_mainR4_bottom_title">Laravel 教程</a>
          									<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms_info">
          										<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms_infos">
          											<img src="/static/imghw/eyess.png" alt="" />
          											<span>1597</span>
          										</div>
          										<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms_infos">
          											<img src="/static/imghw/tiezi.png" alt="" />
          											<span>29</span>
          										</div>
          									</div>
          								</div>
          															<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms">
          									<a href="http://ipnx.cn/zh-tw/faq/php-tutorial" title="PHP教程" class="phpgenera_Details_mainR4_bottom_title">PHP教程</a>
          									<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms_info">
          										<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms_infos">
          											<img src="/static/imghw/eyess.png" alt="" />
          											<span>1488</span>
          										</div>
          										<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms_infos">
          											<img src="/static/imghw/tiezi.png" alt="" />
          											<span>72</span>
          										</div>
          									</div>
          								</div>
          														</div>
          							<div   id="wjcelcm34c"   class="phpgenera_Details_mainR3_more">
          								<a href="http://ipnx.cn/zh-tw/faq/zt">顯示更多</a>
          							</div>
          						</div>
          					</div>
          				</div>
          			</div>
          							<div   id="wjcelcm34c"   class="Article_Details_main2">
          					<div   id="wjcelcm34c"   class="phpgenera_Details_mainL4">
          						<div   id="wjcelcm34c"   class="phpmain1_2_top">
          							<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
          									src="/static/imghw/index2_title2.png" alt="" /></a>
          						</div>
          						<div   id="wjcelcm34c"   class="phpgenera_Details_mainL4_info">
          
          													<div   id="wjcelcm34c"   class="phphistorical_Version2_mids">
          								<a href="http://ipnx.cn/zh-tw/faq/1796829560.html" title="垃圾收集如何在JavaScript中起作用?" class="phphistorical_Version2_mids_img">
          									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
          										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/175156097152256.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="垃圾收集如何在JavaScript中起作用?" />
          								</a>
          								<a href="http://ipnx.cn/zh-tw/faq/1796829560.html" title="垃圾收集如何在JavaScript中起作用?" class="phphistorical_Version2_mids_title">垃圾收集如何在JavaScript中起作用?</a>
          								<span id="wjcelcm34c"    class="Articlelist_txts_time">Jul 04, 2025 am	 12:42 AM</span>
          								<p class="Articlelist_txts_p">JavaScript的垃圾回收機(jī)制通過(guò)標(biāo)記-清除算法自動(dòng)管理內(nèi)存,以減少內(nèi)存洩漏風(fēng)險(xiǎn)。引擎從根對(duì)像出發(fā)遍歷並標(biāo)記活躍對(duì)象,未被標(biāo)記的則被視為垃圾並被清除。例如,當(dāng)對(duì)像不再被引用(如將變量設(shè)為null),它將在下一輪迴收中被釋放。常見(jiàn)的內(nèi)存洩漏原因包括:①未清除的定時(shí)器或事件監(jiān)聽(tīng)器;②閉包中對(duì)外部變量的引用;③全局變量持續(xù)持有大量數(shù)據(jù)。 V8引擎通過(guò)分代回收、增量標(biāo)記、並行/並發(fā)回收等策略優(yōu)化回收效率,降低主線程阻塞時(shí)間。開(kāi)發(fā)時(shí)應(yīng)避免不必要的全局引用、及時(shí)解除對(duì)象關(guān)聯(lián),以提升性能與穩(wěn)定性。</p>
          							</div>
          														<div   id="wjcelcm34c"   class="phphistorical_Version2_mids">
          								<a href="http://ipnx.cn/zh-tw/faq/1796836217.html" title="如何在node.js中提出HTTP請(qǐng)求?" class="phphistorical_Version2_mids_img">
          									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
          										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/431/639/175234432058757.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="如何在node.js中提出HTTP請(qǐng)求?" />
          								</a>
          								<a href="http://ipnx.cn/zh-tw/faq/1796836217.html" title="如何在node.js中提出HTTP請(qǐng)求?" class="phphistorical_Version2_mids_title">如何在node.js中提出HTTP請(qǐng)求?</a>
          								<span id="wjcelcm34c"    class="Articlelist_txts_time">Jul 13, 2025 am	 02:18 AM</span>
          								<p class="Articlelist_txts_p">在Node.js中發(fā)起HTTP請(qǐng)求有三種常用方式:使用內(nèi)置模塊、axios和node-fetch。 1.使用內(nèi)置的http/https模塊無(wú)需依賴,適合基礎(chǔ)場(chǎng)景,但需手動(dòng)處理數(shù)據(jù)拼接和錯(cuò)誤監(jiān)聽(tīng),例如用https.get()獲取數(shù)據(jù)或通過(guò).write()發(fā)送POST請(qǐng)求;2.axios是基於Promise的第三方庫(kù),語(yǔ)法簡(jiǎn)潔且功能強(qiáng)大,支持async/await、自動(dòng)JSON轉(zhuǎn)換、攔截器等,推薦用於簡(jiǎn)化異步請(qǐng)求操作;3.node-fetch提供類似瀏覽器fetch的風(fēng)格,基於Promise且語(yǔ)法簡(jiǎn)單</p>
          							</div>
          														<div   id="wjcelcm34c"   class="phphistorical_Version2_mids">
          								<a href="http://ipnx.cn/zh-tw/faq/1796836292.html" title="JavaScript數(shù)據(jù)類型:原始與參考" class="phphistorical_Version2_mids_img">
          									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
          										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/431/639/175234579081669.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JavaScript數(shù)據(jù)類型:原始與參考" />
          								</a>
          								<a href="http://ipnx.cn/zh-tw/faq/1796836292.html" title="JavaScript數(shù)據(jù)類型:原始與參考" class="phphistorical_Version2_mids_title">JavaScript數(shù)據(jù)類型:原始與參考</a>
          								<span id="wjcelcm34c"    class="Articlelist_txts_time">Jul 13, 2025 am	 02:43 AM</span>
          								<p class="Articlelist_txts_p">JavaScript的數(shù)據(jù)類型分為原始類型和引用類型。原始類型包括string、number、boolean、null、undefined和symbol,其值不可變且賦值時(shí)復(fù)制副本,因此互不影響;引用類型如對(duì)象、數(shù)組和函數(shù)存儲(chǔ)的是內(nèi)存地址,指向同一對(duì)象的變量會(huì)相互影響。判斷類型可用typeof和instanceof,但需注意typeofnull的歷史問(wèn)題。理解這兩類差異有助於編寫(xiě)更穩(wěn)定可靠的代碼。</p>
          							</div>
          														<div   id="wjcelcm34c"   class="phphistorical_Version2_mids">
          								<a href="http://ipnx.cn/zh-tw/faq/1796830657.html" title="React與Angular vs Vue:哪個(gè)JS框架最好?" class="phphistorical_Version2_mids_img">
          									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
          										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/431/639/175165349052637.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="React與Angular vs Vue:哪個(gè)JS框架最好?" />
          								</a>
          								<a href="http://ipnx.cn/zh-tw/faq/1796830657.html" title="React與Angular vs Vue:哪個(gè)JS框架最好?" class="phphistorical_Version2_mids_title">React與Angular vs Vue:哪個(gè)JS框架最好?</a>
          								<span id="wjcelcm34c"    class="Articlelist_txts_time">Jul 05, 2025 am	 02:24 AM</span>
          								<p class="Articlelist_txts_p">選哪個(gè)JavaScript框架最好?答案是根據(jù)需求選擇最適合的。 1.React靈活自由,適合需要高度定制、團(tuán)隊(duì)有架構(gòu)能力的中大型項(xiàng)目;2.Angular提供完整解決方案,適合企業(yè)級(jí)應(yīng)用和長(zhǎng)期維護(hù)的大項(xiàng)目;3.Vue上手簡(jiǎn)單,適合中小型項(xiàng)目或快速開(kāi)發(fā)。此外,是否已有技術(shù)棧、團(tuán)隊(duì)規(guī)模、項(xiàng)目生命週期及是否需要SSR也都是選擇框架的重要因素。總之,沒(méi)有絕對(duì)最好的框架,適合自己需求的就是最佳選擇。</p>
          							</div>
          														<div   id="wjcelcm34c"   class="phphistorical_Version2_mids">
          								<a href="http://ipnx.cn/zh-tw/faq/1796832745.html" title="JavaScript時(shí)間對(duì)象,某人構(gòu)建了一個(gè)eactexe,在Google Chrome上更快的網(wǎng)站等等" class="phphistorical_Version2_mids_img">
          									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
          										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/246/273/173914572643912.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JavaScript時(shí)間對(duì)象,某人構(gòu)建了一個(gè)eactexe,在Google Chrome上更快的網(wǎng)站等等" />
          								</a>
          								<a href="http://ipnx.cn/zh-tw/faq/1796832745.html" title="JavaScript時(shí)間對(duì)象,某人構(gòu)建了一個(gè)eactexe,在Google Chrome上更快的網(wǎng)站等等" class="phphistorical_Version2_mids_title">JavaScript時(shí)間對(duì)象,某人構(gòu)建了一個(gè)eactexe,在Google Chrome上更快的網(wǎng)站等等</a>
          								<span id="wjcelcm34c"    class="Articlelist_txts_time">Jul 08, 2025 pm	 02:27 PM</span>
          								<p class="Articlelist_txts_p">JavaScript開(kāi)發(fā)者們,大家好!歡迎閱讀本週的JavaScript新聞!本週我們將重點(diǎn)關(guān)注:Oracle與Deno的商標(biāo)糾紛、新的JavaScript時(shí)間對(duì)象獲得瀏覽器支持、GoogleChrome的更新以及一些強(qiáng)大的開(kāi)發(fā)者工具。讓我們開(kāi)始吧! Oracle與Deno的商標(biāo)之爭(zhēng)Oracle試圖註冊(cè)“JavaScript”商標(biāo)的舉動(dòng)引發(fā)爭(zhēng)議。 Node.js和Deno的創(chuàng)建者RyanDahl已提交請(qǐng)願(yuàn)書(shū),要求取消該商標(biāo),他認(rèn)為JavaScript是一個(gè)開(kāi)放標(biāo)準(zhǔn),不應(yīng)由Oracle</p>
          							</div>
          														<div   id="wjcelcm34c"   class="phphistorical_Version2_mids">
          								<a href="http://ipnx.cn/zh-tw/faq/1796829862.html" title="立即在JavaScript中立即調(diào)用功能表達(dá)式(IIFE)" class="phphistorical_Version2_mids_img">
          									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
          										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/175156814092778.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="立即在JavaScript中立即調(diào)用功能表達(dá)式(IIFE)" />
          								</a>
          								<a href="http://ipnx.cn/zh-tw/faq/1796829862.html" title="立即在JavaScript中立即調(diào)用功能表達(dá)式(IIFE)" class="phphistorical_Version2_mids_title">立即在JavaScript中立即調(diào)用功能表達(dá)式(IIFE)</a>
          								<span id="wjcelcm34c"    class="Articlelist_txts_time">Jul 04, 2025 am	 02:42 AM</span>
          								<p class="Articlelist_txts_p">IIFE(ImmediatelyInvokedFunctionExpression)是一種在定義後立即執(zhí)行的函數(shù)表達(dá)式,用於變量隔離和避免污染全局作用域。它通過(guò)將函數(shù)包裹在括號(hào)中使其成為表達(dá)式,並緊隨其後的一對(duì)括號(hào)來(lái)調(diào)用,如(function(){/code/})();。其核心用途包括:1.避免變量衝突,防止多個(gè)腳本間的命名重複;2.創(chuàng)建私有作用域,使函數(shù)內(nèi)部變量不可見(jiàn);3.模塊化代碼,便於初始化工作而不暴露過(guò)多變量。常見(jiàn)寫(xiě)法包括帶參數(shù)傳遞的版本和ES6箭頭函數(shù)版本,但需注意:必須使用表達(dá)式、結(jié)</p>
          							</div>
          														<div   id="wjcelcm34c"   class="phphistorical_Version2_mids">
          								<a href="http://ipnx.cn/zh-tw/faq/1796832608.html" title="處理諾言:鏈接,錯(cuò)誤處理和承諾在JavaScript中" class="phphistorical_Version2_mids_img">
          									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
          										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/175191360175213.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="處理諾言:鏈接,錯(cuò)誤處理和承諾在JavaScript中" />
          								</a>
          								<a href="http://ipnx.cn/zh-tw/faq/1796832608.html" title="處理諾言:鏈接,錯(cuò)誤處理和承諾在JavaScript中" class="phphistorical_Version2_mids_title">處理諾言:鏈接,錯(cuò)誤處理和承諾在JavaScript中</a>
          								<span id="wjcelcm34c"    class="Articlelist_txts_time">Jul 08, 2025 am	 02:40 AM</span>
          								<p class="Articlelist_txts_p">Promise是JavaScript中處理異步操作的核心機(jī)制,理解鍊式調(diào)用、錯(cuò)誤處理和組合器是掌握其應(yīng)用的關(guān)鍵。 1.鍊式調(diào)用通過(guò).then()返回新Promise實(shí)現(xiàn)異步流程串聯(lián),每個(gè).then()接收上一步結(jié)果並可返回值或Promise;2.錯(cuò)誤處理應(yīng)統(tǒng)一使用.catch()捕獲異常,避免靜默失敗,並可在catch中返回默認(rèn)值繼續(xù)流程;3.組合器如Promise.all()(全成功才成功)、Promise.race()(首個(gè)完成即返回)和Promise.allSettled()(等待所有完成)</p>
          							</div>
          														<div   id="wjcelcm34c"   class="phphistorical_Version2_mids">
          								<a href="http://ipnx.cn/zh-tw/faq/1796832618.html" title="什麼是緩存API?如何與服務(wù)人員使用?" class="phphistorical_Version2_mids_img">
          									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
          										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/175191380054750.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="什麼是緩存API?如何與服務(wù)人員使用?" />
          								</a>
          								<a href="http://ipnx.cn/zh-tw/faq/1796832618.html" title="什麼是緩存API?如何與服務(wù)人員使用?" class="phphistorical_Version2_mids_title">什麼是緩存API?如何與服務(wù)人員使用?</a>
          								<span id="wjcelcm34c"    class="Articlelist_txts_time">Jul 08, 2025 am	 02:43 AM</span>
          								<p class="Articlelist_txts_p">CacheAPI是瀏覽器提供的一種緩存網(wǎng)絡(luò)請(qǐng)求的工具,常與ServiceWorker配合使用,以提升網(wǎng)站性能和離線體驗(yàn)。 1.它允許開(kāi)發(fā)者手動(dòng)存儲(chǔ)如腳本、樣式表、圖片等資源;2.可根據(jù)請(qǐng)求匹配緩存響應(yīng);3.支持刪除特定緩存或清空整個(gè)緩存;4.通過(guò)ServiceWorker監(jiān)聽(tīng)fetch事件實(shí)現(xiàn)緩存優(yōu)先或網(wǎng)絡(luò)優(yōu)先等策略;5.常用於離線支持、加快重複訪問(wèn)速度、預(yù)加載關(guān)鍵資源及後臺(tái)更新內(nèi)容;6.使用時(shí)需注意緩存版本控制、存儲(chǔ)限制及與HTTP緩存機(jī)制的區(qū)別。</p>
          							</div>
          													</div>
          
          													<a href="http://ipnx.cn/zh-tw/web-designer.html" class="phpgenera_Details_mainL4_botton">
          								<span>See all articles</span>
          								<img src="/static/imghw/down_right.png" alt="" />
          							</a>
          											</div>
          				</div>
          					</div>
          	</main>
          	<footer>
              <div   id="wjcelcm34c"   class="footer">
                  <div   id="wjcelcm34c"   class="footertop">
                      <img src="/static/imghw/logo.png" alt="">
                      <p>公益線上PHP培訓(xùn),幫助PHP學(xué)習(xí)者快速成長(zhǎng)!</p>
                  </div>
                  <div   id="wjcelcm34c"   class="footermid">
                      <a href="http://ipnx.cn/zh-tw/about/us.html">關(guān)於我們</a>
                      <a href="http://ipnx.cn/zh-tw/about/disclaimer.html">免責(zé)聲明</a>
                      <a href="http://ipnx.cn/zh-tw/update/article_0_1.html">Sitemap</a>
                  </div>
                  <div   id="wjcelcm34c"   class="footerbottom">
                      <p>
                          ? php.cn All rights reserved
                      </p>
                  </div>
              </div>
          </footer>
          
          <input type="hidden" id="verifycode" value="/captcha.html">
          
          
          
          
          		<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' />
          	
          	
          	
          	
          	
          
          	
          	
          
          
          
          
          
          
          <footer>
          <div class="friendship-link">
          <p>感谢您访问我们的网站,您可能还对以下资源感兴趣:</p>
          <a href="http://ipnx.cn/" title="亚洲国产日韩欧美一区二区三区">亚洲国产日韩欧美一区二区三区</a>
          
          <div class="friend-links">
          
          
          </div>
          </div>
          
          </footer>
          
          
          <script>
          (function(){
              var bp = document.createElement('script');
              var curProtocol = window.location.protocol.split(':')[0];
              if (curProtocol === 'https') {
                  bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
              }
              else {
                  bp.src = 'http://push.zhanzhang.baidu.com/push.js';
              }
              var s = document.getElementsByTagName("script")[0];
              s.parentNode.insertBefore(bp, s);
          })();
          </script>
          </body><div id="m3eku" class="pl_css_ganrao" style="display: none;"><div id="m3eku"><ol id="m3eku"><code id="m3eku"><optgroup id="m3eku"></optgroup></code></ol></div><dd id="m3eku"></dd><menuitem id="m3eku"><center id="m3eku"><dl id="m3eku"></dl></center></menuitem><delect id="m3eku"><dd id="m3eku"></dd></delect><b id="m3eku"><wbr id="m3eku"><small id="m3eku"></small></wbr></b><pre id="m3eku"></pre><address id="m3eku"><legend id="m3eku"><abbr id="m3eku"><big id="m3eku"></big></abbr></legend></address><tr id="m3eku"></tr><dfn id="m3eku"></dfn><form id="m3eku"><samp id="m3eku"></samp></form><legend id="m3eku"><small id="m3eku"><mark id="m3eku"></mark></small></legend><b id="m3eku"></b><meter id="m3eku"></meter><legend id="m3eku"><track id="m3eku"></track></legend><menu id="m3eku"></menu><u id="m3eku"></u><video id="m3eku"><pre id="m3eku"></pre></video><p id="m3eku"></p><tfoot id="m3eku"><strong id="m3eku"><pre id="m3eku"><td id="m3eku"></td></pre></strong></tfoot><var id="m3eku"></var><dd id="m3eku"><object id="m3eku"><abbr id="m3eku"><big id="m3eku"></big></abbr></object></dd><video id="m3eku"></video><video id="m3eku"><address id="m3eku"><menu id="m3eku"><kbd id="m3eku"></kbd></menu></address></video><li id="m3eku"><tbody id="m3eku"></tbody></li><em id="m3eku"><strike id="m3eku"></strike></em><ruby id="m3eku"><tfoot id="m3eku"><menu id="m3eku"><option id="m3eku"></option></menu></tfoot></ruby><legend id="m3eku"></legend><b id="m3eku"><wbr id="m3eku"><pre id="m3eku"></pre></wbr></b><dfn id="m3eku"><s id="m3eku"></s></dfn><thead id="m3eku"><rt id="m3eku"></rt></thead><font id="m3eku"></font><tbody id="m3eku"></tbody><samp id="m3eku"><thead id="m3eku"><tbody id="m3eku"></tbody></thead></samp><i id="m3eku"></i><menu id="m3eku"></menu><small id="m3eku"><progress id="m3eku"></progress></small><style id="m3eku"></style><dfn id="m3eku"><big id="m3eku"></big></dfn><legend id="m3eku"></legend><dl id="m3eku"><track id="m3eku"></track></dl><form id="m3eku"><mark id="m3eku"></mark></form><pre id="m3eku"></pre><dfn id="m3eku"><blockquote id="m3eku"><p id="m3eku"></p></blockquote></dfn><acronym id="m3eku"><optgroup id="m3eku"><del id="m3eku"><sub id="m3eku"></sub></del></optgroup></acronym><small id="m3eku"></small><form id="m3eku"><meter id="m3eku"><cite id="m3eku"><track id="m3eku"></track></cite></meter></form><optgroup id="m3eku"><em id="m3eku"></em></optgroup><style id="m3eku"><small id="m3eku"><progress id="m3eku"></progress></small></style></div>
          
          </html>