前端开发准备过程(node,npm)

以下环境为Ubuntu 14.10版本。

一、Nodejs

安装Nodejs

建议从nodejs网站下载二进制或源代码来安装,因为apt-get里的版本太旧了。

mkdir ~/nodejs
cd ~/nodejs
wget https://nodejs.org/dist/v4.5.0/node-v4.5.0-linux-x64.tar.xz
xz -d node-v4.5.0-linux-x64.tar.xz
tar xvf node-v4.5.0-linux-x64.tar
ln -s ~/nodejs/node-v4.5.0-linux-x64/bin/node /usr/local/bin/node
ln -s ~/nodejs/node-v4.5.0-linux-x64/bin/npm /usr/local/bin/npm

升级NPM

Node自带npm,npm是一个包管理器,最好用下面的命令升级一下(其中-g参数表示npm包是全局的,如果不加这个参数,表示是只限于当前项目的)。

npm install -g npm

安装NRM

npm官方的源在国内不是很稳定,可以使用nrm简化切换源的操作,nrm的使用方法很简单,可以看这个文章。主要就是nrm ls和nrm use这两条命令。

npm install -g nrm
ln -s ~/nodejs/node-v4.5.0-linux-x64/bin/nrm /usr/local/bin/nrm

nrm use影响~/.npmrc配置文件里的registry配置项,例如nrm use taobao后打开.npmrc文件:

registry=https://registry.npm.taobao.org/

二、开发环境(Atom)

安装Atom

atom.io下载并安装atom编辑器。

安装插件

  • atom-ternjs JS语法提示
  • atom-beautify 用于格式化代码
  • emmet 高效编码
  • file-icons 文件彩色图标
  • highlight-line 代码行高亮
  • highlight-select 高亮选择,双击选择的内容,会自动高亮全篇中的该内容

根据网络条件,在atom里安装插件经常不能成功,可以尝试命令行安装(包名可以在atom插件介绍里看到)。

apm install atom-html-preview

从git克隆代码

git clone git@git.oschina.net:myuser/myproject.git

下载依赖包

项目所依赖的包定义在package.json文件里。在项目所在目录下,执行下面的命令行自动下载和安装它们:

npm install

这个过程超级慢。

若提示“npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.1.2”,可以加“–no-optional”选项解决:

npm install --no-optional

启动前端应用

在项目所在目录执行下面的命令:

npm start

参考链接:

待续

DWR、XMLHTTP、XML-RPC和Flex

今天看到一篇文章,介绍DWR(Direct Web Remoting),它的作用是在javascript里通过iframe直接调用Java类中的方法,可以实现像Google Suggest那种在文本框中输入时自动完成的功能(例如输入“what is the best”),很酷哦。

联想起前一阵项目中级联下拉菜单的问题,使用这种技术也是一种不错的解决方法。实现和DWR类似功能的还有XMLHTTP和XML-RPC,前者可以看作是微软对request/response的一种包装,主要用于从远程服务器取得数据;后者也是一个十分简单的协议,通过在request/response中增加xml格式的信息达到调用远程方法的目的,但需要专用的XML-RPC服务器或在现有服务器中加入对XML-RPC的支持。

要说在Web应用程序中耍酷,不得不提现在越来越流行的Macromedia的Flex。它在你现有系统结构的基础上增加一个Flex服务器,用来把xml格式的代码转换为.swf文件(也就是flash了),让你的表现层变得异常丰富,不仅外观漂亮,还能实现如拖放、渐变以及各种动画效果,用广告词来说就是“提升用户体验”。如果你看过Macromedia网站上提供的案例,相信你很难不被打动。唯一的遗憾就是Flex的价格实在太贵了:至少买双CPU的License,价格$12,000!

和商业产品相比,虽然开源的RIA可能存在一些不足,但至少在小项目中用用问题不大,Laszlo就是其中之一。

反向链接referrer的原理

一直都不明白反向链接是怎么实现的,今天好像有点懂了。在这个网站看到,原来一段javascript代码就够了,一定是利用了浏览器的什么功能。

<script language="Javascript" src="http://www.downes.ca/referrers.js"></script>

倒,看了一下这个js的内容,原来document还有个referrer属性啊,现在完全没有神秘感了。

function write_ref() {
   document.write("<script language='Javascript' src='http://216.55.133.99/cgi-bin/data/referrers.cgi?in=" + document.referrer + "&out=" + document.location + "'>");
   document.write("</");
   document.write("script>");
}
write_ref();

不过博客园这里好像是不让插入script的,插入的script会被过滤。而且也不能插入form,因为会和搜索的那个form嵌套。

[Eclipse]国际化你的应用程序(下)

在本文的上篇里,介绍了使用Eclipse的国际化工具对程序中的字符串进行外向化处理(Extenalize),可以看出步骤是十分简单的。实在是很喜欢Eclipse这样的工具,它可以为你做很多事情,干净漂亮,但绝不会在未经你同意的情况下做任何动作,所谓“利器”也!

现在说说在资源中含有参数的情况怎样处理。比如在对话框中要显示信息:“帐户目前还有 900 元,截止日期为 2004-9-1,谢谢!”,因为中间的数字和日期是动态的,所以不能直接放在资源文件中。但是请放心,大可不必为这条信息指定三个资源(被数字和日期分开的三个字符串),可以在资源文件(.properties)中指定资源为这个样子:

my.resource.key=帐户目前还有 {0} 元,截止日期为 {1},谢谢!

其中{0}和{1}表示将替换为动态的值,然后在程序里写:

Float amount = ...;
Date dt = ...;
String msg=MessageFormat.format(Messages.getString("my.resource.key"), new Object[]{amount,dt});

