backbonephp

㈠ 前端工程师都需要学习什么

随着移动互联网的发展，web前端逐渐受到企业的重视，前端开发人员的薪资也水涨船高，越来越多的人看好前端行业的发展，想要转行加入。下面，给大家分享一份web前端学习路线图，希望对初学者有所帮助。Web前端行业的发展，让前端人员能完成比以前更多的职责范围，所以未来前端可以宽口径就业，前景非常好。

对于零基础的人而言，要怎么学习web前端呢?

1、 前端页面重构。主要内容为PC端网站布局、Photoshop 工具及切图、H5移动端网页布局、HTML5+CSS3新特性与交互。学习目标是完成PC端网站布局，可实现响应式布局，一套代码适配 PC 端、移动端、平板设备等。

2、 前后端网页交互。主要内容为javaScript语法全面进阶、ES6 到 ES10 新语法实践、jQuery 应用及插件使用、设计模式及插件编写、封装JS工具库及Web APIS、AJAX+php+MySQL前后端交互、前端工程化与模块化应用以及PC 端全栈开发项目等。学习目标是可以掌握前端工程化工具，如 git、gulp、webpack 等，搭建项目及开发项目。

3、 Node.js + 前端框架。主要内容为Node.js 全面进阶、Koa2+MongoDB搭建服务、Vue.js 框架、React.js 框架、小程序云开发与小程序框架、原生APP与混合APP、数据可视化与桌面应用等。学习目标是掌握桌面应用及可视化大数据，实现复杂数据展示类项目，能够独立完成前后台相关功能，胜任HTML5全栈开发工程师职位。很多学习web前端的朋友都希望在学成后能找到一份满意的工作，所以我们在学习过程中一定要注意实战经验的积累，如果你所学的东西对企业没有用，那你所做的一切都是无用功

㈡ 关于七牛云存储自定义URL的问题

近段时间将使用七牛云存储来存放用户上传的数据，客户端通过七牛的js-sdk与七牛交互，服务端C#实现了七牛相关的接口。在这过程中多多少少遇到点问题，在这里总结一下。原文： 使用七牛云存储的一些经验总结
599错误处理
如果在与七牛的交互中出现http状态码为599的错误，一句话，不要犹豫，直接联系七牛技术支持 。七牛的文档也在很多地方提到这个错误，都是指导大家去联系技术支持的。笔者是在分块上传后的 mkfile 调用时出现的，联系技术支持后，说是调整了一下，让我重试。后来就好了...
分块上传无法从回调中获得文件的原始名
简单上传采用的是multipart/form-data方式上传，七牛服务端能够从请求中获得文件的原始名，并支持使用魔法变量 $(fname) 回调业务服务器。不过当使用分片上传的时候情况有所不同。分片上传需要在最后调用 mkfile ，来将分片拼接起来。但是， mkfile 接口支持普通的请求，并没有附带文件名，所以七牛也就无法获得文件名，此时从 $(fname) 中是取不到文件名的。这个问题我也向七牛技术支持提交了问题，得到的结果是使用自定义变量 mkfile 支持将自定义变量放在url中，回调的时候自定义变量可以传递给业务服务器。
慎用图片预处理
七牛云支持很多对文件的预处理，其中最常用的应该就是图片预处理了，可以对图片的大小做变换等。七牛推荐使用GET的方式直接指定图片处理结果的url，像这样：
http://qiniuphotos.qiniudn.com/gogopher.jpg?imageView2/1/w/200/h/200

