Alice 是支付宝前端样式解决方案小组的项目代称。她包括构建样式库的样式库解决方案，帮助团队理解新技术的W3C标准文档库和正在进行中实验项目等; 也是团队的代称。目前 Alice 的主要职责是提供 CSS 和 HTML 方面的技术支持和解决方案开发。

基于“分享·贡献·学习”的理念建立此网站，开源部分团队成果。发布的所有开源源代码，均采用 MIT License 许可。欢迎参与 Alice 的开发，或提出你宝贵的意见。

官方站点：http://aliceui.com/

Github：https://github.com/sofish/Alice

简单用了一下 感觉还不错哦
为了方便大家打包压缩 我也写了个插件基于ant的打包工具

https://github.com/sofish/Alice/tree/master/plugins/AntBuild

关于

本书致力于教会你如何用Node.js来开发应用，过程中会传授你所有所需的“高级”JavaScript知识。本书绝不是一本“Hello World”的教程。

状态

你正在阅读的已经是本书的最终版。因此，只有当进行错误更正以及针对新版本Node.js的改动进行对应的修正时，才会进行更新。

本书中的代码案例都在Node.js 0.4.9版本中测试过，可以正确工作。

读者对象

本书最适合与我有相似技术背景的读者： 至少对一门诸如Ruby、Python、PHP或者Java这样面向对象的语言有一定的经验；对JavaScript处于初学阶段，并且完全是一个Node.js的新手。

这里指的适合对其他编程语言有一定经验的开发者，意思是说，本书不会对诸如数据类型、变量、控制结构等等之类非常基础的概念作介绍。要读懂本书，这些基础的概念我都默认你已经会了。

然而，本书还是会对JavaScript中的函数和对象作详细介绍，因为它们与其他同类编程语言中的函数和对象有很大的不同。

本书结构

读完本书之后，你将完成一个完整的web应用，该应用允许用户浏览页面以及上传文件。

当然了，应用本身并没有什么了不起的，相比为了实现该功能书写的代码本身，我们更关注的是如何创建一个框架来对我们应用的不同模块进行干净地剥离。 是不是很玄乎？稍后你就明白了。

本书先从介绍在Node.js环境中进行JavaScript开发和在浏览器环境中进行JavaScript开发的差异开始。

紧接着，会带领大家完成一个最传统的“Hello World”应用，这也是最基础的Node.js应用。

最后，会和大家讨论如何设计一个“真正”完整的应用，剖析要完成该应用需要实现的不同模块，并一步一步介绍如何来实现这些模块。

可以确保的是，在这过程中，大家会学到JavaScript中一些高级的概念、如何使用它们以及为什么使用这些概念就可以实现而其他编程语言中同类的概念就无法实现。

该应用所有的源代码都可以通过 本书Github代码仓库.

相关链接

在线阅读：http://www.nodebeginner.org/index-zh-cn.html

离线版（html）下载地址：http://115.com/file/cljz7jnf#nodejsstart.rar

模块化思想已经不再是创新，陆续的演变成一种思维模式，在处理各种问题时都会考虑模块化思想

前端重构也已经有各种模块化的思想出现，结构模块化、样式模块化等等

今天和同事沟通视觉统一化的时候，发现流程中在产出物方面存在一个问题
如下图所示：

大家按照统一的思维过程在执行时 产出物在页面构建的环节，形成了一个聚合，从以UI组件为单位变为了以page为单位的产出物，而之后到了后端研发时，其实Template还是需要再次分拆，由于这个问题，而产生了更大的沟通成本，降低了整个团队的效率

基于这个问题 我提出了一个解决方法 还算不上解决方案，短暂的解决一下

在页面构建的环境 通过webserver的SSI Include指令 将静态页面也进行模块化，在交付产出物的时候后端研发人员是很清晰的看到module的复用代码，也降低了重构页面时对于统一的ui而产生不同html和css代码的错误率

具体实现如下：

在开发(测试环境)  建立webserver（nginx、apache均可） 然后通过配置文件开启SSI支持

