、引言

2018年3月份，由小米，中兴，华为等10家厂商成立了快应用联盟，共同发布了快应用的标准。 自此我们可以采用一套标准去开发应用，而无缝的运行在各个手机厂商上。一次开发，一次上传，自动分发到所有联盟厂商的设备。根据快应用官方的说法，快应用官方是采用前端的技术栈来开发的，这篇文章以一个前端开发者的角度，来介绍怎么开发快应用，快速入门快应用的开发。

1.什么是快应用

• 快应用是基于手机硬件平台的新型应用形态，标准是由主流手机厂商组成的快应用联盟联合制定；
• 快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台；以平台化的生态模式对个人开发者和企业开发者全品类开放；
• 快应用具备传统APP完整的应用体验，无需安装，即点即用。

2.快应用技术特点

• 采用前端技术栈，运行和开发效率高，学习成本低，代码可以复用；
• 原生渲染能力，功能完备，体验等同于应用，资源消耗小。

从上面我们可以了解到：

1. 快应用不是HTML5,但是可以用前端已有技术栈直接上手开发；

2. 快应用是原生渲染,有着比H5更加完备的功能及原生体验；

3. 快应用即点即用,无需安装。

二、快应用 vs HTML5开发

首先，我们来回顾一下，在web项目中是怎么进行开发的？

简单的说下，可以分为以下9个步骤：

• 拿到PSD设计图
• 切图
• 将PSD 转成html
• 写JS业务逻辑
• mock数据，自测
• 与后端联调
• 提交测试
• 上线
• 迭代与优化

如下图所示：

做过前端的同学对这个步骤应该很熟悉了，快应用的开发步骤和这差不多，主要有2点差别，我们来比较一下：

• html5开发是基于浏览器的，直接写完后在浏览器下就可以运行，看效果。但是快应用开发是基于nodejs环境的，所以我们开始需要搭建一下开发环境；
• 在将PSD转成html的时候，快应用提供了一个脚手架，当然html5的一些项目里面也有脚手架，比如vue，react项目，官方都提供了一个脚手架，方便开发者进行开发。

如下图所示，下面是快应用的开发过程：

下面从 搭建环境，hap-toolkit的使用，静态页面书写（PSD转成html），js业务逻辑的书写，调试这5个方面来说说如何开发快应用。其他的步骤都是html5开发常见的步骤，和html5一样，直接迁移过来就行。

1.搭建开发环境

快应用开发是基于前端技术栈的，官方团队提供了基于nodejs的开发环境，可以参考官网的详细教程。

主要是：

• nodejs（推荐 node 8以上版本）
• hap-toolkit 编译工具。
• 快应用调试器和快应用预览版（方便调试和查看效果）

当然快应用官方也提供了IDE，也可以直接安装一个IDE。

2.hap-toolkit的使用

安装好hap-toolkit后，可以在控制台输入hap -v 看看当前的版本。

当前的最新版本是0.1.1

下面是hap-toolkit的一些常见用法

具体可以参考：

https://doc.quickapp.cn/tools/toolkit-tools.html

3.静态页面书写

快应用提供了组件和指令，方便PSD转化成html。

01.组件

快应用中组件与Vue中组件类似，一个快应用，可以组织为一个嵌套的组件树，如下图所示：

组件分类：

• 原生组件
• 自定义组件

当一个页面的业务逻辑变得复杂时，就需要将页面拆成多个模块，完成解耦。所以，快应用提供了自定义组件的能力，定义自定义组件与开发页面一致。

（1）text、div等为原生组件,由各平台 Native 底层渲染；

（2）自定义组件是一个开发者编写的组件，使用起来和 Native 一样，最终按照组件的<template>来渲染,页面也是一种自定义组件；

（3）自定义组件比页面组件的不同之处在于多了一个props属性,用于声明该组件可接受的外部数据传递,props是一个数组，数组中每个元素是暴露的属性名称,如果属性名称使用驼峰定义，如：prop2Object，那么在外部传递数据时请使用-连接，如：prop2-object；

（4）引入自定义组件的方式为通过 <import> 标签引入,如: <import name="comp-part1" src="./part1"></import>；

（5）父子组件之间可以通过事件进行通信,兄弟组件之间通过 Publish/Subscribe 模型来完成通信,详情请见文档。

02.指令

框架指令是框架为组件定义的特殊属性，以及框架提供的特殊组件，用于自定义页面DOM结构渲染逻辑。

指令主要包含：

注意：

（1）for 循环 自定义变量表示 for 指令的数组索引和数组元素时，变量名不可以用$或_开头

（2） if/elif/else 节点必须是相邻的兄弟节点

4.JS业务逻辑的书写

