QUnit - 环境设置 - Gingerdoc 姜知笔记

笔记首页 >> qunit >> QUnit – 环境设置

QUnit – 环境设置

有两种使用 QUnit 的方法。

本地安装– 您可以在本地机器上下载 QUnit 库并将其包含在您的 HTML 代码中。
基于 CDN 的版本– 您可以直接从内容交付网络 (CDN) 将 QUnit 库包含到您的 HTML 代码中。

本地安装

转到https://code.jquery.com/qunit/下载可用的最新版本。
将下载的qunit-git.js和qunit-git.css文件放在您网站的目录中，例如 /jquery。

例子

您可以在 HTML 文件中包含qunit-git.js和qunit-git.css文件，如下所示 –

现场演示

<html> 
   <head> 
      <meta charset = "utf-8"> 
      <title>QUnit basic example</title> 
      <link rel = "stylesheet" href = "/jquery/qunit-git.css"> 
      <script src = "/jquery/qunit-git.js"></script> 
   </head> 
   
   <body> 
      <div id = "qunit"></div> 
      <div id = "qunit-fixture"></div>  
      <script> 
         QUnit.test( "My First Test", function( assert ) { 
            var value = "1"; 
            assert.equal( value, "1", "Value should be 1" ); 
         }); 
      </script> 
   </body> 
</html>

这将产生以下结果 –

基于 CDN 的版本

您可以直接从内容交付网络 (CDN) 将 QUnit 库包含到您的 HTML 代码中。

我们在本教程中使用该库的 jQuery CDN 版本。

例子

让我们使用 jQuery CDN 中的 QUnit 库重写上面的示例。

现场演示

<html>
   <head>
      <meta charset = "utf-8">
      <title>QUnit basic example</title>
      <link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
      <script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
   </head>
   
   <body>
      <div id = "qunit"></div>
      <div id = "qunit-fixture"></div> 
      <script>
         QUnit.test( "My First Test", function( assert ) {
            var value = "1";
            assert.equal( value, "1", "Value should be 1" );
         });
      </script>
   </body>
</html>

这将产生以下结果 –