Promise、Generator和async的原理

1. 回调的缺陷

想完全的理解Promise,需要从异步的发展开始深究,理解Promise的出现是为了解决什么问题。那么我们从回调开始。
回调的缺点是

阅读更多

事件与事件捕获

1. DOM事件

《JS高程》上说,触发事件分为三个阶段:事件捕获、到达目标节点、事件冒泡。然而经测试,发现在事件捕获阶段包含到达目标节点。
关于DOM事件触发的顺序,分为三个阶段:事件捕获、到达目标阶段、事件冒泡
事件捕获:从window=>document=>html=>body=>…=>目标节点的父节点
到达目标阶段:如果事件类型是不可冒泡型,则完成当前阶段后事件对象会停止
事件冒泡:从目标节点的父节点=>…=>body=>html=>document=>window
不会冒泡的事件有:focus、blur、mouseenter、mouseleave

阅读更多

各类排序算法

1. 冒泡排序

冒泡排序是最简单的排序方法,原理就是从后往前遍历,在遍历一次的过程中,如果后面的数比前面的数小,就将小的数放到前面,因此遍历一次就能将当前最小的数冒泡到最前面。

阅读更多

谈一谈模块化的发展

随着前端js代码复杂度的提高,JavaScript模块化这个概念便被提出来,前端社区也不断地实现前端模块化,直到es6对其进行了规范,下面就介绍JavaScript模块化是如何一步一步地发展起来的,并且也会主要对这些模块化方式做一个简单的比较。
模块化的目的:
1、代码复杂度随着项目的扩大而增加
2、减少模块之间的耦合
3、希望减少http请求
最原始的js写法,将所有的函数变量都定义在全局变量下,这种写法污染全局空间,很可能会导致变量命名冲突。
接着出现模块模式的写法,模块模式使用了立即执行函数,并通过函数参数传递需要的模块变量。模块模式勉强满足了封装的需求。
然而只有封装是不够的,还需要加载。html中的js文件加载,难以维护,依赖过多,同时请求也过多。
接下来出现了commonJS模块规范,让js跳出了浏览器环境,定义了module 、 exports 、 require 、 global 实现模块的定义和引用。通过CommonJS,每个JS文件独立地存储它模块的内容(就像一个被括起来的闭包一样)。在这种作用域中,我们通过 module.exports 语句来导出对象为模块,再通过 require 语句来引入。
CommonJS以服务器优先的方式来同步载入模块,假使我们引入三个模块的话,他们会一个个地被载入。它在服务器端用起来很爽,可是在浏览器里就不会那么高效了。
CommonJS已经挺不错了,但假使我们想要实现异步加载模块该怎么办?答案就是Asynchronous Module Definition(异步模块定义规范),简称AMD.
AMD是并行加载所有依赖的模块, 并完成执行后, 再开始执行其他代码。
在一些同时需要AMD和CommonJS功能的项目中,你需要使用另一种规范:Universal Module Definition(通用模块定义规范)。
UMD创造了一种同时使用两种规范的方法,并且也支持全局变量定义。所以UMD的模块可以同时在客户端和服务端使用。
最后再ES6中定义了模块,使用import和export来导出引入模块。
现在出现了webpack模块打包器,使用webpack在打包模块的同时进行优化,通过使用loaders可以将把源模块转换成通用模块,使用plugins将模块。webpack 本身维护了一套模块系统,这套模块系统兼容了所有前端历史进程下的模块规范,包括 amd commonjs es6 等。babel 能提前将 es6 的 import 等模块关键字转换成 commonjs 的规范。这样 webpack 就无需再做处理,直接使用 webpack 运行时定义的 webpack_require 处理。

阅读更多

CORS

1. 同源策略

同源策略是指协议相同、域名相同、端口相同。
同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。
设想这样一种情况:A网站是一家银行,用户登录以后,又去浏览其他网站。如果其他网站可以读取A网站的 Cookie,会发生什么?
很显然,如果 Cookie 包含隐私(比如存款总额),这些信息就会泄漏。更可怕的是,Cookie 往往用来保存用户的登录状态,如果用户没有退出登录,其他网站就可以冒充用户,为所欲为。因为浏览器同时还规定,提交表单不受同源政策的限制。
由此可见,”同源政策”是必需的,否则 Cookie 可以共享,互联网就毫无安全可言了。

阅读更多

页面优化

文本的先统一讲一讲页面的优化,详讲图片优化、动画优化。

阅读更多

Webpack4

webpack的核心是用于现代JavaScript应用程序的静态模块捆绑器。 当webpack处理您的应用程序时,它会在内部构建一个依赖关系图,它映射您的项目所需的每个模块并生成一个或多个包。

阅读更多

输入一个URL

总体来说分为以下几个过程:

阅读更多

React理解

1、React Element

React Element是React的virtual DOM,本质上就是一个普通的对象,相较于浏览器的DOM更加轻量,它是Component的组成部分,是构建React应用的最小单元。
React Element通常由render函数返回的JSX创建,但其本质上只是React.createElement(component, props, …children)的语法糖。
React Element有类型之分,比如JSX的标签名就决定了React Element的类型,不同的JSX标签,就是不同类型的React Element。
React Element有内容(children)和属性(attribute),但是一旦React Element被创建之后,是无法改变其内容或属性的。即,React Element都是immutable不可变的。
更新界面的唯一办法是创建一个新的React Element,会由React DOM对比(diff)新旧React Element之后,只把改变了的部分更新到浏览器DOM上。

阅读更多

HTTP杂说

1、GET和POST

GET方法是安全方法,安全是指因为GET方法只是执行获取资源的动作,而POST方法被用于请求服务器接受请求中的实体,作为请求资源的一个新的从属物,所以可能会执行不安全动作。
GET方法有幂等性,幂等的意思是相同的请求请求结果一样,所以GET是幂等性
如果请求消息包含If-Modified-Since,If-Unmodified-Since,If-Match,If-None-Match或者 If-Range头域, GET的语义将
变成“条件(conditionall) GET”。一个条件GET方法会请求满足条件头域的实体。条件 GET 方法的目的是为了减少不必要的网络使用,
这通过允许利用缓存里仍然保鲜的实体而不用多次请求或传输客户端已经拥有的实体来实现的。
POST里的响应是不可缓存的。

阅读更多