快应用的js是采用es6语法标准的，支持es6的特性。

这里主要讲2个方面：生命周期和事件机制

01.生命周期

生命周期概念为现代前端开发的重要基础，快应用里，页面的生命周期指的也就是ViewModel的生命周期，整个页面生命周期如下:

APP 中可以同时运行多个页面，但是每次只能显示其中一个页面；这点与纯前端开发，浏览器页面中每次只能有一个页面，当前页签打开另一个页面，上个页面就销毁了。

02.事件机制

与html5一样，快应用里面也提供了事件机制。

• on用于监听自定义事件；off移除对应的事件监听；
• $emit()、 $dispatch()、 $broadcast()等触发事件，其中$dispatch()为向上传递，$broadcast()为向下传递；

• 原生组件支持一系列事件，如通用事件、组件专有事件,通过on+事件名称作为组件属性，来监听事件 (如: focus事件,可以用 onfocus 属性监听)。

5.调试

不同于传统前端开发，快应用运行在厂商联盟的手机上。因此，官方提供了调试工具。

开发者可通过快应用调试器、hap-toolkit 的远程调试命令 、chrome devtools 调试界面，来调试快应用。

快应用调试目前支持 chrome devtools 中的elements, console, source, network等模块。

使用chrome devtools进行调试

三、性能优化

性能优化是前端永恒的主题

性能优化包括两个大类：

• 通用的解决方案，这类具有普适性；
• 与具体组件结合的解决方案，如：组件级别的懒加载，甚至利用组件本身特性完成优化。

建议开发者了解性能优化的常见方案，提升应用性能

1.简化ViewModel的数据

在ViewModel的定义中，属性public、protected、private 主要承担数据驱动的数据定义与改造功能，会对赋值的数据中每个属性进行递归式的定义。因此，属性个数的定义越少越好，尤其是数组类型数据，建议过滤不需要用到的对象属性。

示例如下：

如果页面仅需要用到 list 中每个 item 的 userId, orderName 属性的话，则仅赋值这两个属性到ViewModel数据中，过滤掉非相关属性。

// 模拟fetch请求返回的数据

const orderList = [

{

userId: '123',

orderName: 'XX产品',

userName: '张三',

shoppingList: [

{

productId: '001',

productLink: 'http://xxx',

productShop: {

ownerId: '2390',

ownerName: 'XXX店铺'

}

}

]

},

{

// ...

}

]

export default {

private: {

list: []

},

onInit () {

// 返回页面中需要的对象属性，过滤无用的对象属性

this.list = orderList.map(item => {

userId: item.userId,

orderName: item.orderName

})

}

}

2.合理使用后代选择器

框架支持 CSS 中的后代选择、支持 less 预编译，方便开发者开发，提升代码可维护性。然而，过多的使用后代选择器，也会在节点匹配上带来性能损耗，尤其是当一个节点满足多个选择时。

优化建议如下：

• 避免使用组件名称（tag 标签名称）作为后代选择的最后一项匹配规则，如： .doc-page #shop text { ... }；否则每个 text 组件渲染时都会遍历匹配一次；
• 减少后代选择的层级数量，层级越深，单次匹配耗时越长，如：.class1 .class2 .class3 .class4 .class5 .class6 { ... }；
• 后代选择中最后一条匹配规则的定义名称尽量唯一，如：.doc-page #shop .shop-item .shop-name-full { ... }。

3.使用懒加载

懒加载是一项通用的优化手段，传统 H5 页面中的图片懒加载，指的是页面即将滚动到屏幕可视区域时，才加载资源，渲染页面。

在框架中，也可以使用懒加载技术：为了加快页面可视区域的渲染，可以通过指令或者事件触发等手段推迟不可见区域的渲染。

四、参考文档

• 快应用开发教程
• https://doc.quickapp.cn/tutorial/
• sample项目
• https://github.com/quickappcn/sample

者 | 六小登登

责编 | 屠敏

从 2013 年专科毕业开始，一路跌跌撞撞走了很多弯路，做过餐厅服务员，进过工厂干过流水线，做过客服，干过电话销售可以说经历相当的“丰富”。

最后的机缘巧合下，走上了前端开发之路，作为一个非计算机专业且低学历的人来说，自学编程其实不是件容易的事情，不过庆幸的是自己坚持下来了。

目前工作还算不错，收入在目前所在的城市不算高，不算低，生活也还过得去，继续加油努力，也希望自己在今后更上一层。

从 2016 年下半年开始，我真正接触前端，到现在 2 年多的时间。开始之初，我没有任何的语言基础，完全从零的小白开始，就连「对象」我都弄不明白，更别说那些高深莫测的什么封装、继承、多态等。

