- 博客(267)
- 收藏
- 关注
RSS订阅原创 四年大前端工程师转Java后端开发心得（学习路线思维导图）
两年没更新了，大家可能都在猜测我去哪里了吧！博主去学习Java了！没听错就去前端转后端…其实对于我这个在大前端混了好几年的人去自学其实也是比较容易的，逻辑清晰、有编程功底；大概花了大半年的时间成功转职Java工程师。自学往往是最枯燥的，也是最容易放弃的；我来说一下自学的过程都学了哪些知识点！思维导图学习路线分为六个阶段开发工具：首选IDEA，只有你用过IDEA才知道这是最好的Java开发工具JavaSEJavaEEJavaWeb数据库SSM框架SpringBoot阶段一：Ja
2021-08-12 17:06:57
4259
5
原创 redis源码剖析之异步事件驱动框架
想要分析源码，我觉得可以把它当成一个整体，或者一个函数，有输入和对应的输出。我们从输入开始分析流程。先撇开main函数，在gdb上打印下线程的堆栈是个好想法，让我们看看它都在做什么。可以看得到它其中一条线程阻塞在epoll_wait(我的系统是ubuntu，因此选择了epoll)。在这里检测套接字事件，等待client请求。还有个线程池，创建了3条线程等待处理任务。#ifdef HAVE_E...
2019-05-31 14:32:40
677
原创 为什么使用Redis
先解释一下软件编程中常见的一些概念： 抽象先于具象。这个抽象并非虚无的抽象，而是指事物尚未分化为具象之前的那个前体存在。当那个前体存在分化成具象存在之后，前体存在就退化为背景，成为一种抽象。 结构是关联与互动的复合体。 接口是结构的耦合点。 架构是从无结构到有结构的过程。 重构是从旧结构到新结构的过程。 也就是说，结构是架构的...
2019-05-28 14:18:16
1003
原创 怎么让代码不再臃肿，写的像诗一样优雅
基本类型偏执基本类型偏执(Primitive Obsession)使用基本类型而不是小对象来实现简单任务（例如货币、范围、电话号码字符串等）。使用常量编码信息（例如一个用于引用管理员权限的常量USER_ADMIN_ROLE = 1 ）。使用字符串常量作为字段名在数组中使用。大多数编程语言都支持基本数据类型和结构类型（类、结构体等）。结构类型允许程序员将基本数据类型组织...
2019-05-27 17:55:01
750
原创 【并发编程】Future模式添加Callback及Promise 模式
FutureFuture是Java5增加的类，它用来描述一个异步计算的结果。你可以使用 isDone 方法检查计算是否完成，或者使用 get 方法阻塞住调用线程，直到计算完成返回结果。你也可以使用 cancel 方法停止任务的执行。下面来一个栗子：public class FutureDemo { public static...
2019-05-27 11:02:11
4444
原创 javascript 函数后面有多个小括号f( )( )( )...
有时我们看见js函数后面跟着多个小括号是什么意思？f( )( )( )…f()执行f函数，返回子函数f()()执行子函数，返回孙函数f()()()执行孙函数，返回重孙函数但注意，如果想这样执行，函数结构必须是这样，f的函数体里要return 子函数，子函数里要return 孙函数，如果没有return关键字，是不能这样连续执行的，会报错的。举个例子：k是f的子函数，return子函...
2019-05-20 14:59:55
4287
2
原创 一张图搞懂Ajax原理
原理说起ajax，就不得不说他背后的核心对象XMLHttpRequest，而说到XMLHttpRequest我觉得，从它的readyState状态说起是最好的切入点。个人觉得，只要弄清楚了readyState的这几个状态，其实ajax的原理也就算弄清楚了。为了更方便您理解，笔者特意画了一张状态图。您只需要看懂这张图ajax原理，您就算通关了；并且很难忘记。首先let xhr = n...
2019-05-19 15:05:50
1495
2
原创 520来袭，程序猿的浪漫 - 前端情书
###前言虽然很多人认为我们不懂得浪漫，甚至情商为负，但是程序员浪漫起来，就真的没有了其他人什么事了。520即将到来，需要告白的同学们，要把握好机会，不要错过了。下面分享一篇我写的前端情书（10%的借鉴）窗外，雨敲残枝窗内，荧光灯和电脑屏幕交汇映影某一刻当键盘的清脆声音戛然而止是因为我突然想起了你我幼稚的想用new这个关键字把你定义成我的对象但我压缩了自己的爱因为我没...
2019-05-16 16:05:47
1498
原创 一行命令更新所有 npm 依赖包
npm 包的更新速度很快，为了将项目或者全局依赖更新到最新版本。传统的做法是一个一个更新，比如更新 react 到最新版本，命令如下：# npmnpm i --save react@latest# yarnyarn add react@latestyarn 是 facebook 发明的新一代 js 包管理器，支持离线使用。这是 npm 与 yar...
2019-05-15 14:09:15
3792
原创 Chrome 性能监测
前端性能优化一直是前端工作中必不可少的一部分，但是我们如何知道哪些部分的性能有优化的空间呢？此时，Chrome 性能监测就派上用场了。正所谓：知己知彼，百战百胜，只有确定了性能瓶颈，才能有条不紊地进行前端性能优化工作。PerformancePerformance 是 Chrome 开发者工具中的一个功能，用于记录网页从初始化到运行时的所有性能指标。使用 Performance 之前，我们需...
2019-05-14 22:24:47
676
原创 页面性能优化之原生JS实现图片懒加载
在项目开发中，我们往往会遇到一个页面需要加载很多图片的情况。我们可以一次性加载全部的图片，但是考虑到用户有可能只浏览部分图片。所以我们需要对图片加载进行优化，只加载浏览器窗口内的图片，当用户滚动时，再加载更多的图片。这种加载图片的方式叫做图片懒加载，又叫做按需加载或图片的延时加载。这样做的好处是：1.可以加快页面首屏渲染的速度；2.节约用户的流量。一.实现思路1.图片img标签自定义一个属性d...
2019-05-13 13:47:26
483
原创 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
24180
原创 vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
v-on:click/mouseover...... 简写的: @click="" 推荐 事件对象: @click="show($event)" 事件冒泡: 阻止冒泡: a). ev.cancelBubble=true; b). @click.stop ...
2019-05-09 14:33:09
734
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
2465
原创 你不知道的浏览器渲染原理
前言浏览器的内核是指支持浏览器运行的最核心的程序，分为两个部分的，一是渲染引擎，另一个是 JS 引擎。渲染引擎在不同的浏览器中也不是都相同的。目前市面上常见的浏览器内核可以分为这四种：Trident（IE）、Gecko（火狐）、Blink（Chrome、Opera）、Webkit（Safari）。这里面大家最耳熟能详的可能就是 Webkit 内核了，Webkit 内核是当下浏览器世界真正的霸主。...
2019-05-07 14:00:18
455
原创 如何优化我们的代码（vue项目）
前言作为一个前端，可能绝大多数的时间都是在写的业务代码，时间一长，大家会觉得乏味、没意思等等，但是其实就算只是写业务代码，我们也依然能够找到有兴趣的点，说的简单一点就是代码优化，不仅仅局限在业务逻辑这块，像是代码复用、效率等等都是我们可以加以改进的地方，学会在业务代码中找到不足，总结经验，这样日积月累，量变产生质变，必然我们的技术也是不断再上升的。今天其实就是说下我在vue项目中进行的一些总结...
2019-04-30 14:07:18
3417
原创 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
1246
原创 Vue渲染过程浅析
Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。但是模板毕竟是模板，不是真实的dom节点。从模板到真实dom节点还需要经过一些步骤把模板编译为render函数实例进行挂载, 根据根节点render函数的调用，递归的生成虚拟dom对比虚拟dom，渲染到真实dom组件内部data发生变化，组件和子组件引用data作为props重新调用render函数，生成虚拟dom...
2019-04-28 14:16:36
8805
1
原创 VUE—数据响应原理真的是双向绑定吗？
很多朋友在理解 Vue 的时候都把 Vue 的数据响应原理理解为双向绑定，但实际上这是不准确的，我们之前提到的数据响应，都是通过数据的改变去驱动 DOM 视图的变化，而双向绑定除了数据驱动 DOM 外， DOM 的变化反过来影响数据，是一个双向关系，在 Vue 中，我们可以通过 v-model 来实现双向绑定。在Vue中体现出双向绑定作用的方式有两种，在分析之前我们先介绍这两种使用方式有什么区...
2019-04-27 14:17:18
722
原创 javascript引擎工作原理
1. 什么是JavaScript解析引擎？简单地说，JavaScript解析引擎就是能够“读懂”JavaScript代码，并准确地给出代码运行结果的一段程序。比方说，当你写了 var a = 1 + 1; 这样一段代码，JavaScript引擎做的事情就是看懂（解析）你这段代码，并且将a的值变为2。学过编译原理的人都知道，对于静态语言来说（如Java、C++、C），处理上...
2019-04-26 14:25:24
691
原创 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
649
原创 从前端到未来，前端发展闲聊
1. 前情提要毋庸讳言，在我刚工作的时候，前端是还是一个不受重视的岗位。切图狗，写网页的这种侮辱性绰号绑在前端开发身上。我自己体验到的一个很明显的标志是：招聘网站上，前端开发的工资是其他开发工资的90%甚至更低。在知乎一个2011年的前端地位问题（《如何改善国内前端开发行业的尴尬地位？》）中，包括贺师俊老师都承认这种尴尬确实存在。但是，30年河东30年河西，到了2018年，前端已经成了炽手可热...
2019-04-20 17:13:25
8360
7
原创 正则全攻略使用手册,你确定不进来看看吗
前言正则表达式是软件领域为数不多的伟大创作。与之相提并论是分组交换网络、Web、Lisp、哈希算法、UNIX、编译技术、关系模型、面向对象等。正则自身简单、优美、功能强大、妙用无穷。学习正则表达式，语法并不难，稍微看些例子，多可照葫芦画瓢。但三两篇快餐文章，鲜能理解深刻。再遇又需一番查找，竹篮打水一场空。不止正则，其他技术点同样，需要系统的学习。多读经典书籍，站在巨人肩膀前行。这里涉及的东西...
2019-04-20 15:19:04
454
原创 Koa日志中间件封装开发详解
对于一个服务器应用来说，日志的记录是必不可少的，我们需要使用其记录项目程序每天都做了什么，什么时候发生过错误，发生过什么错误等等，便于日后回顾、实时掌握服务器的运行状态，还原问题场景。日志的作用记录服务器程序运行状态；帮助开发者快速捕获错误，定位以及决解故障。日志中间件开发工具log4js在node当中没有自带的日志模块，所以需要使用第三方模块使用模块：log4js安装：&nb...
2019-04-18 15:41:23
531
原创 如何在Vue.js中实现标签页组件详解
###前言标签页组件，即实现选项卡切换，常用于平级内容的收纳与展示。因为每个标签页的内容是由使用组件的父级控制的，即这部分内容为一个 slot。所以一般的设计方案是，在 slot 中定义多个 div，然后在接到切换消息时，再显示或隐藏相关的 div。这里面就把相关的交互逻辑也编写进来了，我们希望在组件中处理这些交互逻辑，slot 只单纯处理业务逻辑。这可以通过再定义一个 pane 组件来实现，...
2019-04-16 19:52:59
2987
原创 为什么要学习vue
Vue是什么？来看看官方的介绍。Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。Vue和Jquery有什么区别？...
2019-04-16 15:04:05
588
原创 写一个Vue Popup组件
组件长这样主要有标题、内容、按钮个数、按钮颜色、按钮文案这些可配置项期望的调用方式一不需要等待用户二次确认import Modal from 'common/components/modal' handleModal() { Modal({ title: '赚取收益？', content: '根据您的授权金额和计息天数计算得出(还未到账)。实际以到账金额为准。', c...
2019-04-15 15:41:38
3123
1
原创 JavaScript函数的4种调用方法实例分析
本文实例讲述了JavaScript函数的4种调用方法。分享给大家供大家参考，具体如下：JavaScript 函数有 4 种调用方式：作为一个函数调用函数作为方法调用使用构造函数调用函数作为函数方法调用函数分述如下：每种方式的不同方式在于 this 的初始化。作为一个函数调用function myFunction(a, b) { return a * b;}myFunc...
2019-04-14 14:41:09
823
原创 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
1829
1
原创 总结4个方面优化Vue项目
运行时优化1、使用v-if代替v-show两者的区别是：v-if不渲染DOM，v-show会预渲染DOM除以下情况使用v-show，其他情况尽量使用v-if有预渲染需求需要频繁切换显示状态2、v-for必须加上key，并避免同时使用v-if一般我们在两种常见的情况下会倾向于这样做:为了过滤一个列表中的项目比如 v-for=“user in users” v-if=“user.is...
2019-04-10 20:10:35
1151
原创 15个最好用的JavaScript代码压缩工具
JavaScript 代码压缩是指去除源代码里的所有不必要的字符，而不改变其功能的过程。这些不必要的字符通常包括空格字符，换行字符，注释以及块分隔符等用来增加可读性的代码，但并不需要它来执行。在这篇文章中，我们选择了15个最好用的 JavaScript 压缩工具，有简单的在线转换器，GUI工具和命令行界面等。1. JavaScript Minifier它是一个很好的工具，带有API来缩小j...
2019-04-10 17:12:31
6638
原创 简单实现vue中的依赖收集与响应的方法
开始声明一个对象man，可以视为vue中的datalet man = { height: 180, weight: 70, wealth: 100000000}添加Observer作用在于将参数对象的属性变为响应式，只要对象的属性被读取或者被修改都能观察到。然后新建一个Observer实例，将man作为参数扔进去。这里的proxyData是将man的属性代理到以man为参数的Ob...
2019-04-10 14:23:34
490
原创 JS module的导出和导入的实现代码
最近看了些Vue框架写的程序，发现自己的前端知识还停留在几年以前，发现现在Javascript程序里有各种各样的对module的导入和到处，导入乍一看跟python的语法挺像的无非就是把from和import这两个关键词的使用颠倒了一下顺序。仔细看下来还是和python挺不一样的import模块的前提是模块有导出，并且还分默认导出和命名导出，有些麻烦。所以今天这篇文章就把所有的export形式和相...
2019-04-09 15:12:34
420
原创 浅谈vue中的MVVM实现原理
现成MVVM菜单教程<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://unpkg.com/vue/dist/vue.j...
2019-04-03 19:49:54
628
1
原创 Vue指令指令大全
1. v-textv-text主要用来更新textContent，可以等同于JS的text属性。<span v-text="msg"></span>这两者等价：<span>{{msg}}</span>2. v-html双大括号的方式会将数据解释为纯文本，而非HTML。为了输出真正的HTML，可以用v-html指令。它等同于JS的inn...
2019-04-03 15:57:17
524
原创 Vue指令指令大全
1. v-textv-text主要用来更新textContent，可以等同于JS的text属性。<span v-text="msg"></span>这两者等价：<span>{{msg}}</span>2. v-html双大括号的方式会将数据解释为纯文本，而非HTML。为了输出真正的HTML，可以用v-html指令。它等同于JS的inn...
2019-04-03 15:26:23
3465
原创 Vue指令指令大全
1. v-textv-text主要用来更新textContent，可以等同于JS的text属性。<span v-text="msg"></span>这两者等价：<span>{{msg}}</span>2. v-html双大括号的方式会将数据解释为纯文本，而非HTML。为了输出真正的HTML，可以用v-html指令。它等同于JS的inn...
2019-04-03 15:26:23
465
原创 从0到1构建vueSSR项目之node以及vue-cli3的配置
前言上一次做了路由的相关配置，原本计划今天要做vuex部分，但是想了想，发现vuex单独的客户端部分穿插解释起来很麻烦，所以今天改做服务端部分。服务端部分做完，再去做vuex的部分，这样就会很清晰。vue ssr是分两个端，一个是客户端，一个是服务端。所以要做两个cli3的配置。那么下面就直接开始做吧。修改package.json的命令//package.json :client代表...
2019-04-02 21:07:59
1820
1
原创 那些大佬公司的前端面试都喜欢问些什么？
英文原文：http://davidshariff.com/blog/preparing-for-a-front-end-web-development-interview-in-2017/在过去的几年里，我在亚马逊和雅虎面试过很多专注于前端开发的 Web 开发者和软件工程师，在这篇文章中，我想分享一些面试技巧，帮助候选人为面试做好准备。免责声明——本文并非旨在列出在前端面试中可能会被问到...
2019-04-02 16:44:10
1445
原创 阿里P7解析“前端开发的难点到底在哪里？”
不同级别的前端面临的难点各不相同，不可一概而论；业务开发的前端难点在于对业务的理解和把控能力；平台开发的前端难点在于产品化的把控和推进能力。观点1：不同级别的前端面临的难点各不相同，不可一概而论。其他回答有说 CSS 难，有说 CSS 不难的，每个人水平不同，这样争论毫无意义。我刚学前端时觉得 JS/CSS/浏览器兼容问题都很难，现在觉得也就那样，因为前端路子广，办法总比问题多。后来...
2019-04-01 21:40:59
8331
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人