三毛丶-CSDN博客

原创深入理解 TypeScript

此书是 TypeScript Deep Dive 的中文翻译版，感谢作者 Basarat 的付出。Why 数据来源：npm 包下载量正如你所见，TypeScript 发展至今，已经成为大型项目的标配，其提供的静态类型系统，大大增强了代码的可读性以及可维护性；同时，它提供最新和不断发展的 JavaScript 特性，能让我们建立更健壮的组件。TypeScript...

2018-08-26 21:12:32 1139

原创记录面试中一些回答不够好的题（Vue 居多）

相关问题flex 布局与 grid 布局。实现 Vue SSR 。从 SPA 使用最小成本迁移到 SSR 。实现方法：（未完成）根据指定元素，在数组里面找出 ff 数组（ff 数组这个名字是我瞎说的）。比如数组 [2, 3, 6, 7] ，指定元素 7，则 ff 数组是 [2, 2, 3]（2+2+3 = 7）和 [7]。若指定元素 6，则 ff 数组为 [2, 2, 2], ...

2018-03-04 14:44:17 843

原创设计模式在 TypeScript 中的应用 - 代理模式

定义代理模式是为一个对象提供一个代用品，或占位符，以便控制对它的访问。实现思路：把客户端真正调用的类和方法隐藏，只暴露代理类给客户端。简单点的例子：// 食品服务接口interface FootService { makeChicken (salt: string): void; makeNoodle (salt: string): void}// 食物接口class Foot {

2017-12-23 10:47:20 1057

原创设计模式在 TypeScript 中的应用 - 观察者模式

定义当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。实现思路：指定发布者；给发布者添加一个缓存列表，用于存放回调函数以便通知订阅者；最后发布消息的时候，发布者会遍历这个缓存列表，依次触发里面存放的订阅者回调函数。例子：// 发布类class Subject { // 缓存列表，用以存放回调函数，以便通知订阅者 private observers: Observer[]

2017-12-23 10:45:49 479

原创设计模式在 TypeScript 中的应用 - 策略模式

定义定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。实现思路：创建表示各种策略的对象，和一个行为随着策略对象改变而改变的 context 对象。一个简单的加减乘例子：interface Compute { computeF (num1: number, num2: number): number}// 创建策略对象class ComputeAdd implements Com

2017-12-18 12:06:19 426

原创设计模式在 TypeScript 中的应用 - 单例模式

