搜尋
首頁web前端js教程JavaScript 组件之旅（三）：用 Ant 构建组件_javascript技巧

JavaScript 组件之旅（三）：用 Ant 构建组件_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
May 16, 2016 pm 06:43 PM
antjavascript

听起来是不是很惬意？Let's go! 我们出发啦～

这期，我们会使用 Ant 将上期编写、整理的代码文件按指定的先后顺序合并成单一的源文件，然后压缩这个文件。这是构建 JavaScript 项目的基本步骤。Ant 是 Apache 的一个顶级开源项目，网上对它的介绍和安装，已经有很多文章，这里就不再赘述了。在构建之前，我们先来看看已有的文件布局：

 smart-queue <span style="COLOR: #c0c0c0">// 组件的根目录</span>
  +--- src <span style="COLOR: #c0c0c0">// JavaScript源文件目录</span>
    +--- lang.js <span style="COLOR: #c0c0c0">// 前文提到的“外部文件”</span>
    +--- smart-queue.js <span style="COLOR: #c0c0c0">// Smart Queue 主文件</span>

现在，我们要让它“丰满”起来：

  • 组件根目录下添加：
    • README: 介绍 Smart Queue 组件
    • LICENSE: 组件的授权信息
    • build.xml: Ant 使用的配置文件
  • 组件根目录下添加 lib 子目录：存放构建过程中需要使用的外部程序和库文件
    • lib 子目录下添加 yuicompressor.jar: 我们用 YUI Compressor 压缩 JavaScript
  • 组件根目录下添加 test 子目录：存放测试组件所需的文件（下期介绍）
  • src 目录下添加 intro.js: 介绍组件的版本及说明信息

麻雀虽小，五脏俱全。现在 Smart Queue 看上去像是比较专业的 JavaScript 项目了：

 smart-queue <span style="COLOR: #c0c0c0">// 组件的根目录</span>
  +--- lib <span style="COLOR: #c0c0c0">// JavaScript外部程序和库文件目录</span>
    +--- yuicompressor.jar <span style="COLOR: #c0c0c0">// YUI Compressor</span>
  +--- test <span style="COLOR: #c0c0c0">// 测试文件目录</span>
  +--- src <span style="COLOR: #c0c0c0">// JavaScript源文件目录</span>
    +--- intro.js <span style="COLOR: #c0c0c0">// 介绍和版本信息</span>
    +--- lang.js <span style="COLOR: #c0c0c0">// 前文提到的“外部文件”</span>
    +--- smart-queue.js <span style="COLOR: #c0c0c0">// Smart Queue 主文件</span>
  +--- README <span style="COLOR: #c0c0c0">// 组件自述文件</span>
  +--- LICENSE <span style="COLOR: #c0c0c0">// 组件授权信息</span>

我们计划将构建出来的文件存放到组件根目录下的 build 子目录，还要通过构建工具创建并销毁它。首次尝试构建前，建议先大概了解一下 Ant 的配置文件——build.xml 的结构：

