webpack 热更新原理

前言

随着前端技术的不断发展,构建工具与我们的开发已密不可分,但是无论选择哪款构建工具,我们都或多或少的使用过他们热更新的能力,今天就以 webpack 为例,来看 webpack 热更新的原理。

要实现热更新的能力,首先 webpack 要具备文件监听的能力,其次也要具备模块构建的能力,所以我们就从无到有的看 webpack 热更新的原理。

发布时间:
Vue watcher 分类

前言

知道 Vue 响应式原理的都知道,每个组件都对应有一个自己的 watcher 实例,但是除了组件对应的 watcher 实例,computed 和 watch 也都分别对应有自己的 watcher 实例,所以下面我们就针对这三种 watcher 做一下研究,知道了底层实现,也能更好的让我们在使用中做出更好的抉择。

发布时间:
浏览器工作原理

一、域名解析

域名解析的过程就是查找域名对应 IP 地址的过程。

发布时间:
前端数据存储方案

前言

前端数据存储方案主要有 Cookie、Web Storage、IndexedDB 三种。下图为 Chrome 浏览器的存储方案,虽然支持 Web SQL 存储,但是 W3C Web应用工作组于2010年11月停止了对该规范的研究,所以不提倡使用,下面就以上三种存储方案做一下介绍。

发布时间:
WebSocket 简介

一、WebSocket 协议出现背景

HTTP 协议的建立主要是传输 HTML 文档。但随着时代的发展,HTTP 协议的性能遇到了他的的瓶颈。即通信只能是客户端发起请求,这使得服务器有数据发生了变化客户端只有主动发起请求才能获得最新数据。

发布时间:
前端模块化

一、模块化进化史

对于 js 的编写,不能像其他语言一样很好的支持模块化,很多程序会比较臃肿的丢在一个文件里,要把这个程序拆分开使用,两个文件之前变量的传递就是个问题。

发布时间:
JavaScript 预处理

一、预处理

JavaScript 执行前,会对脚本、模块和函数体中的语句进行预处理。预处理过程会提前处理 var、let、const、function 声明和 class 声明这些语句,以确定其中变量的意义。

发布时间:
Git 工作原理

一、Git 是什么

Git 是目前世界上最先进的分布式版本控制工具之一,下面我将通过数据的流向来介绍它。

发布时间:
Git 常用命令

一、高层命令

新建代码库

init

  • git init 在当前目录新建一个Git代码库
  • git init [project-name] 新建一个目录,将其初始化为Git代码库

clone

  • git clone [url] 下载一个项目和它的整个代码历史
发布时间:
JavaScript 中的动画问题

实现动画效果方式有很多,可以是 CSS3 的 transition 和 animation,可以是 JavaScript 的 setTimeout、setInterval, 也可以是 html5 的 RequestAnimationFrame。本文主要针对后两种方式做一下介绍。

发布时间:
koa 简介
一、介绍本文只对使用 koa 搭建服务器实现接口的思路做一下描述,具体使用的一些 api 可以去查阅相关文档。 二、概念1、ORM(Object Relational Mapping 对象关系映射)我这里简单介绍一下。首先面向对象编程把所有实体看成对象(object),关系型数据库则是采用实体之间的关系(relation)连接数据,然后 ORM 就是把数据库映射成对象,这样的好处是我们操作数据库不再需要在去写 SQL语句,只需要操作实体对象的属性和方法就可以达到操作数据库的效果。映射关系如下: 12345数据库的表(table) => 类(class)记录(record,行数据)=> ...
发布时间:
Hexo 主题制作

一、前言

之前的主题用的是默认的,网上也下载使用过别人写的主题,但是终究还是想用自己写的。所以就写了这个主题——Yin

发布时间:
Vue + SpringBoot + MyBatis 音乐网站

一、前言

本文旨在对项目的开发设计提供一个思路。了解了具体实现的来龙去脉,上手自己做或者做其他项目就容易得多了。总的来说要知道数据是怎么从数据库一步步跑到前端页面的,当知道了整个的流程再去处理中间的细节,接下来我们就开始吧。

这是我项目的 地址,可以先预览最后的效果图。

发布时间:
Vue 组件数据传递问题总结

一、组件传值

1、父子组件

发布时间:
JavaScript 原型

一、原型概念

1、原型的出现

基于原型的面向对象系统通过“复制”的方式创建新对象。原型系统的“复制操作”有两种实现思路:

  • 不是真的去复制一个原型对象,而是使得新对象持有一个原型的引用(比如 JavaScript)
  • 真的复制对象,从此两个对象再无关联。

2、原型的定义

  • 每个函数都有一个 prototype 属性(或如果所有对象都有私有字段[[prototype]],就是对象的原型),它指向一个对象,这个对象就是原型对象。(默认情况下,原型对象上都有一个 constructor 属性,它是一个指向 prototype 属性所在函数的指针。)
  • 读一个属性,如果对象本身没有,则会继续访问对象的原型,直到原型为空或者找到为止。
发布时间:
JavaScript 正则表达式

一、概念

正则表达式是用于匹配字符串中字符组合的模式。

发布时间:
JavaScript Event Loop

一、Event Loop

1、过程描述

首先 JavaScript 是单线程的脚本语言,因为假定 JS 同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器就不知道以哪个线程为准。

所以 JavaScript 的运行机制是事件循环(Event Loop),即调用栈【3】不断的向宏任务队列【4】里读取事件。

发布时间:
Vue 响应式原理

一、前言

vue 响应式原理是数据渲染到视图,及数据修改触发视图更新的过程。

发布时间:
Vue 生命周期

一、概念

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。

发布时间:
设计作品
大学时期的一些设计作品,做个纪念。 PhotoShop Maya + Zbrush + Unity3D 速写
发布时间: