目录:
- JavaScript组件之旅:分析和设计
- JavaScript组件之旅:编码实现和算法
- JavaScript组件之旅:用Ant构建组件
- 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} --> <javac srcdir="${src}" destdir="${build}"/> </target>
<target name="clean" description="clean up" > <!-- Delete the ${build} and ${dist} directory trees --> <delete dir="${build}"/> <delete dir="${dist}"/> </target> </project>
仔细观察一下,除了 name, description 这些名字都很容易理解外,其他可以看到的规律包括:
- project 元素的 default 属性值对应某个 target 元素的 name 属性;
- target 元素的 depends 属性值对应其他某些 target 元素的 name 属性;
- ${somename} 可以引用 property 中定义的值。
出处:Alipay UED
责任编辑:bluehearts
上一页 下一页 JavaScript组件之旅:用Ant构建组件 [2]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|