自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

CSDN前端知识共享

在积累中沉淀,在学习中总结,在探索中尝试

原创 engine.io 原理详解

engine.io 原理详解 最近,业务中有使用到 socket.io,进行客户端与服务端的实时通信。socket.io提供的API易上手,对新手友好,这就极大提高了开发者的效率。不过,期间也有遇到很多socket.io中的坑,例如,中文乱码问题,服务端NPE问题 等。有些涉及到底层的问题,就势...

2019-01-26 22:04:03 1998 0

原创 模板引擎:二、实现一个Json解析器

2.Js实现Json解析器 前言 本文主要对Json解析器的实现进行探讨。 如果想深入了解其原理,可以参考上一篇文章:模板引擎:一、理解Json解析器工作原理 项目github地址:https://github.com/yang657850144/parseJson ...

2018-07-21 23:29:39 942 0

原创 模板引擎:一、理解Json解析器工作原理

Json解析器 初衷 编写Json解析器目的是为了拓展自己的知识广度,并且通过简单的手写实践,能够深入了解一些技术细节(AST、DFA&NFA、LL(1)文法),以及便于理解目前主流的前端框架设计。 那么就通过Json,切入正题 Json Json一共...

2018-07-20 20:51:53 1072 0

原创 CSS3(三)Animation 入门详解

Animation 前言 好的前端工程师,会更注重用户的体验和交互。那么动画就是将我们的静态页面,变成具有灵动性,为我们的界面添加个性的一种方式。 下面是七喜的官方主页,它就是很好的富交互样例。鼠标移动到导航栏,就会播放多种动效,给用户一种酷炫的体验。我觉得用户体验,才是前端...

2018-04-17 16:07:44 34378 4

原创 git cherry-pick 用法整理

具体请看:点击查看

2020-04-28 15:30:28 21 0

原创 React Navigation5.x 动态修改标题内容

React Navigation 官方文档 搭建环境 # 安装全局依赖 $ npm install -g expo-cli # 生成种子模板 expo init <projectName> [--npm] 安装 ReactNavigation # 安装依赖 $ yarn add @r...

2020-03-02 22:14:17 755 0

原创 【解决方案】ESLINT 报错: Cannot read property 'range' of null

Cannot read property ‘range’ of null 问题描述: Cannot read property ‘range’ of null TypeError: Cannot read property ‘range’ of null 解决方案: 在项目根目录下,创建 .e...

2020-02-21 13:39:56 1250 0

原创 Android Studio 3.x找不到Android Device Monitor

问题原因 官方已经废弃 官方声明: Android Device Monitor is a standalone tool that provides a UI for several Android app debugging and analysis tools. However, most...

2020-02-05 19:57:23 58 0

原创 vim 多行复制粘贴

vim 多行复制粘贴 主要分一下三个步骤: 将光标移动到要复制的文本开始的地方,按v进入可视模式。 将光标移动到要复制的文本的结束的地方,按 y 复制。此时 vim 会自动将光标定位到选中文本的开始的地方,并退出可视模式。 我移动光标到文本结束的地方,按p粘贴。 ...

2020-01-17 13:59:04 48 0

原创 Linux 中文乱码解决

编辑 vim ~/.vimrc 文件,设置如下代码即可: set fileencodings=utf-8,ucs-bom,gb18030,gbk,gb2312,cp936 set termencoding=utf-8 set encoding=utf-8

2020-01-17 12:59:59 36 0

原创 解决方案: vue 使用 scrollTo 方法,在安卓环境下报错

vue 使用 scrollTo 方法,在安卓环境下报错 // 安卓不支持 window.scrollTo(x-scoller,y-scroller) 解决方案 // 使用 scrollLeft、scrollTop window.scrollLeft = x-scoller window.scro...

2019-11-28 17:31:45 127 0

原创 vim 查找关键字

vim 查找关键字 # 进入vim $ vim ./filename # 输入/ + 关键字 $ /keyword 查找下一个 # 搜索完之后,按n $ n

2019-11-20 16:25:01 50 0

原创 mysql 常用操作指令

mysql 在 nodejs 中实践 项目地址 -- 显示所有数据库 show databases; -- 创建数据库 create database <db_name> -- 显示所有数据表 show tables; -- 查看表结构 desc <tb_name>; --...

2019-11-17 19:49:42 38 0

原创 Python基础语法