<span style="COLOR: #b000b0"><span style="COLOR: #c00000">project</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">name</span>=<span style="COLOR: #008000">"MyProject"</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">default</span>=<span style="COLOR: #008000">"dist"</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">basedir</span>=<span style="COLOR: #008000">"."</span><span style="COLOR: #b000b0">></span>
  <span style="COLOR: #b000b0"><span style="COLOR: #c00000">description</span><span style="COLOR: #b000b0">></span>
    simple example build file
  <span style="COLOR: #b000b0"></span><span style="COLOR: #c00000">description</span><span style="COLOR: #b000b0">></span>
 <span style="COLOR: #707070"><span style="COLOR: #707070">-- set global properties for this build --</span><span style="COLOR: #707070">></span>
 <span style="COLOR: #b000b0"><span style="COLOR: #c00000">property</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">name</span>=<span style="COLOR: #008000">"src"</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">location</span>=<span style="COLOR: #008000">"src"</span><span style="COLOR: #b000b0">/></span>
 <span style="COLOR: #b000b0"><span style="COLOR: #c00000">property</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">name</span>=<span style="COLOR: #008000">"build"</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">location</span>=<span style="COLOR: #008000">"build"</span><span style="COLOR: #b000b0">/></span>
 <span style="COLOR: #b000b0"><span style="COLOR: #c00000">property</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">name</span>=<span style="COLOR: #008000">"dist"</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">location</span>=<span style="COLOR: #008000">"dist"</span><span style="COLOR: #b000b0">/></span>

 <span style="COLOR: #b000b0"><span style="COLOR: #c00000">target</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">name</span>=<span style="COLOR: #008000">"init"</span><span style="COLOR: #b000b0">></span>
  <span style="COLOR: #707070"><span style="COLOR: #707070">-- Create the time stamp --</span><span style="COLOR: #707070">></span>
  <span style="COLOR: #b000b0"><span style="COLOR: #c00000">tstamp</span><span style="COLOR: #b000b0">/></span>
  <span style="COLOR: #707070"><span style="COLOR: #707070">-- Create the build directory structure used by compile --</span><span style="COLOR: #707070">></span>
  <span style="COLOR: #b000b0"><span style="COLOR: #c00000">mkdir</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">dir</span>=<span style="COLOR: #008000">"${build}"</span><span style="COLOR: #b000b0">/></span>
 <span style="COLOR: #b000b0"></span><span style="COLOR: #c00000">target</span><span style="COLOR: #b000b0">></span>

 <span style="COLOR: #b000b0"><span style="COLOR: #c00000">target</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">name</span>=<span style="COLOR: #008000">"compile"</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">depends</span>=<span style="COLOR: #008000">"init"</span>
<span style="COLOR: #b000b0">    </span><span style="COLOR: #0000c0">description</span>=<span style="COLOR: #008000">"compile the source "</span><span style="COLOR: #b000b0"> ></span>
  <span style="COLOR: #707070"><span style="COLOR: #707070">-- Compile the java code from ${src} into ${build} --</span><span style="COLOR: #707070">></span>
  <span style="COLOR: #b000b0"><span style="COLOR: #c00000">javac</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">srcdir</span>=<span style="COLOR: #008000">"${src}"</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">destdir</span>=<span style="COLOR: #008000">"${build}"</span><span style="COLOR: #b000b0">/></span>
 <span style="COLOR: #b000b0"></span><span style="COLOR: #c00000">target</span><span style="COLOR: #b000b0">></span>

 <span style="COLOR: #b000b0"><span style="COLOR: #c00000">target</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">name</span>=<span style="COLOR: #008000">"clean"</span>
<span style="COLOR: #b000b0">    </span><span style="COLOR: #0000c0">description</span>=<span style="COLOR: #008000">"clean up"</span><span style="COLOR: #b000b0"> ></span>
  <span style="COLOR: #707070"><span style="COLOR: #707070">-- Delete the ${build} and ${dist} directory trees --</span><span style="COLOR: #707070">></span>
  <span style="COLOR: #b000b0"><span style="COLOR: #c00000">delete</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">dir</span>=<span style="COLOR: #008000">"${build}"</span><span style="COLOR: #b000b0">/></span>
  <span style="COLOR: #b000b0"><span style="COLOR: #c00000">delete</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">dir</span>=<span style="COLOR: #008000">"${dist}"</span><span style="COLOR: #b000b0">/></span>
 <span style="COLOR: #b000b0"></span><span style="COLOR: #c00000">target</span><span style="COLOR: #b000b0">></span>
<span style="COLOR: #b000b0"></span><span style="COLOR: #c00000">project</span><span style="COLOR: #b000b0">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

仔细观察一下，除了 <font face="新宋体">name, description</font> 这些名字都很容易理解外，其他可以看到的规律包括：

  • <font face="新宋体">project</font> 元素的 <font face="新宋体">default</font> 属性值对应某个 <font face="新宋体">target</font> 元素的 <font face="新宋体">name</font> 属性；
  • <font face="新宋体">target</font> 元素的 <font face="新宋体">depends</font> 属性值对应其他某些 <font face="新宋体">target</font> 元素的 <font face="新宋体">name</font> 属性；
  • <font face="新宋体">${somename}</font> 可以引用 <font face="新宋体">property</font> 中定义的值。

下面我们开始写自己的 build.xml.

首先，配置项目的基本信息，以及相关目录名称，将要使用的编码等等：

