原理

node 下的 Event Loop

前言通过 浏览器下的 Event Loop ,可以得知 javascript 是一门事件驱动的语言, javascript 主线程通过不断的调用事件队列中的事件来完成异步任务。那么 Node 下是否也是如此?Node 下的事件队列在 Node 官网有这样一篇文章:The Node.js Event Loop, Timers, and process.nextTick() 。该文章主要讲述了 Node 中是如何处理以及实现 Node 下的 Event Loop。主要包含以下内容:

  • aco Yang
    aco Yang
6 min read
原理

浏览器下的 Event Loop

前言javascript 是以单线程的形式运行在宿主环境下,javascript 采用了回调的形式来解决异步任务。为什么是单线程?javascript 的最开始的出现是为了给 web 页面增添一些动态的效果,那么就避免不了获取页面上的元素信息,如果 javascript 是以多线程的形式运行在浏览器内,如果两个线程内的 javascript 同时去获取/修改,某个页面上的元素,那么浏览器该让哪个 javascript 线程拥有获取/修改该元素的权限呢?由于元素的信息会经常性的发生变化,那么又改如何去同步各个线程内所保存的元素信息呢?所以综合以上问题, javascript 是单线程的原因就显而易见了,单线程在执行时,对于元素信息的引用在同一时间仅可能只有一个,那么以上所有的问题都不存在了。什么是异步任务?任何代码在执行时,都会碰到一些需要经过大量时间运算或是等待的代码,

  • aco Yang
    aco Yang
7 min read
React

React 组件

react 中组件的形式有两种 函数组件以及类组件,函数组件很好理解只要最终返回一个虚拟树就可以了,这中间的逻辑完全就是 js 的逻辑,没有什么好记录的,但类组件涉及到父类以及 state 需要记录一下。类组件statestate 可以说是 react 实现数据变化更新视图的最重要的一部分。state 干嘛用?state 表示一个组件的内部可变数据的集合,为什么说是可变的数据呢?不变的数据用 this 保存即可,因为不会发生变化,所以不用触发视图更新。没了,作用就是保存数据。那么如何触发视图更新呢?这就需要用到 setState 。setState 是什么?setState

  • aco Yang
    aco Yang
6 min read
React

概览 React

最重要的一点:react 是一个完全遵从 javascript 开发模式的类库,语言层面仅仅有几个 API 而已,没有配置。react 更多的是需要开发者从设计模式上去考虑如何构建一个 web 项目。概念react 主要有两方面的功能,根据数据构建虚拟树根据树构建 web 页面react 开发者仅仅需要关注于第一点即可,后续步骤由 react 按一定顺序进行下去,不需要开发者关心。虚拟树一个网页的 html 的代码就可以大致被认为是一个树结构(DOM 树),而虚拟树就是为了模拟 DOM 树结构存在的一种结构。有了虚拟树结构,我们就能将页面的结构保存在

  • aco Yang
    aco Yang
5 min read
ECMAScript6

ECMAScript6 之 decoretors