当时自己也不知从何入手，怎么办呢？于是每当自己遇到困难时，就厚着脸皮去请教前辈大牛，然后就是去查阅资料，很多时候自己也很觉得不好意思，现在才发现人很多时候都耻于相别人请教，怕自己丢面子。

但作为一个过来人，我要告诉你请教前辈大牛真的很重要，可以让你少走很多的弯路，不要怕丢人，没面子，面子值几个钱？学到真本事才最重要。没有技能才叫真的没有面子。当然了我们在请教别人时，一定要掌握「度」，不要打扰到了别人的工作。

我现在非常感谢前辈们的赐教，也感谢那些在网上写博客、文章分享的大牛们，给了我们这些自学的小白很多的资料，经验，心得。从中受益很多。

向优秀的前辈们学习，我开始写博客，希望也能帮到和我一样，学渣、从零开始、喜欢技术的一群志同道合的人。

我深知自己的技术并不高，还处在继续学习的路上，离大牛还差的很远，我本身也非常敬畏技术，也知道自己的渺小，只希望这篇文章的「学习之路」对于那些「从零开始」学习前端的同学有一些指引作用，不像自己一开始那样的那么盲目，哪怕对你有一点点的帮助，就足够了。

说了这么多，下面我们直接进入正题，都是我平时学习和收集的一些资料希望能够帮到你。

前言

1. 首先我得告诉你，自学是件很苦的事情，学习本身就是件反人性的过程，更何况在一个从零开始的全新领域独自奋斗，这里不是要打击你，而是要你认真想好，结合自身的环境、条件。不然半途而废浪费的不仅是时间，还有精力、金钱。
2. 如果你已经想好决定去做，那就不要犹豫，坚持下去你就可以成功，像我这样的学渣都可以，你没有什么不可以的，一定要相信自己。
3. 兴趣是最好的老师，很多人对这句话非常反感，被生活所迫，谈兴趣不可笑吗？其实不是，问问自己对技术有没有兴趣，做自己喜欢和感兴趣的事情才能够走的更远和更久，很多人不理解这一点，总有一天你会明白的，我当时转前端的时候也是因为自己挺喜欢，而且最接近用户，都是所见所得的东西很好玩，另外一方面也觉得工资也挺高，所以自己打心里觉得做前端挺好。
4. 做好持续学习，时刻保持学习的心态，说实话现在社会，科技的发展非常之快，技术的更新更是如此，如果你觉得学习一门技术就可以吃到老，我劝你还是打住，可能考个公务员更适合你（不要杠精，我并不是说公务员不要学习，自己体会就好）。
5. 永远不要觉得迟，只要行动然后坚持下去，你就干掉了 80% 的人，自学的人很多，但是坚持下来的没有几个。就像郭德纲说过，不是我的相声说的多好而是我活了下来。著名营销人员「小马宋」毕业时烧了很多年的锅炉，但是自己对广告营销感兴趣，所以离职从零开始，现在已经是很有名的营销大师。
6. 与其把时间花在学与不学的纠结上，不如把这个时间放在行动上，如果发现自己不合适也坚持不下去，那就换个赛道，专注的去做一件事情，会提高你的成功概率。

工具篇

工欲善其事，必先利其器，所以在开始之前选择一个合适好用的编辑器是很重要的，工具不再多，在于好用就行，除了编辑器，我们也要掌握其他的一些工具，才能够让我们在学习的道路上更加的顺畅。

1. WebStorm

不必多说，前端最强大的编辑器，特别是那无敌的智能提示，但是它的缺点在于如果项目多于大时，出现的卡顿让很多人苦恼。

• WebStorm 官网下载地址：https://www.jetbrains.com/webstorm/。
• WebStorm 有哪些过人之处？（https://www.zhihu.com/question/20936155）
• 激活 WebStorm2018（https://blog.csdn.net/qq_32135281/article/details/82696280）

2. Visual Studio Code

微软开源免费产品，受到非常多技术人员的喜爱，基本上成为前端开发者的必备编辑器，强大的插件扩展，可以灵活的打造自己喜欢的风格。给你们送上常用插件列表拿走不谢。

• Visual Studio Code 官网下载地址：https://code.visualstudio.com/。
• VSCode 拓展推荐：https://github.com/varHarrie/varharrie.github.io/issues/10
• 使用顶级 VSCode 扩展来加快开发 JavaScript：https://www.html.cn/archives/9507
• vscode 插件推荐：https://segmentfault.com/a/1190000006697219

3. atom

也是一款免费开源的编辑器，受到很多人的喜爱，但是我本人用的较少，所以插件方面就不推荐了，大家可以按照自己的爱好去寻找。

4. 科学上网

