web前端进阶之路

一、开发工具

1. atom

Atom 代码编辑器支持 Windows、Mac、Linux 三大桌面平台，完全免费，并且已经在 GitHub 上开放了全部的源代码。在经过一段长时间的迭代开发和不断改进后，Atom 终于从早期的测试版达到了 1.0 正式版了！相比之前的版本，在性能和稳定性方面都有着显著的改善。

2. idea

IDEA 全称IntelliJ IDEA，是java语言开发的集成环境，IntelliJ在业界被公认为最好的java开发工具之一，尤其在智能代码助手、代码自动提示、重构、J2EE支持、Ant、JUnit、CVS整合、代码审查、 创新的GUI设计等方面的功能可以说是超常的。IDEA是JetBrains公司的产品，这家公司总部位于捷克共和国的首都布拉格，开发人员以严谨著称的东欧程序员为主。

3. webpack

webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。

4. gulp

Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 构建的,利用 Node.js 流的威力,你可以快速构建项目...

5. lodash

lodash一开始是Underscore.js库的一个fork，因为和其他(Underscore.js的)贡献者意见相左。John-David Dalton的最初目标，是提供更多“一致的跨浏览器行为……，并改善性能”。之后，该项目在现有成功的基础之上取得了更大的成果。最近lodash也发布了3.5版，成为了npm包仓库中依赖最多的库。它正在摆脱屌丝身份，成为开发者的常规的选择之一。

6. fetch

对于 AJAX，现在一般都是使用各种框架实现，其本质是 XMLHttpRequest。使用过原生XMLHttpRequest的人都知道，这种方法实现起来不太方便。现在，我们有了新的选择：Fetch API。

7. Electron

Electron 框架的前身是 Atom Shell，可以让你写使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序。它是基于io.js 和 Chromium 开源项目，并用于在 Atom 编辑器中。Electron 是开源的，由 GitHub 维护，有一个活跃的社区。最重要的是，Electron 应用服务构建和运行在 Mac，Windows 和 Linux。

二、javascript框架

1. angular2

跨平台开发

学习如何基于 Angular 构建应用程序，并复用代码和技能来构建适用于所有平台的应用。比如： Web 应用、移动 Web 应用、原生移动应用和原生桌面应用等。

速度与性能