输入求和 input: 输入 print: 输出 x = int(input('请输入第一个数字:')) y = int(input('请输入第一个数字:')) print(x+y) 求平方根 **: 幂运算 a = int(input('...

2019-11-09 17:25:52 32 0

原创 Typescript 常用变量类型声明

函数声明变量 // 基础类型(number、boolean、string) const int = (arg1: number) { // ... } // 数组类型 const arr1 = (arg1: number[]) { // ... } // 另一种写法,使用泛型 const ar...

2019-08-23 15:32:07 157 0

原创 Git 超实用指令集合

1、Git git log日志类型 feat:新功能(feature) fix:修补bug docs:文档(documentation) style: 格式(不影响代码运行的变动) refactor:重构(即不是新增功能,也不是修改bug的代码变动) test:增加测试 build:构建过程或辅...

2019-04-13 11:55:53 81 0

原创 【微信小程序】 如何生成菊花码教程

如何生成菊花码教程 准备工具: postman(需要发送post数据) 生成菊花码需要三个步骤: 获取 Accesstoken 接口文档 我们需要appid 和 secret 两个字段值,其中secret 可以在公众号平台获取。 在浏览器发起一个 GET 请求,获取 Accessto...

2019-04-02 10:54:45 2745 0

原创 Vue 源码详解之生命周期

Vue 生命周期详解 注意!!! 本文是以 vue v2.6 版本进行讲解。 源码地址 前言 在学习 Vue 的时候,应该或多或少了解过它的生命周期图示。 基本可以归纳为四个阶段 created 【初始化创建阶段】 (beforeCreate、created) mounted 【挂载渲染...

2019-04-01 17:26:00 279 0

原创 图解排序算法-快速排序 (Javascarpt 实现)

快速排序 核心思想: 选取一个基数,保证左边的数都小于这个基数,右边的数都大于这个基数。然后递归执行上述步骤 时间复杂度 O(nlgn~n^2) 最好情况O(nlgn): 在数组中,每次选取的基数都恰好是最数组的 n/2 的位置。 如下图: 递归的总次数就等于二叉树的层数( k )...

2019-03-30 13:20:35 130 0

原创 图解排序算法-冒泡排序 (Javascarpt 实现)

冒泡算法 “冒泡”的由来 按照气泡在水中上浮的顺序进行模拟的一种算法,一般较大的气泡上浮越快,较小的气泡则在其后。 核心思路:在数组遍历时,当遇到较大的数值时,将较大的数往后交换,直至本轮比较结束。然后进行下一趟比较。 时间复杂度 O(n^2) 遍历一趟需要的时间复杂度为 O(n),一共需要进...

2019-03-30 11:16:58 80 0

原创 ES5: reduce 你不知道的黑科技

ES5: reduce 你不知道的黑科技 简介 reduce 相当于一个累加器的概念,通过遍历数组,获取上一个值与当前值,通过回调函数处理,返回一个新值。而该值将会当做下一次执行的prev返回。 语法 MDN 文档定义 arr.reduce(function(prev,cur,index,or...

2019-03-24 14:39:49 184 0

原创 Vue2.0 实现锚点定位网页元素位置

问题描述 vue2.0: 如何通过锚点定位网页元素位置? 原理 可以通过scrollTop属性,该属性可以获取或设置一个元素的内容垂直滚动的像素数。 语法 // 获得滚动的像素数 var intElemScrollTop = document.querySelector('.anc...

2019-03-20 15:13:23 980 0

原创 算法:两数之和求下标(递归解法)

给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标。 你可以假设每种输入只会对应一个答案。但是,你不能重复利用这个数组中同样的元素。 示例: 给定 nums = [2, 7, 11, 15], target = 9 因为...

2019-03-16 10:31:26 177 0

原创 vue 使用v-for 动态修改class

问题描述 通过v-for指令,按照index动态生成class 例如: .item-1 .item-2 .item-3 .item-4 .item-5 其中,1,2,3,4,5为循环遍历的下标。 源码实现 &amp;lt;template&amp;gt; &amp;...

2019-03-14 17:53:05 2352 0

原创 【解决方案】Webpck Tapable.plugin is deprecated. Use new API on `.hooks` instead xxx

问题 在执行webpack构建过程中,出现 DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead emit告警问题。 分析原因 这是因为使用的webpack插件中,使用了旧的API导致的。 ...

2019-03-14 10:46:03 2066 0

原创 谈谈浏览器的缓存机制

谈谈浏览器的缓存机制 概述 缓存是一种保存资源副本并在下次请求时直接使用该副本的技术。在开发过程中随处可见,小到Javasript作用域内的变量存储,大到使用CDN使静态资源的分布存储到缓存服务器上等。缓存的简单解释就是将我们的计算结果储存,当下一次计算时,可以将保存的结果值快速返回。(类似于C...

2019-03-03 19:11:30 254 0

原创 MVVM框架设计分析(以vue.js为例 )

MVVM 框架设计 MVVM 框架已经成为前端圈的主流,同时也诞生了很多优秀的前端框架,有最早的Angular,以及后起之秀Vue、React等,为我们开发者提供了极大的便利。那么,什么样的框架设计才算是MVVM框架呢? MVVM框架的前身 最早使用Java开发的程序员应该了解过,当时有一种J...

2019-03-02 18:04:55 675 0

原创 浅谈Model–View–Controller(MVC)模型

MVC 架构 引用自 WiKi: MVC模式(Model–view–controller)是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model)、视图(View)和控制器(Controller)。 结构示意图 通过下图可以看到, 视图(View)层: 一般指可视化界...

2019-02-28 21:12:20 1922 0

原创 serviceworker 离线缓存化(附源码)

serviceworker 离线缓存化 本文源码 概述 Service Worker 是HTML5 的一个新特性,主要用来做持久的离线缓存。 作用 这个 API 的唯一目的就是解放主线程,Web Worker 是脱离在主线程之外的,将一些复杂的耗时的活交给它干,完成后通过 postMessa...

2019-02-25 20:30:28 739 0

原创 excel表格操作之数据分级统计

常见的excel表格操作 概述 因为近期有大量数据统计,需要用到excel进行数据分析,所以,整理一些常用操作藉以分享之。 1.条件分组 目标: 通过fmp数据值,进行分级显示。 数据源如下表: 使用语句: B2是指数据表格中的第二行,等级分为: 优: &lt;=1300ms 中:...

2019-02-25 15:56:03 522 0

原创 socket.io 原理详解

socket.io 原理详解 在上一篇文章中,我们了解到 socket.io 是 基于engine.io 进行封装的库。 所以对engine.io不清楚的童鞋可以点击进行了解: engine.io 详解 1.概述 socket.io 是基于 Websocket 的Client-Server ...

2019-01-27 21:38:02 4500 0

原创 微信小游戏登录授权流程图

微信小游戏登录授权流程图 最近在做小游戏相关的业务需求,小游戏(小程序)的登录授权逻辑相对来说还是比较复杂的,因此有必要梳理一下,避免以后少踩坑。 ...

2019-01-22 15:37:06 2309 0

原创 微信小游戏 文字溢出处理方案,使用省略号

因为小游戏是使用canvas进行文字绘制,无法使用css的方式进行处理,必须使用js进行处理。下面是使用工具进行处理。 // 文字溢出处理函数 spliteWord (content) { let templateWord = '' /* 自定义文字...

2019-01-18 11:47:46 525 0

原创 微信小游戏填坑指南

微信小游戏 因为工作需要,提前预研微信小游戏的开发流程。做了如下一个简单的demo项目,并且把实际项目中遇到的坑点都一一详细列出,方便在今后的项目中可以进行查阅。 gitHub 项目源码 小游戏填坑指南 微信小游戏只允许在调试模式下使用window全局变量,在真机模式下使用window会导...

2019-01-13 14:24:29 1051 0

原创 【解决方案】三星手机使用chrome远程调试失败

问题描述 使用机型 三星note8、三星s8 操作步骤 在chrome输入: chrome://inspect/#devices 使用chrome远程调试失败,inspect没有显示 解决方法 在手机中,输入 https://debugx5.qq.com/ 选择【信息】栏 在【信息】...

2018-12-26 17:26:16 584 0

原创 javascript设计模式-面向对象

什么是面向对象(Object Oriented) 面向对象是一种程序设计思想。其中,对象是最小的程序单元,包含有属性(props)和方法(methods)。 类和实例 面向对象编程,其实目的就是为了降低代码耦合性。其中,有两个重要的概念: 类(class)、实例(instance)。 c...

2018-12-23 18:54:05 78 0

原创 【解决方案】vue 子组件watch监听不到prop

问题描述 在vue项目中,父组件通过prop给子组件传值时,如果prop值是从服务器端获取,则父组件可能会传给子组件一个默认值(服务端数据还未及时获取),那么,我们就需要实时watch这个prop值,一旦prop值有更新,将立即通知子组件更新。 解决方案 watch: { levelD...

2018-12-23 15:24:35 7465 0

原创 【解决方案】webpack `Invalid Host/Origin header`问题

问题 如何解决webpack Invalid Host/Origin header问题 问题描述 webpack相关版本 package.json "html-webpack-plugin": "^3.2.0", "webpack&...

2018-12-23 15:16:34 10994 2

原创 Javascript 常见继承方式对比

Javascript 常见继承方式对比 借用构造函数 /** * call 构造函数继承 * 优点: 可以使用父类的属性 * 缺点: 无法调用父类方法 */ function Parent (name, age) { this.name = name this.age = age ...

2018-11-27 11:25:32 94 0

原创 【解决方案】webpack-devServer 无法通过ip访问

方案一: var server = new WebpackDevServer(webpack(webpackConfig), { ... }); server.listen(port, "0.0.0.0", function(err) { ... 方案二: v...

2018-11-24 18:21:24 1937 0

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