由于阿里云最近的一次云盾的大功劳引起的悲剧，自己也就不幸成为了其中一个“幸运儿”。可能是因为当时我正在通过ssh连接自己的服务器，然后再通过git拉取代码，但是这一下失败了。悲剧就此发生，再次使用git，md，发现没有git命令了？当时自己就坐在那一个劲的问自己为啥？？

然后我想自己再次重连下自己的服务器看看啥子情况，退出后连接自己的服务器，更大的悲剧发生了，发现自己连接不上去了，这该如何是好？由于当时自己还没有意识到是阿里云的故障问题，以为自己捣鼓坏了呢，然后就去网站上通过终端连接，查看自己服务器状态，进去之后还是发现自己的git、vi啊什么乱七八杂的直接没有了，运行啥就告诉自己没有此命令了！这。。。

然后自己就“机智”的去了论坛，一看，立马知道罪魁祸首了！没有办法，只能干等了。等啊等。。。

前言

这是一篇迟来的文章，最合适的应该是在这个项目最开始的时候来写的，但是迟迟没有来写，懒惰的自己O(∩_∩)。mobile-router.js这个项目最早应该追忆到2014年底，当时由于工作需要，需要对公司项目上的触屏版做一次重构，运用新的ui、交互。由于12年的时候做过一个移动端的项目，所以还算是有点经验，所以就重新梳理思考了自己以前遇到的问题以及当时自己对应的笔记；但是移动端变化还是很快的，虽然只是相隔了不到两年，但是这两年却又很大的变化，以前需要兼容的、一些bug可能现在都以及不需要考虑了。但是最基本的还是没有变，那就是mobile web app的限制，内存限制也好、特性限制也好，亦或者是各种厂商各种系统版本（当时指的是Android）亦或是各种浏览器（你懂得）；针对IOS的还好，毕竟性能好、不需要适配各种机器各种乱七八糟的版本，所以从源头上来说就以及注定了IOS要比Android好做一点。

梳理完之后，思考归思考，项目还是要进行的，所以就要继续往下前行了。。。

初衷

所以根据基本需求，当时拟定了一些基本要完成的任务以及对应的一些解决方案：

1. 基础库，知名的zepto.js

2. 模块化，依赖加载；选择了知名的RequireJS

3. 解决移动端点击以及相关bug的库，知名的fastclick

4. 待解决SEO问题，意味着支持服务端渲染

5. 待解决路由问题，毕竟是要做SPA嘛🐴

6. 切换动画问题，为了效果好啊，木办法o(╯□╰)o

为什么会是这样的结果呢，为什么不能使用非常火热的MV*框架（去TodoMVC发现各种框架吧）呢，他们这么火肯定是有原因的啊，为啥不用，下边就来简单分析下。

GitHub 地址 https://github.com/dolymood/AngularLearning

基础

1. 官方： http://docs.angularjs.org angularjs官方网站已被墙，可看 http://www.ngnice.com/；
2. 官方zip下载包 https://github.com/dolymood/angular-packages，已增加docs服务，输入地址即可，例如：http://blog.aijc.net/angular-packages/angular-1.3.15/docs/
3. jquery?ag? : http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background
4. ag note：https://github.com/joeylin/angular-note
5. angularjs book：https://github.com/shyamseshadri/angularjs-book
6. learning-angular：https://github.com/zafarali/learning-angular 以及我的翻译版本（ing）https://github.com/dolymood/learning-angular
7. angular和require结合方式：https://github.com/tnajdek/angular-requirejs-seed
8. 利用angular开发下一代Web应用(angular js) 【书】
9. Lcllao的ag笔记：http://www.cnblogs.com/lcllao/archive/2012/10/18/2728787.html
10. angular-service-or-factory ? 傻傻分不清楚？http://iffycan.blogspot.com.ar/2013/05/angular-service-or-factory.html 以及 https://github.com/tylermcginnis/AngularServices
11. angular-injection http://iffycan.blogspot.com.ar/2013/07/angular-injection.html
12. 利用angular开发下一代Web应用(angular js) 书https://github.com/aztack/AngularJS-translation
13. 破狼的angular文章集合 http://www.cnblogs.com/whitewolf/category/404298.html
14. 邹业盛 angular的学习笔记 http://zouyesheng.com/angular.html
15. 吕大豹的angular文章合集 http://www.cnblogs.com/lvdabao/tag/AngularJs/
16. 尘封の烟雨的angular文章合集 http://wangjiatao.diandian.com/?tag=angularjs
17. 黑暗執行緒 的angular文章（繁体） http://blog.darkthread.net/blogs/darkthreadtw/archive/tags/AngularJS/default.aspx
18. AngularJS 数据建模 http://blog.jobbole.com/54817/
19. AngularJS 中的一些坑 http://blog.jobbole.com/52857/
20. 中文版guide http://angular.duapp.com/guide
21. angular tips http://angular-tips.com/
22. ng-newsletter http://www.ng-newsletter.com/
23. AngularJS 开发者最常犯的 10 个错误 http://www.oschina.net/translate/top-10-mistakes-angularjs-developers-make
24. AngularJS 指令实践指南（二） http://blog.jobbole.com/62999/
25. fse.guru http://www.fse.guru/angular-core-components-roles 以及作者其他相关的ng文章
26. 深入理解AngularJS 的 Scope http://www.lovelucy.info/understanding-scopes-in-angularjs.html
27. angularjs中文社区关于angular.js文章、教程 http://angularjs.cn/tag/AngularJS
28. xufei的博客 https://github.com/xufei/blog/issues 一直在更新，荐，讲得很好！
29. angularjs-internals-in-depth http://www.smashingmagazine.com/2015/01/22/angularjs-internals-in-depth/
30. introduction-to-unit-testing-in-angularjs http://www.smashingmagazine.com/2014/10/07/introduction-to-unit-testing-in-angularjs/
31. AngularJS Unit Testing – For Real, Though https://quickleft.com/blog/angularjs-unit-testing-for-real-though/
32. Quick Starter Repository for Angular Material https://github.com/angular/material-start
33. angular cheat sheet https://dncmagazine.blob.core.windows.net/downloads/AngularCheatSheet-DNCMagazine.pdf
34. angular-translate https://github.com/angular-translate/angular-translate
35. 推荐 15 个 Angular.js 应用扩展指令 http://www.oschina.net/translate/15-directives-to-extend-your-angular-js-apps
36. A Guide To Transclusion in AngularJS http://teropa.info/blog/2015/06/09/transclusion.html