每个程序员都应该具备的工具和能力，否则很多事情都无法办到，至于怎么做，你可以自己查阅资料，这里不就不在多说了。而且下面推荐的很多资源都是需要科学上网之后才能访问，所以一定要学会。

5. Google

在使用「Google」之前必须学会科学上网，不然无法访问，学会使用搜索可以帮助我们解决很多问题，一个人的知识是有限的，掌握了搜索的技巧才能以不变应万变，很多时候百度出来的东西重复性很大，最重要的是垃圾信息很多，在百度找不到的答案，在这里很容易找到，Google 是我的必备搜索。

6. Github

全球最大的「同性」开源交流社区，没有账号的赶紧注册，在这有很多优秀的资源项目，各种大神。观摩优秀代码是我们学习的很好路径。另外在开发过程中，很多时候任务重、时间紧，应该避免重复造轮子，这里能够找到你需要的工具或代码。

7. Stack Overflow

国外著名的技术问答交流社区，开发时碰到的很多问题在这里都能找到答案。

8. SegmentFault

对应的国内版的技术问答交流社区，如果你英文不好，也可以在这里找找答案。

9. Markdown

Markdown 轻量级标记语言，简洁的语法，让作者专注内容而非复杂的格式要求，我认为人人都应该掌握，特别是经常写博客的人。想想你在用 world 时的场景，每次写完文章之后，不得不话费很多时间进行格式的排版，使用它你就可以避免这些烦恼。

• Markdown 中文文档：https://markdown-zh.readthedocs.io/en/latest/

HTML 篇

一些准备就绪之后，开始我们的学习之旅，首先我们先从 HTML 开始。

HTML名为「超文本标记语言」，是整个页面的结构基础，它承载了我们的页面内容。

1. 基础

• w3school 在线教程（http://www.w3school.com.cn/h.asp）：内容非常的基础，适合小白学习，对 HTML 有一个入门了解。
• freeCodeCamp（https://www.freecodecamp.cn/）：一个非常好的入门学习网站，采用闯关的模式，就像游戏打怪升级一样，非常的有乐趣，准备自学的小伙伴不妨试试。

2. 进阶

• MDN HTML（https://developer.mozilla.org/zh-CN/docs/Web/HTML）：这里的内容质量更好，错误更少，内容也更加的全面。
• HTML 和 CSS 编码规范（https://codeguide.bootcss.com/）：掌握一些代码技巧，写出更好，更高质量的代码。

CSS 篇

HTML 承载了页面的内容，但是有时候会略显单调与「丑陋」，CSS 的作用就是为这些内容加上样式，就像一个美女也要有漂亮的外衣去修饰才会更加漂亮，「人靠衣装马靠鞍」，网页的内容也是需要穿上一件漂亮的外衣去吸引用户。而 CSS 则完成了这个装饰。

1. 基础

• 学习 CSS 布局（http://zh.learnlayout.com/）：带你一步一步的完成 CSS 的学习。
• CSS 参考手册（https://css.doyoe.com/）：对CSS可以有一个全面入门的学习。
• w3school CSS 参考手册（http://www.w3school.com.cn/cssref/index.asp）：同上也是非常基础的知识，适合入门。

2. 进阶

书籍：

《CSS揭秘》（https://book.douban.com/subject/26745943/）：非常推荐的一本 CSS 书籍，可以学到很多鲜为人知的技巧。

在线系列：

• MDN CSS（https://developer.mozilla.org/zh-CN/docs/Web/CSS）：和 HTML 都是 MDN 社区文档，质量保障。
• HTML和CSS编码规范（https://codeguide.bootcss.com/）：掌握一些代码技巧，写出更好，更高质量的代码。
• 大漠老师的CSS系列（https://www.w3cplus.com/CSS3）：大漠老师对CSS有非常深入的认识和丰富的实践经验，《图解CSS3：核心技术与案例实战》的作者。
• 大漠老师的SASS系列（https://www.w3cplus.com/blog/tags/302.html）：大漠老师的 sass 文章系列。
• SASS中文网（https://www.sasscss.com/）：成熟、稳定、强大的 CSS 扩展语言解析器，它可以让你使用变量，条件语句等书写 CSS。
• Stylus官网（https://stylus.bootcss.com/）：同样是 CSS 预编译器，但它省去了一些符号，让 CSS 写起来更加的简洁，清爽。
• HTML5和CSS3（https://github.com/qianguyihao/Web/tree/master/07-HTML5%E5%92%8CCSS3）：详解HTML5 和 CSS3。

知识点：

