整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。
但是，Javascript不是一种模块化编程语言，在es6以前，它是不支持”类”（class），所以也就没有”模块”（module）了。
首发文章，欢迎关注我的公众号：Web前端Talk
Javascript社区做了很多努力，在现有的运行环境中，实现”模块”的效果。
原始写法
模块就是实现特定功能的一组方法。
只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块。
上面的函数m1()和m2()，组成一个模块。使用的时候，直接调用就行了。
这种做法的缺点很明显：”污染”了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。
对象写法
为了解决上面的缺点，可以把模块写成一个对象，所有的模块成员都放到这个对象里面
上面的函数m1()和m2()，都封装在module1对象里。使用的时候，就是调用这个对象的属性
这样的写法会暴露所有模块成员，内部状态可以被外部改写。比如，外部代码可以直接改变内部计数器的值。
立即执行函数写法
使用”立即执行函数”（Immediately-Invoked Function Expression，IIFE），可以达到不暴露私有成员的目的
使用上面的写法，外部代码无法读取内部的_count变量。
module就是Javascript模块的基本写法。
在es6以前，还没有提出一套官方的规范,从社区和框架推广程度而言,目前通行的javascript模块规范有两种：CommonJS 和 AMD
CommonJS规范
2009年，美国程序员Ryan Dahl创造了node.js项目，将javascript语言用于服务器端编程。
这标志”Javascript模块化编程”正式诞生。前端的复杂程度有限，没有模块也是可以的，但是在服务器端，一定要有模块，与操作系统和其他应用程序互动，否则根本没法编程。
node编程中最重要的思想之一就是模块，而正是这个思想，让JavaScript的大规模工程成为可能。模块化编程在js界流行，也是基于此，随后在浏览器端，requirejs和seajs之类的工具包也出现了，可以说在对应规范下，require统治了ES6之前的所有模块化编程，即使现在，在ES6 module被完全实现之前，还是这样。
在CommonJS中,暴露模块使用module.exports和exports，很多人不明白暴露对象为什么会有两个,后面会介绍区别
在CommonJS中，有一个全局性方法require()，用于加载模块。假定有一个数学模块math.js，就可以像下面这样加载。
然后，就可以调用模块提供的方法：
正是由于CommonJS 使用的require方式的推动，才有了后面的AMD、CMD 也采用的require方式来引用模块的风格
AMD规范
有了服务器端模块以后，很自然地，大家就想要客户端模块。而且最好两者能够兼容，一个模块不用修改，在服务器和浏览器都可以运行。
但是，由于一个重大的局限，使得CommonJS规范不适用于浏览器环境。还是上一节的代码，如果在浏览器中运行，会有一个很大的问题
第二行math.add(2, 3)，在第一行require(‘math’)之后运行，因此必须等math.js加载完成。也就是说，如果加载时间很长，整个应用就会停在那里等。
这对服务器端不是一个问题，因为所有的模块都存放在本地硬盘，可以同步加载完成，等待时间就是硬盘的读取时间。但是，对于浏览器，这却是一个大问题，因为模块都放在服务器端，等待时间取决于网速的快慢，可能要等很长时间，浏览器处于”假死”状态。
因此，浏览器端的模块，不能采用”同步加载”（synchronous），只能采用”异步加载”（asynchronous）。这就是AMD规范诞生的背景。
AMD是”Asynchronous Module Definition”的缩写，意思就是”异步模块定义”。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。
模块必须采用特定的define()函数来定义。
如果一个模块不依赖其他模块，那么可以直接定义在define()函数之中。
如果这个模块还依赖其他模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。
当require()函数加载上面这个模块的时候，就会先加载Lib.js文件。
AMD也采用require()语句加载模块，但是不同于CommonJS，它要求两个参数：
第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是加载成功之后的回调函数。如果将前面的代码改写成AMD形式，就是下面这样：
math.add()与math模块加载不是同步的，浏览器不会发生假死。所以很显然，AMD比较适合浏览器环境。
目前，主要有两个Javascript库实现了AMD规范：require.js和curl.js。
CMD规范
CMD (Common Module Definition), 是seajs推崇的规范，CMD则是依赖就近，用的时候再require。它写起来是这样的：
CMD与AMD一样，也是采用特定的define()函数来定义,用require方式来引用模块
如果一个模块不依赖其他模块，那么可以直接定义在define()函数之中。
注意：带 id 和 dependencies 参数的 define 用法不属于 CMD 规范，而属于 Modules/Transport 规范。
AMD和CMD最大的区别是对依赖模块的执行时机处理不同，而不是加载的时机或者方式不同，二者皆为异步加载模块。
AMD依赖前置，js可以方便知道依赖模块是谁，立即加载；
而CMD就近依赖，需要使用把模块变为字符串解析一遍才知道依赖了那些模块，这也是很多人诟病CMD的一点，牺牲性能来带来开发的便利性，实际上解析模块用的时间短到可以忽略。
ES6标准发布后，module成为标准，标准使用是以export指令导出接口，以import引入模块，但是在我们一贯的node模块中，我们依然采用的是CommonJS规范，使用require引入模块，使用module.exports导出接口。
export语法声明用于导出函数、对象、指定文件（或模块）的原始值。
注意：在node中使用的是exports,不要混淆了
export有两种模块导出方式：命名式导出（名称导出）和默认导出（定义式导出），命名式导出每个模块可以多个，而默认导出每个模块仅一个。
命名式导出
模块可以通过export前缀关键词声明导出对象，导出对象可以是多个。这些导出对象用名称进行区分，称之为命名式导出。
我们可以使用*和from关键字来实现的模块的继承：
模块导出时，可以指定模块的导出成员。导出成员可以认为是类中的公有对象，而非导出成员可以认为是类中的私有对象：
模块导出时，我们可以使用as关键字对导出成员进行重命名：
注意，下面的语法有严重错误的情况：
export在导出接口的时候，必须与模块内部的变量具有一一对应的关系。直接导出1没有任何意义，也不可能在import的时候有一个变量与之对应
export a 虽然看上去成立，但是a的值是一个数字，根本无法完成解构，因此必须写成export {a}的形式。即使a被赋值为一个function，也是不允许的。而且，大部分风格都建议，模块中最好在末尾用一个export导出所有的接口，例如：
默认导出
默认导出也被称做定义式导出。命名式导出可以导出多个值，但在在import引用时，也要使用相同的名称来引用相应的值。而默认导出每个导出只有一个单一值，这个输出可以是一个函数、类或其它类型的值，这样在模块import导入时也会很容易引用。
命名式导出与默认导出
默认导出可以理解为另一种形式的命名导出，默认导出可以认为是使用了default名称的命名导出。
下面两种导出方式是等价的：
export使用示例
使用名称导出一个模块时：
在另一个模块（脚本文件）中，我们可以像下面这样引用：
使用默认导出一个模块时：
在另一个模块（脚本文件）中，我们可以像下面这样引用，相对名称导出来说使用更为简单：
import语法声明用于从已导出的模块、脚本中导入函数、对象、指定文件（或模块）的原始值。
import模块导入与export模块导出功能相对应，也存在两种模块导入方式：命名式导入（名称导入）和默认导入（定义式导入）。
import的语法跟require不同，而且import必须放在文件的最开始，且前面不允许有其他逻辑代码，这和其他所有编程语言风格一致。
命名式导入
我们可以通过指定名称，就是将这些成员插入到当作用域中。导出时，可以导入单个成员或多个成员：
注意，花括号里面的变量与export后面的变量一一对应
通过*符号，我们可以导入模块中的全部属性和方法。当导入模块全部导出内容时，就是将导出模块（’my-module.js’）所有的导出绑定内容，插入到当前模块（’myModule’）的作用域中：
导入模块对象时，也可以使用as对导入成员重命名，以方便在当前模块内使用：
导入多个成员时，同样可以使用别名：
导入一个模块，但不进行任何绑定：
默认导入
在模块导出时，可能会存在默认导出。同样的，在导入时可以使用import指令导出这些默认值。
直接导入默认值：
也可以在命名空间导入和名称导入中，同时使用默认导入：
import使用示例
在import的时候，可以这样用：
这个语法糖的好处就是import的时候，可以省去花括号{}。
简单的说，如果import的时候，你发现某个变量没有花括号括起来（没有*号），那么你在脑海中应该把它还原成有花括号的as语法。
所以，下面这种写法你也应该理解了吧：
import后面第一个$是{defalut as $}的替代写法。
as关键字
as简单的说就是取一个别名,export中可以用，import中其实可以用：
上面这段代码，export的时候，对外提供的接口是fun，它是a.js内部a这个函数的别名，但是在模块外面，认不到a，只能认到fun。
import中的as就很简单，就是你在使用模块里面的方法的时候，给这个方法取一个别名，好在当前的文件里面使用。之所以是这样，是因为有的时候不同的两个模块可能通过相同的接口，比如有一个c.js也通过了fun这个接口：
如果在b.js中同时使用a和c这两个模块，就必须想办法解决接口重名的问题，as就解决了。
Module.exports
module.exports对象是由模块系统创建的。 有时这是难以接受的；许多人希望他们的模块成为某个类的实例。 为了实现这个，需要将期望导出的对象赋值给module.exports。 注意，将期望的对象赋值给exports会简单地重新绑定到本地exports变量上，这可能不是你想要的。
exports变量是在模块的文件级别作用域内有效的，它在模块被执行前被赋于 module.exports 的值。它有一个快捷方式，以便 module.exports.f = … 可以被更简洁地写成exports.f = …。 注意，就像任何变量，如果一个新的值被赋值给exports，它就不再绑定到module.exports(其实是exports.属性会自动挂载到没有命名冲突的module.exports.属性)
从Api文档上面的可以看出，从require导入方式去理解，关键有两个变量(全局变量module.exports，局部变量exports)、一个返回值(module.exports)
demo.js:
每个js文件一创建，都有一个var exports = module.exports = {},使exports和module.exports都指向一个空对象。
module.exports和exports所指向的内存地址相同
者：樱桃小丸子儿
链接：https://www.jianshu.com/p/2273c8d2ef02
介绍js有哪些内置对象？
Object 是 JavaScript 中所有对象的父对象
数据封装类对象：Object、Array、Boolean、Number 和 String
其他对象：Function、Arguments、Math、Date、RegExp、Error
说出一些写Javascript的基本规范
1.不要在同一行声明多个变量。
2.请使用 ===/!==来比较true/false或者数值
3.使用对象字面量替代new Array这种形式
4.不要使用全局函数。
5.Switch语句必须带有default分支
6.函数不应该有时候有返回值，有时候没有返回值。
7.For循环必须使用大括号
8.If语句必须使用大括号
9.for-in循环中的变量 应该使用var关键字明确限定作用域，从而避免作用域污染。
10.命名规则中构造器函数首字母大写，如function Person(){}
11.写注释。
Javascript有几种类型的值？你能画一下他们的内存图吗？
数据类型分为两大类：堆和栈
栈：原始数据类型（Undefined，Null，Boolean，Number、String）
堆：引用数据类型（对象、数组和函数）
两种类型的区别是：存储位置不同；原始数据类型直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定,如果存储在栈中，将会影响程序运行的性能；
引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。
JavaScript创建对象的几种方式？
1.对象字面量的方式p＝｛｝；
2.用function来模拟无参的构造函数，再定义属性；
3.用function模拟构造函数，利用this；
4.利用工厂方式（内置对象Object）；
5.利用原型方式来创建；
6.混合方式来创建。
JavaScript作用链域
当代码在一个环境中执行时，会创建变量对象的一个作用域链。如果是个函数，则将其活动对象作为变量对象。活动对象在最开始只包含一个arguments对象。而下一个变量对象则来自下一个包含环境。如此一直延续到全局执行环境，这种组织形式即为作用域链。内部函数可访问外部变量，外部变量无法访问内部函数。注意：js没有块级作用域，若要形成块级作用域，可通过（function（）｛｝）（）；立即执行的形式实现。
JavaScript 开发进阶：理解 JavaScript 作用域和作用域链
["1","2","3"].map（parseint）答案是多少？
[1, NaN, NaN]
parseInt() 函数可解析一个字符串，并返回一个整数。需要两个参数 (val, radix)，
其中 radix 表示解析时用的基数。
map 传了 3 个 (element, index, array)，对应的 radix 不合法导致解析失败。
["1","2","3"].map（parseint）
算出字符串中出现次数最多的字符是什么，出现了多少次
var str = "adadfdfseffserfefsefseeffffftsdg";
var maxLength = 0;
var result = "";
while(str != ''){
oldStr = str;
str = str.replace(new RegExp(str.charAt(0),"g"),"");
if( oldStr.length-str.length > maxLength){
maxLength = oldStr.length-str.length;
result = getStr + "=" + maxLength;
}
}
alert(result);
编写一个方法 求一个字符串的字节长度
<script language=”javascript”type=”text/javascript”>
new function(s) // s指最后括号中的参数
{
if(!arguments.length||!s)
//arguments指最下面括号中的参数集， .length指此集合的参数个数
//如果最下面括号中是("你好abc","哈哈"),
那么arguments={"你好abc","哈哈"}, .length=2
//!s 表示参数是否非空
return null;
if(""==s)
return 0;
var l=0;
for(var i=0;i<s.length;i++)
//中文的值都是大于255的，所以“你好”为4个字节，
//可以测试：alert(s.charCodeAt(i));
{
if(s.charCodeAt(i)>255) l+=2; else l++;
}
alert(l);
}
("hello你好，我好,大家好！world!");
</script>
JavaScript中有一个函数，执行对象查找的时候，永远不会去查找原型，这个函数是？
Object.hasOwnProperty(proName)
其中参数object是必选项，一个对象的实例。
proName是必选项，一个属性名称的字符串值。
hasOwnProperty 函数方法是返回一个布尔值，指出一个对象是否具有指定名称的属性。此方法无法检查该对象的原型链中是否具有该属性；该属性必须是对象本身的一个成员。如果 object 具有指定名称的属性，那么JavaScript中hasOwnProperty函数方法返回 true，反之则返回 false。
页面编码和被请求资源的编码如果不一致怎么处理？
a.html 的编码是gbk或gb2312的。 而引入的js编码为utf-8的 ，那就需要在引入的时候加上
<script src="http://www.xxx.com/test.js"charset="utf-8"></script>
同理，如果你的页面是utf-8的，引入的js是gbk的，那么就需要加上charset="gbk"
模块化开发怎么做？
模块化就是将js文件按照功能分离，根据需求引入不同的文件中。源于服务器端。
在ES6中提出用工具babel,webpack打包成浏览器识别的js来实现模块化开发，不同的框架和库的模块，有很多功能类似比如Node.js中的模块，Angular.js中的模块，React.js中的模块，只要接口Api可以对的上，那么也可以通用。
其他
网站重构的理解？
网站重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。也就是说是在不改变UI的情况下，对网站进行优化，在扩展的同时保持一致的UI。
对于传统的网站来说重构通常是：
表格(table)布局改为DIV+CSS
使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)
对于移动平台的优化
针对于SEO进行优化
深层次的网站重构应该考虑的方面
减少代码间的耦合
让代码保持弹性
严格按规范编写代码
设计可扩展的API
代替旧有的框架、语言(如VB)
增强用户体验
通常来说对于速度的优化也包含在重构中
压缩JS、CSS、image等前端资源(通常是由服务器来解决)
程序的性能优化(如数据读写)
采用CDN来加速资源加载
对于JS DOM的优化
HTTP服务器的文件缓存
AMD和CMD 规范的区别？
AMD规范是 RequireJS 在推广过程中对模块定义的规范化产出的，而CMD规范是SeaJS 在推广过程中对模块定义的规范化产出的。这些规范的目的都是为了 JavaScript 的模块化开发，特别是在浏览器端的。
主要区别总结为以下三条
1、CMD推崇依赖就近，而AMD推崇依赖前置
2、执行顺序上： CMD是延迟执行的，而AMD是提前执行的。
3、api设计角度上：AMD 的 API 默认是一个当多个用，CMD 的 API 严格区分，推崇职责单一。比如 AMD 里，require 分全局 require 和局部 require，都叫 require。CMD 里，没有全局 require，而是根据模块系统的完备性，提供 seajs.use 来实现模块系统的加载启动。CMD 里，每个 API 都简单纯粹。
一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）
分为4个步骤：
①当发送一个URL请求时，不管这个URL是Web页面的URL还是Web页面上每个资源的URL，浏览器都会开启一个线程来处理这个请求，同时在远程DNS服务器上启动一个DNS查询。这能使浏览器获得请求对应的IP地址。
②浏览器与远程Web服务器通过TCP三次握手协商来建立一个TCP/IP连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。
③一旦TCP/IP连接建立，浏览器会通过该连接向远程服务器发送HTTP的GET请求。远程服务器找到资源并使用HTTP响应返回该资源，值为200的HTTP响应状态表示一个正确的响应。
④此时，Web服务器提供资源服务，客户端开始下载资源。
请求返回后，便进入了我们关注的前端模块，简单来说，浏览器会解析HTML生成DOM Tree，其次会根据CSS生成CSS Rule Tree，而javascript又可以根据DOM API操作DOM。
WEB应用从服务器主动推送Data到客户端有那些方式？
JavaScript数据推送
Commet：基于HTTP长连接的服务器推送技术
基于WebSocket的推送方案
SSE（Server-Send Event）：服务器推送数据新方式
者 | 六小登登
责编 | 屠敏
从 2013 年专科毕业开始，一路跌跌撞撞走了很多弯路，做过餐厅服务员，进过工厂干过流水线，做过客服，干过电话销售可以说经历相当的“丰富”。
最后的机缘巧合下，走上了前端开发之路，作为一个非计算机专业且低学历的人来说，自学编程其实不是件容易的事情，不过庆幸的是自己坚持下来了。
目前工作还算不错，收入在目前所在的城市不算高，不算低，生活也还过得去，继续加油努力，也希望自己在今后更上一层。
从 2016 年下半年开始，我真正接触前端，到现在 2 年多的时间。开始之初，我没有任何的语言基础，完全从零的小白开始，就连「对象」我都弄不明白，更别说那些高深莫测的什么封装、继承、多态等。
当时自己也不知从何入手，怎么办呢？于是每当自己遇到困难时，就厚着脸皮去请教前辈大牛，然后就是去查阅资料，很多时候自己也很觉得不好意思，现在才发现人很多时候都耻于相别人请教，怕自己丢面子。
但作为一个过来人，我要告诉你请教前辈大牛真的很重要，可以让你少走很多的弯路，不要怕丢人，没面子，面子值几个钱？学到真本事才最重要。没有技能才叫真的没有面子。当然了我们在请教别人时，一定要掌握「度」，不要打扰到了别人的工作。
我现在非常感谢前辈们的赐教，也感谢那些在网上写博客、文章分享的大牛们，给了我们这些自学的小白很多的资料，经验，心得。从中受益很多。
向优秀的前辈们学习，我开始写博客，希望也能帮到和我一样，学渣、从零开始、喜欢技术的一群志同道合的人。
我深知自己的技术并不高，还处在继续学习的路上，离大牛还差的很远，我本身也非常敬畏技术，也知道自己的渺小，只希望这篇文章的「学习之路」对于那些「从零开始」学习前端的同学有一些指引作用，不像自己一开始那样的那么盲目，哪怕对你有一点点的帮助，就足够了。
说了这么多，下面我们直接进入正题，都是我平时学习和收集的一些资料希望能够帮到你。
前言
工具篇
工欲善其事，必先利其器，所以在开始之前选择一个合适好用的编辑器是很重要的，工具不再多，在于好用就行，除了编辑器，我们也要掌握其他的一些工具，才能够让我们在学习的道路上更加的顺畅。
1. WebStorm
不必多说，前端最强大的编辑器，特别是那无敌的智能提示，但是它的缺点在于如果项目多于大时，出现的卡顿让很多人苦恼。
2. Visual Studio Code
微软开源免费产品，受到非常多技术人员的喜爱，基本上成为前端开发者的必备编辑器，强大的插件扩展，可以灵活的打造自己喜欢的风格。给你们送上常用插件列表拿走不谢。
3. atom
也是一款免费开源的编辑器，受到很多人的喜爱，但是我本人用的较少，所以插件方面就不推荐了，大家可以按照自己的爱好去寻找。
4. 科学上网
每个程序员都应该具备的工具和能力，否则很多事情都无法办到，至于怎么做，你可以自己查阅资料，这里不就不在多说了。而且下面推荐的很多资源都是需要科学上网之后才能访问，所以一定要学会。
5. Google
在使用「Google」之前必须学会科学上网，不然无法访问，学会使用搜索可以帮助我们解决很多问题，一个人的知识是有限的，掌握了搜索的技巧才能以不变应万变，很多时候百度出来的东西重复性很大，最重要的是垃圾信息很多，在百度找不到的答案，在这里很容易找到，Google 是我的必备搜索。
6. Github
全球最大的「同性」开源交流社区，没有账号的赶紧注册，在这有很多优秀的资源项目，各种大神。观摩优秀代码是我们学习的很好路径。另外在开发过程中，很多时候任务重、时间紧，应该避免重复造轮子，这里能够找到你需要的工具或代码。
7. Stack Overflow
国外著名的技术问答交流社区，开发时碰到的很多问题在这里都能找到答案。
8. SegmentFault
对应的国内版的技术问答交流社区，如果你英文不好，也可以在这里找找答案。
9. Markdown
Markdown 轻量级标记语言，简洁的语法，让作者专注内容而非复杂的格式要求，我认为人人都应该掌握，特别是经常写博客的人。想想你在用 world 时的场景，每次写完文章之后，不得不话费很多时间进行格式的排版，使用它你就可以避免这些烦恼。
HTML 篇
一些准备就绪之后，开始我们的学习之旅，首先我们先从 HTML 开始。
HTML名为「超文本标记语言」，是整个页面的结构基础，它承载了我们的页面内容。
1. 基础
2. 进阶
CSS 篇
HTML 承载了页面的内容，但是有时候会略显单调与「丑陋」，CSS 的作用就是为这些内容加上样式，就像一个美女也要有漂亮的外衣去修饰才会更加漂亮，「人靠衣装马靠鞍」，网页的内容也是需要穿上一件漂亮的外衣去吸引用户。而 CSS 则完成了这个装饰。
1. 基础
2. 进阶
书籍：
《CSS揭秘》（https://book.douban.com/subject/26745943/）：非常推荐的一本 CSS 书籍，可以学到很多鲜为人知的技巧。
在线系列：
知识点：
JavaScript 篇
有了 HTML 与 CSS，网页也就有了内容和样式，但是会缺少与用户的互动，所有的内容都静静的躺在那里死气沉沉。就好比一个美女穿着漂亮的衣服在你面前一动不动好像也没有什么吸引力，但如果又唱歌，又跳舞，还向你抛媚眼，那可真就把持不住了。JavaScript 就是给网页添加这样的「行为」。
Javascript 简史（https://blog.csdn.net/qq_32135281/article/details/81667714）：可以简单了解下，JavaScript 发展由来。
1. 基础
书籍
在线系列
除了书籍之外，也有很多优秀的在线教程，可以帮助我们更好的学习。
2. 进阶
TypeScript篇
ES6 的超集扩展，严格的数据类型，带来更好的维护，适合大型项目的开发工作，有人说它是未来的发展趋势，你说要不要了解？
Jquery篇
虽说现在已经是单页面应用时代，有React，Vue 这种强大的框架可以使用，但也不缺乏一些老的项目需要维护，而且在学习之初，可以用它做两个简单的应用还是不错的，可以相对了解下基本用法，它可以让你更好，更方便的操作DOM。但不建议再深度学习。
Ajax篇
掌握了的HTML、CSS、JavaScript时，这时候可以尝试自己做一些项目了，而项目中肯定会有数据的交互，这时候就是 Ajax 的用武之地了。
NodeJS与模块化
NodeJs 的出现让前端发展进入了一个新的领域，并且滋生出专业的 Node 工程师，不仅如此 Node 在前端模块化，工程化起到很重要的作用，所以了解是必须的，如果感兴趣的可以深入学习，可以向全栈工程师发展。
框架篇
随着日益复杂的用户需求，与系统的复杂度上升，传统的开发模式日渐的很难满足，此时的三大框架孕育而生，让开发者更加高效，可复用，把关注点都放在数据层的操作，免去那些繁琐而又重复的视图操作。
现在框架的能力已经是前端开发人员必备的技能之一也是趋势，三大框架的「最终目的」都是一致的，我认为开发者不必纠结于到底应该选择哪一个学习，可以选择其中的两个是最好的。对于刚入门的人来说，建议选择 Vue 入手，比较简单，灵活。
1. Angular
2. Vue
3. React
React我了解不多，所以就没什么好推荐的了，大家可自行学习。
图形可视化
随着日益增长的数据，如何利用高效的利用数据，是每个企业都考虑的问题，而人的眼睛看到的东西要胜过阅读的问题，俗话说「一图胜千言」就是这个道理，所以数据的可视化就会格外的重要，以下都是我常看的一些技术，书籍，和关注的可视化开源库。
工程化与版本控制篇
1. Git
版本控制工具，很多新手往往把 git 与 github 傻傻分不清楚，二者是不同的东西，一定要去区分清楚。
2. Gulp
自动化构建工具，项目打包部署前的压缩合并，节省时间，提高开发效率。
3. Webpack
Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。
4. Babel
JavaScript代码编译器，可以让ES6及以上语法转换成浏览器支持的语法，一般会在框架的脚手架中自行配置。
5. 代码质量
浏览器与HTTP
性能优化
SEO
博客系列
1. 个人
现在是一个信息爆炸的时代，网上有很多优秀的博客文章，每个人的精力都是有限的，不可能关注到所有的博客，每个人关注点可能不太一样，所以关注的个人博客也会不同，这些推荐几个我比较常看的几个高质量博客。而且是持续更新的。
2. 团队
项目资源
常用工具
最后
以上是我这两年多一路走来收藏的一些资料，整理这份资料也花了我好几天的时间，希望能够在自学的道路上帮到你。
再次声明，我并不是什么大神，我自认为技术也没有到达这个层级，但是我会一直坚持学下去，另外一定不要误会这里面的知识我全部都会，这些都是我学习的一些资料想整理出来，免去小白的一些不知道如何查阅资料。
这里的资源可能并不适合每一个人，你也不一定全部都需要，只需要挑选自己想要的部分就行，任何事情并不是越多越好。
作者：六小登登，个人公众号：六小登登（ID：liuxiaodengdeng）。目前在某创业公司任职前端开发工作，近 3 年前端开发经验，爱技术、爱写作、爱分享。
声明：本文为作者投稿，版权归其个人所有。
*请认真填写需求信息，我们会在24小时内与您取得联系。