处理后的图片会自动缓存，用户不用关心，只要每次访问都用这个url就行了。然而，笔者在开始的时候，为了保持与其他文件形式统一的处理方法，对图片使用了预处理（因为视频什么的只能预处理），即在token中指定了预处理。此时问题出现了，从后台的日志看到，图片的预处理通知回调竟然比正常的上传成功回调还要快！这就导致预处理结果到来之前，我的业务服务器的数据库中还没有这个图片，无法保存预处理结果了。所以 推荐还是使用url直接处理，对图片要慎用预处理
视频文件无法快进播放
通常用户在观看视频的时候都会根据自己的喜好，快速将视频定位到指定的时间播放。实现这个功能，需要视频本身有关键帧信息、服务端需要支持关键帧播放请求，在 这篇文章 中有详细讨论。
但是笔者发现，在使用七牛云转化后的视频，这样做是无效的。于是咨询技术支持，得到的答案是：转化的文件是具有关键帧的，但七牛使用CDN加速，所以关键帧请求需要CDN的支持，如果想要用这个功能的话，需要单独联系销售或技术支持在CDN上配置，而且时间比较长。笔者联系了销售和技术支持，说是帮我配置，但到现在还没有搞定，因为最近这个也不是特别重要，所以也没有跟下去。
Callback校验
这是可选的一个步骤。由于七牛云会在上传完成之后回调业务服务器，所以理论上说业务服务器需要校验这个回调的合理性。原理在七牛的 文档 中有，需要用到 HMAC-SHA1 签名函数。但是七牛的sdk中没有提供直接的方式来做校验，在研读文档、多次失败和查看sdk源码后，笔者终于校验成功了。关键的分歧在于，文档中的这句话：

获取明文：data = Request.URL.Path +”\n” +Request.Body

这里的 Request.URL.Path 是否包含Querystring?答案是包含的!下面是笔者C#服务端的校验代码，使用的是ASP.NET Web Api：
```C#
byte[] key = System.Text.Encoding.UTF8.GetBytes(Qiniu.Conf.Config.SECRET_KEY);
using (HMACSHA1 hmac = new HMACSHA1(key))
{
var t = filterContext.Request.Content.ReadAsStringAsync();
t.Wait();
string rawbody = t.Result;
log.DebugFormat("request's rawbody : {0}", rawbody);
string text = filterContext.Request.RequestUri.PathAndQuery + "\n" + rawbody;
log.DebugFormat("PathAndQuery + \n + rawbody : {0}", text);
byte[] digest = hmac.ComputeHash(System.Text.Encoding.UTF8.GetBytes(text));
string computed = Qiniu.Util.Base64URLSafe.Encode(digest);
log.DebugFormat("Computed hash after base64 : {0}", computed);
IEnumerable<string> auths;
if (filterContext.Request.Headers.TryGetValues("Authorization", out auths) && auths.Count() == 1)
{
string auth = auths.First();
log.DebugFormat("Authorization in header : {0}", auth);
if (auth.StartsWith("QBox "))
{
var arr = auth.Substring(5).Split(':');
if (arr.Length == 2)
{
if (arr[1] != computed)
{
log.ErrorFormat("Authorization failed. Since auth from header {0} not equals computed {1}", arr[1], computed);
}
else
{
log.Debug("Authorization success.");
//only pass can be return
return;
}
}
else
{
log.Error("Callback Authorization's format is invalid, can not find two part after split by ':'.");
}
}
else
{
log.Error("Callback Authorization's format is invalid, missing leading 'QBox '.");
}
}
else
{
log.Error("The request from qiniu callback is missing 'Authorization'");
}

filterContext.Response = filterContext.Request.CreateResponse(System.Net.HttpStatusCode.Forbidden);

}

如下几个注意点：

- 明文应当是请求的path+querystring部分和rawbody
- 对于.NET而言，明文和key都需要用UTF-8编码变换成字节才能进行签名。而php中的hash_hmac函数完全不用这么复杂...
- 签名的结果再用base64的url安全的方式编码，再与请求的http头部的Authorization比较

建议官方在文档中加入一些相对底层一些的编程语言的实现，php太高端了...

## js-sdk实现略显粗糙 ##

在使用过程中，我发现[官方的js-sdk](https://github.com/qiniupd/qiniu-js-sdk/)有几个我觉得不好的地方：

**不能为每个文件获取UpToken**

试想，在文件上传过程中有获取UpToken是必须的，而且UpToken又需要包含预处理指令，不同的文件显然需要不同的UpToken，而在js-sdk的实现中，只在初始化这个上传组件对象的时候请求一次上传凭证，后面所有的上传都需要使用这个预先得到的UpToken：

```javascript
uploader.bind('Init', function(up, params) {
getUpToken();
});

