自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

原创 redis源码剖析之异步事件驱动框架

想要分析源码,我觉得可以把它当成一个整体,或者一个函数,有输入和对应的输出。我们从输入开始分析流程。先撇开main函数,在gdb上打印下线程的堆栈是个好想法,让我们看看它都在做什么。可以看得到它其中一条线程阻塞在epoll_wait(我的系统是ubuntu,因此选择了epoll)。在这里检测套接字事件,等待client请求。还有个线程池,创建了3条线程等待处理任务。#ifdef HAVE_E...

2019-05-31 14:32:40 167

原创 为什么使用Redis

先解释一下软件编程中常见的一些概念: 抽象先于具象。这个抽象并非虚无的抽象,而是指事物尚未分化为具象之前的那个前体存在。当那个前体存在分化成具象存在之后,前体存在就退化为背景,成为一种抽象。 结构是关联与互动的复合体。 接口是结构的耦合点。 架构是从无结构到有结构的过程。 重构是从旧结构到新结构的过程。 也就是说,结构是架构的...

2019-05-28 14:18:16 485

原创 怎么让代码不再臃肿,写的像诗一样优雅

基本类型偏执基本类型偏执(Primitive Obsession)使用基本类型而不是小对象来实现简单任务(例如货币、范围、电话号码字符串等)。使用常量编码信息(例如一个用于引用管理员权限的常量USER_ADMIN_ROLE = 1 )。使用字符串常量作为字段名在数组中使用。大多数编程语言都支持基本数据类型和结构类型(类、结构体等)。结构类型允许程序员将基本数据类型组织...

2019-05-27 17:55:01 268

原创 【并发编程】Future模式添加Callback及Promise 模式

