由于框架使用的是 React ， 多语言方案也选择了生态系统下的 react-intl 模块，它是雅虎 FormatJS 计划的一部分。

翻译字符串替换

使用 react-intl 替换字符串用以翻译很方便。只需将整个业务父组件包裹在 IntlProvider 中：

1
2
3
4
5
6
7
8
9

ReactDOM.render(
    <IntlProvider
        locale={usersLocale}
        messages={translationsForUsersLocale}
    >
        <App/>
    </IntlProvider>,
    document.getElementById('container')
);

一、问题现象

一个简单Node服务在500并发的压力下长期运行时会出现内存占用不断增长的问题。

二、分析过程及方法

1.性能压测工具http_load

http_load 是用来测试web服务器吞吐量和负载的测试工具。使用方法示例如下：

1
2
3
4
5
6
7
8
9
10
11

// 命令行执行
$ ./http_load -rate 5 -seconds 10 urls.txt
// 结果
49 fetches, 2 max parallel, 289884 bytes, in 10.0148 seconds
5916 mean bytes/connection
4.89274 fetches/sec, 28945.5 bytes/sec
msecs/connect: 28.8932 mean, 44.243 max, 24.488 min
msecs/first-response: 63.5362 mean, 81.624 max, 57.803 min
HTTP response codes:
  code 200 -- 49

概述：简介及使用

本文先介绍 koa 的简单使用和一些背景概念，已经了解的可以跳过直接到 co 和 koa 执行分析部分。

koa的简介如下：

由 Express 原班人马打造的 koa，致力于成为一个更小、更健壮、更富有表现力的 Web 框架。使用 koa 编写 web 应用，通过组合不同的 generator，可以免除重复繁琐的回调函数嵌套，并极大地提升常用错误处理效率。Koa 不在内核方法中绑定任何中间件，它仅仅提供了一个轻量优雅的函数库，使得编写 Web 应用变得得心应手。

简单使用

使用 koa 构建一个 web 应用有多简单？先来看一个使用例子 app.js：

1
2
3
4
5
6
7
8
9

var koa = require('koa');
var app = koa();
// 中间件
app.use(function *(){
  this.body = 'Hello World';
});
app.listen(3000);

简介

DUBBO是一个分布式服务框架，致力于提供高性能和透明化的RPC远程服务调用方案，是阿里巴巴SOA服务化治理方案的核心框架，每天为2,000+个服务提供3,000,000,000+次访问量支持，并被广泛应用于阿里巴巴集团的各成员站点。

基本架构

其中 Monitor 和 Container 暂时略过不讲：

• Provider: 暴露服务的服务提供方。
• Consumer: 调用远程服务的服务消费方。
• Registry: 服务注册与发现的注册中心。
• Monitor: 统计服务的调用次调和调用时间的监控中心。
• Container: 服务运行容器。

简介与背景

由于官方的NPM库是完全开放的，任何人都可以浏览和下载，所以公司私有的、不便对外公开的node模块就没法上传和下载，也无法使用NPM的版本管理功能。这就需要在公司内部建立私有的NPM服务。

目前官方给出的解决方案是 npm-registry-couchapp + couchDB 的解决方案。但是couchDB的安装配置过程相对来说有点复杂。这里使用较简单快速的方法，也就是使用alibaba团队的 cnpmjs.org 的方案。

cnpmjs.org 依赖环境如下，数据库只需要选择其中一种就可以：

在前端工程化中，目前最流行的是使用gulp构建前端代码。但gulp只是提供了一种流式的文件处理方式，具体的功能需要各种插件来实现。gulp插件种类繁多，各自实现了特定的功能，无法全部了解和熟悉，那么在决定构建方案的时候难免选择困难，无法快速准确地选择出自己需要插件。

但事实上一些常用的功能，已经有一些流行而成熟的插件被广泛地应用了，我们不需要自己大海捞针一样去搜寻和评估一大片插件才能选择到合适的插件。本文就是基于‘HTML5页面node化’的项目中使用到的插件，形成一个暂时较为通用的gulp构建工作流。随着项目的积累和深入，以后将会补充和修改。