于是我修改了这部分，在 BeforeUpload 事件中请求UpToken。建议官方考虑更改这个地方
只能实现分片上传，无法断点续传
js-sdk的实现在分片上传的实现上，是很简单的，不仅没有使用分片，而是分块（一块4m，调用mkblk），而且没有实现持久化ctx，或者类似的回调或接口。4m分块这个问题还可以不追究，没有实现持久化ctx就说不过去了，不持久化怎么实现断点续传撒?!就算不实现，也应该给出回调的入口，让调用者来实现持久化，而我实在无法找到这个'空子'可钻，只能直接在源码上改动了。
没有复用流行类库的东西
这个其实算不上问题，因为作为一个不依赖jquery的sdk，当然不能使用jquery现成的东西，比如ajax。不依赖jquery就算了，依赖plupload是几个意思嘛，还依赖全局对象...于是最后，我干脆自己将sdk改成了Backbone的类，将不要的东西统统去掉，使用jquery和underscore简化代码了...

㈢ 面试官问如何学习前端的怎么回答

现在从事IT方向的人有很多。由于Web前端薪资水平高，职业前景广阔，岗位缺口大，就业口径宽，想通过学习Web前端开发从而进入到该行业工作的人越来越多。当然也有很多人在犹豫不知道web前端开发都学哪些内容？零基础的可以学会吗？好不好学.
前端涉及到的东西太多了，自己也很浮躁，看了挺多书，可是代码缺敲得却不多。技术菜，又什么都想学，比如现在纠结要不要先学scss或者php或者angularjs,backbone等框架，还是深入学习html5+css3？

在我看来前端这20%的东西大概就是常用的html标签，css的盒子模型，基本的原生js，以及熟练使用jquery，ajax，常见浏览器的兼容。拿下这些东西意义非凡，一方面证明你适合做前端这份工作，另一方面这些技能能让你找到一份工作。让你能够从容地去学习剩下的80%。
总之就是专心对付最重要的东西，那些什么less、sass、angular这类的东西，当你把我之前说的基础打好之后，学习起来畅通无阻，随学随用。最后我觉得最难的就是实践，只有实践才能学到真正的技术，新人很难参与一些有价值有意义的项目，没有这些项目又很难成长，所以自己有项目可参与应该珍惜，没项目应该多造一些有价值的轮子。

㈣ Web前端的学习顺序及内容是什么

第一阶段:

HTML CSS:HTML进阶、CSS进阶、div css布局、HTML css整站开发。

JavaScript基础:Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。

JS基本特效:常见特效、例如:tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。

JS高级特征:正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础。

JQuery:基础使用悬着器、DOM操作、特效和动画、方法链、拖拽、变形、JQueryUI组件基本使用。

第二阶段:

HTML5和移动Web开发

HTML5:HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、Web Socket、Canvas。

CSS3:CSS3新选择器、伪元素、脸色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作。

Bootstrap:响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS。

移动Web开发:跨终端WEB和主流设备简介、视口、流式布局、弹性盒子、rem、移动终端JavaScript事件、手机中常见JS效果制作、Zepto.js、手机聚划算页面、手机滚屏。

第三阶段:

HTTP服务和AJAX编程

WEB服务器基础:服务器基础知识、Apache服务器和其他WEB服务器介绍、Apache服务器搭建、HTTP介绍。

PHP基础:PHP基础语法、使用PHP处理简单的GET或者POST请求。

AJAX上篇:Ajax简介和异步的概念、Ajax框架的封装、XMLHttpRequest对象详细介绍方法、兼容性处理方法、Ajax框架的封装、Ajax中缓存问题、XML介绍和使用。

