- 博客(131)
- 收藏
- 关注

原创 【JavaScript 算法】-- 链表问题整理和解决思路总结
一、链表链表和数组相似,它们都是有序的列表、都是线性结构(有且仅有一个前驱、有且仅有一个后继)。不同点在于,链表中,数据单位的名称叫做“结点”,而结点和结点的分布,在内存中可以是离散的。在链表中,每一个结点的结构都包括了两部分的内容:数据域和指针域。JS 中的链表,是以嵌套的对象的形式来实现的:{ // 数据域 val: 1, // 指针域,指向下一个结点 next: { val:2, next: ... }} 大
2021-05-26 22:54:05
2768
3

原创 【JavaScript 原生实现】-- New
New:创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。以下是源码实现:// 测试:function Foo(name) { this.name = name}const newObj = myNew(Foo, '你好')console.log(newObj) // Foo {name: "你好"}console.log(newObj instanceof Foo) // truefunction myNew(fn,
2020-11-02 21:38:57
460
1

原创 【JavaScript 原生实现】-- Bind
Bind:bind() 方法会创建一个新函数。当这个新函数被调用时,bind() 的第一个参数将作为它运行时的 this,之后的一序列参数将会在传递的实参前传入作为它的参数。(来自于 MDN )接下来例子结合源码来分析://测试var value = 2;var foo = { value: 1};function bar(name, age) { this.habit = 'shopping'; console.log(this.value);
2020-10-29 21:27:13
251

原创 【Vue 源码学习笔记】-- $nextTick
我们都知道Vue在视图更新采用的是异步更新策略,简单来说,Vue 在修改数据后,视图不会立刻更新,而是等同一事件中的所有数据变化完成之后,再统一进行视图更新。官网给出的$nextTick的用法:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。说到更新,那肯定要提到 Watcher,我们来看源码:// 以下是我精简过的代码// 初始化时this.deep = this.user = this.lazy = this.sync = false
2020-10-28 21:53:36
222

原创 【Vue 源码学习笔记】-- Watch
Vue中Watch的源码相比于Compute的源码实现简单了很多,以下是我的学习笔记:一、初始化1、初始Vue时会通过initState方法,在代码中进行opts.watch字段的判断,从而进行initState方法对Watch进行初始化。(和Compute的一样)。// 部分实现function Vue(){ ... 其他处理 initState(this) ...解析模板,生成DOM 插入页面}function initState(vm) { ...
2020-10-16 18:01:48
454

原创 【Vue 源码学习笔记】-- Computed
一直都在网上查阅关于Compute源码分析的文章,但是看起来都挺费劲的。以下是我的一些学习笔记:1、初始Vue时会通过initState方法,在代码中进行opts.computed字段的判断,从而进行initComputed方法对compute进行初始化。function Vue(){ ... 其他处理 initState(this) ...解析模板,生成DOM 插入页面}function initState(vm) { var opts =
2020-10-15 22:19:24
695
1

原创 【Jvascript 算法】-- JavaScript实现对树结构数据的增删以及树型数据与数组的相互转换
在日常开发中我们经常会碰到树结构数据,以下是我的笔记:let arr =[ {id:2,name:'部门B',parentId:0}, {id:3,name:'部门C',parentId:1}, {id:1,name:'部门A',parentId:2}, {id:4,name:'部门D',parentId:1}, {id:5,name:'部门E',pa...
2020-04-28 16:43:47
799
1

原创 【JavaScript 基础】-- 五种方式实现JavaScript对象继承
JavaScript是一门基于对象的语言,不是面向对象的语言。因为它没有自己的类(class)!所以对象继承的实现就尤为重要!!!一、原型链继承核心:将父类的实例作为子类的原型function SuperType() { this.property = true;}SuperType.prototype.getSuperValue = function() { ...
2020-03-19 22:25:24
206

原创 【 前端进阶 】-- 浏览器的缓存机制
一、强缓存对于强缓存,浏览器在第一次请求的时候,会直接下载资源,然后缓存在本地,第二次请求的时候,直接使用缓存。强缓存方案Expires:服务端的响应头,第一次请求的时候,告诉客户端,该资源什么时候会过期。该字段是http1.0时的规范,它的值为一个绝对时间的 GMT 格式的时间字符串,比如 Expires:Mon,18 Oct 2066 23:59:59 GMT。这个时间代表着这...
2020-03-14 21:10:49
245

原创 【JavaScript 基础】-- 多种数组变更与循环方法
一、改变原数组push:向数组尾部添加元素,返回添加后数组的长度。 pop:去除数组最后一个元素,返回被去除的元素。 shift:去除数组第一个元素,返回被去除的元素。 unshift:向数组头部添加元素,返回添加后数组的长度。 reverse:数组倒序,返回顺序完全相反的数组。 sort:数组排序(默认是从小到大),返回排序后的数组。 splice:方法向/从数组中添加/删除项...
2020-03-04 22:31:03
1761

原创 【JavaScript 基础】-- 前端模块化方法(CommonJS和ES6模块方法)
一、CommonJSNode.js是commonJS规范的主要实践者,它有四个重要的环境变量为模块化的实现提供支持:module、exports、require、global。实际使用时,用module.exports定义当前模块对外输出的接口(不推荐直接用exports),用require加载模块。/** 定义模块 math.js **/var basicNum = 0;funct...
2020-02-08 21:02:46
3028
原创 【前端进阶】-- package.json 版本号引入符号种类
一、版本号通常一个包的版本号是这样的 a.b.c :a、b、c 指代数字,且从 0 开始 a 表示固定主版本号,b表示次版本号、c表示修订号二、符号种类一些依赖的版本号中,我们还会看到 ^ 、~ 或者 >= 这样的标识符:没有任何符号:完全百分百匹配,必须使用当前版本号 对比符号类的:>(大于) >=(大于等于) <(小于) <=(小于等于) 波浪符号 ~:固定主版本号和次版本号,修订号可以随意更改,例如~2.0.0,可以使用 2.0.0、2.0....
2022-05-24 21:12:41
818
原创 【JavaScript 手写】-- 函数柯里化
函数柯里化:其实就是将使用多个参数的函数转换成一系列使用一个参数的函数的技术例如:function add(a, b, c) { return a + b + c}add(1, 2, 3)let addCurry = curry(add)addCurry(1)(2)(3)实现:function curry(fn) { let loop = (...arg) => { if (arg.length === fn.length) retur
2022-05-23 20:18:50
454
原创 【Css 基础】-- 块元素和行内元素、行内块元素
1、块元素display:block常见的块元素有哪些:<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中 <div> 标签是最典型的块元素特点:自己独占一行 高度,宽度、外边距以及内边距都可以控制。 宽度默认是容器(父级宽度)的 100% 是一个容器及盒子,里面可以放行内或者块级元素2、行内元素display:inline常见的行内元素有哪些:
2022-05-19 21:14:32
3991
原创 【Vue 基础】-- vue.extend 和 vue.mixin的区别
vue.extendextend 的作用是继承当前的Vue类,传入一个extendOption生成一个新的构造函数。在extend的时候会进行 mergeOption,融合Vue原型上的 baseOption,它是 Vue 的继承。所以extend出来的子类除了写正常的option之外,还可以写HTML,而且能使用v-model、keep-alive等全局性的组件。并进行挂载作用:是生成组件类在挂载全局组件和设置了components属性的时候会使用到。在生成DOM的时候会new 实例化挂载。(
2022-05-14 22:59:12
635
原创 【JavaScript 基础】-- for in 和 for of 区别
日常开发中在对数组或对象进行遍历时,我们经常会使用到两种方法: for in和for of。它们两者都可以用于遍历,不过for in遍历的是数组的索引(index),而for of遍历的是数组元素值(value)for in:注意:for in 既可以遍历对象也可以遍历数组。 遍历数组时,顺序有可能不是按照实际数组的内部顺序 会遍历所有的可枚举属性,包括原型for of:注意:for of 遍历的是数组元素值,不包括原型属性和索引 不能遍历对象,适用遍历数/数组对象/字符串/
2022-05-14 16:08:27
303
原创 【Vue 问题】文件流导出为excel无法打开
问题:文件流导出为excel无法打开原因:文件流在请求中会被改变格式解决方法:axios.create({ baseURL: baseUrl, responseType: "arraybuffer" //关键,不设置导出的文件无法打开 }) .post(url, params, config) .then(res => { resolve(res
2022-04-18 16:20:05
2789
原创 【Vue问题】Input在键盘触发Enter时刷新页面
描述:当form表单中,只有一个input时。按Enter键,会导致表单提交从而会刷新页面解决方案:在input元素上添加阻止默认表单提交事件代码: <el-form ref="form" @submit.native.prevent> <el-form-item label="类型:"> <el-input v-model="type" ...
2022-04-15 15:28:05
1242
原创 【 Vue 问题 】Antd ConfigProvider 国际化在 Vite 打包的项目失效
环境:Vue:2.6.12、Moment:2.29.1、Vite:2.1.5正常情况下这样写就行了:import moment from "moment";import "moment/locale/zh-cn";moment.locale("zh-cn");但是事实上就是不行,出来是这种效果:原因:因为 Vite 不支持 serve umd,必须是 ES modules。而 Moment 它的moment/locale/zh-cn 文件恰好是umd 。所以我们就不能直接用。...
2021-12-23 11:45:47
2160
1
原创 【JavaScript 算法】-- 数组排序实现与思考
备注:这里默认是从小到大排序一、冒泡排序冒泡排序的过程:从第一个元素开始,重复比较相邻的两个项,若第一项比第二项更大,则交换两者的位置;每一轮操作,都会将这一轮中最大的元素放置到数组的末尾。编码实现:/** * @description 冒泡排序 * @param {*} arr * @return {*} */function bubbleSort(arr) { let len = arr.length for (let i = 0; i < len
2021-08-04 21:59:03
154
原创 【JavaScript 基础】-- 不做 if-else 怪
前瞻我们日常开始发时经常遇到复杂逻辑判断的情况,通常大家可以用if/else来实现多个条件判断。但随着逻辑复杂度的增加,代码中的if/else会变得越来越臃肿。那么如何更优雅的写判断逻辑,拒绝做一个if else 怪呢?以下是我的一些优化思想举例有个需求是这样的:马上中秋节要来了,我们本次商场要做大促销活动。对每个商品,我通过在给它设置不同的价格类型,让它展示不同的价格。产品订的逻辑是这样:当价格类型为“预售价”时,满 100 - 20,不满 100 打 9 折 当价格类型为“大促价”时,
2021-06-27 22:21:42
461
4
原创 【JavaScript 基础】-- 灵活的应用JavaScript技巧
1、三元运算符使用三元操作符来代替 if...else优化前:const x = 20;let answer;if (x > 10) { answer = 'big';} else { answer = 'small';}优化后:const answer = x > 10 ? 'big' : 'small';2、短路求值当给一个变量分配另一个值时,想确定源始值不是null,undefined或空值。可以写撰写一个多重条件的if语句优化前
2021-06-23 21:40:30
247
1
原创 【JavaScript 算法】-- 神奇的二叉树
1、二叉树定义二叉树是指满足以下要求的树:它可以没有根结点,作为一棵空树存在 如果它不是空树,那么必须由根结点、左子树和右子树组成,且左右子树都是二叉树。2、二叉树编码实现在 JS 中,二叉树使用对象来定义。它的结构分为三块:数据域,左指针、右指针// 二叉树结点构造函数function TreeNode(val) { this.val = val; this.left = this.right = null;}3、二叉树遍历按照顺序规则的不同,遍历方式
2021-05-10 21:15:19
389
原创 【JavaScript 基础】-- 多种创建数组的方式
在 JavaScript 数据结构中,数组几乎是“基石”一般的存在。所以要好好学呀!1、传统方式平时用的最多的创建方式想必就是直接方括号+元素内容这种形式:const arr = [1, 2, 3, 4] 2、构造函数方式其实很多时候我们初始化一个数组时,并不知道它内部元素的情况。这种场景下,推荐使用构造函数创建数组的方法:const arr = new Array() // 等价于 const arr = []不过使用构造函数,不仅仅能创建空数组。它还能实现“指定长度的
2021-05-07 22:17:58
552
4
原创 白屏和首屏加载时间计算
一个网站加载性能如何主要看白屏时间和首屏时间。俩个计算都是使用 new Date() - performance.timing.navigationStart白屏时间:指从输入网址,到页面开始显示内容的时间。计算方式:将以下脚本放在</head>前面就能获取白屏时间 首屏时间:指从输入网址,到页面完全渲染的时间。计算方式:在 window.onload 事件里执行上述方法...
2021-03-11 20:39:42
1066
原创 什么是一级域名和二级域名
顶级域名:就是我们常说的一级域名。一个完整的域名由两个或者两个以上部分组成,各部分之间用英文的句号 "."来隔开就以百度为例:www.baidu.com一级域名为baidu.com(一级域名由主题与后缀构成)二级域名为:www.baidu.com,www代表的是主机Tips:域名中包含两个"."的就是二级域名,域名中只有一个"."的就是一级域名。...
2021-03-09 14:55:34
38411
原创 HTTP与HTTPS记录
HTTP/1 可靠传输,HTTP 基于 TCP/IP。 无状态,这里的状态是指通信过程的上下文信息,而每次 http 请求都是独立、无关的,默认不需要保留状态信息。这可以说是它的优点又是缺点。因为不需要保存连接上下文信息,无状态反而减少了网络开销,从这点看是优点。但是在需要长连接的场景中,需要保存大量的上下文信息,以免传输大量重复的信息,那么这时候无状态就是 http 的缺点。 明文传输,即协议里的报文(主要指的是头部)不使用二进制数据,而是文本形式。 队头阻塞问题,当
2021-03-08 21:38:57
292
原创 【JavaScript 基础】-- JS 加载引入方式(defer、async、prefetch、preload)
JavaScript是个单线程语言,渲染引擎和JS引擎不是同时进行的。所以提前引入js文件可能会造成堵塞,从而影响页面加载,出现闪屏等情况。于是为了解决这种情况,就出现了js在body最后引入、script标签中defer和async异步加载JS的方式。defer:如果script标签设置了该属性,则浏览器会异步的下载该文件并且不会影响到后续DOM的渲染。如果有多个设置了defer的script标签存在,则会按照顺序执行所有的script。defer脚本会在文档渲染完毕后,DOMContentLoade
2021-03-08 14:02:35
3903
1
原创 简单实现Jsonp封装
原理:script标签不受同源政策限制,动态创建script标签,定义Callback函数,实现Get请求const jsonp = ({ url, params, callbackName }) => { const generateURL = () => { let dataStr = ''; for(let key in params) { dataStr += `${key}=${params[key]}&`; } dataS
2021-02-28 19:36:04
184
原创 opacity: 0、 visibility: hidden、display: none 对比记录
简单记录:display:none:会让元素完全从渲染树中消失,渲染的时候不占据任何空间, 不能点击。更改时会触发回流,性能消耗大不可继承,影响子元素visibility: hidden:不会让元素从渲染树消失,渲染元素继续占据空间,只是内容不可见,不能点击 更改时会触发重绘,性能消耗小可继承,不影响子元素opacity: 0:不会让元素从渲染树消失,渲染元素继续占据空间,只是内容不可见,可以点击更改时会触发重绘,性能消耗小不可继承,影响子元素...
2020-11-17 22:07:09
190
原创 Vue-cli4.0 搭建项目配置Eslint
Vue-cli4.0 搭建项目时配置Eslint当搭建项目选择完eslint之后,有个配置会问你更新换将单独配置的文件放到pakage.json还是放在单独的文件,如果是这样选择(单独生成一个文件):最后会生成个.eslintrc.js的文件如下(推荐选择这个):module.exports = { root: true, env: { node: true }, extends: [ 'plugin:vue/essential', // 这一步
2020-11-09 21:50:01
715
2
原创 获取某一天的开始和结束时间
获取某一天的开始和结束时间// 假设dayTime为某一天的数据 // 开始时间let startDate = new Date(dayTime).setHours(0, 0, 0, 0);// 结束时间let endDate = new Date(dayTime).setHours(23,59,59,999);
2020-11-04 15:03:53
1220
原创 原生JavaScript实现 instanceof
原理很简单,就是沿着原型链往上查找function myInstanceof(target, obj){ if(typeof target !== "object" || target === null) return false; // 往上找target的原型 let proto = target.__proto__ // let proto = Object.getPrototypeOf(target); while(true){ //查找到尽头,还没找到
2020-10-25 16:11:20
231
原创 CSS实现滚动条样式
默认情况下这样:改完之后是这样:CSS如下: .left_tree { max-height: calc(100vh - 150px); overflow-y: scroll; /*定义滚动条高宽及背景*/ &::-webkit-scrollbar { width: 4px; } /*定义滚动条*/ &::-webkit-scrollbar-thumb { border-radius: 10px;
2020-10-24 20:11:35
531
原创 Css 问题记录
1、lii与li之间存在空白间隔原因:行框的排列会受到中间空白(回车空格)等的影响,因为空格也属于字符,这些空白也会被应用样式,占据空间,所以会有间隔。解决方法: 可以将<li>代码全部写在一排 浮动li中float:left 在ul中用font-size:0;可以使用letter-space:-3px ...
2020-10-20 11:23:44
179
原创 移动端开发时兼容问题记录
一、IOS移动端click事件300ms的延迟响应原因:移动端双击缩放、双击滚动等移动端浏览器默认的行为设置,使得用户再执行这些操作时,会先判断用户是否触发默认行为的判断,导致移动端点击事件存在300ms的等待。解决方法:1、禁用缩放,用户无法缩放<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />2、fas
2020-10-14 21:02:56
134
原创 Vscode 拉取远程新建的分支
我们开始时可能会碰到,其它人员新建了分支并提交到了git上。而你本地没有,这时候就需要你自己从远程拉取新建的分支。方法如下:// 直接在命令行输入git fetch origin newBranch
2020-09-02 17:28:45
12492
原创 Vue CLI 3 分析Build包
每当我们使用 webpack 打包项目代码的时候,你可能需要关注一下打包生成的每个 js 文件的大小以及其包含的内容,这对于优化项目打包速度和提升页面加载性能都有十分大的帮助。这里我们推荐使用webpack-bundle-analyzer这一款 webpack 插件来进行包文件的分析,下面我们就来介绍下其配置和使用方法。/* vue.config.js */const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').Bund..
2020-08-13 20:54:48
1080
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人