Mactavish

Frontend Developer. Valar Morghulis
Mactavish

A Philosophy of software design 精读

2019-07-22  -  8 min read

Vue 原理解读系列(一) 之 Virtual DOM and Diff

2018-08-06  -  14 min read

前言 Vue.js 对我来说可以说是非常重要也非常熟悉的一个前端框架,我也一直想抽时间写一个关于 Vue 的原理的解读系列 废话不多说,马上进入此篇文章的重点 和 为什么以这个内容作为开题 很多人都在谈论 Virtual DOM,但是 Virtual DOM 真正的意义在哪里?仅仅是为了提高原本 DOM…

走进 Viewport 的世界

2018-05-23  -  7 min read

概述 基本上我们都知道,在做移动端 Web 开发的时候,我们为了让浏览器能够在小屏幕上(通常是手机)给用户呈现一个良好的视觉效果,我们往往需要在 HTML…

[译文]深入理解 ES Modules (手绘示例)

2018-04-27  -  3 min read

注:本篇博客为原始翻译,同时由博主本人发布在众成翻译平台 原文链接: https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/?utm_source=dev-newsletter&utm_medium=email&utm_campaign=mar…

JavaScript 模块的前世今生

2018-04-20  -  6 min read

令人费解的术语 AMD, CommonJS, UMD, Import, Export,相信大多数前端开发者都或多或少地看见过这些模块相关的术语 对于新入坑的开发者,哪怕是已经有了一段时间开发经验的开发者,都不一定能全部了解这些术语背后的含义 然而它们早已渗透到我们日常的开发中,今天我们就来回顾一下 Javascript…

Script 文件的同步和异步加载

2018-04-11  -  2 min read

概述 这篇文章将会针对一个具体的例子来讨论 JavaScript 脚本文件在 HTML 中同步和异步加载的情况 如果你想要了解这两者的区别以及实际的运用,那么这篇文章非常将非常适合你 脚本文件的加载 在大多数情况下,我们页面上的脚本都是同步加载的 多数 JS…

深入了解 JS 中的装饰器 (Decorator)

2018-03-08  -  4 min read

概述 今天我想谈一谈 ECMAScript 的下一代 “python” 化的提案 ———— Decorator 这个提案最先由 提出,目前该提案在 TC39 处于 ,详情可以在 TC39 的 Github Repo 中找到 为什么要说 “python” 化呢,因为在 python 中就有 Decorator…

令人抓狂的 HTML Email

2018-01-17  -  2 min read

前言 如果我告诉你,世界上有这么一种方法,可以让你体验下 90 年代的开发生活 那么你一定要尝试一下编写 HTML 邮件,保证让你抓狂 最近我就遇到了这样的问题,我在给公司开发内部邮件平台的邮件模板 遇到了很多兼容性的问题 这也是这篇博客诞生的初衷 编码 HTML…

未来的布局 —— Grid Layout

2017-12-28  -  6 min read

概述 从 Table 到 Float 再到 Flexbox,CSS 的布局方式一直在不断地进化和演变 并且功能变得越来越强大,使用方式变得越来越简易 今天,我想谈一谈下一代的布局方式: Grid Layout (网格布局) 其实在实际的布局中,我们之前都是在用各种不同地方式来模拟网格的行为 如今 CSS…

Box Sizing 最佳实践

2017-12-20  -  1 min read

前言 这篇文章的前提是要充分了解 CSS 盒模型相关的知识,这里不做探讨 感兴趣的可以看看 MDN…

谈谈 Throttle 和 Debounce

2017-12-11  -  5 min read

概述 Throttle 和 Debounce 是前端的一个老生常谈的话题了 这两个技术非常相似,它们都是控制一定时间内函数执行的次数,但是却又有所不同 在一些触发非常频繁的 DOM 事件里使用这两种技术效果非常好,它能够减轻脚本执行的压力 因为我们无法控制用户触发这些 DOM 事件的频次,但是我们可以人为地控制 DOM…

升级站点到 HTTPS

2017-12-09  -  1 min read

概述 随着人们越来越重视网络的安全以及自身的隐私,各大浏览器厂商都在力推 HTTPS 今天就来说一下我是怎么免费将自己的博客从 HTTP 升级到 HTTPS 的 HTTP 和 HTTPS HTTP 协议和 HTTPS 最大的区别就是,HTTPS 使用了传输加密,HTTP 协议没有对传输进行加密 所以使用 HTTP…

利用 Charles 代理开启远程调试