• 别说你懂CSS相对单位（http://wuyuying.com/blog/archives/css-in-depth-relative-units/）：深入了解 CSS 的相对单位rem，em区别。
• CSS 进阶内容（https://github.com/coconilu/Blog/issues/29）：常见知识点的深入了解。
• Flex 布局教程：语法篇（http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html）：阮一峰老师的flex讲解。
• Flex 布局教程：实例篇（http://www.ruanyifeng.com/blog/2015/07/flex-examples.html）：阮一峰老师的flex讲解。
• “CSS相关”目录存档（https://www.zhangxinxu.com/wordpress/category/css/）：张鑫旭大佬的CSS系列文章，深入浅出，《CSS世界》作者。
• CSS绘制的40种形状和图形（http://www.open-open.com/lib/view/open1476240478941.html）：利用CSS绘制出的40各种图形形状。
• CSS-大前端（http://www.daqianduan.com/tag/css）：一些 CSS 的知识点。

JavaScript 篇

有了 HTML 与 CSS，网页也就有了内容和样式，但是会缺少与用户的互动，所有的内容都静静的躺在那里死气沉沉。就好比一个美女穿着漂亮的衣服在你面前一动不动好像也没有什么吸引力，但如果又唱歌，又跳舞，还向你抛媚眼，那可真就把持不住了。JavaScript 就是给网页添加这样的「行为」。

Javascript 简史（https://blog.csdn.net/qq_32135281/article/details/81667714）：可以简单了解下，JavaScript 发展由来。

1. 基础

书籍

• 《JavaScript权威指南 （第6版）》（https://book.douban.com/subject/10549733/）：俗称「犀牛书」，JS 的经典之作，提升JS技能的必备书籍，我的JS基础知识全都是啃这本书啃下来的，刚开始读时可能有会有些吃力，但是只要坚持下来收获满满。
• 《JavaScript高级程序设计（第3版）》（https://book.douban.com/subject/10546125/）：俗称「红宝书」，JavaScript 超级畅销书，全书阐述了JavaScript语言实现的各个组成部分，ECMAScript，DOM，BOM，事件，面向对象等等，随时拿出来翻翻，更加深入了学习 JS。

在线系列

除了书籍之外，也有很多优秀的在线教程，可以帮助我们更好的学习。

• 现代 Javascript 教程（https://zh.javascript.info/）：非常全面的JavaScript 学习教程，从基础到高阶，非常详细，相信你会爱上它的。
• 廖雪峰的JavaScript教程（https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000）：廖雪峰系列教程。
• JavaScript 标准参考教程（alpha）（https://javascript.ruanyifeng.com/）：阮一峰老师的系列教程，通俗易懂，案例丰富。

2. 进阶

• JavaScript语言精粹（https://github.com/qibaoguang/Study-Step-by-Step/blob/master/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/javascript_the_good_parts.md）：揭示JavaScript中的精华。
• JavaScript 秘密花园（http://bonsaiden.github.io/JavaScript-Garden/zh/#other.timeouts）：对 JS 一些的核心知识点进行梳理讲解，例如：this，闭包/作用域，构造函数，原型等等，都是面试必考知识点。
• ECMAScript 6 入门（http://es6.ruanyifeng.com/）：阮一峰老师ES6入门书籍，全面介绍 ECMAScript 6 新引入的语法特性。
• JavaScript使用技巧（http://www.jstips.co/zh_CN/）：可以认识到一些你平时没有接触过的小技巧。
• 深入理解javascript原型和闭包系列（http://www.cnblogs.com/wangfupeng1988/p/4001284.html）：详细解释了原型和闭包，看完之后对原型与闭包让你彻底明白。
• 大漠老师的JavaScript系列（https://www.w3cplus.com/JavaScript）：大漠老师的JavaScript系列文章。
• JavaScript 算法与数据结构（https://github.com/trekhleb/javascript-algorithms/blob/master/README.zh-CN.md）：基于 JavaScript 的算法与数据结构，让你愉快的学习。
• JavaScript中的正则表达式（https://blog.csdn.net/qq_32135281/article/details/78274563）：我自己的一篇正则表达式的文章，希望对你有帮助。
• 30分钟掌握ES6/ES2015核心内容（上）（https://segmentfault.com/a/1190000004365693）
• 30分钟掌握ES6/ES2015核心内容（下）（https://segmentfault.com/a/1190000004368132）：阐述了一些常用的ES6的知识点。
• 学用 JavaScript 设计模式（https://www.oschina.net/translate/learning-javascript-design-patterns）：阐述JavaScript编程语言中经典和现代的设计模式。
• 你不懂JS（系列丛书）（https://github.com/getify/You-Dont-Know-JS/tree/1ed-zh-CN）
• InterviewMap（https://yuchengkai.cn/docs/frontend/#%E5%86%85%E7%BD%AE%E7%B1%BB%E5%9E%8B）：聚集了很多知识点，包括JS，浏览器，性能等。
• 30 秒就能理解的 JavaScript 代码片段（https://www.html.cn/30-seconds-of-code/）：让你更好的理解一些有用的JS代码片段。