类的修饰许多面向对象的语言都有修饰器( Decorator )函数,用来修改类的行为。@testable class MyTestableClass { // ... } function testable(target) { target.isTestable = true } MyTestableClass.isTestable // true testable 函数即为修饰器,为 MyTestableClass 类添加了名为 isTestable 的静态属性。一个修饰器可以理解为包装之后跟着的类的函数。@decorator class A {} // 等同于 class A {} A = decorator(A)

  • aco Yang
    aco Yang
2 min read
ECMAScript6

ECMAScript 之 Generator 的异步使用技巧

异步在 js 界,异步是获取数据的主旋律,大概有以下几种callback 回调Promiseevent 事件简单的回顾一下以上 3 种模式:回调简单的来说就是将需要执行的函数传入异步调用内,在异步调用结束后,执行函数,写出的代码会是这样:function doSomeAsync(callback) { let data = {/* 数据 */} setTimeout(() => { callback(data) }) } doSomeAsync((data) => { // do some thing }) 但试想一下,如果说回调之中还有回调,那么将会形成一个类似金字塔的结构(回调地狱)

  • aco Yang
    aco Yang
6 min read
ECMAScript6

ECMAScript6 之 Generator

简介Generator 函数有多种理解角度。语法上,首先可以把它理解成,Generator 函数是一个状态机,封装了多个内部状态。执行 Generator 函数会返回一个遍历器对象,也就是说,Generator 函数除了状态机,还是一个遍历器对象生成函数。返回的遍历器对象,可以依次遍历 Generator 函数内部的每一个状态。简单来说,一个 Generator 函数,就像是搭建一段楼梯,它规定了楼梯的步数以及怎么走,它生成的函数的执行就像是走楼梯一般,每走一步都会有具体的执行内容以及返回值,并且不能后台只能往前走( yield ),或是走到头了( return )。一个 Generator 函数的标志就是

  • aco Yang
    aco Yang
6 min read
ECMAScript6

ECMAScript6 之 Iterator & for…of

Iterator 概念遍历器(Iterator)就是这样一种机制。它是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口,就可以完成遍历操作(即依次处理该数据结构的所有成员)。具体到语言层面来说,实现了以下几个东西规定:对象下部署一个统一的方法统一的方法返回了统一的结构上面两点中的统一方法的方法名就叫: Symbol.iterator返回的结构统一为:{ next: function }next 方法有统一的返回值结构:{ value: any, done: boolean }ES6 中,Array/Map/Set/String 等对象都部署了以上内容对于部署了上述特性的对象,有一个统一的名字:可遍历对象。

  • aco Yang
    aco Yang
4 min read
ECMAScript6

ECMAScript6 之 Reflect

简述Reflect 意味着反射,从字面意思上就可以理解为是语言层面上的内容,在 ES6 中其出现的目的主要有以下几个将 Object 下属于语言内部的方法,放到 Reflect 上,并且未来新方法只在 Reflect 上部署。使得方法的返回更加合理,解决之前在 Object 下的一些方法的返回值不合理照成的逻辑混乱。让命令式的行为变成函数行为,如: name in obj ==> Reflect.has(obj, name)与 Proxy 下的方法一一对应,这样就能让 Proxy

  • aco Yang
    aco Yang
1 min read
ECMAScript6

ECMAScript6 之 Proxy

简介Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”。一个简单的例子let obj = new Proxy({}, { get(target, key, receiver) { console.log(`getting ${key}!`) return Reflect.get(target, key, receiver)

  • aco Yang
    aco Yang
3 min read
ECMAScript6

ECMAScript6 之尾调用优化

定义尾调用(Tail Call)是函数式编程的一个重要概念,本身非常简单,一句话就能说清楚,就是指某个函数的最后一步是调用另一个函数。简单的理解就是在函数体内,最后一行 return 了一个函数调用。注:仅仅只能是函数调用,任何其他的形式都不能认为是尾调用。以下都不属于尾调用// 情况一 function f(x){ let y = g(x) return y } // 情况二 function f(x){ return g(x) + 1

  • aco Yang
    aco Yang
5 min read
ECMAScript6

ECMAScript 6 之箭头函数

简介对于箭头函数的出现,我是这样理解的:function 在 javascript 中是一种类似与流程的一种存在,一个 function 代表一种处理数据的逻辑。在 ES6 中, function 的这一特性被进一步的认可和强调,因此就产生了箭头函数。箭头函数let f = v => v 上面的等同于以下函数var f = function(v) { return v }; 当然函数参数存在没有或者多个情况var f = () => 5 // 等同于 var f

  • aco Yang
    aco Yang
5 min read
Vue

手撸一个 MVVM 不是梦

在实现 VUE 中 MVVM 的系列文章的最后一篇文章中说道:我觉得可响应的数据结构作用很大,在整理了一段时间后,这是我们的最终产出:RD - Reactive Dataok 回到整理,这篇文章我们不研究 Vue 了,而是根据我们现在的研究成果来手撸一个 MVVM。简单介绍 RD先看看下我们的研究成果:一个例子let demo = new RD({ data(){ return { text: 'Hello', firstName: 'aco', lastName: 'yang' } }, watch:

  • aco Yang
    aco Yang
13 min read
Vue

VUE - MVVM - part13 - inject & 总结

看这篇之前,如果没有看过之前的文章,移步拉到文章末尾查看之前的文章。provide / inject在上一步我们实现了,父子组件,和 props 一样 provide / inject 也是基于父子组件实现的,相比于 props 它的实现还要更简单一点。我们先来看看官网上对 provide / inject 的描述。这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。首先,由官网的例子可知,provide 的值是静态的,并不会去绑定到 data 中的内容。so 静态的,简单~

  • aco Yang
    aco Yang
5 min read
Vue

VUE - MVVM - part12 - props

看这篇之前,如果没有看过之前的文章,移步拉到文章末尾查看之前的文章。前言在上一步,我们实现 extend 方法,用于扩展 Vue 类,而我们知道子组件需要通过 extend 方法来实现,我们从测试例子来入手,看看这一步我们需要实现什么:let test = new Vue({ data() { return { dataTest: { subTest: 1 } } }, components: { sub: { props: { propsStaticTest: { default: 'propsStaticTestDefault' }, propsDynamicTest: { default: 'propsDynamicTestDefault'

  • aco Yang
    aco Yang
6 min read
Vue

VUE - MVVM - part11 - Extend

看这篇之前,如果没有看过之前的文章,移步拉到文章末尾查看之前的文章。组件的扩展在 Vue 中有 extend 方法可以扩展 Vue 的实例,在上一步中,有一些实现是必须要通过子父组件才能实现,而子组件相当于一个特殊的 Vue 实例,所以这步,我们先把这个扩展实例的方法实现。我们先来看看官网对于 extend 方法的介绍:使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。从后面一句和具体的使用方法可以得出其实是我们创建实例时,对于传入参数的扩展。对于这个参入参数我们就叫它 options。我们接着往下想,既然这个 options

  • aco Yang
    aco Yang
4 min read
Vue

VUE - MVVM - part10 - Computed

看这篇之前,如果没有看过之前的文章,移步拉到文章末尾查看之前的文章。回顾先捋一下,之前我们实现的 Vue 类,主要有一下的功能:属性和方法的代理 proxy监听属性 watcher事件对于比与现在的 Vue 中的数据处理,我们还有一些东西没有实现:Computed、props、provied/inject。由于后两者和子父组件有关,先放一放,我们先来实现 Computed 。Computed在官方文档中有这么一句话:计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。这也是计算属性性能比使用方法来的好的原因所在。ok 现在我们来实现它,我们先规定一下一个计算属性的形式:{ get: Function, set: Function

  • aco Yang
    aco Yang
7 min read