先做个广告 Javascript生态
- 响应式/函数式编程：Rxjs-Reactive extention for javascript
- 面向对象式编程： OOP -Object Oriented Programming
- 迭代器模式编程： Iterator Pattern（ES6中可迭代对象：Array、String、Map、Set、DOM data structures）
| 序号 | 范围 | 名称 | 作用 | 使用场景 | 相关信息 |
|---|---|---|---|---|---|
| 1 | 数据库 | mySQL | 后台数据库 | 暂无 | 官网 |
| 2 | 数据库 | php | 数据库脚本 | 官网 | |
| 3 | 数据库 | Nodejs | 数据库脚本 | 事件驱动、非阻塞I/O模型 | 官网 |
2.1 后端框架
| 序号 | 名 称 | 所属语言 | 模板引擎 | 相关技术 |
|---|---|---|---|---|
| 1 | Laravel | php | blade | |
| 2 | SpringMVC | JAVA | thymeleaf | |
| 3 | Express | Nodejs | jade、ejs、handlerbar | 热部署工具PM2、Forever、strongloopPM |
| 4 | KOA | Nodejs |
| 序号 | 类别 | 名称 | 作用(范围) | star | 特点 | 官网 |
|---|---|---|---|---|---|---|
| 1 | JS包管理器 | npm | JavaScript包管理器 | 13,284+ | 官网 | |
| 2 | JS包管理器 | yarn | JavaScript包管理器 | 26,461+ | 官网 | |
| 3 | 前端项目打包压缩 | webpack | 所有资源 | 30,423+ | 官网 | |
| 4 | 前端项目打包压缩 | gulp | js、css、html | 26,924+ | 官网 | |
| 5 | 前端项目打包压缩 | grunt | js、css、html | 11,508+ | 官网 | |
| 6 | 前端项目打包压缩 | bower | js、css、html | 15,171+ | 官网 | |
| 7 | 前端项目打包压缩 | browserify | js、css、html | 11,201+ | 官网 |
不同框架性能对比测试，传送门
| 序号 | 名称 | 团队 | 设计模式 | star | 包大小(gzip) | 学习曲线 | 相关技术 | 相关信息 |
|---|---|---|---|---|---|---|---|---|
| 1 | angularjs | 谷歌 | 双向数据绑定 | 56,105+ | 陡峭 | MVC | 官网 | |
| 2 | angular | 谷歌 | 双向数据绑定 | 26,225+ | 237.41kb/v4.1.3 | 陡峭 | MVC、组件化、Rxjs | 官网 |
| 3 | react | 单向数据绑定 | 71,926+ | 46.45kb/v15.5.4 | 适中 | MVC、组件化、React+Flux+JSX状态存储 | 官网 | |
| 4 | vue.js | 尤雨溪（国内个人) | 双向数据绑定 | 61,363+ | 28.90kb/v2.3.4 | 简单 | MVC、组件化、 | 官网 |
| 5 | Polymer | 谷歌赞助 | 17,815+ | 129.89kb/v2.13.3 | 组件化，类似vue | 官网 | ||
| 6 | ember | 17,956+ | 129.89kb/v2.13.3 | 陡峭 | 全能框架、大量约定 | 官网 | ||
| 7 | Riot.js | 12,042+ | 轻量级 | 官网 | ||||
| 8 | knockout.js | 可学习,不推荐使用 | 8,249+ | 适中 | MVVM | 官网,兼容IE9, |
- ejs Javascript模板--官网
- jade js+html模板-----官网
- blade php 模板--------官网
- Smarty php 模板--------官网
- thymeleaf JAVA模板--------官网
各路模板比拼：
css样式兼容性测试，传送门
| 序号 | 名称 | 类别 | 说明 | 相关信息 |
|---|---|---|---|---|
| 1 | sass | 样式文件、CSS预处理器 | 官网、入门1、入门2 | |
| 2 | fontawesome | 图标、样式库 | 50,716+ | 官网、中文官网 |
| 3 | iconfont | 图标、样式库 | 阿里出品 | 官网 |
| 4 | gliphyicon | 图标、样式库 | Author:Jan Kovarik | 官网 |
| 序号 | 名称 | 技术类型 | Star指数 | 备注 | 说明 |
|---|---|---|---|---|---|
| 1 | animate.css | CSS (55.2kB) | 42,557+ | 63种纯CSS过度动画效果 | 案例 |
| 2 | hover.css | CSS | 16,828+ | 丰富的悬停效果amazing | 案例 |
| 3 | magic.css | CSS (36.5kB) | 4,915+ | 丰富的渐变效果 | 案例 |
| 4 | Dyncss.css | CSS | 386+ | 页面滚动动画 | 案例 |
| 5 | favico.js | JavaScript | 7,538+ | 添加各种徽章效果 | github |
| 6 | Textillate.js | JavaScript | 2,985+ | 添加各种文字动画效果 | 案列,依赖:animate.css、lettering.js |
| 7 | bounce.js | JavaScript | 5,056+ | 提供强大的弹性css动画 | 案例 |
| 8 | Move.js | JavaScript | 4,042+ | css动画 | 案例 |
| 9 | AniJS.js | JavaScript | 3,087+ | 事件动画效果 | 案例 |
| ... | pace.js | JavaScript | 12,053+ | 网页交互进度提示：ajax/http进度条 | 案例 |
| 序号 | 名称 | 团队 | 技术基础 | star指数 | 备注 | 说明 |
|---|---|---|---|---|---|---|
| 1 | D3.js | |||||
| 2 | hightcharts | 歪果仁 | Javascript | 官网 | ||
| 3 | Chart.js | js+canvas | +30,737 | 官网 | ||
| 4 | Echarts2 | 百度 | js | +18,719 | 官网 | |
| 5 | G2 | 阿里—蚂蚁金服 | js | +592 | 官网、gihub | G6/G2-mobile |
- Jquery ——前端入门级别插件库，主要用于调用DOM操作 英文官方网站链接，中文推荐非官方链接
- Underscore ——函数式编程的功能集，提供一系列远超过map、filter、invoke等方法，涵盖函数绑定、js模板、创建索引，强类型测试等，英文官方网站链接 ，中文官方链接
- moment.js ——JS时间处理插件，肥肠强大，英文官方网站链接， 中文官方链接
- rxjs ——观察者模式，强大的函数式编程插件 入门介绍传送，英文官方网站链接，推荐非官方中文文档
- mock.js ——一个模拟数据生成器，可以让前端独立于后端进行开发。主要功能：生成随机数据，拦截Ajax,适用场景：后端api未开发法完成，但数据格式已经确定。官网、Github
- alasql.js ——客户端数据库操作插件，用户web浏览器js内存中的数据库操作插件，可配合nodejs使用；官网、github star:+1910
- lokijs ——客户端操作数据库插件，alasql.js替代插件，官网、github star +3，428:
目前spa页面的最大缺点莫过于搜索引擎的友好型很差，所以需要慎重考虑使用场景；
