- 博客(166)
- 收藏
- 关注
RSS订阅原创 通过 snabbdom 库，来窥探 vue2.x 虚拟DOM 和 Diff 算法
前言**vue2.x 版本中的虚拟DOM 和 Diff 算法借鉴了 snabbdom 库，所以这篇文章以 snabbdom 库代码为例，来分析 虚拟 DOM 和 Diff 算法。本文仅仅是自己对 虚拟 dom 和diff 算法的一些分析和理解，如果有写的不对的地方，还请指正。本篇文章内部代码均是抽离出来的简化版本。想看源码的同学，请自行在 github 上搜索 snabbdom **虚拟 DOM 是什么 ?虚拟 dom 其实就是由 js 对象，一个包含一些特定属性的对象，特定属性(比如 属性 sel
2021-02-27 20:55:00
368
1
原创 javascript防抖和节流原理
防抖和节流的总结：1. 防抖(debounce) 防抖是限制频率，多次出发一次执行。2. 节流(throttle) 节流是限制次数，限制规定时间内执行次数。这篇文章以 underscore.js 工具库中的 防抖和节流函数作为演示，并探究其源码。underscore.js 中文文档本篇文章只对其原理进行探究，使用方式不做太多概述，如果不知道怎么使用的同学，可自行百度。**下边是 html 演示代码， 里边引入debounce.js throttle.js 两个文件 **<!DOCTYPE
2021-02-25 23:29:50
1130
原创 call、apply、bind 实现原理
这篇文章主要探究 call、apply、bind 的实现原理，对于使用方法不做太多概述。如果有不太了解的同学可以查看JavaScript MDN 官方文档 call apply bind 详解前言我们都知道 call、apply、bind 三个方法是用来改变 this 指向的，但是也只局限于会用状态。具体的实现原理，却没有思考过。所以有必要研究一下。在明白起原理的情况下，才能用的更好。具体实现 call众所周知这三个方法都是提供给 函数使用的，函数通过这三个方法调用把 this 传入进去就可以改变
2021-02-23 22:02:40
506
原创 react 新版生命周期
React16 之后有三个生命周期被废弃(但并没有删除)componentWillMountcomponentWillReceivePropscomponentWillUpdate官方计划在17版本完全删除这三个函数，只保留UNSAVE_前缀的三个函数，目的是为了向下兼容，但是对于开发者而言应该尽量避免使用他们，而是使用新增的生命周期函数替代它们。目前React 16.8+ 的生命周期氛围三个阶段，分别是挂载阶段，更新阶段，卸载阶段挂载阶段constructor: 构造函数，最先被执
2021-02-23 19:57:29
695
原创 对闭包的理解？闭包使用场景?
一、是什么一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域在 JavaScript中，每当创建一个函数，闭包就会在函数创建的同时被创建出来，作为函数内部与外部连接起来的一座桥梁下面给出一个简单的例子function init() { var name = "Mozilla"; // name 是一个被 init 创建的局部变.
2021-02-22 23:16:25
2005
原创 Promise 实现原理
前言这篇文章主要是探究 Promise 的实现原理，对于使用方法，这里不做过多概述，如果还有对 Promise 使用方式不太了解的，可以先看 阮一峰老师的 Promise 教程Promise 是什么,为什么会出现 Promise？抽象表达：Promise 是一门新的技术（ES6规范）Promise 是js 中进行异步变成的新解决方案,在没有 Promise 之前，旧方案是单纯使用回调函数具体表达：从语法上来说： promise 是一个构造函数从功能上来说：promise 对象用来封
2021-02-21 21:43:05
6365
1
原创 寻找字符串中，连续重复次数最多的字符
比如有一个字符串: ‘aaaabbbbbcccccccccccccdddddd’ 这里边连续重复出现次数最多的是 c 共出现了 13 次，我们要想办法使用js找出来解题思想：同时声明两个指针，i 和 j，初始值都是 0 同时指向下标为 0 的位置，遍历字符串，i停在 0 位，j 往后走,每走一次和 i 指针指向的位置做比较，如果相同，什么也不做，如果不同，就说明连续重复出现的字符串结束了，i — j 指针之间的字符串就是相同的，j - i 就是出现的次数这时候判断 j - i 是否大于 maxR
2021-02-17 23:09:11
4646
原创 栈相关笔试题
题目如下图：解题代码如下： function smartRepeat (templateStr) { // 指针 var index = 0 // 栈1，存放数字 var stack1 = [] // 栈2，存放临时字符串 var stack2 = [] // 剩余部分 var rest = templateStr while (index < templateStr.length
2021-02-17 22:58:36
221
1
原创 形式转换:试将高维数组[1, 2, [3, [4, 5], 6], 7, [8], 9]变为图中所示的对象
小技巧:只要出现了“规则复 现”就要想到用递归。方法一： var arr = [1, 2, [3, [4, 5], 6], 7, [8], 9] // var arr = [1, 2, 3, [4, 5]] // 转换函数,方法1 function convert (arr) { // 准备一个初始对象里边有个初始 children:[] 数组 var obj = {children: []} // 遍历传入的 arr 的 每一项 .
2021-02-17 22:33:19
509
原创 试输出斐波那契数列的前10项
面试题：1、试输出斐波那契数列的前10项，即1、1、2、3、5、8、13、21、34、55。方法1：使用递归 // 创建一个函数，功能是返回下标为 n 的这项的数字 function fib (n) { // 看下标 n 是不是 0 或者是不是 1， 如果是，就返回常数 1，如果不是就递归 var v = n === 0 || n === 1 ? 1 : fib(n - 1) + fib(n - 2) return v } // var
2021-02-17 22:05:19
15483
原创 javascript 笔试题整理
1、写一个深拷贝方法function deepClone (origin, target) { var target = target || {} var toStr = Object.prototype.toString var arrType = '[object Array]' for (var key in origin) { if (origin.hasOwnProperty(key)) { if (typeof(origin[key]) === 'objec
2021-01-11 23:21:20
1308
2
原创 javascript hasOwnProperty()
hasOwnProperty() 方法,判断 属性或者方法是不是对象本身的自有属性方法，而不是原型上的属性方法function Car () { this.brand = 'Benz' this.color = 'red' this.displacement = '3.0'}Car.prototype = { lang: 6, width: 2.5}Object.prototype.name = 'aaaa'var car = new Car()for (var k
2021-01-11 22:40:15
150
原创 javascript 链式调用实现原理
1、链式调用是什么使用过JQuery 的同学应该都知道，代码如下$('text’).setStyle('color', 'red').show();这就是链式调用，就是调用完一个方法以后，不用另起一行，重新再当前this 对象上再去调用方法， 就像下边这样var sched = { wakeup: function () { console.log('Running') return this }, morning: function () { console.
2021-01-11 22:26:34
2111
1
原创 javascript 原型 原型链总结
原型 prototype 其实是 function 对象的一个属性，打印出来看了一下，结果它也是对象function Handphone (color, brand) { this.color = color this.brand = brand this.screen = '18:9' this.system = 'Android'}console.log(Handphone.prototype)...
2021-01-10 23:20:21
158
原创 react 高阶组件
react 高阶组件源码连接1、高阶函数在学习之前首先说一下高阶函数的基本概念：函数可以作为参数被传递函数可以作为返回值输出像平时js 中我们用到的以下这些都是 高阶函数setTimeout(() => { console.log(1)}, 1000)setInterval(() => { console.log(1)z}, 1000)function foo (x) { return function () { return x }}/
2020-12-25 23:21:44
229
原创 MVVM
MVVM 由一下三个内容组成View: 界面Model: 数据模型ViewModel: 作为桥梁负责沟通 View 和 Model在 JQuery 时期，如果需要刷新UI 时，需要先取到对应的 DOM 再更新 UI，这样数据和业务的逻辑就和页面有强耦合在MVVM 中， UI 是通过数据驱动的，数据一旦改变就会响应的刷新对应的 UI ， UI 如果改变，也会改变对应的数据。这种方式就可以在业务处理中 只关心数据的流转，而无需直接和页面打交道。 ViewModel 只关心数据和业务的处理，不关
2020-12-03 22:06:12
198
原创 Obeject.defineProperty() 实现一个简单的双向绑定
Vue 内部使用了 Obeject.defineProperty() 来实现双向绑定，通过这个函数可以监听到 set 和 get的事件首先我们来了解一下 Obeject.defineProperty () 的使用方法var data = { name: 'yck' }observe(data)let name = data.name // -> get valuedata.name = 'yyy' // -> change valuefunction observe(obj)
2020-12-03 21:35:41
356
1
原创 display: none 和 visibility: hidden
相同点：他们都能让元素不可见区别：display: none ： 会让元素完全从渲染树种消失，渲染的时候不占据任何空间；visibility: hidden； 不会让元素从渲染树种消失，渲染树元素继续占据空间，只是内容不可见display: none 是非继承属性，子孙节点消失由于元素从渲染树消失造成的，通过修改子节点属性无法显示； visibility: hidden 是继承属性，子孙节点消失由于继承了 hidden ，通过设置 visibility: visiblie 可以让子孙节点显示。
2020-11-28 19:16:47
174
原创 面试题： 如何进行网站性能优化
今天刷面试题，看到一篇关于网站性能优化的文章，写的很全面，记录下来。如何进行网站性能优化content 方面减少 HTTP 请求： 合并文件、CSS精灵、 inline Image减少 DNS 查询： DNS 缓存、将资源分不到恰当数量的主机名减少 DOM 元素数量Server 方面使用 CND配置 ETag对组件使用 Gzip 压缩Cookie 方面：减小 cookie 大小CSS 方面：将样式表放到页面顶部不是用CSS 表达式使用 <link&g
2020-11-28 15:11:36
624
转载 要不要用 gzip 优化前端项目
原文地址这两天在做项目优化，注意到webpack有一个compression-webpack-plugin插件，可以打包成gzip格式部署到服务器，了解到了GZIP，其实GZIP有很多点，这里我们只讨论前端范围内GZIP的应用。什么是GZIP ？GZIP是网站压缩加速的一种技术，GZIP最早由Jean-loup Gailly和Mark Adler创建，用于UNIX系统的文件压缩。我们在Linux中经常会用到后缀为.gz的文件，它们就是GZIP格式的。现今已经成为Internet 上使用非常普遍的一种数
2020-11-28 14:32:37
199
原创 从浏览器地址栏输入 url 到显示页面的步骤
基础版浏览器根据请求的 RUL 交给 DNS 域名解析，找到真实 IP, 向服务器发起请求；服务器交给后台处理完成后返回数据，浏览器接收文件（THML、JS、CSS、 图像等）;浏览器对加载到的资源（HTML、JS、CSS 等） 进行语法解析，建立相应的内部数据结构（如 HTML 的 DOM）；载入解析到的资源文件，渲染页面，完成。详细版在浏览器地址栏输入RUL浏览器直接查看缓存，如果请求资源在缓存中并且新鲜，跳转到转码步骤如果资源未缓存，发起新请求。过已经缓存，检验是否足够新鲜，
2020-11-26 22:21:09
207
转载 vim 插件安装和卸载
当没有插件管理器时，Vim 用户必须手动下载 tarball 包形式的插件，并将它们解压到 ~/.vim 目录中。在少量插件的时候可以。但当他们安装更多的插件时，就会变得一团糟。所有插件文件分散在单个目录中，用户无法找到哪个文件属于哪个插件。此外，他们无法找到他们应该删除哪个文件来卸载插件。这时 Vim 插件管理器就可以派上用场。插件管理器将安装插件的文件保存在单独的目录中，因此管理所有插件变得非常容易。我们几个月前已经写了关于 Vundle 的文章。今天，我们将看到又一个名为 “Vim-plug” 的 V
2020-05-12 23:44:17
12272
原创 vim 常用命令，会持续更新
================入坑 vim 学习笔记 ============================ 移动 ===============jkhl 上下左右单词之间移动e 移动到下一个单词尾部w 移动到下一个单词头部b/B 移动到上一个单词头部2e 向后移动两个单词到尾部2w 向后移动两个单词到头部0 直接移动到行尾$ 直接移动到行首^ 直接移动到行首第一个非空白字符g_ 直接移动到行尾的非空白字符G 移动到当前文件尾部gg 移动到当前文件头部ctrl +
2020-05-12 23:30:20
445
原创 webpack4 + react + react-router + mobx + antd + axios + eslint 项目搭建
使用webpack4 + react + react-router + mobx + antd + axios + eslint 从零配置的react全家桶项目，主要实现：react-router 配合 react-loadable 实现按需加载mobx 实现状态管理axios 前后端数据交互eslint 代码规范检测less 书写 style 样式webpack4 split...
2020-04-12 23:58:37
516
原创 Vue 项目首次加载速度优化
vue-cli 版本2.9.6服务器配置：4核8G内存 5M带宽优化手段：CDN 加载静态资源路由按需加载服务端配置nginx 开启gzip 压缩最终结果：生产环境首次加载1s左右完成前段时间接到公司任务。项目首次加载速度特别慢,首次加载要10多秒才能加载完。这个时间对于一个正常用户绝对是无法忍受的。于是开始网上查阅vue 相关速度优化资料。最终经过三天时间的摸索改造，通过使用CD...
2020-03-14 21:41:30
1902
转载 vue之mixin理解与使用
文章写的很好，复制过来分享一下：原文连接常见场景有两个非常相似的组件，他们的基本功能是一样的，但他们之间又存在着足够的差异性，此时的你就像是来到了一个分岔路口：我是把它拆分成两个不同的组件呢？还是保留为一个组件，然后通过props传值来创造差异性从而进行区分呢？两种解决方案都不够完美：如果拆分成两个组件，你就不得不冒着一旦功能变动就要在两个文件中更新代码的风险，这违背了 DRY 原则。反之，...
2020-03-12 21:48:09
146
转载 VUE（nuxt）项目性能监测统计
最近有个需求是监测性能，要求在移动端项目里统计控制台（如下图）最后一行的Finish，DOMContentLoaded和Load三个时间。一、指标解释（1）FinishFinish 时间是页面上所有 http 请求发送到响应完成的时间，HTTP1.0/1.1 协议限定，单个域名的请求并发量是 6 个，即Finish是所有请求（不只是XHR请求，还包括DOC，img，js，css等资源的...
2020-03-12 21:30:42
2024
原创 JSON Web Token 入门教程
阮一峰的 JSON Web Token 入门教程这篇教程讲的很详细，简单明了，这里只放了一个连接入口，不再复制过来了！
2020-03-11 21:27:41
132
转载 WEB前端-搜索引擎工作原理与SEO优化
一、搜索引擎工作原理搜索引擎的工作分为三个节点，即爬行，索引，和检索1、爬行搜索引擎具有网路爬虫或蜘蛛来执行爬网，每次抓取工具访问网页时，它都会复制该网页并将其网址添加到索引中。在 “蜘蛛” 抓取网页内容，提炼关键词的这个过程共，就存在一个问题： “蜘蛛” 能否看懂。如果网站内容是 flash 和 js ，那么她是看不懂的。相应的如果网站内容是其他语言，那么她便能看懂，她的语言即SEO...
2020-03-11 21:15:46
727
转载 git 打标签与版本控制规范
前言本文适用于使用git 或 vcs （版本控制系统）的场景。用过git 的程序猿，都喜欢其分布式架构带来的 commit 快感。不用像使用svn 这种集中式版本管理系统，每次提交代码，都要为代码冲突捏一把冷汗。频繁 commit的背后，带来的结果是一长串密密麻麻的提交记录。一旦项目出现问题，需要检查某个节点的代码问题。就会有点头疼。虽然有 commit message ,但还是有存在查...
2020-03-11 20:30:36
539
原创 js查看浏览器是否支持某一方法 [native code] 如ES6新特性 && 获取内置对象的子类型
1. 查看浏览器的对于API的支持如 Proxy, Promise, Map, Symbol, Reflect等原生方法，在浏览器中的支持情况都可以用这个函数检测 // 判断浏览器是否支持某一方法 function isNative(Ctor) { return typeof Ctor === 'function' && /native code/.test(Cto...
2019-12-22 17:52:33
2448
原创 vue-2.6.10版本源代码断点调试方法
版本： vue-2.6.10, 一定要保证版本一致因为最开始调试源码的时候下载的是这个版本，后来在百度上找到的一些方法，发现那些方法都是一两年前的，根本不管用了，因为版本迭代，vue源码的配置已经变了！1，先在github上找到vue源码连接：https://github.com/vuejs/vue/tree/v2.6.10然后切换到2.6.10版本上再clone2，安装依赖，修改配置...
2019-12-15 16:48:49
1437
1
原创 前端项目解决webpack打包后-webkit-box-orient: vertical ;消失问题
前端写样式的时候经常会用到文字溢出隐藏变省略号的样式。 使用-webkit-box-orient: vertical;样式，但是打包上线后，发现样式丢失方法1： 加上注释命令，让autoprefixer编译的时候关闭对这行代码的转换。 display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; ...
2019-12-06 17:23:16
581
原创 node + koa2 + mysql 完整博客实战项目
前段时间有空自己做了个简单的博客项目，已经开源到github上去，需要的同学可以克隆下来学习github项目地址博客前台地址博客后台地址技术栈服务端 Node + Koa2 框架开发的 Restful API数据库 MySql前端 Vue + vue-router + vuex + iview 开发的前端和后台管理系统项目包含功能koa2服务端管理员权限控制文章文章分类...
2019-08-19 22:42:49
3287
1
转载 koa框架koa-static配置静态目录获取图片
博主写的很好，我就不搬过来了，使用方法很简单。有需要的请参考https://blog.csdn.net/qq_38262910/article/details/89147571
2019-08-15 00:00:49
1546
原创 koa-better-body 使用方法
处理数据使用koa-better-body中间件处理get数据：ctx.request.query处理post数据：ctx.request.fieldsconst Koa = require('koa');const Router = require('koa-router');let server = new Koa()server.listen(3001)server.use(...
2019-08-14 23:39:53
1369
原创 node项目pm2线上部署 ，nginx 配置反向代理和图片上传
官方文档：http://pm2.keymetrics.io/docs/tutorials/pm2-nginx-production-setup直接贴代码upstream my_nodejs_upstream { server 127.0.0.1:3001;}server { listen 80; server_name my_nodejs_server; ...
2019-08-14 23:27:42
861
原创 pm2 线上部署node 上传文件报错 502
node项目在使用pm2启动项目时,开启watch监听会导致文件上传(上传至该项目内部的情况)出现服务器502的问题,或文件上传一直pending中,返回未登录.原因:pm2监听到项目内部文件修改,自动重启项目,导致session刷新,上传失败以及各种各样的问题.解决:如果项目中有使用文件上传功能,且该功能是上传至项目目录本身的情况下,服务器启动时不能开启watch监听,只能使用pm2 st...
2019-08-14 23:17:11
2046
4
原创 koa2 实现跨域
koa2 设置允许跨域需要用到 koa2-cors 插件npm 地址 https://www.npmjs.com/package/koa2-corsserver.js 中这样写const Koa = require('koa');const Router = require('koa-router');const cors = require('koa2-cors');let ...
2019-08-14 23:12:50
1285
原创 MYSQL 怎么 LEFT JOIN 多表联查
三表联查 SELECT a.id, a.title, a.author, a.content, a.cover, a.category_id, a.browse, a.created_at, b.name AS category_name...
2019-08-14 23:03:34
208
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人