Web前端重点知识体系精简.doc

Web前端知识体系精简 Web前端技术由html、css和javascript三大部分构成，是一个庞大而复杂的技术体系，其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入，然后不断地接触和学习新的知识点，因此对于初学者很难理清楚整个体系的脉络结构。本文将对Web前端知识体系进行简单的梳理，对应的每个知识点点到为止，不作详细介绍。目的是帮助大家审查自己的知识结构是否完善，如有遗漏或不正确的地方，希望共勉。 JAVASCRIPT 篇 0、基础语法 Javascript基础语法包括：变量定义、数据类型、循环、选择、内置对象等。 数据类型有string,number,boolean,null,undefined,object等。其中，string,number和boolean是基础类型,null和undefined是JS中的两个特殊类型,object是引用类型。 Javascript可以通过typeof来判断基础数据类型，但不能够准确判断引用类型, 因此需要用到另外一个方法，那就是Object的toString,关于数据类型及其判断可以参考以下博客：数据类型详解 和 判断JS数据类型的四种方法 JS常用的内置对象有Date、Array、JSON,RegExp等。 一般来讲，Date和Array用的最频繁，JSON可以对对象和数组进行序列化和反序列化，还有一个作用就是实现对象的深拷贝。 RegExp即正则表达式，是处理字符串的利器。 1、函数原型链 Javascript虽然没有继承概念，但Javascript在函数Function对象中建立了原型对象prototype，并以Function对象为主线，从上至下，在内部构建了一条原型链。 简单来说就是建立了变量查找机制，当访问一个对象的属性时，先查找对象本身是否存在，如果不存在就去该对象所在的原型连上去找，直到Object对象为止，如果都没有找到该属性才会返回undefined。 因此我们经常会利用函数的原型机制来实现JS继承。 2、函数作用域 函数作用域就是变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的。在JS中没有会块级作用域，只有函数作用域，因此JS中还存在着另外一种怪异现象，那就是变量提升。 3、函数指针 this this 存在于函数中，它指向的是该函数在运行时被调用的那个对象。在实际项目中，遇到this的坑比较多，因此需要对this作深入的理解。 Function对象还提供了call、apply和bind等方法来改变函数的this指向，其中call和apply主动执行函数，bind一般在事件回调中使用，而call和apply的区别只是参数的传递方式不同。 4、构造函数 new JS中的函数即可以是构造函数又可以当作普通函数来调用，当使用new来创建对象时，对应的函数就是构造函数，通过对象来调用时就是普通函数。 普通函数的创建有：显式声明、匿名定义、new Function() 等三种方式。 当通过new来创建一个新对象时，JS底层将新对象的原型链指向了构造函数的原型对象，于是就在新对象和函数对象之间建立了一条原型链，通过新对象可以访问到函数对象原型prototype中的方法和属性。 5、闭包 闭包其实是一个主动执行的代码块，这个代码块的特殊之处是可以永久保存局部变量，但又不污染全局变量，可以形成一个独立的执行过程，因此我们经常用闭包来定义组件。 6、单线程和异步队列 setTimeout和setInterval是JS内置的两个定时器，使用很简单，但这两个方法背后的原理却不简单。 我们知道，JS是单线程语言，在浏览器中，当JS代码被加载时，浏览器会为其分配一个主线程来执行任务(函数)，主线程会形成一个全局执行环境，执行环境采用栈的方式将待执行任务按顺序依次来执行。 但在浏览器中有一些任务是非常耗时的，比如http请求、定时器、事件回调等，为了保证其他任务的执行效率不被影响，JS在执行环境中维护了一个异步队列(也叫工作线程)，并将这些任务放入队列中进行等待，这些任务的执行时机并不确定，只有当主线程的任务执行完成以后，才会去检查异步队列中的任务是否需要开始执行。这就是为什么setTimeout(fn,0) 始终要等到最后执行的原因。 7、异步通讯 Ajax技术 Ajax是浏览器专门用来和服务器进行交互的异步通讯技术，其核心对象是XMLHttpRequest,通过该对象可以创建一个Ajax请求。为了防止XSS攻击，浏览器对Ajax做了限制，不允许Ajax跨域请求服务器,就是只能访问当前域名下的url。 当然，如果确信你的站点不存在跨域的风险，可以在服务端主动开启跨域请求。 也可以直接通过CORS或JSONP来实现。 JSONP是利用脚本(s