<span style="COLOR: #b000b0"><span style="COLOR: #c00000">project</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">name</span>=<span style="COLOR: #008000">"Smart Queue"</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">default</span>=<span style="COLOR: #008000">"compress"</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">basedir</span>=<span style="COLOR: #008000">"."</span><span style="COLOR: #b000b0">></span>
  <span style="COLOR: #b000b0"><span style="COLOR: #c00000">description</span><span style="COLOR: #b000b0">></span>Build file for Ant<span style="COLOR: #b000b0"></span><span style="COLOR: #c00000">description</span><span style="COLOR: #b000b0">></span>
  <span style="COLOR: #b000b0"><span style="COLOR: #c00000">property</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">name</span>=<span style="COLOR: #008000">"src"</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">location</span>=<span style="COLOR: #008000">"src"</span><span style="COLOR: #b000b0"> /></span>
  <span style="COLOR: #b000b0"><span style="COLOR: #c00000">property</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">name</span>=<span style="COLOR: #008000">"build"</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">location</span>=<span style="COLOR: #008000">"build"</span><span style="COLOR: #b000b0"> /></span>
  <span style="COLOR: #b000b0"><span style="COLOR: #c00000">property</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">name</span>=<span style="COLOR: #008000">"lib"</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">location</span>=<span style="COLOR: #008000">"lib"</span><span style="COLOR: #b000b0">/></span>
  <span style="COLOR: #b000b0"><span style="COLOR: #c00000">property</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">name</span>=<span style="COLOR: #008000">"inputencoding"</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">value</span>=<span style="COLOR: #008000">"utf-8"</span><span style="COLOR: #b000b0">/></span>
  <span style="COLOR: #b000b0"><span style="COLOR: #c00000">property</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">name</span>=<span style="COLOR: #008000">"outputencoding"</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">value</span>=<span style="COLOR: #008000">"gbk"</span><span style="COLOR: #b000b0">/></span></span></span></span></span></span></span></span>

接着，定义一个用于初始化的 <font face="新宋体">target</font>, 它负责创建 build 子目录：

  <span style="COLOR: #b000b0"><span style="COLOR: #c00000">target</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">name</span>=<span style="COLOR: #008000">"init"</span><span style="COLOR: #b000b0">></span>
    <span style="COLOR: #b000b0"><span style="COLOR: #c00000">mkdir</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">dir</span>=<span style="COLOR: #008000">"${build}"</span><span style="COLOR: #b000b0">/></span>
  <span style="COLOR: #b000b0"></span><span style="COLOR: #c00000">target</span><span style="COLOR: #b000b0">></span></span></span>

然后定义名为 <font face="新宋体">concat</font> 的 <font face="新宋体">target</font>, 负责将 src 里的 3 个 JavaScript 文件按先后顺序连接起来。运行它要先运行前面定义的 <font face="新宋体">init</font>:

  <span style="COLOR: #b000b0"><span style="COLOR: #c00000">target</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">name</span>=<span style="COLOR: #008000">"concat"</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">depends</span>=<span style="COLOR: #008000">"init"</span><span style="COLOR: #b000b0">></span>
    <span style="COLOR: #b000b0"><span style="COLOR: #c00000">concat</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">destfile</span>=<span style="COLOR: #008000">"${build}/smart-queue.source.js"</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">encoding</span>=<span style="COLOR: #008000">"${inputencoding}"</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">outputencoding</span>=<span style="COLOR: #008000">"${outputencoding}"</span><span style="COLOR: #b000b0">></span>
      <span style="COLOR: #b000b0"><span style="COLOR: #c00000">filelist</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">dir</span>=<span style="COLOR: #008000">"${src}"</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">files</span>=<span style="COLOR: #008000">"intro.js, lang.js, smart-queue.js"</span><span style="COLOR: #b000b0"> /></span>
    <span style="COLOR: #b000b0"></span><span style="COLOR: #c00000">concat</span><span style="COLOR: #b000b0">></span>
  <span style="COLOR: #b000b0"></span><span style="COLOR: #c00000">target</span><span style="COLOR: #b000b0">></span></span></span></span>