2017-12-06  -  2 min read

背景 最近工作的时候遇到一个很蛋疼的需求 需要调试原生 APP 中的 webview 里的页面 由于编译生成的测试 APP 中的 webview 指向的 url 是正式的服务器,比如: 为了远程调试这个 webview 中的页面,我们不可能每次都去更改 url 的指向来实现本地测试 再加上现在 Apple 规定 IOS…

深入理解 express-session 中间件

2017-11-29  -  5 min read

世界上几乎每一个需要保持用户数据的 Web 应用几乎都需要处理 Session 在这篇文章里,我主要想分享: 什么是 Session Session 是如何保存数据的 express-session 中间件的实现 如何选择 session 持久化的方案 什么是 Session 我们都知道 HTTP…

ES2017 中的 Async function

2017-11-28  -  2 min read

callback 在没有 Promise 之前的时代,在 JS 中写 callback 简直是一种痛苦的煎熬 比如我们要下载一个文件,下载完成之后需要在成功的回调函数里去读写文件 抽象的代码如下: 这样的代码我们称作 ,回调函数可以是无尽的深渊,那么维护起来会相当困难,简直不要太考验工程师的眼力 Promise…

Hexo 博客工作流的构建

2017-11-27  -  2 min read

记得之前用 wordpress 写博客,无脑而省心,不需要担心任何的发布的问题 如今博客已经全面迁移到了 Hexo 上,就需要一些工作流来简化博客的编译、打包乃至部署的过程 需求分析 根目录 根目录下 hexo…

在 Vue 中使用 Ajax 的几种姿势

2017-11-24  -  2 min read

作为一名前端开发人员, 使用 Vue 也有一段时间了, 刚好有时间来总结一下在 Vue 中使用 Ajax 的一些方式 不同的方式有各自的优点和缺点, 这篇文章将会简单地阐述一下 主要的几种方式 注入 Vue 根实例 组件中直接使用 利用 Vuex 中的 actions Vue-router 路由导航守卫 注入 Vue…

JS 克隆数组的不同方法

2017-10-19  -  1 min read

JavaScript 中的数组对象内置了许多强大的功能,但是却唯独没有克隆数组的单独方法。 数组其实也是对象,所以我们无法用赋值的方法来克隆一个数组。 很明显,如果简单的使用赋值来克隆数组,其实是进行了引用的复制,因此任何操作都会反映到源对象上。 接下来,我将介绍不同的克隆数组的方法: 方法一 利用 Array…

使用关键字 var 与不用的区别

2017-10-18  -  1 min read

凡是经常写 JS 的 Coder 都知道这么一个道理,无论是在浏览器环境下还是在其他 JS 宿主环境下声明的变量都会自动变为全局对象的一个同名属性 在浏览器环境下是 window 对象,在 node 环境下是 global 对象 不同于其他语言,JS 在非严格模式下,不使用 var…

JS 对象的拷贝

2017-10-16  -  1 min read

JS 对象的拷贝,有两种方式,一种是深拷贝(deep copy),一种是浅拷贝(shallow copy)。其实我不是很喜欢这种说法,我更喜欢对象克隆(clone)和复制引用(reference copy)的说法。 复制引用 如其名曰,复制引用只是复制对这个对象的引用,例如: 这个时候,obj 和 newObj…

NPM 的用法

2017-10-16  -  3 min read

NPM 是什么 请思考一个问题,当我们有大量的重复需求需要解决的时候,常常会使用相同的技术,那么我们如何来分享这些技术呢?在前端领域,最简单的方法就是互相分享编写好的 js 代码,里面有大量的函数便于我们调用,我们把这种具有解决某些特定问题的能重复使用的 JS 代码叫做模块 包(package)其实就是一些 JS…

快速搭建 Hexo 静态博客并部署到 VPS

2017-10-14  -  4 min read

前言 折腾了许久,也算是第一次完整地在服务器上部署了一次站点,于是就想顺便把这次部署地经验通过博客总结一下。 基本技能要求 Linux 系统下的常用基本操作命令 Node.js 和 npm 的基本操作 Hexo-cli 的基本操作 步骤 购买一个 VPS 或者云服务器,两者的差别可以看这里 在本地建立 Hexo…

Hello World

2017-10-14  -  1 min read

这是我的第一篇博客,主要用来记录一下生活以及一些技术上的东西。在此借用孙先生的一句话来激励自己: 吾志所向,一往无前,愈挫愈奋,再接再厉。 — 孙文