Apache 开启SSI方式 http://www.uplinux.com/download/doc/apache/ApacheManual/howto/ssi.html

要使服务器允许SSI，必须在httpd.conf文件或.htaccess文件中有如下配置：

Options +Includes

告诉服务器以允许解析文件中的SSI指令。注意，在多数配置中，多个Options指令会互相覆盖，所以，可能必须对需要SSI的特定目录使用Options，以确保位于最后并起作用。

并不是所有文件中的SSI指令都会被解析，所以，必须告诉Apache应该解析哪些文件。有两种方法，使Apache解析带有特定文件后缀的任何文件，比如.shtml, 配置如下：

在 Nginx 开启 SSI ，加入以下3行就OK了，可以放在 http, server, 和 location 段都行

SSI Include 指令语法，我们主要用这个语法来调用相关组件文件代码

<!–#include virtual=”文件路径” –>

在构建页面时 目录结构可以是

demoproject/ 项目文件夹
|-- aboutus.shtml  综合性页面 包含module调用
|-- index.shtml    综合性页面 包含module调用
|-- other_page.shtml 综合性页面 包含module调用
|-- module  组件文件夹
|   |-- footer.html  组件文件
|   |-- header.html  组件文件
|   `-- other_module.html 组件文件
|-- images 其他静态文件
|-- js 其他静态文件
`-- style 其他静态文件

这样 我们形成的综合性页面的代码中会包含module调用，在我们每次对通用组建修改时，只需要修改组建文件即可
如下图，因为我们之前在webserver配置了SSI支持，所以我们能够实时预览效果

这样，除了在开发时方便了我们自己，我们的交付物也能够体现模块化思想，方便后端人员处理templates

同时我也用python写了一个开源项目，方便使用shtml这种方式构建页面的同事 产出传统html交付物

shtml2html项目

使用方法：

Usage: python shtml2html.py path 支持文件和目录（递归处理）

这是我目前的解决方法，正在试行中，小团队还没那么智能化，希望能给大家提供一些思路

如果你有更好的解决方案也请告诉我，多交流

一直在mac平台下工作，一直在用LiveReload（http://livereload.com/），windows下一直在用 xrefresh（http://xrefresh.binaryage.com/）做同步刷新还是很不错的，能够解决基本问题了

解释：

同步刷新：当文件修改时 浏览器自动刷新，如果你在做多屏幕开发的时候会尤其提升开发效率

昨天在微博上看到了f5这款国人开发的软件，今天收到激活码 ，在mac下进行了简单测试，没有什么问题

相比较的话，国人开发的这款软件基于air技术，能够比较好的跨平台，但是需要激活，不知道除了验证以外会不会有其他数据的收集

总体来讲 支持一下

官方网站：http://www.getf5.com//

视频演示：

下面有几个激活码 分享一下

• c65af48f80e249d198293cdf1a9ee6a9
• 55a365fc7d7042e5be52ad6d24b77450

目前正在梳理整个前端开发的流程及环境，也看了d2大家分享的关于前端各种自动化的演讲，便开始动手了
第一项是希望解决大家兼容性测试的问题，之前已经用虚拟机替换掉了ietester
但本地的虚拟机还是会出现团队成员不一致的情况，并且占用本地资源比较严重
在 美团 潘魏增 老兄帮助下，了解到美团目前在用的vmserver是很好的解决方案，再次感谢

同时参考了很多大家分享的东西，把自己遇到的问题也放出来和大家分享

下一步打算做一些前端自动化方面的脚本，希望和大家多学习，共进步

vmserver是vmware旗下的一款虚拟机服务器，可以通过web管理和操作虚拟机，同时支持多平台 windows、linux、macos等，免费的 可以在官网申请到授权码

这次我们选择的是linux版的vmware server

服务器环境：centos 5.5

vmserver版本：VMware-server-2.0.2-203138.i386

安装过程不详细叙述了 参考下面这篇文章即可，我也复制到最后给大家参考了

http://wuyizhaizhu.blog.163.com/blog/static/115151869201052201339515/

