js 设计模式-发布订阅模式(观察者模式)

如果对 apply 的使用不太自信，可以看这篇文章 apply 、 call 、bind 三者的区别 什么是发布订阅模式(观察者模式) 订阅者可监听发布者发布的消息，一旦发布者有消息发布，那么订阅者就可以接收到消息，当然订阅者也可选择性订阅 发布订阅模式(观察者模式)实现条件 确定发布者 确定缓存列表（用于存储订阅者） 发布消息（接收消息） 最常见的发布订阅模式(观察者模式) dom 监听事件 发…

JavaScript · 5/19/2019 · 2 分钟阅读

你想要的 vue 源码分析 · 29

代码 执行 结果

Vue 源码 · 5/19/2019 · 2 分钟阅读

你想要的 vue 源码分析 · 28

将 AST 深度遍历，根据不同条件生成 _c(),_l(),_e(),_l(),_v() 等 render 代码字符串，最后通过 createFunction()方法转成函数 代码片段 CodegenState 定义 获取 modules 里面的函数，比如 genData，transformCode 等 genElement() 判断当前 ast 属性，执行不同代码，生成不同代码串 genIf()…

Vue 源码 · 5/19/2019 · 5 分钟阅读

vue 组件通信的 6 种方式

props/$emit eventBus $attrs/$listeners provide/inject $ref vuex demo 地址 定义父子关系 a.vue 是父组件，b.vue 是 a.vue 的子组件，c.vue 和 d.vue 是兄弟组件，是 b.vue 的子组件 props/$emit a.vue b.vue 实现效果 eventBus vue1.x 的 API， bus.js…

Vue 源码 · 5/18/2019 · 4 分钟阅读

你想要的 vue 源码分析 · 27

代码 执行 把 parse 的结果进行静态节点标记 结果 参考 剖析 Vue.js 内部运行机制

Vue 源码 · 5/17/2019 · 1 分钟阅读

你想要的 vue 源码分析 · 26

代码 执行 结果 参考 剖析 Vue.js 内部运行机制

Vue 源码 · 5/17/2019 · 4 分钟阅读

你想要的 vue 源码分析 · 25

优化一些不依赖响应式数据的 AST，具体是做了标记静态节点和标记静态根，如果是静态节点，DOM 永远不需要改变。这样标记的目的是对模版更新做性能优化 代码片段 入口 标记静态节点，静态节点的特点 是纯文本 普通元素有 v-pre 指令 没有使用 v-if，v-for，非 v-once 外的其他指令，非内置组件，是平台保留标签，没带 v-for 的 template 标签的直接节点，所有属性都是静态…

Vue 源码 · 5/16/2019 · 2 分钟阅读

z-index 层叠规则

如果对 z-index（层叠样式表）是什么还不太自信，可以看 MDN 使用 z-index 常见的问题 为什么我设置了 z-index:9999，或者 z-index:-9999，但是没生效 设置了定位属性，也设置 float 属性，怎么 z-index 就出问题了 z-index:0,z-index:1,z-index auto 有什么区别 定义一些概念 定位元素：设置了 position：re…

CSS · 5/16/2019 · 4 分钟阅读

理解 js 模块规范：CommonJS、AMD、CMD、UMD 和 ES6 module

CommonJS 服务端模块规范，ES5 的 Nodejs 采用了这个规范 一个单独的文件就是一个模块，加载使用 require 方法读取文件 CommonJS 是同步的，只有加载完成才能执行后面的操作 这种方法适用于文件已经在硬盘中了，加载速度快，如果是服务端文件，就要用其他方式了 ADM(Require.js) 支持浏览器环境 AMD 是 Require.js 推广的时候定义的规范 AMD 是…

JavaScript · 5/13/2019 · 3 分钟阅读

理解 js 的面对对象编程、面向过程编程、命令式编程和函数式编程(声明式编程)

面向对象编程 如果对 js 的原型，原型链，__proto__不熟悉，可以看我之前对 原型，继承，设计模式介绍 面向对象编程的特点 每一个对象都可以被看作一个用户清晰角色或者责任的小机器 有命名空间：一个有着对象所有功能的容器 有 class 类：对象属性与方法的定义 有 Object：类一个实例 有 Property：对象的属性 有 Methods：对象的方法 有 Constructor：对象的…

JavaScript · 5/13/2019 · 3 分钟阅读

js 设计模式-工厂模式