TypeScript篇

ES6 的超集扩展，严格的数据类型，带来更好的维护，适合大型项目的开发工作，有人说它是未来的发展趋势，你说要不要了解？

• TypeScript 中文手册（https://typescript.bootcss.com/）：官网翻译版。
• TypeScript Handbook（中文版）（https://zhongsp.gitbooks.io/typescript-handbook/content/）：中文版。
• RxJS 中文文档（https://cn.rx.js.org/）：中文官网。
• 30 天精通 RxJS (01)：認識 RxJS（https://ithelp.ithome.com.tw/articles/10186104）：繁体字可能阅读起来并没有那么顺畅。

Jquery篇

虽说现在已经是单页面应用时代，有React，Vue 这种强大的框架可以使用，但也不缺乏一些老的项目需要维护，而且在学习之初，可以用它做两个简单的应用还是不错的，可以相对了解下基本用法，它可以让你更好，更方便的操作DOM。但不建议再深度学习。

• 《锋利的jQuery(第2版)》（https://book.douban.com/subject/10792216/）：一本很不错的 Jquery 学习书籍。
• jQuery API中文文档（https://www.jquery123.com/）：JQuery 中文教程。

Ajax篇

掌握了的HTML、CSS、JavaScript时，这时候可以尝试自己做一些项目了，而项目中肯定会有数据的交互，这时候就是 Ajax 的用武之地了。

• 廖雪峰AJAX（https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499861493e7c35be5e0864769a2c06afb4754acc6000）：廖雪峰大佬的博客知识。
• XMLHttpRequest 对象（https://wangdoc.com/javascript/bom/xmlhttprequest.html）：阮一峰老师的AJAX详解。
• JSON风格指南（https://github.com/liuxiaodeng/free-programming-books/blob/master/free-programming-books-zh.md#javascript）：前后端的交互数据通常都是 JSON 格式，所以了解 JSON 是必要的。

NodeJS与模块化

NodeJs 的出现让前端发展进入了一个新的领域，并且滋生出专业的 Node 工程师，不仅如此 Node 在前端模块化，工程化起到很重要的作用，所以了解是必须的，如果感兴趣的可以深入学习，可以向全栈工程师发展。

• Javascript模块化编程（一）（http://www.ruanyifeng.com/blog/2012/10/javascript_module.html）：模块的写法
• Javascript模块化编程（二）：AMD规范
• Javascript模块化编程（三）：require.js的用法
• 前端模块化开发那点历史（https://github.com/seajs/seajs/issues/588）：了解下，前端模块化的发展。
• Node.js 官方（https://nodejs.org/zh-cn/）
• 狼叔：如何正确的学习Node.js（https://github.com/i5ting/How-to-learn-node-correctly）：狼叔江湖地位颇高，《更了不起的 Node.js》的作者。
• 全栈工程师之路-Node.js（http://i5ting.github.io/nodejs-fullstack/）

框架篇

随着日益复杂的用户需求，与系统的复杂度上升，传统的开发模式日渐的很难满足，此时的三大框架孕育而生，让开发者更加高效，可复用，把关注点都放在数据层的操作，免去那些繁琐而又重复的视图操作。

现在框架的能力已经是前端开发人员必备的技能之一也是趋势，三大框架的「最终目的」都是一致的，我认为开发者不必纠结于到底应该选择哪一个学习，可以选择其中的两个是最好的。对于刚入门的人来说，建议选择 Vue 入手，比较简单，灵活。

• MVC，MVP 和 MVVM 的图示（http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html）：在学习框架之前，你应该了解下MVVM的设计思想。
• 框架原理（https://yuchengkai.cn/docs/frontend/framework.html）：了解一些框架的基本原理。

1. Angular

• Angular（https://angular.cn/）：Angular官方社区。
• Angular开发者（http://www.ngfans.net/）：大漠穷秋老师维护的站点，Angular中国布道者。
• NG-ZORRO（https://ng.ant.design/docs/introduce/zh#%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83）：Angular UI 组件库，阿里巴巴出品。

2. Vue

• Vue（https://cn.vuejs.org/index.html）：官网，最好的学习资料。
• 我的Vue进阶之路（https://blog.csdn.net/qq_32135281/column/info/29689）
• 使用vue全家桶制作博客网站（https://www.cnblogs.com/xiaohuochai/p/9228543.html）
• Element（http://element-cn.eleme.io/#/zh-CN）：一个高质量的 Vue UI 组件库。饿了么前端团队出品。
• Vue 项目里戳中你痛点的问题及解决办法（更新）（https://juejin.im/post/5b174de8f265da6e410e0b4e）：做项目难免回去到坑，这里你或许可以找到答案。