安装后通过web可以访问，进入管理端，在里面安装虚拟机即可

我就讲讲我们在搭建过程中遇到的问题吧

1.安装遇到提示

You cannot install VMware Server on a system running a xen kernel

解决方法：
http://zackofalltrades.com/2008/09/changing-to-a-non-xen-kernel-in-centos-5-so-you-can-run-vmware-server/

To do this, you first need to install the kernel. yum makes this easy:

yum install kernel

Then remove xen and the kernel-xen packages:

yum remove xen kernel-xen

Then you have to specify which kernel you want to run in /boot/grub/grub.conf. In that file there’s a list of kernels available to boot from:

#boot=/dev/sda

default=1

timeout=5

splashimage=(hd0,0)/boot/grub/splash.xpm.gz

hiddenmenu

title CentOS (2.6.18-92.1.10.el5)

root (hd0,0)

kernel /boot/vmlinuz-2.6.18-92.1.10.el5 ro root=LABEL=/1 rhgb quiet

initrd /boot/initrd-2.6.18-92.1.10.el5.img

title CentOS (2.6.18-92.1.10.el5xen)

root (hd0,0)

kernel /boot/xen.gz-2.6.18-92.1.10.el5

module /boot/vmlinuz-2.6.18-92.1.10.el5xen ro root=LABEL=/1 rhgb quiet

module /boot/initrd-2.6.18-92.1.10.el5xen.img

The line that says default= specifies which kernel to load, where 0 is the first one listed in the file. In my case, I had to change the line that says default=1 to default=0 to specify the non-xen kernel.

Reboot, and you’re good to go – the VMware RPM will install, and VMware server runs just fine.

2.安装好虚拟机后 通过NAT模式链接网络，web管理没有问题，如果想使用远程桌面登陆会发现没有网内ip，只有vm自带的虚拟ip

解决方案：通过iptables转发服务器某端口到虚拟机的端口 使我们可以访问虚拟机上面的某些服务，比如远程桌面

启用ipv4端口转发功能 /etc/sysctl.conf 文件修改net.ipv4.ip_forward =1 即可

然后通过iptables配置，vm的NAT机制其实是通过虚拟网卡来实现虚拟机的网络共享的，所以你的服务器上面会有一块vm虚拟网卡，可以通过ifconfig看到

我的是：

vmnet8    Link encap:Ethernet  HWaddr 00:50:56:C0:00:08

inet addr:172.16.20.1  Bcast:172.16.20.255  Mask:255.255.255.0

进入虚拟机也可以看到虚拟机的ip也是这个网段的

下面我们来把服务器的某个端口 转发到虚拟机即可 iptables配置如下

192.168.0.90是服务器ip dport 12346 是服务器端的端口

172.16.20.130是虚拟机的ip ，3389是虚拟机的远程终端端口

重启iptables，通过远程桌面链接服务器ip：12346端口 成功了！

-A PREROUTING -d 192.168.0.90 -p tcp -m tcp –dport 12346 -j DNAT –to-destination 172.16.20.130:3389

-A POSTROUTING -d 172.16.20.128 -p tcp -m tcp –dport 3389 -j SNAT –to-source 172.16.20.1

3.因为多人来使用虚拟机，xp默认仅支持一个用户链接，所以需要hack一下远程服务 目前采用较多的是替换dll的方法 百度一下即可找到很多，这里不再叙述了

4.我们还需要测试win7 发现在vmware server选择安装版本的时候没有win7的选项，这时可以通过选择Microsoft Windows Vista 安装即可

附：mac osx远程桌面下载 ，大家可以通过mac直接链接到虚拟机了
http://www.microsoft.com/china/office/mac/downloads?pid=Mactopia_RDC&fid=68346E0D-44D3-4065-99BB-B664B27EE1F0#viewer

至此，基本的环境搭建完毕了 放几张截图吧

成功通过远程桌面链接到虚拟机环境

由于vmserver web Console 只支持windows 我在mac下开了个本地虚拟机截了一张Console操作的图