AJAX下篇:JSON和JSON解析、数据绑定和模板技术、JSONP、跨域技术、图片预读取和lazy-load技术、JQuery框架中的AjaxAPI、使用Ajax实现爆布流案例额。

第四阶段:

面向对象进阶

面向对象终极篇:从内存角度到理解JS面向对象、基本类型、复杂类型、原型链、ES6中的面向对象、属性读写权限、设置器、访问器。

面向对象三大特征:继承性、多态性、封装性、接口。

设计模式:面向对象编程思维、单例模式、工厂模式、策略模式、观察者模式、模板方法模式、代理模式、装饰者模式、适配器模式、面向切面编程。

第五阶段:

封装一个属于自己的框架

框架封装基础:事件流、冒泡、捕获、事件对象、事件框架、选择框架。

框架封装中级:运动原理、单物体运动框架、多物体运动框架、运动框架面向对象封装。

框架封装高级和补充:JQuery框架雏形、可扩展性、模块化、封装属于传智自己的框架。

第六阶段:

模块化组件开发

面向组件编程:面向组件编程的方式、面向组件编程的实现原理、面向组件编程实战、基于组件化思想开发网站应用程序。

面向模块编程:AMD设计规范、CMD设计规范、RequireJS，LoadJS、淘宝的SeaJS。

第七阶段:

主流的流行框架

Web开发工作流:GIT/SVN、Yeoman脚手架、NPMer依赖管理工具、Grunt/Gulp/Webpack。

MVC/MVVM/MVW框架:Angular.js、Backbone.js、Knockout/Ember。

常用库:React.js、Vue.js、Zepto.js。

第八阶段:

HTML5原生移动应用开发

Cordova:WebApp/NativeApp/HybirdApp简介、Cordova简介、与PhoneGap之间的关系、开发环境搭建、Cordova实战(创建项目，配置，编译，调试，部署发布)。

Ionic:Ionic简介和同类对比、模板项目解析、常见组件及使用、结合Angular构建APP、常见效果(下拉刷新，上拉加载，侧滑导航，选项卡)。

React Native:React Native简介、React Native环境配置、创建项目，配置，编译，调试，部署发布、原生模块和UI组件、原生常用API。

HTML5 :HTML5 中国产业联盟、HTML5 Plus Runtime环境、HBuilder开发工具、MUI框架、H5 开发和部署。

第九阶段:

Node.js全栈开发

快速入门:Node.js发展、生态圈、Io.js、Linux/Windows/OS X环境配置、REPL环境和控制台程序、异步编程，非阻塞I/O、模块概念，模块管理工具、开发流程，调试，测试。

核心模块和对象:全局对象global，process，console，util、事件驱动，事件发射器、加密解密，路径操做。

祝你学有所成！

如果大家对于学习前端有任何不懂的可以随时来问我，我给你提供一个非常不错的前端交流学习qun：前面是一一四，中间是一八八，后面是四九三一。有问题就在里面问我，这样你可以少走很多弯路，做起来有效率，记得多跟有经验的人交流，别闭门造车。如果没有比较好的教程，也可以管我要。

㈤ web前端都要学习什么课程

WEB前端学习应该要学习那些课程？

在这里我们把前端学习分为9个阶段，进行学习：

第一阶段：

HTML+CSS:

HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、

JavaScript基础：

Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。

JS基本特效：

常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。

JS高级特征：

正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础、

JQuery：基础使用

悬着器、DOM操作、特效和动画、方法链、拖拽、变形、JQueryUI组件基本使用。

第二阶段：

HTML5和移动Web开发

HTML5：

HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、WebSocket、Canvas.

CSS3:

CSS3新选择器、伪元素、脸色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作。

Bootstrap:

响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS。

移动Web开发：

跨终端WEB和主流设备简介、视口、流式布局、弹性盒子、rem、移动终端JavaScript事件、手机中常见JS效果制作、Zepto.js、手机聚划算页面、手机滚屏。

第三阶段：