FutureFuture是Java5增加的类,它用来描述一个异步计算的结果。你可以使用 isDone 方法检查计算是否完成,或者使用 get 方法阻塞住调用线程,直到计算完成返回结果。你也可以使用 cancel 方法停止任务的执行。下面来一个栗子:public class FutureDemo { public static...

2019-05-27 11:02:11 1176

原创 javascript 函数后面有多个小括号f( )( )( )...

有时我们看见js函数后面跟着多个小括号是什么意思?f( )( )( )…f()执行f函数,返回子函数f()()执行子函数,返回孙函数f()()()执行孙函数,返回重孙函数但注意,如果想这样执行,函数结构必须是这样,f的函数体里要return 子函数,子函数里要return 孙函数,如果没有return关键字,是不能这样连续执行的,会报错的。举个例子:k是f的子函数,return子函...

2019-05-20 14:59:55 1149

原创 一张图搞懂Ajax原理

原理说起ajax,就不得不说他背后的核心对象XMLHttpRequest,而说到XMLHttpRequest我觉得,从它的readyState状态说起是最好的切入点。个人觉得,只要弄清楚了readyState的这几个状态,其实ajax的原理也就算弄清楚了。为了更方便您理解,笔者特意画了一张状态图。您只需要看懂这张图ajax原理,您就算通关了;并且很难忘记。首先let xhr = n...

2019-05-19 15:05:50 565

原创 520来袭,程序猿的浪漫 - 前端情书

###前言虽然很多人认为我们不懂得浪漫,甚至情商为负,但是程序员浪漫起来,就真的没有了其他人什么事了。520即将到来,需要告白的同学们,要把握好机会,不要错过了。下面分享一篇我写的前端情书(10%的借鉴)窗外,雨敲残枝窗内,荧光灯和电脑屏幕交汇映影某一刻当键盘的清脆声音戛然而止是因为我突然想起了你我幼稚的想用new这个关键字把你定义成我的对象但我压缩了自己的爱因为我没...

2019-05-16 16:05:47 547

原创 一行命令更新所有 npm 依赖包

npm 包的更新速度很快,为了将项目或者全局依赖更新到最新版本。传统的做法是一个一个更新,比如更新 react 到最新版本,命令如下:# npmnpm i --save react@latest# yarnyarn add react@latestyarn 是 facebook 发明的新一代 js 包管理器,支持离线使用。这是 npm 与 yar...

2019-05-15 14:09:15 1669

原创 Chrome 性能监测

前端性能优化一直是前端工作中必不可少的一部分,但是我们如何知道哪些部分的性能有优化的空间呢?此时,Chrome 性能监测就派上用场了。正所谓:知己知彼,百战百胜,只有确定了性能瓶颈,才能有条不紊地进行前端性能优化工作。PerformancePerformance 是 Chrome 开发者工具中的一个功能,用于记录网页从初始化到运行时的所有性能指标。使用 Performance 之前,我们需...

2019-05-14 22:24:47 220

原创 JS中事件冒泡,事件捕获详解

一、事件流事件是js与HTML交互的基础,事件流描述的是页面接受事件的顺序,而事件流又分为三个阶段:捕获阶段、目标阶段和冒泡阶段。如果单纯的事件处理,事件捕获和事件冒泡二选一即可,导致两者并存的原因是当年微软和网景的浏览器大战,微软提出了事件冒泡,而网景提出了事件捕获。1、事件冒泡事件开始由最深层的元素接收,然后逐级向上传播<!DOCTYPE html><html ...

2019-05-14 14:34:06 110

原创 页面性能优化之原生JS实现图片懒加载

在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况。我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片。所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再加载更多的图片。这种加载图片的方式叫做图片懒加载,又叫做按需加载或图片的延时加载。这样做的好处是:1.可以加快页面首屏渲染的速度;2.节约用户的流量。一.实现思路1.图片img标签自定义一个属性d...

2019-05-13 13:47:26 158

原创 深入理解JavaScript函数

JavaScript中的函数1. 函数的定义两种定义形式:通过函数定义表达式来定义通过函数声明语句来定义函数声明语句定义一个函数//计算阶乘的递归函数function factorial(x){ if (x<=1) return 1; return x*factotial(x-1);}函数定义表达式定义一个函数var s= functio...

2019-05-10 15:37:24 84

原创 Vue.js特性Scoped Slots的浅析

什么是scoped slotsA scoped slot is a special type of slot that functions as a reusable template (that can be passed data to) instead of already-rendered-elements.上面是官方的定义。作用域插槽(Scoped Slots)是vue.js中...

2019-05-09 17:00:51 5296

原创 vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析

v-on:click/mouseover...... 简写的: @click="" 推荐 事件对象: @click="show($event)" 事件冒泡: 阻止冒泡: a). ev.cancelBubble=true; b). @click.stop ...

2019-05-09 14:33:09 186 1

原创 用 Node.js 写一个多人游戏服务器引擎

英文原文:https://www.smashingmagazine.com/2018/12/multiplayer-text-adventure-engine-node-js/摘要听说过文字冒险游戏吗? 如果你的年龄足够大的话(就像我一样),那么你可能听说过、甚至玩过“back in the day”。在本文中,我将向你展示编写的整个过程。这不仅仅是一个文本冒险游戏,而是一个能让你和你的...

2019-05-07 19:24:47 1486

原创 你不知道的浏览器渲染原理

前言浏览器的内核是指支持浏览器运行的最核心的程序,分为两个部分的,一是渲染引擎,另一个是 JS 引擎。渲染引擎在不同的浏览器中也不是都相同的。目前市面上常见的浏览器内核可以分为这四种:Trident(IE)、Gecko(火狐)、Blink(Chrome、Opera)、Webkit(Safari)。这里面大家最耳熟能详的可能就是 Webkit 内核了,Webkit 内核是当下浏览器世界真正的霸主。...

2019-05-07 14:00:18 146

原创 总结下 JavaScript 中的一些小技巧