3. React

React我了解不多，所以就没什么好推荐的了，大家可自行学习。

• React官网（https://www.reactjscn.com/）

图形可视化

随着日益增长的数据，如何利用高效的利用数据，是每个企业都考虑的问题，而人的眼睛看到的东西要胜过阅读的问题，俗话说「一图胜千言」就是这个道理，所以数据的可视化就会格外的重要，以下都是我常看的一些技术，书籍，和关注的可视化开源库。

• 《HTML5 Canvas核心技术》（https://book.douban.com/subject/24533314/）：学习 Canvas 比较好的一本书籍。
• Canvas系列（https://www.w3cplus.com/search/node/canvas）：大漠老师的 Canvas 系列。
• Echarts（https://www.echartsjs.com/index.html）
• D3（https://d3js.org/）
• Highcharts（https://www.highcharts.com.cn/）
• AntV（https://antv.alipay.com/zh-cn/index.html）
• Mapv（https://mapv.baidu.com/）

工程化与版本控制篇

1. Git

版本控制工具，很多新手往往把 git 与 github 傻傻分不清楚，二者是不同的东西，一定要去区分清楚。

• Git教程（https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000）：廖雪峰老师的教程。
• Learn Git Branching（https://learngitbranching.js.org/）：一种有趣的学习 Git 的方式。
• GitHub 漫游指南（https://github.com/phodal/github）：作者是一个极客。
• git - 简易指南：http://www.bootcss.com/p/git-guide/

2. Gulp

自动化构建工具，项目打包部署前的压缩合并，节省时间，提高开发效率。

• Gulp 中文网（https://www.gulpjs.com.cn/）：官方教程。
• gulp详细入门教程（http://www.ydcss.com/archives/18）：非常详细的实现步骤。

3. Webpack

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。

• Webpack中文文档：https://www.webpackjs.com/
• webpack原理：https://juejin.im/entry/5b0e3eba5188251534379615
• Webpack揭秘——走向高阶前端的必经之路：https://juejin.im/post/5badd0c5e51d450e4437f07a
• Webpack HMR 原理解析：https://zhuanlan.zhihu.com/p/30669007
• webpack 热加载原理探索：http://shepherdwind.com/2017/02/07/webpack-hmr-principle/

4. Babel

JavaScript代码编译器，可以让ES6及以上语法转换成浏览器支持的语法，一般会在框架的脚手架中自行配置。

• Babel（https://babel.bootcss.com/）：官网教程。

5. 代码质量

• ESLint（https://eslint.bootcss.com/）：javascript代码检测工具帮助我们写出更规范的代码。

浏览器与HTTP

• 浏览器的常见知识点（https://yuchengkai.cn/docs/frontend/browser.html）：需要我们了解的常见知识。
• 网站安全（https://yuchengkai.cn/docs/frontend/safety.html）：几种常见安全问题。
• 同源限制（https://wangdoc.com/javascript/bom/same-origin.html）
• 从URL输入到页面展现到底发生什么？（https://github.com/ljianshu/Blog/issues/24）
• 深入理解浏览器的缓存机制（https://github.com/ljianshu/Blog/issues/23）
• 网页性能管理详解（http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html）
• 关于Http协议，你必须要知道的（https://github.com/ljianshu/Blog/issues/22）
• HTTP 协议（https://github.com/coconilu/Blog/issues/135）
• HTTP2 协议（https://github.com/coconilu/Blog/issues/134）
• 浏览器同源政策及其规避方法（http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html）
• 跨域资源共享 CORS 详解（http://www.ruanyifeng.com/blog/2016/04/cors.html）
• 总结 XSS 与 CSRF 两种跨站攻击（https://segmentfault.com/a/1190000004623125）

性能优化

• 性能优化（https://yuchengkai.cn/docs/frontend/performance.html）：常见性能优化。
• 前端性能优化的七大手段（https://www.cnblogs.com/xiaohuochai/p/9178390.html）
• 延迟加载(Lazyload)三种实现方式（https://zhuanlan.zhihu.com/p/25455672）
• 详解懒加载和预加载（https://www.geekjc.com/post/58d94d0f16a3655650d6fafe）
• 前端优化带来的思考，浅谈前端工程化（http://www.cnblogs.com/yexiaochai/p/4901341.html）
• 推荐几本与Web性能优化有关的书籍（https://w3ctech.com/topic/108）
• vue + webpack 前端性能优化（https://juejin.im/post/5bc5c106e51d450e7a253e1b）

SEO