HTTP服务和AJAX编程

WEB服务器基础：

服务器基础知识、Apache服务器和其他WEB服务器介绍、Apache服务器搭建、HTTP介绍。

PHP基础：

PHP基础语法、使用PHP处理简单的GET或者POST请求、

AJAX上篇：

Ajax简介和异步的概念、Ajax框架的封装、XMLHttpRequest对象详细介绍方法、兼容性处理方法、Ajax框架的封装、Ajax中缓存问题、XML介绍和使用。

AJAX下篇：

JSON和JSON解析、数据绑定和模板技术、JSONP、跨域技术、图片预读取和lazy-load技术、JQuery框架中的AjaxAPI、使用Ajax实现爆布流案例额。

第四阶段：

面向对象进阶

面向对象终极篇：

从内存角度到理解JS面向对象、基本类型、复杂类型、原型链、ES6中的面向对象、属性读写权限、设置器、访问器。

面向对象三大特征：

继承性、多态性、封装性、接口。

设计模式：

面向对象编程思维、单例模式、工厂模式、策略模式、观察者模式、模板方法模式、代理模式、装饰者模式、适配器模式、面向切面编程。

第五阶段：

封装一个属于自己的框架

框架封装基础：

事件流、冒泡、捕获、事件对象、事件框架、选择框架。

框架封装中级：

运动原理、单物体运动框架、多物体运动框架、运动框架面向对象封装。

框架封装高级和补充：

JQuery框架雏形、可扩展性、模块化、封装属于传智自己的框架。

第六阶段：

模块化组件开发

面向组件编程：

面向组件编程的方式、面向组件编程的实现原理、面向组件编程实战、基于组件化思想开发网站应用程序。

面向模块编程：

AMD设计规范、CMD设计规范、RequireJS，LoadJS、淘宝的SeaJS。

第七阶段：

主流的流行框架

Web开发工作流：

GIT/SVN、Yeoman脚手架、NPM/Bower依赖管理工具、Grunt/Gulp/Webpack。

MVC/MVVM/MVW框架：

Angular.js、Backbone.js、Knockout/Ember。

常用库：

React.js、Vue.js、Zepto.js。

第八阶段：

HTML5原生移动应用开发

Cordova：

WebApp/NativeApp/HybirdApp简介、Cordova简介、与PhoneGap之间的关系、开发环境搭建、Cordova实战(创建项目，配置，编译，调试，部署发布)。

Ionic：

Ionic简介和同类对比、模板项目解析、常见组件及使用、结合Angular构建APP、常见效果(下拉刷新，上拉加载，侧滑导航，选项卡)。

ReactNative：

ReactNative简介、ReactNative环境配置、创建项目，配置，编译，调试，部署发布、原生模块和UI组件、原生常用API。

HTML5+：

HTML5+中国产业联盟、HTML5PlusRuntime环境、HBuilder开发工具、MUI框架、H5+开发和部署。

第九阶段：

Node.js全栈开发：

快速入门：

Node.js发展、生态圈、Io.js、Linux/Windows/OSX环境配置、REPL环境和控制台程序、异步编程，非阻塞I/O、模块概念，模块管理工具、开发流程，调试，测试。

核心模块和对象：

全局对象global，process，console，util、事件驱动，事件发射器、加密解密，路径操作，序列化和反序列化、文件流操作、HTTP服务端与客户端。

Web开发基础：

HTTP协议，请求响应处理过程、关系型数据库操作和数据访问、非关系型数据库操作和数据访问、原生的Node.js开发Web应用程序、Web开发工作流、Node.js开发Blog案例。

快速开发框架：

Express简介+MVC简介、Express常用API、Express路由模块、Jade/Ejs模板引擎、使用Express重构Blog案例、Koa等其他常见MVC框架。

最后学习计划有啦，那就赶快开始学习吧！

㈥ Java和PHP哪个比较好

