- 博客(63)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 ts类型声明declare
类型声明declare1、概览1.1 declare是什么前提：假如现在有一门用Typescript写的库，想供其他开发人员使用，有两种方式方式1 打包ts源文件（供ts用户使用）和编译后的js文件（供js用户使用）方式2 提供编译后的js文件和供ts用户使用的类型声明后一种方式的优点：所占文件体积较小，十分明确该导入声明，并省去ts进一步编译的时间类型声明定义：万事并不总是如意，代码也不一定都有静态类型类型声明文件的拓展名为 .d.ts, 是为无类型的js代码附加ts类型的一种方式举个栗子：
2022-07-04 14:41:39
10407
1
原创 Relative references must start with either “/“, “./“, or “../“.
node环境不支持import，npm作为node的包管理器，不支持直接用import来导入npm里面的包利用webapck或者babel处理一下
2022-06-20 00:14:55
8316
2
原创 import和require在浏览器和node环境下的实现差异
import属于esmodule规范的内容，具体的esmodule和commonjs模块规范可以看我的这篇博客2. node环境不支持import举个栗子：目前的目录结构如下：src/a.js:src/b.js现在在node环境下执行，输入命令node a.js，报错：解决方法：方法1：改es6模块的后缀名为.mjs,也就是说，只要脚本文件里面使用了import或者export命令，就必须采用.mjs后缀名，nodejs遇到.mjs文件，就认为是es6模块，默认采用严格模式
2022-06-19 22:23:19
3373
原创 npm包管理工具
1. npm的背景，为什么使用npm1. 社区文化分享源代码讨论问题（issue收集学习资源和网站。互相使用和贡献代码2. 共享代码早期社区、npm没有崛起的年代，通过网址链接共享代码点击jqueny 官网的下载链接，同时 github本身可以通release下载.问题来了当一个网站依赖的代码越来越多，程序员发现
2022-05-25 22:00:26
952
原创 TS-枚举类型enum
枚举的作用是列举类型中包含的各个值，一般用它来管理多个相同系列的常量（即不能被修改的变量），用于状态的判断。这是一种无序的数据结构，把键映射到值上，可以理解为编译时键固定的对象，访问键时，ts将检查指定的键是否存在在web中，比较常见的状态判断有响应状态的判断：const handleResponseStatus = (status: number): void => { switch (status) { case 200: // 请求成功时 // Do someth.
2022-05-17 09:00:56
20755
原创 解决require is not defined的报错问题
浏览器识别不了require关键字，只需要导入require.js这一个库就好了通过npm install require.js --save安装好这个库会安装到nodemodule目录下取得require.js文件，然后在index.html文件最前端引入即可
2022-04-20 20:45:03
34122
5
原创 Object.prototype.toString.call()原理
1. 用处该方法是用来监测数据类型的一种好方法console.log(Object.prototype.toString.call(undefined)) // [object Undefined]console.log(Object.prototype.toString.call(null)) // [object Null]console.log(Object.prototype.toString.call(new Date())) // [object Date]2. 原理当调用一个方法
2022-04-04 22:04:56
2012
原创 XSS的三种类型和对应的预防措施
1. 什么是XSScross-site-scriping,跨站脚本攻击，为了和css区分，取名为xss通常是在网页里嵌入一段恶意的js代码：让浏览器在渲染dom的时候，意外地执行了恶意的js代码，使得黑客盗取个人信息（通常盗取了新浪微博的账号和密码，还可以试试能不能去登录支付宝qq），执行恶意的操作（比如发恶意帖，删帖，微博关注人，转发未必之类的操作）2. XSS的分类1.Dom类型DOM 型 XSS 的攻击步骤：• 攻击者构造出特殊的 URL，其中包含恶意代码。• 用户打开带有恶意代
2022-04-03 18:47:46
2220
原创 SSR服务端渲染
1. 客户端渲染需要一个模板文件HTML（搭建好基础的结构，但是还没有数据）在框架vue的created声明周期去请求接口数据，一般是json类型的数据浏览器把数据（图片，文字等内容）插入到模板template当中浏览器渲染类似于淘宝官网，下图中的轮播图，推荐搜索，商品详情肯定是动态数据，那么一定是通过接口来调用的，假如按照传统的客户端渲染模式，基本结构–>请求数据–>浏览器渲染，那么涉及到大量数据的时候，渲染速度是非常慢的2. 优化首屏渲染的方法懒加载压缩http请求体
2022-04-03 13:59:32
1134
原创 再看CORS的cookie跨域
1. 前提之前博客已经写了关于Cors解决跨域的问题服务器端对于跨域请求的处理流程如下：首先查看http头部有无origin字段；如果没有，或者不允许，直接当成普通请求处理，结束；如果有并且是允许的，那么再看是否是preflight(method=OPTIONS)；如果不是preflight（简单请求），就返回Allow-Origin(必须的)、[Allow-Credentials，Access-Control-Expose-Headers]，并返回正常内容。如果是preflight（预
2022-04-01 13:05:27
495
1
原创 canvas学习笔记
1. 什么是canvas是h5新增的一个标签，可以通过js在这个标签上绘制各种图案，可以通过js在这个标签上绘制各种图案拥有多种绘制路径、矩阵、原形、字符以及图片的方法1. canvas使用步骤创建一个canvas标签通过js拿到canvas标签从cavas标签中获取到绘图工具通过绘图工具在canvas标签上绘制图形以绘制一条直线为例子4-1. 设置路径的起点4-2. 设置路径的终点4-3. 告知canvas连接这两个点 <script> //
2022-03-25 17:51:27
1851
1
原创 Vue的diff算法原理
0. 从常见问题引入虚拟dom是什么?如何创建虚拟dom?虚拟dom如何渲染成真是dom?虚拟dom如何patch（patch）虚拟DOM的优势?（性能）Vue中的key到底有什么用，为什么不能用index?Vue中的diff算法实现1. 虚拟dom1. h方法实现virtual dom ，也就是虚拟节点它通过js的Object对象模拟dom中的节点再通过特定的render方法将其渲染成真实的dom节点eg：<div id="wrappe
2022-03-15 16:54:40
1402
2
原创 cookie和session的区别
1. http协议是无状态的协议Http是一个无状态的协议，每一次请求是独立无关联的，服务器是无法识别两次请求是不是同一个客户发送的，比如访问个人博客网站，肯定要登录，那么浏览器端向服务器端发送http请求，并带上账号和密码信息，服务器端对账号密码进行验证，响应给客户端，假如客户端收到登录成功的信息，说明此刻登录完成了，客户进入个人中心页面，又需要向服务器请求个人中心的数据，由于HTTP请求属于是无状态的，第一次请求和第二次请求没有联系，那么服务器端根本就不知道用户是否已经登录了，那更别提怎么返回特定用
2022-03-05 18:31:43
524
原创 浏览器进程与浏览器的渲染机制
1. 浏览器进程1. 浏览器的多进程架构一个好的程序常常被划分为几个相互独立又彼此配合的模块,浏览器也是如此。以 Chrome 为例,它由多个进程组成,每个进程都有自己核心的职责,它们相互配合完成浏览器的整体功能,每个进程中又包含多个线程,一个进程内的多个线程也会协同工作,配合完成所在进程的职责。Chrome 采用多进程架构,其顶层存在一个 Browser process 用以协调浏览器的其它进程。2. 浏览器的主要进程与功能详见下面的思维导图2. 浏览器渲染流程解析 HTML
2022-03-04 14:19:41
618
原创 块级作用域介绍，val/let/const的特点以及使用场景
1.块级作用域js在es5之前是没有块级作用域的，只有全局和函数作用域，这样造成的结果是内层的变量可能会覆盖外层的变量包裹在if里面的变量也会被变量提升for循环的计数器i会被泄漏为全局变量es6之后，let的出现其实为js新增了块级作用域function f1() { let n = 5; if (true) { let n = 10; } console.log(n); // 5 内部的n和外部的n不受影响，互相独立}* 每个作用域里面的变量互相独立不受影响
2022-02-27 18:47:13
735
原创 图片懒加载的原理--三种方法实现
1. 图片懒加载的背景类似于大型的淘宝商城、京东等网页，设计大量的商品图片信息，如果我们使页面包含的所有图片一次性加载完成，那用户体验很差。目前流行的做法是滚动动态加载，也就是懒加载，显示在屏幕之外的图片默认不加载，随着页面的滚动，图片进入了显示的范围，则触发图片的加载显示这样做的好处，一是页面加载速度快(浏览器进度条和加载转圈很快就结束了，这样用户的体验也比较好)，而是节省流量，因为不可能每一个用户会把页面从上到下滚动完2. 图片懒加载的原理存储图片的真实路径，把图片的真实路径绑定给一个以d
2022-02-26 19:14:08
29980
4
原创 js单线程与事件循环，同步与异步，宏任务与微任务
1.js是单线程的单线程是什么同一个事件只能做同一件事情，下一件事情需要等待上一件事执行完毕为什么js是单线程？js作为浏览器脚本语言，用途是与用户互动，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？单线程可以避免复杂性单线程带来的问题和局限性js是单线程语言，浏览器只分配给js一个主线程，用来执行任务（函数），但一次只能执行一个任务，这些任务形成一个任务队列排队等候执行，但前端的某些任务是非常耗时的，比如网
2022-02-21 19:27:42
806
原创 js里的分号使用，解决yield表达式后跟解构赋值语句出现异常的问题
1. 错误代码先上错误代码这里我试图用generator函数加上for…of实现斐波那契数列的求值，但是打印出来的结果不是预期的1 1 2 3 5 8,而是[1,1],[1,1],[1,1]…function* fib(n) { let [prev, curr] = [0, 1] for (let i = 0; i <= n; i++) { yield curr [prev, curr] = [curr, prev + curr] }}
2022-02-17 14:23:57
391
原创 利用setTimeout实现setInterval
1.定时器的概念介绍关于定时器要记住的最重要的事情是，指定的时间间隔表示何时将定时器的代码添加到队列，而不是何时实际执行代码假设有这样一句代码var btn = document.getElementById("my-btn"); btn.onclick = function(){ setTimeout(function(){ document.getElementById("message").style.visibility = "visible"; }, 250); //其
2022-02-16 14:17:04
4881
原创 Vue2、Vue3的生命周期
Vue2的生命周期1.生命周期的定义1.又名:生命周期回调函数、生命周期函数、生命周期钩子2.是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数。3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。4.生命周期函数中的this指向是vm或组件实例对象。2.为什么要有生命周期假如现在想实现这样一个效果:页面一进入，标题"欢迎学习vue"文字的透明度就从1逐渐减小到0，然后再恢复至1，周而往复结构代码： <h2 :style="{ opacity
2022-02-14 16:58:43
872
原创 电路、分组、报文交换
1. 电路交换发展背景人民意识到如果需要电话两两相连，那么需要n*(n-1)/2个链路，非常的庞大，所以可以采用电话交换机电话交换机接通电话线的方式成为电路交换从通信资源的分配角度来看，交换就是按照某种方式动态的分配线路的资源电路交换的三个步骤建立连接（分配通信资源）通话（一直占有通信资源）释放链接（归还通信资源）电路交换来传输计算机数据时，其线路的传输效率很低，因为独占通信资源2. 分组交换在因特网中，最重要的分组交换机就是路由器，它负责将各种网络连接
2022-02-13 19:08:54
1104
原创 计算机网络概述
1.因特网概述1. 网络、互联网、因特网网络由若干个结点Node和链接这些结点链路Link组成多个网络可以通过路由器互连起来，这样就构成了覆盖范围更大的网络，即互联网，因此互联网是“网络的网络”3. 因特网是世界上最大的互联网，用户数以亿计，互连的网络数以百万计，internet（互联网）是一个通用名词，泛指由多个计算机网络互连而形成的网络2. 因特网服务提供者ISP电信、联通、移动普通用户通过ISP接入因特网，ISP可以从因特网管理机构申请到成块的IP地址，同时具有通信链路和
2022-02-13 18:56:55
876
原创 SPA单页面应用
1.单页面应用的定义1. 何为单页面单页面并不是说一个网页只有一个页面构成，而是说这个网页可以有1到多个不同的页面，但是其入口文件只有index.html这一个，其他的页面都是通过js控制路由跳转实现页面跳转的2. 与传统多页面模式的对比由上图可以看出，传统的多页面模式应用，每次刷新界面都会像服务器重新请求html文件，在早期的 Web 应用中，前端的作用很弱，业务逻辑和数据处理都在后端，后端给前端返回一个 HTML 页面，前端只负责展示。在这种模式下，单个 HTML 页面被当做一个功能原件，表
2022-02-13 14:09:57
445
原创 解决vue、springboot项目打包后刷新出现404的问题
1. 问题背景把vue项目打包后放入springboot的static文件夹里，手下访问首页，然后进行页面跳转都是没有问题的，但是假如在非首页的任何一个页面点击刷新，就会报错2. 问题原因主要问题在于：由vue开发的应用，采用的是SPA单页面模式传统的多页面模式，每一个页面对应一个html文件，当我们刷新页面的时候，会主动向后端请求对应的html文件，拿到html文件后渲染界面，但是SPA单页面模式只有一个index.html入口文件，后续的界面跳转都是通过js控制路由跳转实现的比如，现在想直接
2022-02-13 13:52:19
5169
1
原创 同源政策/跨域与跨域解决策略/web安全攻击CSRF以及XSS
1.同源策略1. 什么是同源同源策略是浏览器安全的基石，当前网页的url和ajax请求地址的url必须同源，它要求协议、域名、端口号三者必须相同，只要有一处不同就属于跨域2. 为什么要有同源策略想象这样一个场景，你登录并信任了一个购物网站A，然后在没有退出的情况下登陆了恶意网站B，由于浏览器携带了cookie信息，那么B就可以冒充用户向A网站发送请求，比如购买物品之类的违背用户预期的恶意行为，带来严重影响，这其实也就是平时所说的CSRF攻击（具体见下文对于CSRF的介绍），由来同源策略以后，主要限制
2022-02-11 23:13:59
3150
原创 最长公共前缀和
编写一个函数来查找字符串数组中的最长公共前缀。如果不存在公共前缀，返回空字符串 “”。示例 1：输入：strs = [“flower”,“flow”,“flight”]输出：“fl”示例 2：输入：strs = [“dog”,“racecar”,“car”]输出：""解释：输入不存在公共前缀。// 先假设最长的公共前缀ans是第一个，遍历后面的每一个字符串，与ans逐一遍历，不同就记录下标，截取ans返回var longestCommonPrefix = function (strs)
2022-02-05 22:00:02
340
原创 解决安装了vue3开发者工具但是控制台没有显示出vue选项的问题
安装好了插件，并且选择钉在页面上，图标也亮起，可是F12就是没有出现vue的选项卡解决办法：把调试工具先关闭，再刷新界面，再F12打开调试者工具即可解决
2022-02-04 14:51:10
7438
6
原创 关闭vue项目的语法检查
关闭语法检查创建 vue.config.js在内部加上这样的代码module.exports={ lintOnsave:false //关闭语法检查}
2022-02-04 14:31:09
3009
原创 vue实现全选框效果
昨天看快手面经有这样一道题目，今天就试着来实现了一下vue组件封装，写逻辑部分，css忽略。大概是：全选单选，就像购物车的全选按钮，五个商品五个按钮，一个全选按钮，点击全选，商品都选中，反之，商品都选中则全选按钮亮。html部分<template id="check"> <div> // 表示全选框，定义全选点击事件 <input type="checkbox" class="all_check" value
2022-02-03 20:58:19
2781
原创 vue+css实现给弹框后的背景区域添加阴影效果
效果如下：只有弹框部分是白色，其他的加上一层阴影效果首先创建一个div，v-show控制显示和隐藏，默认隐藏<div class="bg" v-show="isShowbg"></div> .bg{ //设置布局方式为固定定位，充斥整个屏幕 position: fixed; top: 0; left: 0; bottom: 0; right: 0; //设置背景颜色为0.4透明度的黑色 background-co
2022-02-03 13:27:30
2187
原创 以不同的路由参数实现组件的复用以及监听路由参数的变化
前提当使用不同的路由参数时，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。所以才需要监听路由参数的变化以得到页面不同的数据渲染效果使用watch监听路由参数的变化watch: { // 用来监听路由参数'$route.params.id'的变化，handler方法表示监听到路由参数变化后所做出的动作，参数newVal表示新的值 '$route.params.id': { handler (n.
2022-02-02 12:18:56
298
原创 在vue-cli2中引入element-ui以及报错解决
安装element-uicnpm install element-ui --save在main.js文件当中进行配置import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);npm run serve启动项目遇到报错：R babel-runtime/helpers/extends in ./node_modules/_async-valid.
2022-02-02 11:09:20
1287
转载 解决vue的{__ob__: observer}取值问题
转载原地址：https://blog.csdn.net/zhouzuoluo/article/details/103067637?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-6&spm=1001.2101.3001.4242问题： vue编码中经常出现获取到的数据是：{ob: Observer} 格式的解决方法： 将返回的数据data先转换为JSON字符串形式，然后再从字符串形式转换成JSON格式J
2022-02-01 14:04:19
2249
原创 js监测空对象和空引用
空对象：表示一个对象，不包含任何的属性和方法空引用：指向null例子：这两种方法都可以创建一个空对象，一个是构造函数法，并一个是对象字面量表示法 let obj = new Object() let obj1 = {}不可以用null来监测是否为空对象,空对象并不等于null使用JSON.stringify==’{}'来检测是都否为空对象，不推荐利用object.keys(obj)获取属性的数组，如果数组长度为0，说明为空对象获取obj的所有属性（不包括原.
2022-02-01 14:02:24
540
原创 在vue-cli中使用echarts并封装echarts组件
1. 导入echarts在终端输入cnpm install echarts --save在main.js中引入import * as eCharts from 'echarts';Vue.prototype.$eCharts = eCharts;2.封装echarts组件新建组件echats.vue首先应该明确Echarts图形必须满足四项刚性条件才可以绘制：准备一个具有宽高的容器（container）；每次绘制之前需要初始化（init）；必须设置配置，否则无从绘制（optio
2022-01-29 20:28:00
1636
原创 vue实现鼠标移动到用户头像出现弹窗选卡
1.效果鼠标移动至头像位置，弹出选项卡，个人信息和退出均可点击鼠标移出界面3s后隐藏选项卡2.源码：html部分需要一个父元素box1包裹住图片和选项卡内部一张图片，一个box2用于显示选项卡，并用v-show=‘userInfo’用来控制选项卡的显示和隐藏<div class="box1"> <img src="" alt="" class="userMessage" @mouseover="showInfo" @mouse
2022-01-26 19:35:48
3057
原创 谈一谈浮动
一个元素浮动后会脱离标准流，不占位置，在标准流排版分为水平（行内+行内块级）和垂直（块级），而浮动流排版只有水平排版方式，只能设置某个元素左对齐或者右对齐，没有居中对齐，所以不可以使用margin：0 auto了在浮动流布局中不再区分块级元素/行内元素/行内块级元素，他们都水平排版，而且都可以设置宽高，所以一个元素设置浮动后，和行内块级元素很像（水平排版，可设置宽高）浮动元素会脱离标准流，脱标之后，后面的元素会上浮顶替前面元素空出的位置，前面一个元素左浮盖住后面一个元素，浮动元素浮动之后的位..
2022-01-25 15:15:41
215
原创 圣杯布局中 margin-left: -100%的理解
如果不设置margin-left:100%的话，那么left和right元素会因为空间不足被挤到第二行1. 对margin值的解释：①父子关系时：margin-left是指孩子左边界线与父亲左边界线(若父亲有左padding值，指的就是这条padding线)的距离。margin-right是指孩子右边界线与父亲右边界线(若父亲有右padding值，指的就是这条padding线)的距离。②兄弟关系时：margin-left指的是我的左边界线与我左兄弟的右边界线(若兄弟有右padding值，指的就是这条
2022-01-24 17:15:18
3583
原创 flex详解以及利用flex进行骰子布局
1.flex内容详解请移步致张鑫旭大牛的博客：flex布局重点是要明白flex布局由容器和子项构成作用在容器和子项上分别有不同的属性，了解每个属性的含义2.利用flex布局实现筛子效果效果图如下：附上源码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" con
2022-01-22 23:22:22
1165
原创 vue中v-for渲染本地图片
把路径存放在了data里面，渲染的时候出错，由于webpack把图片当做外部资源，打包时需要引入，引入有import和require两种方式，但是前者只能放置在头部，后者却可以放置在任意位置 ，所以现在有两种引入本地图片的方法...
2022-01-21 16:16:08
1292
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人