这篇文章主要记录一下平时自己实践得到的, 博客中学习的以及在一些项目源码中看到的 javascript 技巧。有些东西可以说是奇淫技巧,有些可能是 ES6+ 中一些比较具有实用性的新语法。&& 和 || 的妙用有时候我们需要在某个函数或变量为 true 时执行另外一个函数。例如:const task1 = () => { console.log('执行 task...

2019-05-05 15:21:21 131

原创 如何优化我们的代码(vue项目)

前言作为一个前端,可能绝大多数的时间都是在写的业务代码,时间一长,大家会觉得乏味、没意思等等,但是其实就算只是写业务代码,我们也依然能够找到有兴趣的点,说的简单一点就是代码优化,不仅仅局限在业务逻辑这块,像是代码复用、效率等等都是我们可以加以改进的地方,学会在业务代码中找到不足,总结经验,这样日积月累,量变产生质变,必然我们的技术也是不断再上升的。今天其实就是说下我在vue项目中进行的一些总结...

2019-04-30 14:07:18 1548

原创 如何优雅处理前端异常?

前端一直是距离用户最近的一层,随着产品的日益完善,我们会更加注重用户体验,而前端异常却如鲠在喉,甚是烦人。一、为什么要处理异常?异常是不可控的,会影响最终的呈现结果,但是我们有充分的理由去做这样的事情。1.增强用户体验;2.远程定位问题;3.未雨绸缪,及早发现问题;4.无法复线问题,尤其是移动端,机型,系统都是问题;5.完善的前端方案,前端监控系统;对于 JS 而言,我们面对的仅...

2019-04-29 20:55:29 122

原创 vue基础之v-bind属性、class和style用法分析

一、属性属性:v-bind:src=""width/height/title…简写::src="" 推荐 效果能出来,但是会报一个404错误 效果可以出来,不会发404请求window.onload=function(){ new Vue({ el:'#box', data:{ url:'https:...

2019-04-29 16:04:23 518

原创 JavaScript碎片———函数闭包(模拟面向对象)

具体来说实现模拟面向对象主要是利用JavaScript函数闭包这个概念。由于JavaScript中的每一个function都会形成一个作用域,而如果变量声明在这个域中,那么外部是无法直接去访问,要想访问必须new出一个实例来,相当于Java中class。首先让我们来了解一下prototype方法:1、不使用prototype属性定义的对象方法,是静态方法,只能直接用类名进行调用!另外,此静态方法...

2019-04-28 17:19:20 122

原创 Vue渲染过程浅析

Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。但是模板毕竟是模板,不是真实的dom节点。从模板到真实dom节点还需要经过一些步骤把模板编译为render函数实例进行挂载, 根据根节点render函数的调用,递归的生成虚拟dom对比虚拟dom,渲染到真实dom组件内部data发生变化,组件和子组件引用data作为props重新调用render函数,生成虚拟dom...

2019-04-28 14:16:36 3766 1

原创 Vue.js基础拾遗

模版语法插值1、Vue.js的数据绑定形式是使用“Mustache”语法(双大括号)的形式,针对Html代码,需要使用v-html指令。<p>Using v-html directive: <span v-html="rawHtml"></span></p>2、Mustache语法不能作用在HTML特性上面,此时需要使用v-bind指令。...

2019-04-27 17:07:33 168

原创 VUE—数据响应原理真的是双向绑定吗?

很多朋友在理解 Vue 的时候都把 Vue 的数据响应原理理解为双向绑定,但实际上这是不准确的,我们之前提到的数据响应,都是通过数据的改变去驱动 DOM 视图的变化,而双向绑定除了数据驱动 DOM 外, DOM 的变化反过来影响数据,是一个双向关系,在 Vue 中,我们可以通过 v-model 来实现双向绑定。在Vue中体现出双向绑定作用的方式有两种,在分析之前我们先介绍这两种使用方式有什么区...

2019-04-27 14:17:18 302

原创 JavaScript常用的简洁高级技巧

前言编程是一件很快乐的事,实现一个目的,我们可以有很多方法路径,在这篇文章我们介绍一些JavaScript的奇技淫巧,仅供大家参考,各路大神在平时的代码编写时,如很多简洁高效的书写方式;欢迎各位在下方留言。一、数据类型检测1.1 typeoftypeof操作符返回一个字符串,表示未经计算的操作数的类型;该运算符数据类型(返回字符串,对应列表如图)1.2 instanceofvar s...

2019-04-26 21:19:11 88

原创 javascript引擎工作原理

1. 什么是JavaScript解析引擎?简单地说,JavaScript解析引擎就是能够“读懂”JavaScript代码,并准确地给出代码运行结果的一段程序。比方说,当你写了 var a = 1 + 1; 这样一段代码,JavaScript引擎做的事情就是看懂(解析)你这段代码,并且将a的值变为2。学过编译原理的人都知道,对于静态语言来说(如Java、C++、C),处理上...

2019-04-26 14:25:24 188

原创 5 分钟掌握 JavaScript 实用窍门

简评:一开始 JavaScript 只是为网页增添一些实时动画效果,现在 JS 已经能做到前后端通吃了,而且还是年度流行语言。本文分享几则 JS 小窍门,可以让你事半功倍 ~1. 删除数组尾部元素const arr = [11, 22, 33, 44, 55, 66];// truncantingarr.length = 3;console.log(arr); //=> [1...

2019-04-25 14:20:11 94

原创 用愚公移山说明Javascript创建对象的各种姿势

都退后,我要继续讲故事了。北山愚公者,年且九十,面山而居。var person = { name : '愚公', age: 90, address: '北山脚下', whereToLive: function () { alert(this.address) }};…北山愚公曰:“虽我之死,有子存焉;子又生孙,孙又生子;子又有子...

2019-04-23 17:30:38 98

原创 JS传参技巧总结

1.隐式创建 html 标签<input type="hidden" name="tc_id" value="{{tc_id}}">这种方法一般配合ajax,上面的value使用了模板引擎2.window[‘data’]window['name'] = "the window object";3.使用localStorage,cookie等存储window.localS...

2019-04-23 14:37:43 138

原创 谷歌的JavaScript编写风格中 13点值得我们注意的!

对于那些还不熟悉JavaScript的编写风格的人,谷歌提供了编写JavaScript的编写风格指南,谷歌风格指南 其中列出了编写干净、可理解代码的最佳风格实践。对于编写有效的JavaScript来说,这些并不是硬性的、快速的规则,而只是在源文件中维护一致的、吸引人的样式选择的规则。这对于JavaScript来说尤其有趣,它是一种灵活且多变的语言,允许多种风格的选择。谷歌和Airb...

2019-04-22 10:30:25 112

原创 从前端到未来,前端发展闲聊

1. 前情提要毋庸讳言,在我刚工作的时候,前端是还是一个不受重视的岗位。切图狗,写网页的这种侮辱性绰号绑在前端开发身上。我自己体验到的一个很明显的标志是:招聘网站上,前端开发的工资是其他开发工资的90%甚至更低。在知乎一个2011年的前端地位问题(《如何改善国内前端开发行业的尴尬地位?》)中,包括贺师俊老师都承认这种尴尬确实存在。但是,30年河东30年河西,到了2018年,前端已经成了炽手可热...

2019-04-20 17:13:25 7996 7

原创 正则全攻略使用手册,你确定不进来看看吗

前言正则表达式是软件领域为数不多的伟大创作。与之相提并论是分组交换网络、Web、Lisp、哈希算法、UNIX、编译技术、关系模型、面向对象等。正则自身简单、优美、功能强大、妙用无穷。学习正则表达式,语法并不难,稍微看些例子,多可照葫芦画瓢。但三两篇快餐文章,鲜能理解深刻。再遇又需一番查找,竹篮打水一场空。不止正则,其他技术点同样,需要系统的学习。多读经典书籍,站在巨人肩膀前行。这里涉及的东西...

2019-04-20 15:19:04 197

原创 面试官问:JS的this指向

前言面试官出很多考题,基本都会变着方式来考察this指向,看候选人对JS基础知识是否扎实。读者可以先拉到底部看总结,再谷歌(或各技术平台)搜索几篇类似文章,看笔者写的文章和别人有什么不同(欢迎在评论区评论不同之处),对比来看,验证与自己现有知识是否有盲点,多看几篇,自然就会完善自身知识。附上之前写文章写过的一段话:已经有很多关于this的文章,为什么自己还要写一遍呢。学习就好比是座大山,人...

2019-04-19 16:26:28 121

原创 Koa日志中间件封装开发详解

对于一个服务器应用来说,日志的记录是必不可少的,我们需要使用其记录项目程序每天都做了什么,什么时候发生过错误,发生过什么错误等等,便于日后回顾、实时掌握服务器的运行状态,还原问题场景。日志的作用记录服务器程序运行状态;帮助开发者快速捕获错误,定位以及决解故障。日志中间件开发工具log4js在node当中没有自带的日志模块,所以需要使用第三方模块使用模块:log4js安装:&nb...

2019-04-18 15:41:23 124

原创 如何在Vue.js中实现标签页组件详解

###前言标签页组件,即实现选项卡切换,常用于平级内容的收纳与展示。因为每个标签页的内容是由使用组件的父级控制的,即这部分内容为一个 slot。所以一般的设计方案是,在 slot 中定义多个 div,然后在接到切换消息时,再显示或隐藏相关的 div。这里面就把相关的交互逻辑也编写进来了,我们希望在组件中处理这些交互逻辑,slot 只单纯处理业务逻辑。这可以通过再定义一个 pane 组件来实现,...

2019-04-16 19:52:59 1170

原创 为什么要学习vue

Vue是什么?来看看官方的介绍。Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。Vue和Jquery有什么区别?...

2019-04-16 15:04:05 325

原创 写一个Vue Popup组件

组件长这样主要有标题、内容、按钮个数、按钮颜色、按钮文案这些可配置项期望的调用方式一不需要等待用户二次确认import Modal from 'common/components/modal' handleModal() { Modal({ title: '赚取收益?', content: '根据您的授权金额和计息天数计算得出(还未到账)。实际以到账金额为准。', c...

2019-04-15 15:41:38 1182

原创 JavaScript函数的4种调用方法实例分析

本文实例讲述了JavaScript函数的4种调用方法。分享给大家供大家参考,具体如下:JavaScript 函数有 4 种调用方式:作为一个函数调用函数作为方法调用使用构造函数调用函数作为函数方法调用函数分述如下:每种方式的不同方式在于 this 的初始化。作为一个函数调用function myFunction(a, b) { return a * b;}myFunc...

2019-04-14 14:41:09 207

原创 详解javascript 变量提升(Hoisting)

简介“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面,但这么说并不准确。实际上变量和函数声明在代码里的位置是不会动的,而是在编译阶段被放入内存中。声明变量的方法var、let、const不用以上关键字直接赋值的变量会挂载与windows环境下;let a=9const a=1var a=6c=5声明函数的方法javascript中声明函数的方法有两种:函数声...

2019-04-12 17:08:14 114

原创 Vue动画事件详解及过渡动画实例

为了应用过渡效果,需要在目标元素上使用 transition 特性:<div v-if="show" transition="my-transition"></div>transition 特性可以与下面资源一起用:v-ifv-showv-for (只在插入和删除时触发,使用 vue-animated-list 插件)动态组件在组件的根节点上,并且被 Vu...

2019-04-11 15:29:37 633 1

提示
确定要删除当前文章?
取消 删除