• SEO优化实战（https://imweb.io/topic/5682938b57d7a6c47914fc00）

博客系列

1. 个人

现在是一个信息爆炸的时代，网上有很多优秀的博客文章，每个人的精力都是有限的，不可能关注到所有的博客，每个人关注点可能不太一样，所以关注的个人博客也会不同，这些推荐几个我比较常看的几个高质量博客。而且是持续更新的。

• 阮一峰的个人网站（http://www.ruanyifeng.com/home.html）：阮一峰老师江湖地位不必多说，博客不止有技术，现在阿里任职。
• 廖雪峰的官方网站（https://www.liaoxuefeng.com/）：廖雪峰老师写过很多优秀的系列教程，值得去学习。
• 张鑫旭（https://www.zhangxinxu.com/）：专注前端技术的大牛之一，出版《css世界》一书。
• W3cplus（https://www.w3cplus.com/）：大漠老师在手淘任职，CSS，HTML 有着丰富的经验。
• 前端入门和进阶学习笔记（https://github.com/qianguyihao/Web）：从零开始自学，然后进入京东，记录作者一路走来的学习笔记。
• 六小登登（https://blog.csdn.net/qq_32135281）：我自己的个人博客，记录自己的一些学习总结，个人成长，认识思维，虽然自己还是个菜鸟，但一直在路上。

2. 团队

• 奇舞周刊（https://weekly.75team.com/）：收集每周前端精华文章。
• 美团技术团队（https://tech.meituan.com/）：分享一些美团的技术路线。
• JavaScript Weekly（https://javascriptweekly.com/）：每周都会分享一些 JavaScript 优质内容。
• 印记中文周刊（https://weekly.docschina.org/）：如果你对英文有阅读障碍的话，印记帮你翻译。
• 凹凸实验室（https://aotu.io/index.html）：京东团队。
• 淘宝前端团队FED（http://taobaofed.org/）：淘宝前端团队，不必多说了。
• 网易FEG前端团队（http://feg.netease.com/）：网易的前端团队，网易的产品一直都是我最喜欢的。
• IMWeb前端博客（https://www.imweb.io/）：腾讯公司前端团队，负责QQ的相关业务你就知道了，都是亿级别。
• tutorialzine（https://tutorialzine.com/）：高质量教程和文章库。

项目资源

• 前端技能汇总（http://html5ify.com/fks/）：一个前端工程师需要的技能点和学习资料。
• You-need-to-know-css（https://lhammer.cn/You-need-to-know-css/#/）：一个CSS的优质项目，纯 CSS 实现我们项目中很多常用，不常用的样式。
• JavaScript libraries（https://www.javascripting.com/）：一些优秀的JavaScript 开源库。
• awesome-web-dev-books（https://github.com/jobbole/awesome-web-dev-books）：前端经典学习书单。
• 前端 TOP 100（https://www.awesomes.cn/rank）：基本涵盖了所有前端在用的开源项目，我觉得收藏这一个就够了。

常用工具

• CSS Sprites Generator（https://www.toptal.com/developers/css/sprite-generator）：雪碧图的在线制作工具。
• Lorem Picsum（https://picsum.photos/）：好用的图片临时占位符。
• Md2All（http://md.aclickall.com/）：优秀的现在 Markdown 编辑器。
• 优波设计（https://ubuuk.com/）：优秀的设计导航网站，帮助你更好的寻找资料。
• 搬书匠（http://www.banshujiang.cn/）：书籍搜索下载。
• 史莱姆导航（http://www.slimegps.cn/）：资源搜索。
• codePen（https://codepen.io/）：在线代码编辑工具。
• Iconfont（https://www.iconfont.cn/）：阿里的字体图标库，支持多种格式，下载图片，在线使用，SVG等等。
• Can I use（https://www.caniuse.com/）：可以查看浏览器兼容 CSS 情况。
• 在线工具（https://tool.lu/）：工具资源导航。

最后

以上是我这两年多一路走来收藏的一些资料，整理这份资料也花了我好几天的时间，希望能够在自学的道路上帮到你。

再次声明，我并不是什么大神，我自认为技术也没有到达这个层级，但是我会一直坚持学下去，另外一定不要误会这里面的知识我全部都会，这些都是我学习的一些资料想整理出来，免去小白的一些不知道如何查阅资料。

这里的资源可能并不适合每一个人，你也不一定全部都需要，只需要挑选自己想要的部分就行，任何事情并不是越多越好。

作者：六小登登，个人公众号：六小登登（ID：liuxiaodengdeng）。目前在某创业公司任职前端开发工作，近 3 年前端开发经验，爱技术、爱写作、爱分享。

声明：本文为作者投稿，版权归其个人所有。