- 博客(77)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 vue2与vue3实现响应式数据的原理对比
vue2实现原理：对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。Object.defineProperty(data, 'count', { get () {}, set () {}})存在问题：新增属性、删除属性, 界面不会更新。直接通过下标修改数组, 界面不会自动更新。vue3实现原理:通过Proxy
2021-08-29 14:24:32
226
原创 JS函数柯里化（Currying）
简介柯里化(Currying)是把接收多个参数的原函数变换成接受一个单一参数（就是将使用多个参数的函数转换成一系列使用一个参数的函数的技术)并返回一个新的函数，新的函数能够接受余下的参数，并返回和原函数相同的结果。function currying(fn,...rest1){ return function(...rest2) { return fn.apply(null,rest1.concat(rest2)) } }例子function sayHello(name,ag
2021-08-01 20:09:12
309
原创 js数组去重
数组去重–ES5实现function unique(arr) { const res = arr.filter((item, index, array) => { return array.indexOf(item) === index })}数组去重–ES6实现function unique(arr) { const newArr = [...new Set(arr)] return newArr }
2021-07-25 20:03:50
145
原创 JS数据类型判断
typeof 可以正确识别：Undefined、Boolean、Number、String、Symbol、Function 等类型的数据，但是对于其他的都会认为是 object，比如 Null、Date 等，所以通过 typeof 来判断数据类型会不准确。但是可以使用 Object.prototype.toString 实现。//方式１function typeof(arg){//"[object xxx]" const strRes = Object.prototype.toString.ca
2021-07-18 20:05:12
118
原创 javascript继承方式总结
javascript继承方式总结原型继承function supType() { this.colors = ["red", "green", "blue"]}supType.prototype.getColors = function () { return this.colors}function subType() {}subType.prototype = new supType()const instance1 = new subType()instance1.c
2021-07-11 20:12:20
75
原创 webpack生产环境配置
webpack生产环境配置const { resolve } = require('path');const MiniCssExtractPlugin = require('mini-css-extract-plugin');const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');const HtmlWebpackPlugin = require('html-webpack-plugin
2021-07-04 20:44:43
107
原创 this基础总结
1.简介this在面向对象中指的当前对象对的一个引用。但在js中this不是固定不变的，会根据执行环境的改变而变化。在绝大多数情况下，函数的调用方式决定了this的值（运行时绑定）。在函数中this表示全局对象window,指向window；在单独使用时表示全局对象；在方法调用中，this指向调用该方法的对象（如果存在多级调用指向方法的上一级对象）在函数的严格模式下（use strict）this为undefined；在事件中，this指向接受事件的元素；call()、apply()、bind
2021-06-27 20:01:40
100
原创 webpack开发环境的使用
webpack依赖关系图webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。 在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。在磁盘中新建目录webpack及其子目录：css、js…,并初始化npm(用于安装各种包、插件)index.jsindex.htmlindex.less新建webpack.config
2021-06-13 17:58:39
119
原创 浏览器缓存---强缓存与协商缓存
概述当我们第一次访问网站的时候，比如 juejin.cn，电脑会把网站上的图片和数据下载到电脑上，当我们再次访问该网站的时候，网站就会从电脑中直接加载出来，这就是缓存。缓存的好处提升性能，打开本地资源肯定会比请求服务器来的快。缓解服务器压力，不用每次都去请求某些数据了减少带宽消耗，当我们使用缓存时，只会产生很小的网络消耗，至于为什么打开本地资源也会产生网络消耗缓存类型数据库缓存CDN缓存代理服务器缓存浏览器缓存 所谓浏览器缓存其实就是指在本地使用的计算机中开辟一个内存区，同时也
2021-06-06 18:14:46
453
原创 JS常用的循环遍历
数组遍历for、forEach、for …ofconst list = [1, 2, 3, 4, 5, 6, 7, 8,, 10, 11];for (let i = 0, len = list.length; i < len; i++) { if (list[i] === 5) { break; // 1 2 3 4 // continue; // 1 2 3 4 6 7 8 undefined 10 11 } console.log(list[i]);}fo
2021-05-30 21:27:02
2014
原创 5种实现CSS底部固定的方法
方法一：全局增加一个负值下边距等于底部高度有一个全局的元素包含除了底部之外的所有内容。它有一个负值下边距等于底部的高度html代码：<body> <div class="wrapper"> content <div class="push"></div> </div> <footer class="footer"></footer></body>CSS代码：h.
2021-05-23 21:14:00
8362
原创 JavaScript 中如何实现大文件并行下载
在上传大文件时，为了提高上传的效率，我们一般会使用 Blob.slice 方法对大文件按照指定的大小进行切割，然后在开启多线程进行分块上传，等所有分块都成功上传后，再通知服务端进行分块合并。那么对大文件下载来说，我们能否采用类似的思想呢？在服务端支持 Range 请求首部的条件下，我们也是可以实现多线程分块下载的功能，具体如下图所示：## HTTP 范围请求HTTP 协议范围请求允许服务器只发送 HTTP 消息的一部分到客户端。范围请求在传送大的媒体文件，或者与文件下载的断点续传功能搭配使用时非常有用
2021-04-25 19:58:57
1178
原创 渲染页面：浏览器的工作原理
大部分情况下，浏览器是单线程执行的。为了有流畅的交互 ，开发者的目标是确保网站从流畅的页面滚动到点击响应的交互性能。渲染时间是关键要素，确保主线程可以完成所有给它的任务并且仍然一直可以处理用户的交互。通过了解浏览器单线程的本质与最小化主线程的责任可以优化Web性能，来确保渲染的流畅和交互响应的及时。
2021-04-17 15:05:36
200
1
原创 树相关算法总结
1二叉树的中序遍历中序遍历：先打印当前节点的左子树，再打印当前节点，最后打印当前节点的右子树**const inorderTraversal = function(root) { const result = []; function pushRoot(root) { if (root !== null) { if (root.left !== null) { pushRoot(root.left);
2021-03-28 21:23:18
432
1
原创 安全之同源策略、CSRF 和 CORS
同源策略 SOP同源策略（Same-origin policy，简称 SOP）跨站请求伪造（Cross-site request forgery，简称 CSRF）跨域资源共享（Cross-Origin Resource Sharing，简称 CORS）先解释何为同源：协议、域名、端口都一样，就是同源。你之所以会遇到 跨域问题，正是因为 SOP 的各种限制。但是具体来说限制了什么呢？如果你说 SOP 就是“限制非同源资源的获取”，这不对，最简单的例子是引用图片、css、js 文件等资源的时候就允
2021-03-21 20:35:04
391
原创 前端常见内存泄漏及解决方案总结
##引起内存泄漏的原因意外的全局变量由于 js 对未声明变量的处理方式是在全局对象上创建该变量的引用。如果在浏览器中，全局对象就是 window 对象。变量在窗口关闭或重新刷新页面之前都不会被释放，如果未声明的变量缓存大量的数据，就会导致内存泄露。未声明变量function fn() { a = 'global variable'}fn()使用 this 创建的变量(this 的指向是 window)。function fn() { this.a = 'global variabl
2021-01-31 15:55:55
1379
原创 HTTP2
http1.1 存在的问题容易触发浏览器 tcp 连接数限制对于同一个域名，浏览器最多只能同时创建 6~8 个 TCP 连接 (不同浏览器不一样)。因为一个tcp连接一次承载一个请求，也就是说一个时刻最多只能发起6~8个请求，这就是上文说到的只能同时发起 6 个视频请求的问题。为了解决这个限制，行业内惯用域名分区的方案，即将资源分散到不同域名下 (比如二级子域名)，这样就可以针对不同域名创建连接并请求。但多域名随之而来的是更多的 dns 查询耗时，以及更多 tcp 连接开销。“队头阻塞”问题
2021-01-24 16:22:34
862
原创 js中const、let、var的区别
说明ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。let 声明的变量只在 let 命令所在的代码块内有效。const 声明一个只读的常量，一旦声明，常量的值就不能改变。var声明的变量是全局的，在全局范围内有效，存在代码提升问题1、let基本用法let 是在代码块内有效，var 是在全局范围内有效:{ let a = 0; var b = 1;}a // ReferenceError: a is not defined
2021-01-09 15:18:49
140
原创 JS-Generator 函数
概念Generator 函数是 ES6 提供的一种异步编程解决方案。它既是一个生成器，也是一个状态机，内部拥有值及相关的状态，生成器返回一个迭代器 Iterator 对象，我们可以通过这个迭代器，手动地遍历相关的值、状态，保证正确的执行顺序。特征function 关键字与函数名之间有一个星号（ES6 没有规定，function 关键字与函数名之间的星号，写在哪个位置）函数体内部使用 yield 表达式，定义不同的内部状态调用 Generator 函数后，该函数并不执行，返回的也不是函数运行结果，而
2021-01-03 16:40:05
130
原创 webpack开发环境的基本配置
webpack开发环境的基本配置1. 创建配置文件创建文件webpack.config.js配置内容如下const{resolve}=require(‘path’);//node内置核心模块，用来处理路径问题。module.exports={entry:’./src/js/index.js’,//入口文件output:{//输出配置filename:’./built.js’,//输出文件名path:resolve(__dirname,‘build/js’)//输出文件路径配置},mode:‘
2020-12-26 19:44:12
75
原创 WEBPACK工程构建
WEBPACK工程构建1.1webpack简介webpack是一种前端资源构建工具，一个静态模块打包器(modulebundler)。在webpack看来,前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。1.2webpack的核心概念1.2.1 Entry**入口(Entry)指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图1.2.2 Outpt输出(Output)
2020-12-18 20:08:05
170
1
原创 几个面试题总结
1.session和cookie的区别 （1）cookie存放在客户端的浏览器上，session则存放在服务器中 （2）Cookie是不安全的，别人可以通过分析本地的cookie进行cookie欺骗，考虑安全性的话应使用session （3）Session保存在服务器上的时间是有限制的，当服务器的session较多时，会给服务器造成很大压力，考虑减轻服务器压力可以使用cookie （4）C...
2018-08-26 16:36:29
254
原创 单例模式之饿汉式、懒汉式、双重校验
1.饿汉式ublic class singleton { //饿汉式 private static singleton instance=new singleton(); private singleton(){} public static singleton getInstance(){ return instance; }}...
2018-08-23 12:48:53
908
2
原创 判断一棵二叉树是否为完全二叉树
判断一棵二叉树是否为完全二叉树–采用广度优先遍历–利用队列 * 1。定义标志位flag=false表示没有遇到空的节点，count=0 * 2.只要树中节点的左右子树都不为空，那么就把该节点的所有左右孩子压入队列（包括null节点） * 压入队列3种情况： * （1）节点都有左右子节点—都压入 * （2）节点有一个左子节点右子节点为空或者节点有一个...
2018-08-21 17:31:44
1727
原创 数据库事务及隔离级别
1数据库四大特性： 数据库具有事务安全性，同时也具有ACID四大特性：原子性、一致性、隔离性、持久性 ⑴ 原子性（Atomicity） 原子性是指事务包含的所有操作要么全部成功，要么全部失败回滚，这和前面两篇博客介绍事务的功能是一样的概念，因此事务的操作如果成功就必须要完全应用到数据库，如果操作失败则不能对数据库有任何影响。 ⑵ 一致性（Consistency） 一致性是指事务必...
2018-08-16 20:58:11
177
原创 数据库事务及隔离级别
1数据库四大特性： 数据库具有事务安全性，同时也具有ACID四大特性：原子性、一致性、隔离性、持久性 ⑴ 原子性（Atomicity） 原子性是指事务包含的所有操作要么全部成功，要么全部失败回滚，这和前面两篇博客介绍事务的功能是一样的概念，因此事务的操作如果成功就必须要完全应用到数据库，如果操作失败则不能对数据库有任何影响。 ⑵ 一致性（Consistency） 一致性是指事务必...
2018-08-16 20:58:06
178
原创 几个排序算法总结（高频）
（1）冒泡排序 最简单的冒泡排（有缺陷）： //初始冒泡排序–有缺陷 public static void BubbleSort(int []arr){ for(int i=0;i
2018-08-16 11:35:17
225
原创 剑指Offer几个高频词总结
面试题2：单例模式： package recover; //单例模式–饿汉式 //1.构造器私有 2.在成员位置上创建一个对象(静态私有)3.提供一个静态的方法 public class Singleton { private Singleton(){} private static Singleton singleton=new Singleton(); p...
2018-08-16 11:33:39
282
原创 http与https的区别？
http是长文本传输协议，采用的是明文的传输形式，对传输数据不加密，主要应用于web浏览器与网站服务器之间的信息传输，安全性没有保障，所以不适合支付、密码等信息的传输。https是就ssl协议的安全套接字超文本传输协议，有网景公司开发，在http协议的基础上加入了SSL协议，对客户端与服务器之间的数据传输进行加密，主要作用是：传输加密和身份认证。 区别： （1）http是明文传输，安全性低，h...
2018-08-09 15:10:56
178
原创 设计模式--模板模式
模板模式：模板模式指的是定义一个算法骨架，将算法的实现延迟到子类中实现。 通俗理解：就是把一个业务流程中不变的功能写固定，只把变化不确定的那部分功能在骨架方法中抽象，并在继承我们的骨架，并实现在骨架类中的抽象方法。例如去银行办理业务，要经过3个流程：取号—–>办卡/存钱/取钱—–>对银行柜员进行评价，对于取号和评价来说在流程中时固定的，其中从取号到评价这个过程就是我们的骨架方法，办卡...
2018-08-09 15:10:28
105
原创 抽象类、接口及其区别？
（1）抽象类： 1）含有抽象方法的类一定是抽象类，抽象类和抽象方法用abstract修饰 2）抽象类中既可以有抽象方法也可以有非抽象方法 3）子类中实现抽象类的抽象方法时抽象方法必须全部实现 4）抽象类中的成员函数修饰符可以是private、protect、public 5）抽象类中可以包含构造方法，子类实现抽象类的构造方法时必须用super（）来实现 6）抽象类不能实例化，但可以在抽...
2018-08-09 15:09:45
155
原创 线程池有这一篇就够了
1.线程池ThreadPoolExecutor 线程池主要就是Executor接口，这个接口提供一些对于线程的操作的配置和方法，能对线程的性能带来较大提升。 线程池得好处： （1）降低了线程的创建和销毁的时间消耗，能够提升线程对系统资源的利用率，同时线程执行完后并不是直接销毁，而是回到线程池等待执行其他任务，这样提高了线程的复用率。 （2）对线程时可控的。相比于传统的多线程每个任务分配一个...
2018-08-06 20:22:52
368
转载 JVM调优
1. 年轻代大小选择 （1） 响应时间优先的应用：尽可能设大，直到接近系统的最低响应时间限制（根据实际情况选择）。在此种情况下，年轻代收集发生的频率也是最小的。同时，减少到达年老代的对象。 （2）吞吐量优先的应用：尽可能的设置大，可能到达Gbit的程度。因为对响应时间没有要求，垃圾收集可以并行进行，一般适合8CPU以上的应用。 2.年老代大小选择 ...
2018-06-16 10:38:17
135
原创 简单排序之插入排序
一、算法原理插入排序法：所谓插入排序法乃是将一个数目插入该占据的位置。假设我们输入的是 “53，27，36，15，69, 42” 我们从第二个数字开始，这个数字是27，我们的任务只要看看27有没有正确的位置，我们的做法是和这个数字左边的数字来比，因此我们比较27和53，27比53小，所以我们就交换27和53，原来的排列就变成了“27, 53, 36, 15, 69, 42 ”接下来，...
2018-06-14 15:29:18
471
原创 基于最大堆的堆排序算法
堆排序 堆排序是利用堆这种数据结构而设计的一种排序算法，堆排序是一种选择排序，它的最坏，最好，平均时间复杂度均为O(nlogn)，它也是不稳定排序。首先简单了解下堆结构。堆 堆是具有以下性质的完全二叉树：每个结点的值都大于或等于其左右孩子结点的值，称为大顶堆；或者每个结点的值都小于或等于其左右孩子结点的值，称为小顶堆。 同时，我们对堆中的结点按层进行编号，将这种逻辑结构映射到数组...
2018-06-14 11:20:49
1877
5
原创 斐波那契数列--递归与非递归实现
初识斐波那契数列： 斐波那契数列（Fibonacci sequence），又称黄金分割数列、因数学家列昂纳多·斐波那契（Leonardoda Fibonacci）以兔子繁殖为例子而引入，故又称为“兔子数列”，指的是这样一个数列：0，1、1、2、3、5、8、13、21、34、……在数学上，斐波纳契数列以如下被以递归的方法定义：F(1)=1，F(2)=1, F(n)=F(n-1)+F(n-2)（n&...
2018-06-03 11:17:26
15966
1
原创 几种经典的排序算法
1.冒泡排序 时间复杂度：O(n²) 冒泡排序算法的运作如下：（从后往前） 1)比较相邻的元素。如果第一个比第二个大，就交换他们两个。 2)对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对。在这一点，最后的元素应该会是最大的数。 3)针对所有的元素重复以上的步骤，除了最后一个。 4)持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需...
2018-05-31 15:37:57
20628
1
原创 递归应用之快速排序
递归应用1斐波那契数列斐波那契数列满足：1，1，2，3，5，8，13…… 从第三个位置起每个元素的值是前面元素的和代码实现：public class FeiBo{ public static void main(){ int num1=1; int num2=1; int n=6; int numn=0; ...
2018-05-30 21:49:52
187
在VMware-WorkStation上安装Centos6.x教程
2018-06-30
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人