这样,msg变量里就是动态生成的提示信息了。你很可能希望对日期进行格式化处理,要实现这个功能也很简单,只要稍微修改一下资源,如下:

帐户目前还有 {0} 元,截止日期为 {1,date,yyyy-MM-dd},谢谢!

确实简单吧,不知道你用没用过这个写法,我是在PPP项目中才第一次使用的,所以赶紧介绍一下了,呵呵。

接下来的问题是编码,资源文件写为英文是没有问题的,可以正常显示,但汉字是不能直接写在资源文件里的,要转换为unicode才可以。jdk本身提供了native2ascii工具,可以实现这个功能,但用命令行总是不太方便,虽然也有人很喜欢使用命令行的感觉……如果你愿意Eclipse为你服务,大可以使用我下面介绍的两个插件,利用它们,你根本不需要显式转换编码这一步了。

第一个是Properties Editor,好象是日本人写的,安装后它会与扩展名为.properties的文件相关联,使用它打开资源文件,可以在本地语言与unicode视图之间切换,一般情况下编辑本地语言就可以了,保存时会自动转换为unicode。当需要查找某个资源(值)并修改时这个编辑器非常方便,例如想把资源里所有“你好”改为“您好”,如果面对的是一堆unicode码还真是头疼。安装这个插件需要2.1.1版本以上的Eclipse。

另一个我们在项目中经常使用的插件叫……我还真不知道它全名叫什么,在我这里的打包文件名是“29 Localization Editor”,它是一个非常方便的国际化翻译工具。用它打开扩展名为.properties的文件后,可以新建key,或者新建语言,你要做的只是在表格中把尚未翻译成新语言的资源值填下而已,可以选择只显示未翻译的条目或是全部条目。不过很对不起,我还没找到网上的下载地址,如果需要请和我联系吧。

图1 Localization Editor使用界面

好了,关于Eclipse的国际化先介绍到这里了。如果你的应用程序是Eclipse插件,还可以更进一步:把资源文件打成语言包。关于这种方式(Fragment)的介绍,以后有时间再写吧。

[Eclipse]国际化你的应用程序(上)

记得几年前汉化软件一般是用二进制编辑工具在编译后的文件中查找和替换英文单词,这个过程需要使用很多技巧,非常的麻烦。而现在,在开发时对应用程序进行国际化处理已经越来越成为一个必不可少的步骤了。例如这次我参与的项目是给台湾客户做的,他们要求英文和繁体中文两个版本,幸好我们使用的开发工具是Eclipse,利用它的国际化功能可以很方便的将写在代码里的字符串提出到独立的资源文件中,这里用一个简单的例子说明一下这个过程。

在Eclipse里建立一个名为nls-test的工程(也可以国际化已有工程),新建一个类NLSTest,内容如下:

public class NLSTest {
 public NLSTest() {
  String str1="Hello world!";
  System.out.println(str1);
 }
 public static void main(String[] args) {
  new NLSTest();
 }
}

现在,这个类的输出是在代码里写死的,如果要改变就必须修改代码然后重新编译。下面我们利用Eclipse解决这个问题。在导航器(Package Explorer)里右键单击这个文件,选择Source -> Externalize Strings,就会打开一个对话框,在这里列出了该类中尚未国际化的字符串,见下图。

图1 国际化向导第一步

单击每个字符串前面的小方块可以选择对该串1、进行国际化处理2、永不进行国际化处理3、这次不处理。我们选择要对这个字符串进行国际化处理,并把它的Key修改为比较好理解的名称hello,注意在对话框最上方可以指定一个通用的前缀,这个值会加在每个Key前面作为最终写在资源文件(扩展名是.properties)里的Key名称。好,按下一步继续。

在这里要指定properties文件的名称,如果需要的话要指定一个用于从properties文件中取资源的类,一般是XXXMessages的格式,再按下一步,会显示一个所作更改的确认列表,确认后按Finish按钮完成向导。

可以看到Eclipse为我们生成了NLSTestMessages.java和NLSTest.properties,打开后者会看到里面只有这么一句:

NLSTest.hello=Hello world!

而前者NLSTestMessages的作用是根据参数Key从后者取对应的字符串值,看一看现在的NLSTest.java就知道了,它的内容现在是这样的(只列出构造方法,main方法同上):

public NLSTest() {
  String str1=NLSTestMessages.getString("NLSTest.hello"); //$NON-NLS-1$
  System.out.println(str1);
}

后面的注释是Eclipse自己用的,标有这个注释的字符串在国际化将被忽略。注释中的数字1表示要忽略的是该行中第一个字符串,如果一行语句里有多个字符串被忽略,将会有多个这样的注释,但数字会各不相同,像这样:

//$NON-NLS-1$ //$NON-NLS-2$ //$NON-NLS-3$

好了,现在这个类的国际化处理就算完成了。要想让这个类可以根据用户所在地区输出不同语言的结果,可以在NLSTest.properties同一目录下创建名为NLSTest_XX.properties的文件,其中XX表示国家名称,例如中国是zh_CN或zh_TW,法国是FR等等。新创建的文件里也要有和原来文件相同的名值对,但值是不同语言的,NLSTestMessages类会根据用户机器的地区设置值自动从不同的资源文件里取值,这样就达到了国际化的目的。要在自己的机器上测试运行结果,可以在Eclipse的运行设置里面加上这样的参数:-nl zh_TW,这样就不用费力气设置区域了。(2012/5/4更新:此方法可能有误,在Eclipse3.6里是启动程序时在VM arguments里加上-Duser.language=XXX即可以所需要的语言环境启动程序)

国际化的原理很简单,Eclipse提供的这个功能使国际化变得更容易了。不过关于国际化还有一些细节问题,包括对含参数资源的处理,字符编码处理等等,下篇将对它们进行讨论。