搜索:
首页 >> JavaScript >> Js高级编程 >> JavaScript 组件之旅(三):用 Ant 构建组件

JavaScript 组件之旅(三):用 Ant 构建组件

2009-10-9 作者:太伯 来源:alipay UED 投递文章

目录:

  1. 分析和设计组件
  2. 编码实现和算法
  3. 用 Ant 构建组件
  4. 测试 JavaScript 组件

我们走到哪儿了?前两期思考了太多东西,你是否已有倦意?别担心,本期的话题很轻松,你只需要简单了解一些语法,写几行配置,就能驱使系统按你预设的方式自动完成一些工作。听起来是不是很惬意?Let’s go! 我们出发啦~

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

  smart-queue  // 组件的根目录
    +--- src  // JavaScript源文件目录
        +--- lang.js  // 前文提到的“外部文件”
        +--- smart-queue.js  // Smart Queue 主文件

现在,我们要让它“丰满”起来:

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

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

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

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

<project name="MyProject" default="dist" basedir=".">

    <description>
        simple example build file
    </description>
  <!-- set global properties for this build -->
  <property name="src" location="src"/>
  <property name="build" location="build"/>
  <property name="dist"  location="dist"/>

  <target name="init">
    <!-- Create the time stamp -->
    <tstamp/>
    <!-- Create the build directory structure used by compile -->
    <mkdir dir="${build}"/>
  </target>

  <target name="compile" depends="init"
        description="compile the source " >
    <!-- Compile the java code from ${src} into ${build} -->
    
Tags:组件  JavaScript  Ant  Apache 
相关文章
手机版 Js高级编程 Asp之家 Aspxhome.com
闽ICP备06017341号