通过 Web Worker 和服务端渲染，达到在如今 ( 以及未来）的 Web 平台上所能达到的最高速度。Angular 让你有效掌控可伸缩性。基于 RxJS 、 Immutable.js 和其它推送模型，能适应海量数据需求。

美妙的工具

使用简单的声明式模板，快速实现各种特性。使用自定义组件和大量现有组件，扩展模板语言。在几乎所有的 IDE 中获得针对 Angular 的即时帮助和反馈。所有这一切，都是为了帮助你编写漂亮的应用，而不是绞尽脑汁的让代码“能用”。

2. react+redux

React+Redux非常精炼，良好运用将发挥出极强劲的生产力。但最大的挑战来自于函数式编程（FP）范式。在工程化过程中，架构（顶层）设计将是一个巨大的挑战。要不然做出来的东西可能是一团乱麻。说到底，传统框架与react+redux就是OO与FP编程范式的对决。

3. jquery

JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。

4. antd

Ant Design 是蚂蚁金服开发和正在使用的一套企业级的前端设计语言和基于 React 的前端框架实现。企业级金融产品的交互语言和视觉体系。丰富实用的 React UI 组件。基于 React 的组件化开发模式。背靠 npm 生态圈。基于 webpack 的调试构建方案，支持 ES6。

三、node相关技术

1. npm

NPM（node package manager），通常称为node包管理器。顾名思义，它的主要功能就是管理node包，包括：安装、卸载、更新、查看、搜索、发布等。

2. express

Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架，它提供一系列强大的特性，帮助你创建各种 Web 和移动设备应用。

3. koa2

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

4. rxjs

是一组库使用可观察到的集合和阵列、演员风格组成，组成异步和基于事件的程序。

5. zonejs

在ng2的开发过程中，Angular团队为我们带来了一个新的库 – zone.js。zone.js的设计灵感来源于Dart语言，它描述JavaScript执行过程的上下文，可以在异步任务之间进行持久性传递，它类似于Java中的TLS（thread-local storage: 线程本地存储）技术，zone.js则是将TLS引入到JavaScript语言中的实现框架。

四、设计模式

1. javascript设计模式

五、编程语言

1. javascript

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

2. ecmscript6

ES6是继ES5之后的一次主要改进，语言规范由ES5.1时代的245页扩充至600页。ES6增添了许多必要的特性，例如：模块和类，以及一些实用特性，例如Maps、Sets、Promises、生成器（Generators）等。尽管ES6做了大量的更新，但是它依旧完全向后兼容以前的版本，标准化委员会决定避免由不兼容版本语言导致的“web体验破碎”。结果是，所有老代码都可以正常运行，整个过渡也显得更为平滑，但随之而来的问题是，开发者们抱怨了多年的老问题依然存在。

3. typesript

typescript是JavaScript的超集。TypeScript是JavaScript类型的超集，它可以编译成纯JavaScript。TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行，并且是开源的。

六、数据存储

1. mysql

MySQL是一个关系型数据库管理系统，由瑞典MySQL AB 公司开发，目前属于 Oracle 旗下公司。MySQL 最流行的关系型数据库管理系统，在 WEB 应用方面MySQL是最好的 RDBMS (Relational Database Management System，关系数据库管理系统) 应用软件之一。

2. mongodb

MongoDB 是一个基于分布式文件存储的数据库。由 C++ 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。

3. redis

Redis是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库，并提供多种语言的API。

4. cookie

Cookie，有时也用其复数形式Cookies，指某些网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据（通常经过加密）

5. access token

Windows操作系统安全性的一个概念。一个访问令牌包含了此登陆会话的安全信息。当用户登陆时，系统创建一个访问令牌，然后以该用户身份运行的的所有进程都拥有该令牌的一个拷贝。该令牌唯一表示该用户、用户的组和用户的特权。系统使用令牌控制用户可以访问哪些安全对象，并控制用户执行相关系统操作的能力。有两种令牌：主令牌和模拟的令牌。主令牌是与进程相关的；模拟的令牌是与模拟令牌的线程相关的。

七、html5+css3

1. html5

HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。
HTML5的设计目的是为了在移动设备上支持多媒体。
HTML5 简单易学。

2. ejs

EJS是一个JavaScript模板库，用来从JSON数据中生成HTML字符串。引入EJS 创建一个模板 使用视图工具组件 与最初的JavaScript相比较，一些不太了解你的代码的人可以更容易地通过EJS模板代码看得懂你的代码。 让我们放松一下，一起来享受下令人激动的干净简洁的感觉。

3. canvas

TML5 标签用于绘制图像（通过脚本，通常是 JavaScript）。不过， 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

4. css3

CSS3是CSS技术的一个升级版本，是由Adobe、Systems、Apple、Google、HP、IBM、Microsoft、Mozilla、Opera、Sun Microsystems 等许多WEB界的巨头联合组织的一个名为 “CSS Working Group” 的组织共同协商策划的。虽然目前很多细节还在讨论之中，但它还是不断地朝前发展着。2010年在HTML5成为IT界人士关注的焦点的同时，它也开始慢慢地普及开来。

5. sass

SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。

6. postcss

PostCSS 是使用 JS 插件来转换 CSS 的工具，支持变量，混入，未来 CSS 语法，内联图像等等。PostCSS 已经被许多大公司使用：谷歌，推特，阿里巴巴和 Shopify。 Autoprefixer PostCSS 插件是最流行的 CSS 处理器插件之一。

7. 白鹭引擎

白鹭引擎是一个开源的、跨平台的手机游戏开发引擎,你可以快速地创建HTML5类型的移动游戏,也可以将游戏项目编译输出成为目标移动平台的原生游戏应用。

八、算法和数据结构

1. 线型查找

在一列给定的值中进行搜索，从一端开始逐一检查每个元素，直到找到所需元素的过程。线性查找又称为顺序查找·如果查找池是某种类型的一个表，比如一个数组，简单的查找方法是从表头开始，一次将每一个值与目标元素进行比较，最后，或者查找到目标，或者达到表尾，而目标不存在于组中，这个方法称为线性查找。

2. 二分查找

二分查找又称折半查找，优点是比较次数少，查找速度快，平均性能好；其缺点是要求待查表为有序表，且插入删除困难。因此，折半查找方法适用于不经常变动而查找频繁的有序列表。首先，假设表中元素是按升序排列，将表中间位置记录的关键字与查找关键字比较，如果两者相等，则查找成功；否则利用中间位置记录将表分成前、后两个子表，如果中间位置记录的关键字大于查找关键字，则进一步查找前一子表，否则进一步查找后一子表。重复以上过程，直到找到满足条件的记录，使查找成功，或直到子表不存在为止，此时查找不成功。

3. 冒泡排序

冒泡排序（Bubble Sort），是一种计算机科学领域的较简单的排序算法。它重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。

4. 选择排序

选择排序（Selection sort）是一种简单直观的排序算法。它的工作原理是每一次从待排序的数据元素中选出最小（或最大）的一个元素，存放在序列的起始位置，直到全部待排序的数据元素排完。 选择排序是不稳定的排序方法（比如序列[5， 5， 3]第一次就将第一个[5]与[3]交换，导致第一个5挪动到第二个5后面）。

5. 插入排序

插入排序的基本思想是：每步将一个待排序的纪录，按其关键码值的大小插入前面已经排序的文件中适当位置上，直到全部插入完为止。

6. 字符串反转

var str = '123';
var newStr = str.split("").reverse().join("");
alert(newStr);

7. 搜索算法

搜索算法是利用计算机的高性能来有目的的穷举一个问题解空间的部分或所有的可能情况，从而求出问题的解的一种方法。搜索算法实际上是根据初始条件和扩展规则构造一棵“解答树”并寻找符合目标状态的节点的过程。

8. 贪心算法

贪心算法（又称贪婪算法）是指，在对问题求解时，总是做出在当前看来是最好的选择。也就是说，不从整体最优上加以考虑，他所做出的是在某种意义上的局部最优解。贪心算法不是对所有问题都能得到整体最优解，关键是贪心策略的选择，选择的贪心策略必须具备无后效性，即某个状态以前的过程不会影响以后的状态，只与当前状态有关。

9. tween算法

Flash做动画时会用到Tween类，利用它可以做很多动画效果，例如缓动、弹簧等等。

10. javascript算法库

• numbers.js

• Numeric Javascript

• Tangle

• accounting.js

九、测试框架

1. mocha

mocha 是一个简单、灵活有趣的 JavaScript 测试框架，用于 Node.js 和浏览器上的 JavaScript 应用测试。Mocha 是具有丰富特性的 JavaScript 测试框架，可以运行在 Node.js 和浏览器中，使得异步测试更简单更有趣。Mocha 可以持续运行测试，支持灵活又准确的报告，当映射到未捕获异常时转到正确的测试示例。

2. karma

Karma是Testacular的新名字，在2012年google开源了Testacular，2013年Testacular改名为Karma。Karma是一个让人感到非常神秘的名字，表示佛教中的缘分，因果报应，比Cassandra这种名字更让人猜不透！Karma是一个基于Node.js的JavaScript测试执行过程管理工具（Test Runner）。该工具可用于测试所有主流Web浏览器，也可集成到CI（Continuous integration）工具，也可和其他代码编辑器一起使用。这个测试工具的一个强大特性就是，它可以监控(Watch)文件的变化，然后自行执行，通过console.log显示测试结果。

3. jasmine

Jasmine （茉莉）是一款 JavaScript BDD（行为驱动开发）测试框架，它不依赖于其他任何 JavaScript 组件。它有干净清晰的语法，让您可以很简单的写出测试代码。对基于 JavaScript 的开发来说，它是一款不错的测试框架选择。

4. chai

Chai 是一个针对 Node.js 和浏览器的行为驱动测试和测试驱动测试的诊断库，可与任何 JavaScript 测试框架集成。

5.Qunit

该框架诞生之初是为了jquery的单元测试，后来独立出来不再依赖于jquery本身，但是其身上还是脱离不开jquery的影子

6. should.js:

TJ的另外一个开源贡献

7. expect.js

BDD风格的另外一个断言库，基于should.js,是mini版的BDD库

8. assert

node自带核心模块: 可以在node中使用的断言模块

十、重构

1. 命名

模块划分和命名空间

2. 加载

js的动态加载

3. 测试

Javascript的测试

4. 编码

Javascript编码规则

5. 闭包

利用原型/闭包开发组件

6. 继承

利用继承来做事

7. 重用

重用老代码

8. 检测

JSDoc和JSLint

9. 框架

自定义JavaScript产品框架

10. 强化

强化对象封装和模块封装