转载请注明:http://www.iamued.com/qianduan/1951.html
参考：vmwareserver for centos 安装方法：

Install

1. 在 VMware 中注册并下载 VMware Server 的 rpm 安装包
注册的时候要注意一点，即问你准备在windows下和linux下各安装多少个copy，当然要填多点了 ：）

2. 使用 root 用户登录要安装的主机

3. 安装 rpm

rpm -ivh VMware-server-2.0.1-156745.i386.rpm

4、进行配置

4.1运行

/usr/bin/vmware-config.pl

开始配置界面，下面，我们尽量详细的讲解一下配置过程

4.2

Do you want networking for your virtual machines? (yes/no/help) [yes]

是否需要配置网络，一般应该使用，所以使用缺省值。

4.3

Configuring a bridged network for vmnet0.

Please specify a name for this network.

[Bridged]vm-bridged

首先配置使用桥接的网络，如果你希望你的虚拟机直接暴露于外网（并不特指internet，通常是指暴露在宿主机所在的子网内），可通过桥接的方法，需要指定该网络的名称，例如 vm-bridged ，该名称将在创建和配置虚拟机时使用，请输入一个方便记忆的名称。

4.4

Your computer has multiple ethernet network interfaces available: eth0, eth1.

Which one do you want to bridge to vmnet0? [eth0]

选择在哪块网卡上配置桥接网络，一般应该选择你能够上网的网卡，当然，如果你比较熟悉网络，也可进行其它的配置。

4.5

Do you wish to configure another bridged network? (yes/no) [no]

是否需要在其它网卡上配置桥接网络，根据你的实际需要，一般是不需要的。

4.6

Do you want to be able to use NAT networking in your virtual machines? (yes/no) [yes]

是否需要通过NAT配置网络，如果你希望你的虚拟机暴露在外网（并不特指internet，通常是指暴露在宿主机所在的子网内），NAT是常用的一种虚拟机网络配置方法（类似你通过一台路由器上网），通过其往往能够得到更高的网速，通过在宿主机的iptables中进行配置，可以很容易让类似 BT，EMule等软件获得更高的下载速度，所以我们选择 yes。

4.7

Configuring a NAT network for vmnet8.

Please specify a name for this network. [NAT]vm-nat

配置使用NAT的网络名称，例如 vm-nat ，该名称将在创建和配置虚拟机时使用，请输入一个方便记忆的名称。

4.8

Do you want this program to probe for an unused private subnet? (yes/no/help) [yes]

是否自动配置NAT使用的子网，一般选择自动配置了，除非你希望对子网进行规划，通常会自动配置 172.16.*.* 这样的子网。

4.9

Do you wish to configure another NAT network? (yes/no) [no]

是否需要配置另外一个NAT网络，通常不需要。

4.10

Do you want to be able to use host-only networking in your virtual machines? [yes]

是否希望虚拟机支持 host-only 的网络，如果你不希望将虚拟机暴露于外网（并不特指internet，通常是指暴露在宿主机所在的子网内），应该在创建虚拟机时选择这种网络。

4.11

Configuring a host-only network for vmnet1.

Please specify a name for this network. [HostOnly] vm-hostonly

配置使用NAT的网络名称，例如 vm-hostonly ，该名称将在创建和配置虚拟机时使用，请输入一个方便记忆的名称。

4.12

Do you want this program to probe for an unused private subnet? (yes/no/help) [yes]

是否自动配置HostOnly使用的子网，一般选择自动配置了，除非你希望对子网进行规划，通常会自动配置 172.16.*.* 这样的子网。

4.13

Do you wish to configure another host-only network? (yes/no) [no]

是否需要配置另外一个HostOnly网络，通常不需要。

4.14

Please specify a port for remote connections to use [902]

指定远程连接端口，VMware Server安装完成后，可通过其一套Web界面进行访问，在这套界面中，有一个 Console（控制台）的功能，该功能通过在浏览器中安装一个插件，可以实现通过浏览器查看和管理被安装的虚拟机（如果你用过rdesktop、symantec pc-anywhere或KVM，你应该明白我在说什么），这个插件需要通过服务器上的这个端口获得数据（所以，如果你的宿主机前有防火墙，需要开通此端口的TCP协议），一般我们就用缺省的端口就好了，除非你的端口已经被占用，BTW，查看端口被谁打开的方法是：