什么是工厂模式 当去买一个 🍔 的时候，无须得到 🍔 的原材料，只需要获得到 🍔 对应工厂模式：不暴露创建对象的具体逻辑，将创建对象的方法封装到一个函数中，这个函数就是一个工厂 工厂模式按照抽象程度可以分为：1.简单工厂模式 2.工厂方法模式 3.抽象工厂模式 什么时候用工厂模式 对实例的封装，使用 new 操作符时候可以考虑用工厂模式 身边的工厂模式 $(selector) $()就是一个…

JavaScript · 5/12/2019 · 7 分钟阅读

理解 js 的继承：原型链继承、构造函数继承、组合继承、原型继承、寄生继承、寄生组合继承和 ES6 class extend

原型链继承 将父类的实例作为子类的原型 优点 父类方法可以复用 缺点 父类的引用属性会被所有子类共享 子类创建实例不能向父类传递参数 构造函数继承 将父类构造函数内容复制给子类构造函数 优点 可以在 Child 中向 Parent 传参 类的引用属性不会被共享 缺点 都在构造函数中定义，每次创建实例都会初始化方法或属性 父类方法不能复用 组合继承 构造函数继承与原型链继承结合 优点 父类的方法可以…

JavaScript · 5/12/2019 · 5 分钟阅读

理解 js new 操作符做了什么

做了什么 创建一个空对象 对象的__proto__指向构造函数的 prototype 改变构造函数的 this 指向，指向 obj 返回这个对象 new 的实现

JavaScript · 5/12/2019 · 1 分钟阅读

理解 js 的\_\_proto\_\_ 、prototype 和 constructor

__proto__ __proto__ 指向它对应的原型对象 prototype 只有函数才有 prototype 属性 每个函数创建后都有 prototype 属性，一旦把这个函数当作构造函数，调用 new 操作符，js 就会创建构造函数的实例 创建一个实例，是通过__proto__指向构造函数的 prototype 来实现继承构造函数 prototype 的所有属性和方法的 construct…

JavaScript · 5/12/2019 · 2 分钟阅读

http 的 header 头

HTTP 网络 · 5/12/2019 · 1 分钟阅读

Promise 源码实现

Promise/A+规范 Promise 规范有 Promise/A Promise/B Promise/C Promise/D Promise/A+是 Promise/A 的升级版本 Promise 有 3 个状态：等待态(Pending)、执行态(Fulfilled)、拒绝态(Rejected) then 方法可以被一个 promise 调用多次，then 方法必须返回一个 promise 等…

JavaScript · 5/12/2019 · 8 分钟阅读

你想要的 vue 源码分析 · 24

解析模板，生成 AST 的过程 parse 的目的 把 template 解析成 AST,AST 是一个对象，parse 过程包括，从 option 中取参数，parseHTML，retrun rootElement parseHTML 对 template 进行正则匹配，每匹配到一个标签或属性都会 advance，并剔除已经匹配的字符串，在匹配的过程中，解析出开始标签，闭合标签，属性(attrs…

Vue 源码 · 5/11/2019 · 7 分钟阅读

你想要的 vue 源码分析 · 23

编译方式 模版->真实 DOM 的渲染过程中,有把模版编译成 render 函数，这个过程就叫编译 vue 提供了两种编译方法：Runtime + Compiler 和 Runtime only Runtime + Compiler:如果在 vue 对象中用了 template，在运行中就可以编译的 Runtime only:在编译阶段把.vue 文件编译成 rener 函数 编译入口 $moun…

Vue 源码 · 5/9/2019 · 5 分钟阅读

你想要的 vue 源码分析 · 22

图片来自： https://ustbhuangyi.github.io/vue-analysis/reactive/summary.html 核心去观测数据的变化，当数据变化以后，能通知对应的观察者，来实行相关的逻辑 Dep 的实现是最核心，实际上连接数据与对应观察者的桥梁 Vue 初始化的时候，对不同指令对应的属性做处理，对于 data 和 props，会通过 observer 和 define…

Vue 源码 · 5/8/2019 · 4 分钟阅读

你想要的 vue 源码分析 · 21

响应式数据发生变化，触发渲染 watcher 的回调函数，进而执行组件的更新过程 组件更新过程 组件更新过程是新旧 vnode diff 的过程 新旧节点不相同：1. 创建新节点 2.更新父占位符节点 3.删除旧节点 新旧节点相同：1. 获取他们 children，根据不同情况做不同的更新逻辑 最复杂是新旧节点相同，而且都存在子节点，会执行 updateChildren diff 算法 源码 组件…

Vue 源码 · 5/6/2019 · 10 分钟阅读