这样，就可以得到一个可以工作的 JavaScript 文件，下面的 <font face="新宋体">target</font> 负责压缩这个文件，显然它依赖于 <font face="新宋体">concat</font>, 也依赖于 <font face="新宋体">init</font>, 但是不必显式指定对 <font face="新宋体">init</font> 的依赖——Ant 能处理这种依赖关系。这里调用 YUI Compressor 并传入适当的参数：

  <span style="COLOR: #b000b0"><span style="COLOR: #c00000">target</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">name</span>=<span style="COLOR: #008000">"compress"</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">depends</span>=<span style="COLOR: #008000">"concat"</span><span style="COLOR: #b000b0">></span>
    <span style="COLOR: #b000b0"><span style="COLOR: #c00000">java</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">jar</span>=<span style="COLOR: #008000">"${lib}/yuicompressor.jar"</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">fork</span>=<span style="COLOR: #008000">"true"</span><span style="COLOR: #b000b0">></span>
      <span style="COLOR: #b000b0"><span style="COLOR: #c00000">arg</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">line</span>=<span style="COLOR: #008000">"--type js --charset utf-8 -o ${build}/smart-queue.js ${build}/smart-queue.js"</span><span style="COLOR: #b000b0">/></span>
    <span style="COLOR: #b000b0"></span><span style="COLOR: #c00000">java</span><span style="COLOR: #b000b0">></span>
  <span style="COLOR: #b000b0"></span><span style="COLOR: #c00000">target</span><span style="COLOR: #b000b0">></span></span></span></span>

大功告成，<font face="新宋体">compress</font> 处理后的文件就可以部署到生产系统上去了。最后我们做一下清理工作，使你在生成文件后还可以回到最初的状态:

  <span style="COLOR: #b000b0"><span style="COLOR: #c00000">target</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">name</span>=<span style="COLOR: #008000">"clean"</span><span style="COLOR: #b000b0">></span>
    <span style="COLOR: #b000b0"><span style="COLOR: #c00000">delete</span><span style="COLOR: #b000b0"> </span><span style="COLOR: #0000c0">dir</span>=<span style="COLOR: #008000">"${build}"</span><span style="COLOR: #b000b0">/></span>
  <span style="COLOR: #b000b0"></span><span style="COLOR: #c00000">target</span><span style="COLOR: #b000b0">></span></span></span>

到此可以说基本的配置就写完了。怎么使用它呢？以命令行方式进入到组件根目录（或者说 build.xml 所在的目录），然后：

  • 运行 <font face="新宋体">ant concat</font>, 将得到 ./build/smart-queue.source.js
  • 运行 <font face="新宋体">ant</font>, 将选择 <font face="新宋体"><project></project></font> 中 <font face="新宋体">default</font> 引用的那个 <font face="新宋体">target</font>, 即 <font face="新宋体">compress</font>, 所以会得到 ./build 下的 smart-queue.source.js 和 smart-queue.js
  • 运行 <font face="新宋体">ant clean</font>, 将删除 ./build 目录，回到最初的状态

这些前提是你已经正确安装或者说设置好了 JDK 和 Ant, 如果有错误提示出来，则可能需要检查它们是否已准备妥当。

一路看下来，是不是觉得本期介绍的东西很简单？那是当然了，构建工具就应该简单易用，否则把大量的时间花在那上面岂非不值？工具的价值在于提升生产力，从而创造更多价值。

最后，你可以在这里查看 Ant 的帮助文档（里面有很多好玩的东东哦），也可以在这里查看本期完整的 build.xml 文件。

陳述
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
相關文章
Python vs. JavaScript：學習曲線和易用性Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

Python vs. JavaScript：社區，圖書館和資源Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。

超越瀏覽器：現實世界中的JavaScript超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。 首先，什麼是多租戶SaaS應用程序？ 多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。 前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

顯示更多

熱門文章

R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
4 週前By尊渡假赌尊渡假赌尊渡假赌
刺客信條陰影：貝殼謎語解決方案
2 週前ByDDD
R.E.P.O.如果您聽不到任何人，如何修復音頻
1 個月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它們
1 個月前By尊渡假赌尊渡假赌尊渡假赌
顯示更多

熱工具

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序，非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具，幫助Web開發人員更好地理解保護網路應用程式的過程，並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞，難度各不相同。請注意，該軟體中

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境，安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問，並防止學生使用未經授權的資源。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

SublimeText3 英文版

SublimeText3 英文版

推薦：為Win版本，支援程式碼提示！

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7529
15
CakePHP 教程
1378
52
steam的賬戶名稱是什麼格式
81
11
win11激活密鑰永久
54
19
NYT連接提示和答案
21
76
顯示更多