定义只有一个实例，并提供全局访问。实现思路：用一个变量来标识当前是否已经为某个类创建过对象，如果是，则在下一次获取该类的实例时，直接返回之前创建的对象，否则返回新对象。饿汉模式特点：类加载时就初始化。class Singleton { private static instance = new Singleton() // 将 constructor 设为私有属性，防止 new 调用 pri

2017-12-18 12:05:42 5777

原创 vue-cli 中使用 TypeScript

学以致用，这篇文章是对在 vue-cli 中使用 TypeScript 的一次小结。环境npm// typescriptnpm install typescript --save-dev// ts-loadernpm install ts-loader --save-devwebpack.base.conf.js module.exports = { // 修改入口文件 entry: '

2017-12-11 11:53:20 9148

原文 https://jkchao.cn/article/5a22b4d4d5517f01d0250fb6TCP 负责在不可靠的传输信道之上提供可靠的抽象层，向应用层隐藏了大多数网络通信的复杂性能，比如丢包重发、按需发送、拥塞控制及避免、数据完整，等等。采用 TCP 数据流可以确保发送的所有字节能够完整地被接收到，而且客户端的顺序也一样。但是 TCP 设计并未过多顾及时间，由此给浏览器 Web 性

2017-12-04 08:49:55 358

原创使用 electron-vue 构建你的桌面应用

什么是 electron官网里这么说：Electron提供了一个Nodejs的运行时，专注于构建桌面应用，同时使用web页面来作为应用的GUI，你可以将其看作是一个由JavaScript控制的迷你版的Chromium浏览器。翻译一下：它是一个运行时，可以像 node 一样这样执行：electron app.js；也是一个使用 html + css + javascript 构建跨平台原生桌面应用的框

2017-11-06 19:04:42 51375 12

原创前端安全知识

原文连接 https://jkchao.cn/article/59de0283c52d5a4ba98b1f0dXSSxss: 跨站脚本攻击（Cross Site Scripting）是最常见和基本的攻击 WEB 网站方法，攻击者通过注入非法的 html 标签或者 javascript 代码，从而当用户浏览该网页时，控制用户浏览器。xss 主要分为三类：DOM xss :DOM即文本对象模型，DO

2017-10-12 11:11:44 487

原创 nuxt(vue) + koa + mongo 写blog的一次小结

两个多月的空余时间里，博客差不多搭完。 - 感谢surmon.me，此 blog 才会诞生。 - 感谢七牛云提供资源存储。 - 感谢腾讯云提供 SSL 证书。 - 感谢各种开源。体验地址： https://jkchao.cn nuxt(vue) + koa + mongo 写blog的一次小结CLIENT: vue-blogADMIN: vue-adminSERVICE

2017-10-09 15:49:44 2724 2

原创 Vue 2.3、2.4 知识点小结

原文连接原文连接 blog ，本文不涉及 SSR.2.3 参考 https://github.com/vuejs/vue/releases/tag/v2.3.0 2.4 参考 https://github.com/vuejs/vue/releases/tag/v2.4.0 实例 demo 地址：https://github.com/jkchao/vue-demo2.3style 多重值；

2017-07-21 22:33:37 302

原创 HTTP 协议 - 简单谈谈 TCP / IP (一)

原文连接 blogTCP / IP 基本概念世界上几乎所有的 HTTP 协议都是由 TCP / IP 协议来承载的。它是互联网相关的各类协议族的总称（通常所说的规则，就是协议）。从输入的 URL 里我们可以从中获取服务器端的 IP 地址与端口号，建立一条 TCP 连接。建立连接之后，在客户端和服务器端之间交换的报文，不会丢失，受损，或者失序。分层TCP / IP 协议族里最重要的特征就是分层，每一层

2017-07-16 20:37:19 221

原创 HTTP协议-从URI开始

原文连接 blogURIURI, 既是统一资源标识符号，每个 Web 服务器都有一个 URI 标识符，它在世界范围内唯一标识并定位信息资源。它具有两种形式，URN （统一资源名）、URL（统一资源定位符）。URNURN (统一资源名)，是作为特定内容的唯一名称使用的，与目前资源所在地无关。使用这些与位置无关的 URN，就可以将资源四处搬移。通过 URN，还可以用同一个名字通过多种网络访问协议来访问资

2017-07-03 20:26:04 782

原创 JavaScript 万物皆对象？

原文链接我的blog。为什么说“ JavaScript 万物皆对象？”，这个“万物”，难道真的是“万物”？其实不然。在 JavaScript 中一共有七种主要类型：StringNumberBooleanNullUndefinedSymbolObject前六种为基本数据类型，Object 为引用类型（对象类型），值得注意一点的是用 typeof null 会返回 Object，这实际

2017-05-28 09:14:44 3453

原创谈谈 Object.prototype.toString 。

原文链接我的blog。前几日看到一个比较熟悉的面试题，判断一个变量是不是数组？以下几种方法供参考：var arr = [1, 2, 3]Array.isArray(arr)arr instanceof Arrayarr.constructor === ArrayObject.prototype.toString.call(arr) === '[object Array]'...这篇文

2017-05-13 20:41:42 1251 1

原创写个vue-loading-template组件

趁着5.1来临之际，告诉你们一个好消息： demo: https://jkchao.github.io/vue-loading/源码(star ? start : start)：https://github.com/jkchao/vue-loading组件支持：自定义type（暂时提供8种，具体请看demo）；color；size；Start npm install vue-loading-tem

2017-05-01 11:05:04 7189 2

原创写个vue-emoji.

最近公司需求做个类似于QQ空间的项目(其实开始的时候我是崩溃的),好在历时一个月的时间,也终于进入测试的阶段。完成项目过程中，发现并没有一个好用的emoji插件，于是写了一个简单的component，希望对各位有所帮助（若能顺手给个start, 那便再好不过了）。原理其实很简单，雪碧图+背景定位的方式实现。源码地址： https://github.com/jkchao/vue-emoji

2017-04-26 10:44:20 4344 2

原创关于一些Vue的文章。（7）

原文链接我的blog，欢迎STAR。首先安利一波福利，有没有用vscode的小伙伴？推荐一个神奇的字体，自从用了这个字体，敲代码效率简直上天了。先上图看看效果：还有其他许多，就不一一列举出来了。有没有看上了的？没有我等下再来问。这次推荐的一篇文章来自这，阅读文章有利于加深对Vue程序结构的了解，虽然是 1.0版本，不过好在 2.0 版本保留了绝大部分 1.0 的API。在这篇文章里我将是这

2017-04-23 08:28:38 365

原创关于一些Vue的文章。（6）

原文链接我的blog，欢迎STAR。在上篇里，我们已经分析了在 main.js 可以通过el属性设置挂载点，又可以通过手动设置 vm.$mount()。在这篇，我们深入底层，了解原理。老规矩，我们先分享一篇文章 Vue.js 源码学习笔记。这篇文章里反复提到了compile, 额….（什么鬼？手动摊手。）查 Vue，官网文档, 原来Vue模板编译成render函数的过程叫做 compile。现在入

2017-04-23 08:27:23 5695

原创关于一些Vue的文章。（5）

原文链接我的blog，欢迎STAR。前三篇里，我们开始从render, template, el的渲染DOM树的优先级，最终都编译成render函数，而后得到vnode（虚拟DOM），经过diff算法后，得到真实DOM。那么问题来了？得到真实DOM以后接下来该做什么？以及怎么做？照例，分享一篇文章，vue。（官网，暂时还没有找到一篇文章能比较好的解决上述几个问题，so，我们带着问题出发，直接上官网

2017-04-03 21:30:05 305

原创关于一些Vue的文章。（4）

同时发表在我的博客。接着上一篇，我们继续来讲Vue的Virtual Dom diff 算法中的patchVnode方法，以及核心updateChildren方法。在上篇中，我们谈到，当vnode不为真实节点，且vnode与oldVnode为同一节点时，会调用patchVnode方法。我们直接从源码上进行分析： // patchVnode()有四个参数 // oldVnode: 旧的虚拟节点

2017-03-28 20:03:33 427

原创关于一些Vue的文章。（3）

同时发表在我的博客这次和想要大家分享的一篇文章解析Vue diff 算法在上篇里，我们提到在渲染时，render>template>el，但是最终，我们得到的都是render函数，那么render函数的作用是什么？接下来该干什么？带着两个问题，我们深入源码。首先来解决第一个问题：render函数的作用是什么？在/src/core/instance/lifecycle.js中有这么一段代码： vm

2017-03-26 14:52:46 590

原创关于一些Vue的文章。（2）

转载自我的 blog这次想要分享的一篇文章是：从一个奇怪的错误出发理解Vue的基本概念。这篇文章以Vue的两种构建方式做为切入点，深入探讨了Vue的基本概念，编译以及挂载的相关过程。在这篇文章里学到很多以前忽略的地方:开始学习vue的时候，由于有一些react基础，对组件的形式有些了解，就直接从vue-cli开始了，忽略了vue的两种构建模式，既是使用默认的运行时构建。从vue官网里，可以很清楚

2017-03-16 20:47:56 1264

原创关于一些Vue的文章。（1）

原文地址今天分享的一篇文章是关于vuex的源码解析的，链接vuex源码解析，在现在所做的项目里的每个组件，至少都有一个辅助函数，或者是....mapGetters，或者是...mapActions, 扩展运算符，以及解构也经常用到。这篇文章解决了困扰我许久的一个疑惑，为什么有时候辅助函数里面传的是一个字符串数组，而有的时候传的是一个对象。大概以前看源码的时候，没怎么仔细想过把。其实很简单，vuex底

2017-03-12 07:55:18 798

原创 Microtasks队列

在进一步学习到promise的时候，发现当初认识的太浅，原来还存在Micritasks这东西。基本macrotasks == task ！= microtasks执行他们可以简单的总结为：首先把task中的第一个任务放到stack, 并执行，执行完毕；开始执行microtask队列中的全部任务，执行完毕下一个循环，执行下一个task中的任务，重复第二步。我们来看一张模拟图：Task：就是

2017-03-05 08:20:47 1473

原创小知识点

又学到一个新的知识点，记录一下： var num = 10; function a (num) { num = num + 10; }; a(num); console.log(num) // 10var num = 10;function a (n) { num = n + 10};a (num)console.log(num) // 20考察的知识点是形参是否屏蔽全

2017-03-04 11:17:30 174

Hello world!