前端流程自动化-enyo官方开发入门教程翻译一Ge...-JS实现新闻滚动效果

当前位置: 编程技术>WEB前端

本页文章导读:

▪前端流程自动化如今前端工程师需要维护的代码变得极为庞大和复杂，代码维护、打包、发布等流程上浪费的时间精力也越来越多。精简流程、提高效率，是每一个前端团队都会遇到的问题。因此我们需要在.........

▪enyo官方开发入门教程翻译一Getting Started之Starting Enyo App Development 开发环境作为一个Enyo开发者，你可以自由选择开发平台和编码工具。你可以使用windows、mac、linux等环境，只需要一个文本编辑器来编写enyo代码即可。所有的文本编辑器都.........

▪JS实现新闻滚动效果具体代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>code.js.cn </titl.........

[1]前端流程自动化

来源: 互联网发布时间: 2013-10-16

如今前端工程师需要维护的代码变得极为庞大和复杂，代码维护、打包、发布等流程上浪费的时间精力也越来越多。精简流程、提高效率，是每一个前端团队都会遇到的问题。因此我们需要在前端开发过程中引入流程管理工具来提升我们的开发效率。

前端的开发过程中主要有以下流程：编写代码->单元测试->检查语法->整合代码->生成文档->压缩代码->部署测试环境->测试->发布。

流程管理工具 - Ant

Ant 是著名Java开源组织Apache的一个项目，是一个基于java的build工具。它可以使你通过ant脚本语言，自动你的项目拷贝到某个目录，发布项目，或者生成一些代码，执行SQL语言。总之它可以帮助你完成项目开发中除了开发代码以外的大部分辅助性工作。

虽然Ant更多的在Java开发中使用，但是我们在前端开发中也可以很方便使用Ant来管理哦我们的开发流程。

单元测试

单元测试可以在我们每次对代码做修改时都跑一遍测试来看看是否引入了了Bug，详见JavaScript单元测试框架介绍。

代码检查 - JSLint

JavaScript 作为一门年轻、语法灵活多变且对格式要求相对松散的语言，代码格式的混乱和某些语言特性的不正确使用，往往使得最终交付的产品中包含许多因编码风格约定造成的未预见的行为或错误，这种习惯性的问题如果不及时指出并修改，往往会在项目的迭代过程中不断的重现，严重影响 Web 产品的稳定性与安全性。JSLint 正是 Douglas Crockford 同学为解决此类问题创建的工具，JSLint 除了能指出这些不合理的约定，还能标出结构方面的问题。虽然 JSLint 不能保证代码逻辑一定正确，但却有助于发现错误并教会开发人员一些好的编码实践。值得一提的是 JSLint 工具本身也是一段 JavaScript 代码，它是检验 JavaScript 代码质量的 JavaScript 脚本。

使用方法

JSLint本身是用JavaScript编写的，你可以在浏览器里调用它，也可以在各个编辑器里直接集成，比如Notepad++可以安装JSLint插件，但是以上这些方法都是手动调用的，比较麻烦。下面我们看看如何和Ant进行集成。

和Ant进行集成主要有2种方法：jslint4java或者通过Rhino等JS解析器方便地进行自动化代码检验。具体的使用方法请参考：使用 JSLint 保证 JavaScript 代码质量

对于前端开发中来说可能使用jslint4java更方便一些，毕竟不用写JAVA代码，这里需要提一下的是可以使用jslint4java-ant帮助我们JSLint的Ant任务。

除了JSLint，我们也可以选择Closure Linter，Google开发的js代码检查工具，它能够检查代码风格，语法错误，还能够自动优化代码，功能十分强大。

文档生成 - JSDoc 3

JSDoc 3是JsDoc Toolkit的升级版本，你可以理解它为JS版的JAVADoc。它会从源码中提取注释生成文档，注释的规范请参考:use JSDoc，或者Google JavaScript Coding Style，因为谷歌的JavaScript style是基于JSDoc的。