以前对这两种语言我都有进行过较长时间研究，当然，现在这两个我都已经不弄了，换node了（这是在后端方面哈，另一部分工作是web前端），我不说哪个好，我只说说个人感觉吧，我先假设你是想要做后台开发的，而不是要做安卓，不然这没法比呀，php和java都蛮成熟的，所以学哪个你都不吃亏，但是实事求是的讲，在实际工作中php没java那么多麻烦事，虽然经过测试比java慢点，但是现在都什么时代了，这点性能真的已经不是问题了，要是真的那么追求速度的话你就直接拿C写咯，go语言也不错，php让你能更快速地完成一个东西，而且php7不是也出来了吗，速度也快得很呀。
你现在问这个问题，搞java的猴子肯定说java好，搞PHP的猴子肯定说PHP好，要不然怎么体现这帮猴子的价值呢，都是有私心的。客官，来来来，这边还有一帮node猴子要让你加入呢，哈哈。

说正经的，其实要是多学几门语言之后，你真的会发现，什么语言并不重要，你的思维，你的经验才是最珍贵的，要知道答案，你就得自己亲自去捣鼓这两种语言，捣鼓完了，你就有了你自己的答案了。
你信不信一个php猴子比一个web前端的猴子能更快地转型成为一node猴子呢，虽然web前端和node语法都是javascript。
你信不信前端写起来其实比后端更麻烦、后期更难，但是做后端的猴子往往喜欢鄙视做前端的猴子。
你信不信函数式其实挺好的，但是在三年前写个东西没有继承多态和抽象都不好意思拿出手，觉得函数式好的猴子往往被鄙视。
你信不信其实jquery挺稳妥挺成熟挺方便的挺兼容的，但是有好多vue\react\angular猴子都鄙视那些用jquery的猴子,还好backbone猴子没有这样。
是的，我的很多想法跟主流都不太一样，也许之后还会变，但是现在这是我捣鼓完之后属于自己的答案，你管得着吗，一帮死猴子。

㈦ backbone，collection中删除一个model实例，怎样做

假设我们有一个Person的Model，一个Person会有多个工作，那么我们将jobs这个属性设置为一个Collection:

初始化代码如下：

复制代码
var Job = Backbone.Model.extend({

});

var Jobs = Backbone.Collection.extend({
model:Job,
});

var Person = Backbone.Model.extend({

});
复制代码
下一步，给Person设置jobs的属性：

var Person = Backbone.Model.extend({
initialize:function(options){
this.set('jobs',options.jobs);
}
});
然后创建jobs的collection以及person object,将jobs赋值给person.jobs属性：

var jobs = new Jobs([{name:'PHP工程师'},{name:'设计师'},{name:'测试人员'}]);
var jimmy = new Person({jobs:jobs});
通过chrome的console看到值：

我们添加一些view，因为在backbone.js里view才是MVC里的Controller:

复制代码
var PersonView = Backbone.View.extend({
tagName:'ul',

initialize:function(){
this.render();

this.model.get('jobs').on('add',this.addFirst,this);
},

addFirst:function(job){
var jobView = new JobView({model:job});
this.$el.prepend(jobView.render().el);
},

renderOne:function(job){
var jobView = new JobView({model:job});
this.$el.append(jobView.render().el);
},

render:function(){
var jobs = this.model.get('jobs');

jobs.each(function(job){
this.renderOne(job);
},this);

$(document.body).append(this.el);
}
});

var JobView = Backbone.View.extend({
tagName:'li',

template:'',

initialize:function(){
this.model.on('change',this.render,this);
},

render:function(){
var template = _.template(this.template,this.model.toJSON());
this.$el.html(template);
return this;
},
});
复制代码
这里要为Job单独设置一个view是因为一个model对应一个view的'BB原则'，方便在model改变的时候，view改变。

最后new PersonView:

var jimmyView = new PersonView({model:jimmy});
-

㈧ Node.js代码转php