之前看到的一个关于angular的问题，如题，做的是tab选项，中间大概问道：

如果我用jquery的话，做起来的大概步骤就是：绑定事件，移除所有选项的class，给点击项加上class。然后如果用angular怎么做？

看起来很简单的一个问题，但是涉及的确实一个“改变”。这里就那做一个tab来看这个改变。

这里做了简化，只保留tab导航部分，内容部分就忽略了；不过不影响。

大概效果（源码）请看：jquery版, angular版1, angular版2

最近一直在搞移动端的spa，中间遇到了一个很诡异的问题，第一次页面load，局部滚动是有效果的，但是如果经过动画切换回来之后，发现局部滚动无效了，最起码在ios8.1.3上的safari和chrome中都是如此，这肯定藏了些什么猫腻。

基本页面结构是很简单的，就是在body中包含了几个page-view，可以把他看做一个个的画面，用来切换。关于移动端重构的一些知识点，可以参见w3cplus mobile上有关的介绍，很详细的系列。

mobile-router.js — A lightweight single page bone for mobile web App.轻量级web端单页面骨架

Online docs

DEMO

require.js DEMO

mobile-router.js-demo是一个关于mobile-router.js如何使用的DEMO，暂时包含：前后端模板共享，后端输出首屏，与其他库自由搭配，动画转场。

mobile-router.js-sample - A mobile-router.js demo like ui-router sample

优势：

• 使用简单、方便、轻量，基于 history、window.onpopstate。

• 支持路由视图嵌套 (1.5.0+)。

• 无依赖，可与其他框架（库）搭配自由使用，例如：jquery, zepto, iscroll等。

• 任意选择字符串式模板引擎，当然最简单的就是自己拼接字符串了；同时支持异步（远程获取模板，或者去请求数据在前端构建模板）；可配置是否缓存结果模板。

• 考虑后端渲染首屏的情况，只需要按结构输出响应的片段即可，利于SEO，且可以实现前后端模板公用。

• 自动缓存部分画面，可配置缓存数量，默认3个。

• 每个路由都有对应的callback和onDestroy等配置方法，分别用于显示了对应画面后的回调以及当该画面销毁时回调。

• 利用CSS animation控制动画转场（页面切换）效果，也可设置关闭动画效果。

• “保留”浏览器原生hash功能，根据hash，可自由跳转到对应id元素位置。

• 可配置enablePushState决定是否使用pushstate功能，默认启用；不启用的话，仅仅影响的是不产生历史，但是路由依旧好使的，也就是还是基于url的。

在segmentfault看到这篇文章，觉得整理的很详细，所以转载过来和大家分享一下。

原文地址：http://segmentfault.com/blog/ciaocc/1190000002407912

作者：ciaocc

版权贵ciaocc所有，转载请注明版权。

概要

标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。 —— W3School

可以说从12年开始，移动端单页面开发就已经被各个公司实践了，当时我的上家公司也进行了实践。和大多数的结果一样，理想很丰满，现实很骨感。主要是因为在手机端受限的东西太多：内存不够用、性能跑步起来、表现上卡以及五花八门各种各样手机上的浏览器表现差异实在是无话可说，各种bug层出不穷。时光匆匆，2年过去了，主要的两大手机系统ios和android都已升级了多次，此时再来看，我们可以在移动端单页面方面做些什么呢？是不是相比较于以前好多了呢？

语法

HTML定义了“HTML语法”，他主要是兼容已在web上发布的HTML4和XHTML1文档，但是不兼容HTML4的那些深奥的SGML特性，例如处理说明 processing instructions和简写标记 shorthand markup这些，大部分的用户代理都不支持他们。使用text/html媒介类型的文档使用HTML语法。

偶尔在网上看到的一个面试题，大概描述是：

有一个可以自适应的div，里边有两个div，一个div是高度固定的，怎么实现另一个div的高度自适应剩余高度？

当然方案会有好多，可以使用js，也可以用CSS3，也可以用CSS2.1来实现；达到结果有很多种，最大的区别应该就是兼容性了。

这里大概列出几种方法，当然几种方法兼容性还是不一的；这里算是仅供参考吧，毕竟在大部分高级浏览器里，例如：Chrome（最近），Firefox（最近），IE10+，IE8~9（利用CSS3的flex的不支持）。