JSDoc和Ant集成的话需要下载JSDoc 3和JSDoc3 Ant Task，其中JSDoc3 Ant Task是方便你在Ant中使用JSDoc3。实际上JSDoc3 Ant Task的下载包里包含了JSDoc 3和Rhino，可以直接使用。

文件整合

在开发阶段常常会把JavaScript文件和CSS文件分成几部分来写,比如每个人对应一个文件，这样有利于减少冲突，提高效率。当然我们还会引入大量的第三方库文件，如jQuery, jQuery UI等。但是从性能优化的角度来看，每个文件都是一个HTTP请求，尤其JavaScript是顺序加载的，会严重影响网页的加载速度。因此在代码部署时必须将多个文件合并成少数几个文件。

和Ant集成的常用工具主要有Ant concat标签以及Combiner。

因为Ant concat是Ant内置的标签，所以使用起来特别简单方便，以下是最简单的例子，将所有的js合并到all.js中去。详细用法参考Ant concat。

        <target name="concatenate">
          <concat destfile="all.js">
              <fileset dir="js" includes="*.js" />
          </concat>
        </target>

Combiner是Zakas开发的一个文件整合工具，它通过判断文件的依赖关系将文件进行合并。详细用法参考：文件整合工具－Combiner。

代码压缩

开发时为了让代码具有良好的可读性，一般都加入了大量的空格和空行，类名和变量名都一般都较长，这些都导致了源代码的体积较大，增加客户端下载时间，因此部署时需要对JavaScript代码和CSS代码进行压缩处理。例如jQuery1.8.3压缩后是91KB，没有压缩则是252KB，还是非常值得去压缩的。

最常见的压缩工具YUICompressor以及Google的Closure Compiler。下面是一些两者的比较：

YUICompressor只执行基本压缩，主要是去除空格等，也可以执行一些比较低层次的优化，比如将var varName;改成var a;
Google Closure Compiler功能比较强大，除了基本的压缩，还可以对代码进行初级和高级的优化，比如去除dead code等，可以通过参数来控制它的压缩级别。总之它压缩出来的代码结构被彻底修改了。
YUICompressor因为对源代码优化做的比较少，所以比较可靠，不会给代码带来伤害。而Google Closure Compiler比较激进，可以取得较高的压缩率，但是可能带来伤害。
Google Closure Compiler不仅可以对代码进行压缩，还可以对代码进行合并，见上面文件整合部分。

两者的详细比较见Google Closure Compiler VS YUICompressor

YUICompressor和Google Closure Compiler与Ant集成的教程可以参考http://www.36ria.com/4644

测试环境构建

测试环境构建不是单元测试，而是构建整个系统的测试环境，例如将系统构建包复制到测试机器上等。使用Ant自带的ftp标签，可以将本地代码复制到局域网内的ftp目录。也可使用开源工具JSch进行SCP操作。

        <ftp server="ftp.apache.org"
           userid="anonymous"
           password="me@myorg.com">
          <fileset dir="htdocs/manual"/>
        </ftp>

自动提交代码

很多时候需要按照一定的规则自动提交代码，比如每天定时构建，然后提交到SVN或者当Ant和CI集成时，需要Ant和SVN交互等，这时候使用Ant和SVN交互，实现自动化操作是非常方便的。

Ant和SVN交互需要插件svnant，它可以完成export, checkout, commit操作。

Ant同样是可以和Git交互的，请参考Ant Tasks for Git。

案例参考：基于 Ant 搭建敏捷开发过程中的持续集成环境

参考：

前端开发流程自动化
Automating JavaScript builds
tangram开发中使用的开源工具介绍
Build-JS-example

[2]enyo官方开发入门教程翻译一Getting Started之Starting Enyo App Development

来源: 发布时间: 2013-10-16

开发环境