注 ：gulp的基本使用方法将不会赘述。

1. 第一步 - 清理上次构建的目标目录

清理即是删除上次构建产生的文件。一般情况下，构建的目标目录需要和源码目录分开。这样在清理时，直接将构建的目标目录（这里为dist目录）下的所有文件删除即可。

背景

原本 Web端 使用的 flash 播放器是 ckplayer，基本能满足当时的使用需求。但是，服务器端推流改为RTMP后，ckplayer 在 播放画面真正出现前会出现短暂的黑屏，这个问题没法解决，最后只能改为使用百度的 cyberplayer 播放器1.5版本。

百度播放器 可以设置onMeta事件 知道画面出现的真正时间，所以可以在画面出现前加一层loading的div覆盖播放器，等到画面出现时再隐藏这一层div。实现代码如下：

1
2
3
4
5
6
7
8
9
10
11

// metadata事件
t5Player.onMeta(function(event){
    if(t5Player.getState() == 'PLAYING'){
        sum++; // 为避秒长时间显示loading 画面，使用sum设置等待时间上限
    }
    if((!!event.metadata.renderstate && !!event.metadata.stagevideo) || sum == 30){
        setTimeout(function(){
        // todo 隐藏 loading 画面          
        },500);
    }
});

在决定使用百度播放器前，还试用过 jwplayer 播放器。jwplayer是国外团队开发的比较成熟的Web播放器，支持完善的api接口，包括上文的metdata事件。但是免费版不支持hls流的播放，且不能用于商业活动，收费版需要授权使用。所以只能退而求其次，使用百度播放器。但是百度播放器的源码是不公开的，出了问题很难排查解决，在使用过程中确实遇到了一些问题，所以产生了需要自有的web播放器的需求。

vagrant介绍和简单使用

vagrant介绍

百度百科：

Vagrant是一个基于Ruby的工具，用于创建和部署虚拟化开发环境。

通俗讲vagrant就是用于管理虚拟机的，但是需要依赖虚拟化软件的支持，比如Oracle的VirtualBox（常用）或者VMwave。它还可以配合puppet或者chef自动化配置环境。

安装和下载

• 虚拟机VirtualBox

下载地址：https://www.virtualbox.org/wiki/Downloads

建议使用4.3.12版本，不要安装最新版。安装流程直接按照提示一直下一步。

• 安装Vagrant

1.创建对象的各种方式对比

工厂模式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

(function(){
    console.info("工厂模式");
    // 工厂模式
 
    function createPerson(name, age, job){
        var o = new Object();
        o.name = name;
        o.age = age;
        o.job = job;
        o.sayName = function(){
            console.log(this.name);
        };
        return o;
    }
 
    var person1 = createPerson("name1", 29, "job1");
    person1.sayName();
    var person2 = createPerson("name2", 30, "job2");
    person2.sayName();
 
    /**
     * 优点：能创建相似对象。
     * 缺点：不能识别对象。
     */
}());

介绍

Fiddler是一个http协议调试代理工具，它能够记录并检查所有你的电脑和互联网之间的http通讯，设置断点，查看所有的“进出”Fiddler的数据（指cookie,html,js,css等文件，这些都可以让你胡乱修改的意思）。

下载和安装

下载地址 安装过程

基本界面

• 监听开关：开启或者关闭。capturing表示开启状态。
• 监听类型：有 监听所有进程请求(All processes)、监听浏览器请求(Web browsers)、监听非浏览器请求(Non-Browser)和隐藏所有(Hide All)
• 请求列表：请求列表的信息分别有 结果(Result)，协议(Protocol)，主机名(Host)，网页地址(URL)，内容大小(Body)，缓存(Caching)，响应的HTTP内容类型(Content-Type)，请求所运行的程序(Process)，注释(Comments)，自定义(Custom)
• 功能区：包括各种数据流查看器、日志、重定向、请求构造、过滤器、时间轴、统计图表、脚本。