lsof -i :902

如果出现结果，则可以通过进程号获得什么进程打开了此端口。

4.15

Please specify a port for standard http connections to use [8222]

同上，web访问界面使用的http端口，安装完成后，你可以通过 http://www.xxx.com:8222 来访问 VMware Server的Web管理界面，需要在防火墙内打开此端口的TCP协议。

4.16

Please specify a port for secure http (https) connections to use [8333]

同上，web访问界面使用的https端口，安装完成后，你可以通过 https://www.xxx.com:8333/ui 来访问 VMware Server的Web管理界面，需要在防火墙内打开此端口的TCP协议。

4.17

The current administrative user for VMware Server  is ”.  Would you like to specify a different administrator? [no]yes

这里我们一般不能用缺省选项，应该选择 yes ，这个配置的意思是说当前 VMware Server 的管理员尚未指定（”的意思可不就是没指定嘛，当然，也可能有别的含义，不过我们不是测试人员，没有必要都搞明白），是否需要指定–当然要指定了。

4.18

Please specify the user whom you wish to be the VMware Server administrator

选择宿主机上的一个已有的用户作为其管理员，这里的用户是指linux系统的用户，当然应该有密码了，一般为了安全起见，应该创建一个单独的用户，例如 vmware 什么的，并指定其密码，不过可能不需要有 home 目录，也最好不给它 shell。

4.19

In which directory do you want to keep your virtual machine files?

[/var/lib/vmware/Virtual Machines]

指定虚拟机存放的目录，即其 DataStore 的概念，这里可能会占用较多的空间（看你装多少操作系统，系统中有多少内容了），所以最好放置在有足够空间的位置，一般我们的 var 或 home 通常会是空间比较大的地方，所以，看你自己的情况了。

4.20

The path “/home/vmware/Virtual Machines” does not exist currently. This program

is going to create it, including needed parent directories. Is this what you

want? [yes]

如果你指定了一个不存在的目录，会提示你是否要自动创建，当然要创建了。

4.21

Please enter your 20-character serial number.

Type XXXXX-XXXXX-XXXXX-XXXXX or ‘Enter’ to cancel:

毕竟，只是一个free的软件，序列号还是需要的，在 VMware注册的时候会在激活邮件中获取到，你应该将其妥善保存好。

4.22

In which directory do you want to install the VMware VIX API binary files?

[/usr/bin]

选择 VMware VIX API binary files 的安装位置，VMware VIX API 是很有用的东东，特别是在你的虚拟机比较多，需要自己写脚本进行管理的情况下，你可以在脚本中通过调用VMware VIX API，完成虚拟机的启动、关闭、备份等日常工作，以后我们会对此进行专门的说明，请参看 VMware VIX API。

4.23

In which directory do you want to install the VMware VIX API library files?

[/usr/lib/vmware-vix/lib]

选择 VMware VIX API library files 的安装位置。

4.24

The path “/usr/lib/vmware-vix/lib” does not exist currently. This program is

going to create it, including needed parent directories. Is this what you want?

[yes]

是否自动创建 VMware VIX API library files 的安装目录，当然了。

4.25

In which directory do you want to install the VMware VIX API document pages?

[/usr/share/doc/vmware-vix]

指定VMware VIX API 的文档的安装位置。

4.26

The path “/usr/share/doc/vmware-vix” does not exist currently. This program is

going to create it, including needed parent directories. Is this what you want?

[yes]

是否自动创建 VMware VIX API 文档的安装目录，当然了。

4.27

The installation of VMware VIX API 1.6.2 build-156745 for Linux completed

successfully. You can decide to remove this software from your system at any

time by invoking the following command: “/usr/bin/vmware-uninstall-vix.pl”.