作为一个Enyo开发者，你可以自由选择开发平台和编码工具。你可以使用windows、mac、linux等环境，只需要一个文本编辑器来编写enyo代码即可。所有的文本编辑器都满足这一需求，包括免费的产品如windows上的notepad或者mac上的textwrangler。

在你的开发过程中可能需要web浏览器来测试代码。尽管测试时可以直接从本地文件系统加载文件到浏览器，我们强烈建议你从http服务器访问应用。这种方法具有多种优势，包括从远程设备进行测试的能力。

如果你现在没有可运行的本地web服务器，你可以非常方便的安装Apache/MySQL/PHP软件包，例如windows的WAMPStack或mac的MAMP。

注意：由于安全限制，如果你选择使用chrome开发并且直接从文件系统加载你的app，你需要在浏览器启动命令行加上加上“--allow-file-access-from-files”。在windows上，你可以直接创建一个chrome.exe的快捷方式然后把语句加在快捷方式的末尾。然后使用快捷方式启动浏览器。在mac和linux上也可以使用类似的方法。

获取enyo源码

注意：可以从 Bootplate和Dupliforking获取enyo源码和尽快开始编写app的文档教程。这篇文章提供了更详细的信息，你可以在使用bootplat templat之前通读一次并从中受益。

Enyo的源码可以从enyojs.com下载zip文件或者从github的enyojs project下载。

（后面讲解在git客户端中使用命令行获取enyo的部分省略掉了。译者注）

Enyo的核心和插件

不管你使用哪种方式获取源码，如果你要开发一个应用，你必须将enyo的核心源码嵌入到app中。为了方便，源码应放在应用目录下的enyo文件夹下。

由于enyo的核心库是开发的基础，多思考enyo项目底层的代码也是有益处的。一个典型的enyo应用通常由两层构成，一个由可以重用的类库或插件组成，另一个是实际应用的具体源码。

插件代码可能来自enyo项目本身（onyx工具类库等）或其他开源社区，或其他开发者的努力成功。方便起见，插件应当放在lib目录下。我们下面给出app的结构

<app>

enyo/

lib/

注意：更详细的关于应用结构的讨论在 Managing Your Project一章。

Starting an App

现在万事俱备，开始写一个enyo应用。你的第一个应用可以是一个简单的HTML文件。

例如，我们在可以在index.html文件写入以下代码来中创建一个HelloWorld应用。

<!doctype html>

<html>

<head>

<title>Enyo Hello</title>

</head>

<body>

</body>

</html>

截图：

现在我们的app文件夹看起来是这样的

<app>

enyo/

lib/

index.html

如果我们要使用插件，我们可以直接使用<script>标签加载。

<!doctype html>

<html>

<head>

<title>Enyo Hello</title>

</head>

<body>

// make a custom Control based on CoolKind from aPlugin

[3]JS实现新闻滚动效果

来源: 发布时间: 2013-10-16

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>code.js.cn </title>
<style>
a
{
display: block;
font-size: 15px;
line-height: 18px;
text-decoration: none;
color: #333;
font-family: Arial;
font-size: 12px;
}
.shell
{
background:no-repeat 4px 5px;
border: 1px solid #aaa;
width: 400px;
padding: 3px 2px 2px 20px;
}
#div1
{
height: 36px;
overflow: hidden;
}
</style>
</head>
<body>
<div >
<div id="div1">
<a>这是</a>
<a>我的</a>
<a>第一篇</a>
<a>博客</a>
</div>
</div>
</body>
<script>
var c, _ = Function;
with (o = document.getElementById("div1")) { innerHTML += innerHTML; onmouseover = _("c=1"); onmouseout = _("c=0"); }
(F = _("if(#%18||!c)#++,#%=o.scrollHeight>>1;setTimeout(F,#%18?10:3000);".replace(/#/g, "o.scrollTop")))();
</script>
</html>

滚动频率由setTimeout(F,#%18?10:3000)这个3000来控制。

本文链接