如果你们开发团队正在使用PHP，并考虑迁移到Node.js，这篇文章很适合你。本文并不探讨从PHP移植到Node.js的细节，以及Node.js的基础知识。而是涵盖：决策制定、着手点的描述、编写 Node.js 服务器的深层次注意事项、以及部署策略。

为什么迁移？

1stdibs 决定从 Apache/PHP 迁移到 Node.js+Express 有五个理由：

代码更少
全栈式JS
开发人员幸福度更高
投入回报率
未来的优化
代码更少

1stdibs基于面向服务体系架构（SAO），前端调用后台的Java服务。这意味着需要同时维护前端模型，以及服务端PHP和客户端JS模板。试想一下，如果可以摆脱PHP，就能够统一前端展现与后台模型于一种语言：JavaScript（同时可以合并一些模板）。从维护的角度来看，这么做代码更简洁，并且没有重复逻辑。

同构JavaScript万岁!

全栈式JS（及其优点）

整个开发栈使用一种语言很简便。对开发者来说，较少的环境切换使他们开心和高效。额外的好处是工具使用更简单。相比之前使用Composer和npm两个包管理器，现在只需要一个。尽管Composer很出色，由于nbp负责工具和客户端管理，nbp总是必要的。一旦去掉所有的PHP代码，nbp将成为仅有的包管理器。

开发人员乐意

我们要保证开发人员的技能集得到扩展、职业生涯不断发展，这一点很重要。对于JavaScript工程师而言，Node.js极具吸引力。能够在服务端使用与客户端相同的工具、风格和模式，是非常顺手和高效的。此外，Node.js相当流行，在企业级开发上也得到了长足发展。Node.js是JavaScript工程师的必备技能。

投入回报率

我们在招聘优秀的JS工程师和培训初级JS工程师方面花了大价钱。由于客户端栈很复杂，我们需要高级JavaScript工程师。我们不再雇用PHP工程师，仅仅雇用了JavaScript工程师。我们的观点是，为什么不培养他们在服务端的技能呢？

未来的优化

长远而言，我们打算把两个庞大的应用分割成一系列独立部署的小应用。这很容易通过Node.js、Express和nbp实现。理论上，PHP（比如使用Slim）可以做同样的事。但我们非但得不到上述好处，还会搞得一团糟：在Apache/PHP上进行操作会更加复杂，基础设施也会变得有些奇怪。

选择框架

那个最终被我们用Node.js替换掉的PHP应用，主要有如下职责：

登录和授权
路由选择和服务端模板引擎（服务HTML）
引导前端应用
代理服务（为了回避CORS）
服务静态资源（js，css，images）
这些就是我们需要替换掉的基本功能。

我们尝试过不少框架，Express令人叹为观止（试一下我们评估过的spreadsheet）。任何未基于Express 的框架看起来都不靠谱。Express通俗易懂，并有良好的文档。另外，可以招聘到正经培训过Express的人。

我们添加了一些kraken的核心模块（express-enrouten用于路由选择、lusca负责安全）；此外，i18n-node提供国际化支持，模板引擎使用Swig（我们后来放弃了Swig。呵呵，开源软件还是有风险的）。

我们考虑过全盘使用kraken，但是从原来的服务端php模板引擎Twig切换到Swig直截了当，还很快捷。此外，kraken里面的Dust和i18n也不讨人喜欢。

编写服务器

选好了框架，下一步该写服务器了。

使用Apache+PHP时，你不需要再写一个服务器。Apache本身就是服务器，PHP是应用。如果使用Node.js，服务器和应用是同一个。从Apache/PHP转到PHP，你需要处理一些之前自然而然使用的功能，这一点很重要。使用Apache，你（或者系统管理员）配置服务器，在PHP应用里完全不用关心Apache为你处理的那些事。Node.js却以一种不同的方式来工作。

提供静态文件服务

毋庸置疑，提供静态文件服务是Apache的核心功能。Node.js与此不同，你要在应用中配置静态文件服务。幸运的是这很简单，有良好的文档说明，并且是在Express中实现的。

日志

