Martin

requestAnimationFrame （还有对应的 cancelAnimationFrame） 是新手（没错，说的是笔者本人）学习 JavaScript 实现原生动画的必经之路。这篇文章只单单讲如何简单实现这个函数，而如果你想了解关于 requestAnimationFrame 的概念及原理，请浏览本文最下方的参考文章。

为什么要自己实现？

笔者第一次决定用 JavaScript 实现动画时，就吃了亏。因为 requestAnimationFrame 在 IE9 及以下版本是不兼容的。详情可以看 caniuse。

然后就没办法，这个动画要能在 IE9 上跑，不然直接可以使用 CSS3。所以只能自己尝试去实现 polyfill。

我们在使用 requestAnimationFrame 时候，兼容性是先要考虑的（其实很多新的 API 也需要考虑这个问题）。而在兼容性不满足的情况下，我们就需要 polyfill。

去年年初，自己独自承担了公司一个嵌入式设备的后台管理界面的项目。整个项目经过了一年多的维护和改进，笔者感慨万千，遂成此文。

虽说项目规模不大，但却是实打实地经历了几次工程架构的演变。接下来请让我一一道来。

初始

刚开始，由于项目紧急，我并没有想太多，直接先用最熟悉的而且环境较容易搭建（公司设备系统问题）的 PHP 写起来。当然，当时公司还有一个要求是：全部代码加起来不能多于一兆（受限于存储容量）。

下面将给大家讲述一下博主使用vagrant虚拟机多次发生的问题及其解决方案。

令人窒息

哇，怎么又跑崩了？No disk space left…

之前用得好好的，然后出现了这样一个错误

运行命令

1

$ df -h

发现硬盘使用率100%

A fast and lightweight TR-069 Auto Configuration Server (ACS)

项目地址

Genieacs

目录结构

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
26
27
28
29
30
31
32
33
34
35
36
37
38

├── bin 存放入口文件
│   ├── genieacs-cwmp 主体程序可执行脚本
│   ├── genieacs-fs 文件服务可执行脚本
│   └── genieacs-nbi RESTFUL API服务可执行脚本
├── config 存放配置参数文件及拓展插件文件
│   ├── auth-sample.js
│   ├── auth.js
│   ├── config-sample.json
│   ├── config.json
│   └── ext-sample.js
├── debug
├── lib 存放核心文件
│   ├── api-functions.js
│   ├── auth.js 处理http认证
│   ├── cache.js
│   ├── cluster.js 调用cluster模块逻辑
│   ├── common.js 存放处理变量的方法
│   ├── config.js 获取配置参数
│   ├── cwmp.js
│   ├── db.js 数据库查询
│   ├── default-provisions.js
│   ├── device.js
│   ├── extension-wrapper.js
│   ├── extensions.js
│   ├── fs.js
│   ├── gpn-heuristic.js
│   ├── instance-set.js
│   ├── local-cache.js
│   ├── logger.js 日志
│   ├── nbi.js
│   ├── path-set.js
│   ├── query.js
│   ├── sandbox.js
│   ├── scheduling.js
│   ├── server.js 启动http服务
│   ├── session.js
│   ├── soap.js XMLSOAP处理(包括解析和打包)
│   └── versioned-map.js

关于cwmp

全称：CPE WAN Management Protocol，用于管理CPE。采用http协议进行通讯，消息格式为XML Soap。

消息数据模型及例子参考：cwmp

下面开始介绍一下好用的基于CWMP协议的客户端和服务端。