专栏名称: 程序员的那些事
最有影响力的程序员自媒体,关注程序员相关话题:IT技术、IT职场、在线课程、学习资源等。
目录
相关文章推荐
稀土掘金技术社区  ·  用dayjs解析时间戳,我被提了bug ·  昨天  
码农翻身  ·  Excel终于要完蛋了吗? ·  17 小时前  
玉伯  ·  企业家要 ego ... ·  昨天  
OSC开源社区  ·  马建仓 AI ... ·  2 天前  
程序员的那些事  ·  疯了!我那些怀疑 AI ... ·  6 天前  
51好读  ›  专栏  ›  程序员的那些事

Web 前端知识体系精简

程序员的那些事  · 公众号  · 程序员  · 2017-06-24 21:53

正文

请到「今天看啥」查看全文


4、构造函数 new

JS中的函数即可以是构造函数又可以当作普通函数来调用,当使用new来创建对象时,对应的函数就是构造函数,通过对象来调用时就是普通函数。

普通函数的创建有:显式声明、匿名定义、new Function() 等三种方式。

当通过new来创建一个新对象时,JS底层将新对象的原型链指向了构造函数的原型对象,于是就在新对象和函数对象之间建立了一条原型链,通过新对象可以访问到函数对象原型prototype中的方法和属性。new的详细介绍请参考博客: 理解JS中的new运算符

5、闭包

闭包其实是一个主动执行的代码块,这个代码块的特殊之处是可以永久保存局部变量,但又不污染全局变量,可以形成一个独立的执行过程,因此我们经常用闭包来定义组件。关于闭包的介绍请参考: 干货分享:让你分分钟学会JS闭包

6、单线程和异步队列

setTimeout和setInterval是JS内置的两个定时器,使用很简单,但这两个方法背后的原理却不简单。

我们知道,JS是单线程语言,在浏览器中,当JS代码被加载时,浏览器会为其分配一个主线程来执行任务(函数),主线程会形成一个全局执行环境,执行环境采用栈的方式将待执行任务按顺序依次来执行。

但在浏览器中有一些任务是非常耗时的,比如http请求、定时器、事件回调等,为了保证其他任务的执行效率不被影响, JS在执行环境中维护了一个异步队列(也叫工作线程),并将这些任务放入队列中进行等待,这些任务的执行时机并不确定,只有当主线程的任务执行完成以后,才会去检查异步队列中的任务是否需要开始执行。 这就是为什么setTimeout(fn,0) 始终要等到最后执行的原因。关于单线程和异步队列问题请参考: setTimeout(0)

7、异步通讯 Ajax技术

Ajax是浏览器专门用来和服务器进行交互的异步通讯技术,其核心对象是XMLHttpRequest,通过该对象可以创建一个Ajax请求。为了防止XSS攻击,浏览器对Ajax做了限制,不允许Ajax跨域请求服务器,就是只能访问当前域名下的url。

当然,如果确信你的站点不存在跨域的风险,可以在服务端主动开启跨域请求。 也可以直接通过CORS或JSONP来实现。

JSONP是利用脚本(script)跨域能力来模拟Ajax请求。

CORS是一个W3C标准,全称是”跨域资源共享”(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。 关于CORS的介绍请参考: 跨域资源共享 CORS 详解

8、DOM对象 document

document对象里保存着整个web页面dom结构,在页面上所有的元素最终都会映射为一个dom对象。 document也提供了很多api来查找特定的dom对象,比如getElementById,querySelector等等。

9、事件系统 Event

事件是用户与页面交互的基础,到目前为止,DOM事件从PC端的 鼠标事件(mouse) 发展到移动端的 触摸事件(touch) 和 手势事件(guesture)

由于DOM结构可能会多层嵌套,因此也衍生出了两种事件流:事件捕获和事件冒泡,后者最常用。利用事件冒泡机制可以实现很多功能,比如页面点击统计。关于两种事件流的介绍请参考: 事件冒泡和捕获

除此之外,在页面初始化、滚动、隐藏、返回等操作时分别内置了onload/onDOMContentLoaded、onscroll、onvisibility和onhashchange等事件,如果想要捕获这些事件,需要通过addEventLisener/attachEvent来进行绑定。

10、全局对象 window

在JS中,当一段JS代码在浏览器中被加载执行,JS引擎会在内存中构建一个全局执行环境, 执行环境的作用是保证所有的函数能按照正确的顺序被执行 ,而window对象则是这个执行环境中的一个全局对象,window对象中内置了很多操作api和对象,document对象就是其中一个。关于JS执行环境的介绍请参考博客: 深入理解JS执行细节

CSS 篇

css是用来对html进行修饰的一门语言。

1、选择器

css的选择器有很多种,常用的有类选择器、标签选择器、ID选择器、后代选择器、群组选择器、伪类选择器(before/after)、兄弟选择器(+~)、属性选择器等等。







请到「今天看啥」查看全文