很多基本的Apache配置为你提供访问日志和错误日志。使用Node.js时，估计你也猜到了，同样需要在应用中配置。所幸很多优秀的开源软件包使之变得很简单。Morgan是一个基本的请求日志记录器，它配置简单，允许你把日志写到输出流（标准输出设备或文件）。如果你需要把日志写到数据库，或者有别的（更高级的）日志需求，那就试一下winston吧。

代理

我们有一个基本需求：能够代理传输客户端ajax请求到后台服务。相比于处理CORS头，代理所有来自相同域的请求要简单得多。但你要想通过代理使用webpack-dev-server（正如我们所做的），就必须在Node.js应用中处理这一问题。http-proxy是一个简单可靠的解决方案。

剩下的工作

除了上面提到的，还有一些列别的工作需要完成。我们从一个MVC应用谈起，该应用基于 CodeIgniter(CI)框架，为一系列单页应用提供服务。大部分工作就是移植：

CI控制器移植到Express路由选择器和中间件（包括登录和认证）
Twig模板引擎移植到Swig（这一步比较琐碎）
Service层数据访问（以便正常启动客户端单页应用）
上面并未列出CodeIgniter模型这一关键组件。事实上根本不用重写PHP模型！太给力了！我们的客户端应用使用Backbone模型。当然这要扩展Backbone.Model.sync，从而使之全局地工作在服务器和客户端。

部署

如果你的app规模较大，不应该一次性全部上线。可以通过渐进式部署的方式逐步上线。我们因此花费了好几周。

渐进式部署的优点：

最小化bug范围
每次在发布一部分路由及功能的同时，其他工程师可以正常进行开发
对正在进行的功能开发和改进影响最小 — 新功能可以继续发布（这可能导致重复的工作）
如果操作得当，可以快速回滚到之前的服务
NGINX很不错

该如何逐步上线呢？我们在众多的服务器中挑选了Nginx。

1
2
3
4
5

+----------+

http | |--->
Apache/PHP

request---->| Nginx
|

| |--->
Node.js

+----------+

Nginx允许你一次只“打开”一个路由（如果发现情况不妙就关掉 — 正如我们多次遇到的），这给了你很大的自由度。我们也发现打开路由的时候不用部署代码，这很有帮助。这在一周一次的发布计划里，为我们提供了一些回旋空间。

不过有一个缺点，你需要确保客户端代码同时接受旧的Apache/PHP服务器和新的Node.js服务器提供的服务。这并不可怕，不过你要把旧服务器上未优化的功能移植到新的服务器。屏住呼吸去做吧（记得写一个便利贴去清理你的技术债）。

总结

从头到尾，整个移植工作大概花费了一年。这听起来可能有点荒谬，不过这个时间表包括决策过程（比较匆忙）、基于Express写一个满足需求的核心框架、移植所有功能、逐步渐进式上线。此外，请记住，我们始终只有一两个开发者为之工作 — 并且是兼职。

如果你想尝试一下，请慎重考虑。你的团队能否受益？你的整个组织能否受益？如果你来自商业组织，请记住商业需要持续运转。你需要在商业目标和工程目标之间找到良好的平衡。

㈨ 同作为JavaScript MVC框架，Backbone和AngularJS各有什么优缺点

backbone更轻巧一些，如果再配合require.js使用的话做出来的东西比Angular.js要小巧的多，但是backbone的一些底层抽象不如Angular.js做的好，也就是说，Angular.js更好的封装了一些底层的东西，让使用者用起来更顺手，也更方便。
其次，backbone和Angular在编写上也是很大不同的，backbone更侧重于JS的编写，就像开发PHP程序那样调用前端的DOM数据而Angular则是通过注入来扩展HMLT标签的属性，它们在编写思想上是不同的。
最后要说的很重要的一点就是，backbone有中文的API而Angular不用说中文API就连官网都被封了，所以你只能看别人写的东西了至于API差不差的到查不查的全就看你自己了，反正我是不打算学Angular了~