告诉你 VMware VIX API 已安装完成，可以在以后通过 /usr/bin/vmware-uninstall-vix.pl 进行卸载，如果你以后不想再使用 VMware Server（你可能有了更好的选择，例如开源的 KVM），你可以先使用 /usr/bin/vmware-uninstall-vix.pl 卸载 VIX API，然后使用rpm卸载VMware Server。

4.28

基本的配置过程就是以上这些，在配置完成后，系统会尝试自动启动虚拟机，并会在系统重启时自动启动 VMware Server。

5. 使用 VMware Server

作为安装和配置之后，下面我们来介绍一下如何使用 VMware Server。

5.1 配置防火墙

首先，如果你的宿主机上安装有防火墙，并且希望通过其它机器上的浏览器访问宿主机上的管理界面，需要在宿主机上的防火墙上进行设置，假设你使用 iptables，你可以

vi /etc/sysconfig/iptables

在其中适当的位置加入

-A RH-Firewall-1-INPUT -m state –state NEW -m multiport -p tcp –dport 902,8222,8333 -j ACCEPT

然后重启服务

service iptables restart

5.2 在浏览器中访问 VMware Server

在浏览器中输入 http://www.xxx.com:8222 ，其中 www.xxx.com 是你的宿主机的地址，如果你在本机访问，可以使用localhost ，此时，页面会自动跳转至 https://www.xxx.com:8333/ui ，并报出提示

www.xxx.com:8333 使用了无效的安全证书。

这是由于使用了非正式发布的证书，可以让浏览器接收该证书，当然，如果你愿意，也可以加入正式的证书，请参考 在VMware Server 中使用证书。需要注意的是，有时候会无法打开loading页面，例如在 firefox 的错误控制台内可以看到类似这样的错误

Error: vmtn is not defined

Source File: https://vm.myserver.com:8333/ui/

Line: 130

Error: unterminated string literal

Source File: https://vm.myserver.com:8333/ui/jslib-1.0.128374/.jslib.js

Line: 1, Column: 120

Source Code:

d(),TIMEOUT:vmtn.util.EventObject.nextId()});var $super=$class.parent.prototype;})(); (function(){var $class=new $Class(“vmtn.

Error: syntax error

Source File: https://vm.myserver.com:8333/ui/jslib-1.0.128374/.wbc.js

Line: 1, Column: 77

Source Code:

is._config.getFinalData();},setSelection:function(selection){var oldSelection=

Error: vmtn is not defined

Source File: https://vm.myserver.com.ch:8333/ui/

Line: 122

这时，我们清空浏览器的缓存，再重新访问，一般就可以解决问题了（如果你有更好的办法，请mail我：wanxiren@gmail.com ）。

5.3 创建虚拟机
按照提示一步一步创建就可以了，需要注意的是，最好在创建时选择的CPU多一些，内存也大一些，将来在真正使用时可以从大改小，但不能从小改大。对于虚拟机来说，配置稍微多一些的内存是必要的，这可以尽量避免换页操作，从而减少IO操作，以提升虚拟机性能。

5.4 安装操作系统
将虚拟机关机，然后创建CD/DVD drive，选择你要安装的操作系统镜像文件（iso文件），然后开机，即可进行操作系统的安装工作。

5.5 复制虚拟机
如果我们已经安装好了一个虚拟机，为了方便下次安装，可将其复制出来，对虚拟机关机，然后到虚拟机的数据目录下找到刚才装好的操作系统，将整个目录进行备份即可。下次安装时，将该目录复制到虚拟机的数据目录下，改名成你希望的名字，然后在web管理界面中创建虚拟机（创建时直接选择刚才复制过来的目录）并开机，在开机时，有一个重要的提示，就是问你这个虚拟机是“移动过来的”还是“复制过来的”，一般应该选择是“复制过来的”（这样会对其重新进行配置），然后就可以使用了。

5.6 使用Console
在虚拟机开机后，点击 Console 标签，第一次点击时会提示是否需要“Install plug-in”，这个插件就是在浏览器中操作虚拟机的界面，安装之，重启浏览器，就可以访问虚拟机了。