- 博客(27)
- 收藏
- 关注
原创 深入理解 TypeScript
此书是 TypeScript Deep Dive 的中文翻译版,感谢作者 Basarat 的付出。Why 数据来源:npm 包下载量正如你所见,TypeScript 发展至今,已经成为大型项目的标配,其提供的静态类型系统,大大增强了代码的可读性以及可维护性;同时,它提供最新和不断发展的 JavaScript 特性,能让我们建立更健壮的组件。TypeScript...
2018-08-26 21:12:32
1154
原创 记录面试中一些回答不够好的题(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
873
原创 设计模式在 TypeScript 中的应用 - 代理模式
定义代理模式是为一个对象提供一个代用品,或占位符,以便控制对它的访问。实现思路:把客户端真正调用的类和方法隐藏,只暴露代理类给客户端。简单点的例子:// 食品服务接口interface FootService { makeChicken (salt: string): void; makeNoodle (salt: string): void}// 食物接口class Foot {
2017-12-23 10:47:20
1075
原创 设计模式在 TypeScript 中的应用 - 观察者模式
定义当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。实现思路:指定发布者;给发布者添加一个缓存列表,用于存放回调函数以便通知订阅者;最后发布消息的时候,发布者会遍历这个缓存列表,依次触发里面存放的订阅者回调函数。例子:// 发布类class Subject { // 缓存列表,用以存放回调函数,以便通知订阅者 private observers: Observer[]
2017-12-23 10:45:49
489
原创 设计模式在 TypeScript 中的应用 - 策略模式
定义定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换。实现思路:创建表示各种策略的对象,和一个行为随着策略对象改变而改变的 context 对象。一个简单的加减乘例子:interface Compute { computeF (num1: number, num2: number): number}// 创建策略对象class ComputeAdd implements Com
2017-12-18 12:06:19
443
原创 设计模式在 TypeScript 中的应用 - 单例模式
定义只有一个实例,并提供全局访问。实现思路:用一个变量来标识当前是否已经为某个类创建过对象,如果是,则在下一次获取该类的实例时,直接返回之前创建的对象,否则返回新对象。饿汉模式特点:类加载时就初始化。class Singleton { private static instance = new Singleton() // 将 constructor 设为私有属性,防止 new 调用 pri
2017-12-18 12:05:42
5806
原创 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
9160
原创 Web 性能优化 - TCP
原文 https://jkchao.cn/article/5a22b4d4d5517f01d0250fb6TCP 负责在不可靠的传输信道之上提供可靠的抽象层,向应用层隐藏了大多数网络通信的复杂性能,比如丢包重发、按需发送、拥塞控制及避免、数据完整,等等。采用 TCP 数据流可以确保发送的所有字节能够完整地被接收到,而且客户端的顺序也一样。但是 TCP 设计并未过多顾及时间,由此给浏览器 Web 性
2017-12-04 08:49:55
372
原创 使用 electron-vue 构建你的桌面应用
什么是 electron官网里这么说:Electron提供了一个Nodejs的运行时,专注于构建桌面应用,同时使用web页面来作为应用的GUI,你可以将其看作是一个由JavaScript控制的迷你版的Chromium浏览器。翻译一下:它是一个运行时,可以像 node 一样这样执行:electron app.js;也是一个使用 html + css + javascript 构建跨平台原生桌面应用的框
2017-11-06 19:04:42
51635
12
原创 前端安全知识
原文连接 https://jkchao.cn/article/59de0283c52d5a4ba98b1f0dXSSxss: 跨站脚本攻击(Cross Site Scripting)是最常见和基本的攻击 WEB 网站方法,攻击者通过注入非法的 html 标签或者 javascript 代码,从而当用户浏览该网页时,控制用户浏览器。xss 主要分为三类:DOM xss :DOM即文本对象模型,DO
2017-10-12 11:11:44
504
原创 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
2733
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
308
原创 HTTP 协议 - 简单谈谈 TCP / IP (一)
原文连接 blogTCP / IP 基本概念世界上几乎所有的 HTTP 协议都是由 TCP / IP 协议来承载的。它是互联网相关的各类协议族的总称(通常所说的规则,就是协议)。从输入的 URL 里我们可以从中获取服务器端的 IP 地址与端口号,建立一条 TCP 连接。建立连接之后,在客户端和服务器端之间交换的报文,不会丢失,受损,或者失序。分层TCP / IP 协议族里最重要的特征就是分层,每一层
2017-07-16 20:37:19
227
原创 HTTP协议-从URI开始
原文连接 blogURIURI, 既是统一资源标识符号,每个 Web 服务器都有一个 URI 标识符,它在世界范围内唯一标识并定位信息资源。它具有两种形式,URN (统一资源名)、URL(统一资源定位符)。URNURN (统一资源名),是作为特定内容的唯一名称使用的,与目前资源所在地无关。使用这些与位置无关的 URN,就可以将资源四处搬移。通过 URN,还可以用同一个名字通过多种网络访问协议来访问资
2017-07-03 20:26:04
801
原创 JavaScript 万物皆对象?
原文链接我的blog。为什么说“ JavaScript 万物皆对象?”,这个“万物”,难道真的是“万物”?其实不然。在 JavaScript 中一共有七种主要类型:StringNumberBooleanNullUndefinedSymbolObject前六种为基本数据类型,Object 为引用类型(对象类型),值得注意一点的是用 typeof null 会返回 Object,这实际
2017-05-28 09:14:44
3491
原创 谈谈 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
1291
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
7223
2
原创 写个vue-emoji.
最近公司需求做个类似于QQ空间的项目(其实开始的时候我是崩溃的),好在历时一个月的时间,也终于进入测试的阶段。 完成项目过程中,发现并没有一个好用的emoji插件,于是写了一个简单的component,希望对各位有所帮助(若能顺手给个start, 那便再好不过了)。原理其实很简单,雪碧图+背景定位的方式实现。源码地址: https://github.com/jkchao/vue-emoji
2017-04-26 10:44:20
4349
2
原创 关于一些Vue的文章。(7)
原文链接我的blog,欢迎STAR。首先安利一波福利,有没有用vscode的小伙伴?推荐一个神奇的字体,自从用了这个字体,敲代码效率简直上天了。先上图看看效果:还有其他许多,就不一一列举出来了。 有没有看上了的? 没有我等下再来问。这次推荐的一篇文章来自这,阅读文章有利于加深对Vue程序结构的了解,虽然是 1.0版本,不过好在 2.0 版本保留了绝大部分 1.0 的API。在这篇文章里我将是这
2017-04-23 08:28:38
383
原创 关于一些Vue的文章。(6)
原文链接我的blog,欢迎STAR。在上篇里,我们已经分析了在 main.js 可以通过el属性设置挂载点,又可以通过手动设置 vm.$mount()。在这篇,我们深入底层,了解原理。老规矩,我们先分享一篇文章 Vue.js 源码学习笔记。这篇文章里反复提到了compile, 额….(什么鬼?手动摊手。)查 Vue,官网文档, 原来Vue模板编译成render函数的过程叫做 compile。现在入
2017-04-23 08:27:23
5717
原创 关于一些Vue的文章。(5)
原文链接我的blog,欢迎STAR。前三篇里,我们开始从render, template, el的渲染DOM树的优先级,最终都编译成render函数,而后得到vnode(虚拟DOM),经过diff算法后,得到真实DOM。那么问题来了?得到真实DOM以后接下来该做什么?以及怎么做?照例,分享一篇文章,vue。(官网,暂时还没有找到一篇文章能比较好的解决上述几个问题,so,我们带着问题出发,直接上官网
2017-04-03 21:30:05
313
原创 关于一些Vue的文章。(4)
同时发表在我的博客。接着上一篇,我们继续来讲Vue的Virtual Dom diff 算法中的patchVnode方法,以及核心updateChildren方法。在上篇中,我们谈到,当vnode不为真实节点,且vnode与oldVnode为同一节点时,会调用patchVnode方法。 我们直接从源码上进行分析: // patchVnode()有四个参数 // oldVnode: 旧的虚拟节点
2017-03-28 20:03:33
452
原创 关于一些Vue的文章。(3)
同时发表在我的博客这次和想要大家分享的一篇文章解析Vue diff 算法在上篇里,我们提到在渲染时,render>template>el,但是最终,我们得到的都是render函数,那么render函数的作用是什么?接下来该干什么?带着两个问题,我们深入源码。首先来解决第一个问题:render函数的作用是什么?在/src/core/instance/lifecycle.js中有这么一段代码: vm
2017-03-26 14:52:46
610
原创 关于一些Vue的文章。(2)
转载自我的 blog这次想要分享的一篇文章是:从一个奇怪的错误出发理解Vue的基本概念。这篇文章以Vue的两种构建方式做为切入点,深入探讨了Vue的基本概念,编译以及挂载的相关过程。在这篇文章里学到很多以前忽略的地方:开始学习vue的时候,由于有一些react基础,对组件的形式有些了解,就直接从vue-cli开始了,忽略了vue的两种构建模式,既是使用默认的运行时构建。从vue官网里,可以很清楚
2017-03-16 20:47:56
1287
原创 关于一些Vue的文章。(1)
原文地址今天分享的一篇文章是关于vuex的源码解析的,链接vuex源码解析,在现在所做的项目里的每个组件,至少都有一个辅助函数,或者是....mapGetters,或者是...mapActions, 扩展运算符,以及解构也经常用到。这篇文章解决了困扰我许久的一个疑惑,为什么有时候辅助函数里面传的是一个字符串数组,而有的时候传的是一个对象。大概以前看源码的时候,没怎么仔细想过把。其实很简单,vuex底
2017-03-12 07:55:18
808
原创 Microtasks队列
在进一步学习到promise的时候,发现当初认识的太浅,原来还存在Micritasks这东西。基本macrotasks == task != microtasks执行他们可以简单的总结为:首先把task中的第一个任务放到stack, 并执行, 执行完毕;开始执行microtask队列中的全部任务,执行完毕下一个循环,执行下一个task中的任务,重复第二步。我们来看一张模拟图:Task:就是
2017-03-05 08:20:47
1488
原创 小知识点
又学到一个新的知识点, 记录一下: 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
186
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人