- 博客(53)
- 收藏
- 关注
RSS订阅原创 vscode配置eslint解决终端语法报错
1.问题出现场景在github拉取代码，或者自己用脚手架vue cli搭建项目，终端出现不符合eslint的语法错误，非常难受2.解决办法第一安装eslint第二配置setting文件->首选项->设置->搜索eslint填写以下配置代码// vscode默认启用了根据文件类型自动设置tabsize的选项"editor.detectIndentation": false,// 重新设定tabsize"editor.tabSize": 2,// #每次保存
2021-08-26 11:04:00
2498
转载 vue中watch的handler，deep，immediate用法详解
vue中watch的handler，deep，immediate用法详解https://blog.csdn.net/qq_42975998/article/details/104565720
2021-08-18 17:08:27
348
转载 require.context实现自动化导入路由模块
在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块require.context函数接受三个参数directory {String} -读取文件的路径useSubdirectories {Boolean} -是否遍历文件的子目录regExp {RegExp} -匹配文件的正则参考文章：https://juejin.cn/post/6844904121057689608...
2021-08-13 18:01:29
245
原创 怎么搭建个人网站
一、买域名网站参考：阿里云二、买服务器按照管局规则，大陆地域的服务器要备案，域名要实名制。办理时间一般在30个工作日之内可以下来，快一点的10多天就能下来备案号。买一个国外服务器不用备案，去网站：恒创科技，买一个香港云主机三、绑定域名和服务器在恒创科技找到服务器对应的IP，回到阿里云按照指引操作，让域名指向这个IP，让服务器解析绑定域名四、网页的上传我们使用一个简单的开源的FTP软件进行上传：8uftp左边的是本地目录，右边的是远程服务器的目录。进入远程的目录的public_
2021-07-08 15:43:53
207
原创 js事件坐标大乱斗：screenX、clientX、pageX、offsetX
screenX: 鼠标相对于电脑屏幕的X坐标screenY: 鼠标相对于电脑屏幕的Y坐标clientX/clientY: 鼠标的坐标到可视区域的坐标，比如在谷歌浏览器中，指工具栏之下的区域。注意跟页面滚动无关，因为浏览器本身不滚动pageX/pageY: 鼠标相对于整个网页主题左上角的坐标。会受到滚动影响。当无滚动时，跟client是一样的值offsetX/offsetY： 事件发生时鼠标相对于事件源元素的坐标，获取数据类似pageX/Y，但是受到子元素影响。意思就是pageX/Y总是相对于网
2021-07-06 18:59:13
1149
转载 CSS样式表继承
css的三大特性分别是继承性，层叠性，和优先级。说一下css中width的继承性及其特殊情况:继承性概念详解：css的继承性指的被包在内部的标签拥有外部标签的样式性，子元素可以继承父元素的属性。但也不是所有的css属性都有继承性的常见的拥有继承性的属性文本相关属性以 text- 、 font- 、line-开头的属性和color。列表相关属性以 list-开头的属性text-align, text-indentfont-family，font-size， font-style，font
2021-06-17 16:53:09
609
转载 关于Promise的详细用法
Promise是什么？ Promise是JS异步编程中的重要概念，异步抽象处理对象，是目前比较流行Javascript异步编程解决方案之一。这句话说的很明白了，Promise是一种用于解决异步问题的思路、方案或者对象方式。在js中，经常使用异步的地方是Ajax交互。比如在es5时代，jQuery的ajax的使用success来完成异步的： https://www.cnblogs.com/lunlunshiwo/p/8852984.html...
2021-06-15 16:18:27
48
转载 详细讲解页面优化之重绘(repaint)和回流(reflow)
重绘和回流是什么我们都知道，一个页面从加载到完成，首先是构建DOM树，然后根据DOM节点的几何属性形成render树(渲染树)，当渲染树构建完成，页面就根据DOM树开始布局了，渲染树也根据设置的样式对应的渲染这些节点。在这个过程中，回流与DOM树，渲染树有关，重绘与渲染树有关，怎么去理解呢？比如我们增删DOM节点，修改一个元素的宽高，页面布局发生变化，DOM树结构发生变化，那么肯定要重新构建DOM树，而DOM树与渲染树是紧密相连的，DOM树构建完，渲染树也会随之对页面进行再次渲染，这个过程就叫回流。
2021-06-08 19:17:02
127
原创 display:inline-block 显示间隙
在CSS布局中，如果我们想要将一些元素在同一行显示，其中的一种方法就是把要同行显示的元素设置display属性为inline-block。但是你会发现这些同行显示的inline-block元素之间经常会出现一定的空隙，这就是“换行符/空格间隙问题”。空隙产生的原因元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，HTML代码中的回车换行被转成一个空白符,空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行
2021-06-08 18:14:35
323
原创 TortoiseGit配置ppk的密钥
git和 TortoiseGit 原理都是先生成公钥和秘钥，公钥放在git账户中的SSH public key中。秘钥放本地服务器上。git生成keygit ssh-keygen -C "邮箱地址" -t rsa秘钥存储目录：C:\Users\用户\.ssh公钥名称：id_rsa.pub私钥名称：id_rsa然后把公钥放在github的设置==>SSH and GPG keys中TortoiseGitTortoiseGit 使用扩展名为ppk的密钥，而不是ssh-keygen生成的r
2021-05-17 18:01:26
335
原创 Syntax Error: TypeError: this.getOptions is not a function
启动项目的时候却发现报错，如下：Syntax Error: TypeError: this.getOptions is not a function提示语法错误都是 版本问题目前安装的最新版本是 less-loader 8.0.0，sass-loader 11.0.0问题分析 由于目前 @vue/[email protected] 所用的是 webpack4，发现 sass-loader的11.0.0和less-loader的8.0.0 版本需要 webpack5 ，所以需要将sass-loader的版本降到.
2021-04-16 10:29:41
1137
原创 Cannot find module ‘webpack-cli/bin/config-yargs‘ webpack打包报错
问题一项目打包时，执行命令npm run dev 发现报错： Error: Cannot find module 'webpack-cli/bin/config-yargs’解决过程：查看github的Issues：https://github.com/webpack/webpack-cli/issues/1948I want to say, that webpack-cli removed yargs package from version4.0.0 but existed in version
2021-04-12 16:46:29
308
1
原创 js面试题之this、作用域
一、 var length =88; function test(){ console.log(this.length); } var obj={ length:99, action:function(test){ test();//无调用者 this即window，即会拿到外面的88 arguments[0]();//this指向arguments } } obj.action(tes
2021-03-25 17:25:15
159
原创 一张图搞定——js数组和字符串方法
数组1 . join();不变1.1 将数组整理成字符串（跟字符串方法split（）相对应）var arr = [1,2,3];1、不填，数组元素用逗号（,）分隔console.log(arr.join()); // 1,2,32、console.log(arr.join("-")); // 1-2-33、是空字符串("")，则所有元素之间都没有任何字符。console.log(arr.join("")); // 1234、原数组不..
2021-03-25 17:08:53
219
原创 如何让在国内访问github网站的速度变快
优化思路：通过绕过DNS解析，直接在本地绑定host，接下来跟大家详细介绍：在浏览器中打开DNS查询网站http://tool.chinaz.com/dns，我们输入github.com，如下图所示：查询三个地址的ip值，TTL值越小越好github.comassets-cdn.github.comgithub.global.ssl.fastly.net3. 打开本地电脑的C:\Windows\System32\drivers\etc目录，找到hosts文件，文件的末尾添加三行信息，
2021-03-18 14:31:07
1453
1
原创 git从本地提交到远程仓库流程
how to learn git fastly简易的命令行入门教程:Git 全局设置:git config --global user.name dawsongit config --global [email protected]查看git配置信息：git config --list创建本地git仓库:mkdir git-demo-studycd git-demo-studygit init写内容：learn README.mdgit commit -m "first comm
2021-03-12 19:01:10
129
原创 Error: couldn‘t connect to server 127.0.0.1:27017运行mongo报错解决方法
问题最近打开一个node.js项目出错，输入mongo 后报错： Error: couldn’t connect to server 127.0.0.1:27017, connection attempt failed: SocketException 过程网上查的东西太过于复杂。以下看看就好，跳过说法一：一般产生原因是mongodb由于不正常关闭产生了一个mongo.lock文件，只要找到并删除这个lock文件，执行repair命令并重新启动服务器mongodb就好了。说法二：执行命令mongo
2021-03-09 11:35:02
4347
1
原创 ajax基础
AJAX基础传统网站存在的问题网速慢的情况下，页面加载时间长，用户只能等待表单提交后，如果一项内容不合格，需要重新填写所有表单内容页面跳转，重新加载页面，造成资源浪费，增加用户等待时间AJAX概述往常是页面手动刷新了，数据才会更新。而ajax是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验Ajax 的运行环境Ajax 技术需要运行在网站环境中才能生效，当前课程会使用Node创建的服务器作为网站服务器。Ajax 运行原理及实现传统是浏览器与服务器直接响应
2021-03-05 18:30:36
154
原创 博客搭建案例详细思路:express+node.js
5.项目：博客搭建5.1项目环境搭建5.1.1项目介绍1.博客内容展示2.博客管理功能5.1.2案例初始化建立项目所需文件夹public 静态资源model 数据库操作route 路由views 模板初始化项目描述文件：npm init -y下载所需第三方模块:npm install express mongoose art-template express-art-template创建网站服务器const express = require('express')
2021-02-04 18:02:04
695
转载 Range、Selection、TextRange对象的区别与关系
Range、Selection、TextRange对象的区别与关系 什么是Range 所谓Range，是指HTML文档中任意一段内容。一个Range的起始点和结束点位置任意，甚至起始点和结束点可以是一样的（也就是空Range）。最常见的Range是用户文本选择范围(user text selection)。当用户选择了页面上的某一段文字后，你就可以把这个选择转为Range。当然，你也可以直接用程序定义Range。每一个浏览器窗口及每一个窗口中都有一个selection对象，
2021-01-21 14:32:12
840
1
原创 node前后端交互（Express）
1. Express框架是什么1.1 Express是一个基于Node平台的web应用开发框架，它提供了一系列的强大特性，帮助你创建各种Web应用。我们可以使用 npm install express 命令进行下载。1.2 Express初体验// 引入express框架const express = require('express');// 创建网站服务器const app = express();app.get('/' , (req, res) => { // send() /
2021-01-15 14:00:18
422
原创 node前后端交互（MongoDB）
1. 数据库相关概念在一个数据库软件中可以包含多个数据仓库，在每个数据仓库中可以包含多个数据集合，每个数据集合中可以包含多条文档（具体的数据）。术语解释说明database数据库，可以创建多个collection集合，一组数据的集合document文档，一条具体的数据field字段，文档里的属性名称1.1 Mongoose第三方包使用Node.js操作MongoDB数据库需要依赖Node.js第三方包mongoose,使用npm install m
2020-12-23 14:24:04
191
原创 node前后端交互（响应原理及HTTP 协议）
1.Node.js模块化开发1.1 Node.js中模块化开发规范Node.js规定一个JavaScript文件就是一个模块，模块内部定义的变量和函数默认情况下在外部无法得到模块内部可以使用exports对象进行成员导出，使用require方法导入其他模块//01.module-a.jsconst add =(n1,n2)=>n1+n2;//向模块外部导出数据 exports.add =add;//第一个add为exports的属性(名称),第二个add为上面的变量//01.m
2020-12-07 18:29:31
435
原创 JS高级之es6
ES6语法ES6新增语法ES6中新增了用于声明变量的关键字1.let声明的变量只在所处于的块级有效 if (true) { let a = 10; }console.log(a) // a is not defined**注意：**使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性。2.不存在变量提升console.log(a); // a is not defined let a = 20;3.暂时性死区利用let声明的变量会绑定在
2020-11-05 18:04:28
97
原创 JS高级之this指向、call/apply/bind、闭包、递归
03笔记1.函数的定义和调用1.1函数的定义方式方式1 函数声明方式 function 关键字 (命名函数)function fn(){}方式2 函数表达式(匿名函数)var fn = function(){}方式3 new Function()var f = new Function('a', 'b', 'console.log(a + b)');f(1, 2);var fn = new Function('参数1','参数2'..., '函数体')注意/*Fun
2020-11-04 17:41:20
803
原创 jQuery（三）事件处理、对象拷贝、插件、位置操作
day03 - jQuery学习目标：能够说出4种常见的注册事件能够说出 on 绑定事件的优势能够说出 jQuery 事件委派的优点以及方式能够说出绑定事件与解绑事件能够说出 jQuery 对象的拷贝方法能够说出 jQuery 多库共存的2种方法能够使用 jQuery 插件1.1. jQuery 事件注册优点: 操作简单，且不用担心事件覆盖等问题。缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。其它事件和原生基本一致。比如：mouseover、mo
2020-10-30 17:42:45
160
原创 jQuery（二）属性获取、元素增删改查、尺寸和位置
day02 - jQuery学习目标：1.1. jQuery 属性操作 jQuery 常用属性操作有三种：prop() / attr() / data() ;1.1.1 元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属性，比如 元素里面的 href ，比如 元素里面的 type。语法 1. 获取属性语法：prop("href"); 2. 设置属性语法：prop("href","http://baidu.com"); 注意：prop() 除了普通属性操作，
2020-10-22 18:50:41
245
原创 jQuery（一）选择器/样式/动画
day01 - jQuery1.1. jQuery 介绍1.1.1 JavaScript 库 常见的JavaScript 库：jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等，这些库都是对原生 JavaScript 的封装，内部都是用 JavaScript 实现的，我们主要学习的是 jQuery。1.1.2 jQuery的概念略1.1.3 jQuery的优点轻量级。核心文件才几十kb，不会影响页面加载速度。跨浏览器兼容，基本兼容了现在主流的浏览器。
2020-10-22 16:22:16
71
原创 Web APIs介绍（四）——offset/client/scroll/轮播图/本地存储
day05 - Web APIs1.1. 元素偏移量 offset 系列1.1.1 offset 概述offset 翻译过来就是偏移量， 我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。获得元素距离带有定位父元素的位置获得元素自身的大小（宽度高度）注意：返回的数值都不带单位offset系列属性作用element.offsetParent返回作为该元素带有定位的父级元素，如果父级都没有定位则返回bodyelement.of
2020-10-22 15:27:27
547
转载 粘性定位(position:sticky)实现固定表头、固定列的表格组件(Vue、React)
前言：最近重构的项目中有这样一个页面，一个固定表头和列的表格，表格列数较多，大概有60多列，200多条数据，而且表格需要实现拖拽滚动功能。原页面的表格是用的一个比较老旧的表格插件实现，拖拽滚动是用iScroll.js实现的，性能很差，即使每页只有二、三十条数据，拖拽起来也严重卡顿。我首先使用了element-ui自带的的table组件实现了拖拽滚动的功能，性能稍微比老页面强了一点，每页50条数据时卡顿不明显，超过100条数据时有才有卡顿感。然而我对这样的性能也不是很满意，就研究了下el-table固定表头
2020-09-17 16:39:32
6850
3
原创 JS高级之ES6的类、ES5的构造函数和原型、继承
JavaScript高级011.面向过程与面向对象1.1面向过程面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。1.2面向对象面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。1.3面向过程与面向对象对比面向过程面向对象优点性能比面向对象高，适合跟硬件联系很紧密的东西，例如单片机就采用的面向过程编程。易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性，可以设计出低耦合的系
2020-09-16 16:41:55
257
原创 谷歌浏览器控制台报错：Unchecked runtime.lastError: The message port closed before a response was received
问题：谷歌浏览器报错，报错内容如下：点击报错内容，我的代码都是只有一段，这里不可能有错原因：浏览器插件扩展出错解决：一了百了办法：排除法找到并删除这个插件鸡肋办法：点插件下面的详细信息，找到有权访问的网站，设置为特定网站上详细信息有个加载来源，点击找到本地源文件，加上if(chrome.runtime.lastError){}，谷歌商店里的没找到办法...
2020-09-08 15:48:01
7604
原创 Web APIs介绍（三）——DOM事件流、BOM
1.3. 事件高级1.3.1. 注册事件（2种方式）1.3.2 事件监听addEventListener()事件监听（IE9以后支持）attacheEvent()事件监听（IE678支持） eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget（目标对象） 上，当该对象触发指定的事件时，指定的回调函数就会被执行。<button>传统注册事件</button><button>方法监听注册事件</button
2020-08-21 18:19:22
165
原创 Web APIs介绍（二）——DOM（2）
day02 1.1. 排他操作1.1.1 排他思想1.3 案例：表格隔行变色1.4 案例：全选1.5. 自定义属性操作1.5.1 获取属性值1.5.2. 设置属性值1.5.3. 移除属性1.5.4. 案例：tab栏1.5.5. H5自定义属性1.6. 节点操作1.6.1. 节点概述1.6.2. 节点层级1.6.3. 父级节点parentNode1.6.4. 子节点1.6.5. 案例：新浪下拉菜单1.6.6. 兄弟节点1.6.7. 创建节点1.6.8. 添加节点1.6.9. 案例：简单版发布留言1.7. 节点
2020-08-21 16:09:12
148
原创 Web APIs介绍（一）——DOM
这里写目录标题day01 - Web APIs1.1. Web API介绍1.1.1 API的概念1.1.2 Web API的概念1.1.3 API 和 Web API 总结1.2. DOM 介绍1.2.1 什么是DOM1.2.2. DOM树1.3. 获取元素1.3.1. 根据ID获取1.3.2. 根据标签名获取元素1.3.3. H5新增获取元素方式1.3.4 获取特殊元素（body，html）1.4. 事件基础1.4.1. 事件概述1.4.2. 事件三要素1.4.3. 执行事件的步骤1.4.4. 常见
2020-08-20 17:03:11
201
1
原创 JS基础(二) ——内置对象、简单类型与复杂类型
回顾JavaScript基础第02天JavaScript基础第02天笔记1 - 内置对象1.1 内置对象1.2 查文档1.3 Math对象1.4 日期对象1.5 数组对象创建数组的两种方式检测是否为数组添加删除数组元素的方法数组排序数组索引方法数组转换为字符串其他方法1.6 字符串对象基本包装类型字符串的不可变根据字符返回位置根据位置返回字符字符串操作方法replace()方法split()方法2 - 简单数据类型和复杂数据类型2.1 简单数据类型2.2 复杂数据类型2.3 堆栈2.4 简单类型传参2.5
2020-08-07 20:22:44
149
原创 JS基础(一)——函数、对象、数组
回顾一些JS基础函数二级目录1. 使用arguments对象可以获取传入的每个参数的值2. 函数定义:3. 函数的自调用：声明的同时,直接调用4. 函数可以作为参数使用，我们说这个参数(函数)可以叫回调函数5. 函数是可以作为返回值使用的6. 作用域7. 作用域链9. 静态作用域和动态作用域10. 预解析三级目录函数二级目录1. 使用arguments对象可以获取传入的每个参数的值function f1() { //获取的是函数在调用的时候,传入了几个参数 console.
2020-08-07 19:33:31
151
原创 移动WEB开发布局之流式布局、Flex
移动WEB开发布局移动web开发流式布局1.0 移动端基础1.1浏览器现状1.2 手机屏幕的现状1.3常见移动端屏幕尺寸1.4移动端调试方法2.0 视口2.1 布局视口 layout viewport2.2视觉视口 visual viewport2.3理想视口 ideal viewport2.4meta标签3.0二倍图3.1物理像素&物理像素比3.2背景缩放background-size4.0 移动开发选择和技术解决方案4.1移动端主流方案4.2 移动端技术解决方案4.3 移动端大量使用 CSS3盒
2020-08-05 17:47:00
389
转载 js 对象、原型、继承 讲解
前言大家都是抱着找对象的目的进来的，但是本文会从对象开始尝试把，原型、new、构造函数、instanceof、原型链、继承、class 这些有关联的东西都梳理一遍，大家有不同的观点一定要点赞 ~对象想要搞清楚原型、原型链、继承这一堆概念之前首先要搞清楚对象是啥ECMAScript中的对象其实就是一组数据和功能的集合。 —— javascript高级程序设计第三版红皮书给出的对象解释相当到位对象是一种数据类型，js中的数据类型分为 原始类型 和 引用类型，原始类型也叫基本类型或值类型。
2020-07-20 17:14:07
138
转载 CSS预处理器sass/less/stylus的区别
CSS预处理器less/sass/stylus的区别1.什么是 CSS 预处理器2.基本的写法区别2.1 less： 标准的css语法 ，有花括号和冒号2.2 s...
2020-07-03 11:12:23
112
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人