- 博客(51)
- 资源 (7)
- 收藏
- 关注
RSS订阅原创 CJS的module.exports 、 exports和ESM export default和 export详解
module.exports指向了新的变量，这里和第二个参数已经不是同一个对象了，后面exports.xx只是对临时变量进行赋值，并没有什么意义。有 module.exports 、 exports 的情况 ，用 exports 导出变量不生效。2.用module.exports，需要格外添加module.exports.xxx=value。1.统一用exports。
2024-04-13 01:18:15
440
1
原创 eslint包冲突和配置eslint-webpack-plugin报错 ERROR in [eslint] No ESLint configuration found
只能进行版本降级 eslint:“^8.56.0”
2024-04-10 15:10:25
734
转载 强制缓存与协商缓存
1.强制缓存（1）HTTP响应报文中expires的时间值，是一个绝对值（2）HTTP响应报文中Cache-Control为max-age=600，是相对值由于Cache-Control的优先级比expires，那么直接根据Cache-Control的值进行缓存，意思就是说在600秒内再次发起该请求，则会直接使用缓存结果，强制缓存生效。注：在无法确定客户端的时间是否与服务端的时间同步的情况下，Cache-Control相比于expires是更好的选择，所以同时存在时，只有Cache-Control生效。
2022-06-09 15:45:33
1668
转载 vue中子组件的created、mounted钩子中获取不到props中的值问题
出现这种情况的原因, 因为父组件中要传递的 props 属性是通过ajax请求回来的, 请求的这个过程是需要时间的，但是子组件的渲染要快于ajax请求过程，所以此时 created 、 mounted 这样的只会执行一次的生命周期钩子，已经执行了，但是 props 还没有流进来（子组件），所以只能拿到默认值。menu-list v-model="menuList"></menu-list>props: { value: { type: Array
2022-04-02 11:06:18
4557
原创 axios 返回具体错误消息
虽然请求失败了，但是有具体的返回信息但如果直接打印error，会是以下输出其error对象中包含了一个error.response对象，可以获取到具体信息扩展：官网axios.get('/user/12345') .catch(function (error) { if (error.response) { // The request was made and the server responded with a status code // that
2022-02-22 15:36:11
2141
转载 vue3.0使用TypeScript 如何拓展一个方法并且this可以访问,不报错？
那么在近期更新的vue3.0且使用ts的项目中，我们该怎样拓展一个方法呢？vue3.0使用typescript重构，而拓展方法的方式也更加规范main.ts中import { createApp,defineComponent } from "vue";import App from "./App.vue";import router from "./router";import store from "./store";const instance = createApp(App);i
2022-02-22 14:30:38
995
原创 ts: axios 返回值类型报错 和 解构赋值
最近做项目用TypeScript发现axios返回值类型一直是any，经过一番Google后, 终于找到了解决办法：新建一个shims-axios.d.ts,重新声明axios模块，然后在调用时加上泛型, 如下：import axios from 'axios'declare module 'axios' { export interface AxiosInstance { <T = any>(config: AxiosRequestConfig): Promise<T&
2022-02-19 20:38:21
5725
原创 非 Prop 的 Attribute
一个非 prop 的 attribute 是指传向一个组件，但是该组件并没有相应 props 或 emits 定义的 attribute。常见的示例包括 class、style 和 id attribute。可以通过 $attrs property 访问那些 attribute。(1)Attribute 继承当组件返回单个根节点时，非 prop 的 attribute 将自动添加到根节点的 attribute 中。例如，在 date-picker 组件的实例中：app.component('date-
2022-02-18 11:43:17
764
1
原创 HTML5的离线储存
创建一个 manifest 文件(eg:test.manifest)，然后在页面头部加入 manifest 属性<html lang="en" manifest="test.manifest">CACHE MANIFEST#v0.11#需要缓存的文件CACHE:index.css#不需要缓存的文件NETWORK:index.html#无法访问页面FALLBACK:404.html...
2022-02-14 16:26:54
400
原创 web worker
web worker测试，可以参考一下：https://www.ruanyifeng.com/blog/2018/07/web-worker.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewp
2022-02-14 16:09:54
220
原创 webpack5 中使用url-loader图片资源重复且不显示的问题
webpack5 中使用url-loader的问题当在 webpack 5 中使用旧的 assets loader（如 file-loader/url-loader/raw-loader 等）和 asset 模块时，你可能想停止当前 asset 模块的处理，并再次启动处理，这可能会导致 asset 重复，你可以通过将 asset 模块的类型设置为 ‘javascript/auto’ 来解决。module.exports = { module: { rules: [ {
2022-02-11 16:59:12
726
原创 React 自定义Sticky组件
import React,{Component,createRef} from "react";import styles from './index.module.scss'export default class Sticky extends Component{ originalRef=createRef() placeholderRef=createRef() componentDidMount(){ window.addEventListener('sc
2022-02-09 21:16:24
643
原创 当prop更改时,子组件没有更新
问题：当prop更改时,子组件没有更新已测试过父组件的state数据已改变，但子组件没有重新渲染React 希望在创建子组件时高效。如果它与另一个子组件相同，则不会呈现新组件，这会使页面加载速度更快。解决方法：（1）父组件添加一个 Key 会强制 React 渲染一个新组件，从而重置该新组件的 State。<FilterPicker key={this.state.openType} defaultValue={defaultValue} type={this.state.openTyp
2022-02-06 01:13:04
4521
原创 小程序自定义导航栏，实现与胶囊对齐功能
注意screenHeight屏高：屏幕高度 = 原生NavigationBar高度（含状态栏高度）+ 可使用窗口高度 + 原生TabBar高度但是自定义导航栏screenHeight=windowHeight由于是自定义导航栏无法获取原生NavigationBar高度，需要手动计算。首先先获取状态栏高度和右上角胶囊的布局位置信息：分别是uni.getSystemInfo()获取系统信息以及uni.getMenuButtonBoundingClientRect（这个函数h5环境下不能用要使用条件编.
2021-12-25 20:53:06
3950
原创 Vuex+细碎
//挂载路由导航守卫,to表示将要访问的路径，from表示从哪里来，next是下一个要做的操作router.beforeEach((to,from,next)=>{ if(to.path === '/login') return next(); //获取token const tokenStr = window.sessionStorage.getItem('token'); if(!tokenStr) return next('/login'); n
2021-11-29 22:09:35
112
原创 webpack
6.webpack的概念webpack是一个流行的前端项目构建工具，可以解决目前web开发的困境。webpack提供了模块化支持，代码压缩混淆，解决js兼容问题，性能优化等特性，提高了开发效率和项目的可维护性7.webpack的基本使用A.创建项目目录并初始化创建项目，并打开项目所在目录的终端，输入命令：npm init -yB.创建首页及js文件在项目目录中创建index.html页面，并初始化页面结构：在页面中摆放一个ul，ul里面放置几个li在项目目录中创建js文件夹，并在文件夹中
2021-11-29 21:17:47
105
原创 模块化和babel
1.模块化的分类A.浏览器端的模块化 1).AMD(Asynchronous Module Definition,异步模块定义) 代表产品为：Require.js 2).CMD(Common Module Definition,通用模块定义) 代表产品为：Sea.jsB.服务器端的模块化 服务器端的模块化规范是使用CommonJS规范： 1).使用require引入其他模块或者包 2).使用exports或者module.exports导出模块成
2021-11-29 21:17:29
130
原创 input 获取value属性的问题
input type=“text”手动修改 input 的值， 使用 dom.getAttribute(“value”) 只能得到 html Dom中的值，而不能得到修改后的值（即内存中的值）；可以通过 dom.value 得到修改后的最新值（内存中的值）使用： dom.setAttribute(“value”,“2011”) , 只能通dom.getAttribute(“value”) 得到 2011使用: dom.value = 2012 , 只能通过 dom.value 得到 2012也就是
2021-11-26 16:06:50
1128
原创 jQuery（3）事件处理普通绑定、on、off、自动触发、事件对象
1.2. jQuery 事件处理为普通注册事件方法因为普通注册事件方法的不足，jQuery又开发了多个处理方法，重点讲解如下：on(): 用于事件绑定，目前最好用的事件绑定方法off(): 事件解绑trigger() / triggerHandler(): 事件触发1.2.1 事件处理 on() 绑定事件因为普通注册事件方法的不足，jQuery又创建了多个新的事件绑定方法bind() / live() / delegate() / on()等，其中最好用的是: on()1.2.3.
2021-11-26 13:16:12
988
原创 jQuery(2) 属性 、元素尺寸、位置
1.1. jQuery 属性操作jQuery 常用属性操作有三种：prop() / attr() / data() ;1.1.1 元素固有属性值 prop()所谓元素固有属性就是元素本身自带的属性，比如 元素里面的 href ，比如 元素里面的 type。语法注意：prop() 除了普通属性操作，更适合操作表单属性：disabled / checked / selected 等。1.1.2 元素自定义属性值 attr()用户自己给元素添加的属性，我们称为自定义属性。 比如给 div
2021-11-25 22:34:34
114
原创 jQuery（1）
day01 - jQuery学习目标：能够说出什么是 jQuery能够说出 jQuery 的优点能够简单使用 jQuery能够说出 DOM 对象和 jQuery 对象的区别能够写出常用的 jQuery 选择器能够操作 jQuery 样式能够写出常用的 jQuery 动画1.1. jQuery 介绍1.1.1 JavaScript 库 JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义
2021-11-25 21:53:30
392
原创 click 延时
click 延时解决方案移动端 click 事件会有 300ms 的延时，原因是移动端屏幕双击会缩放(double tap to zoom) 页面。解决方案：禁用缩放。 浏览器禁用默认的双击缩放行为并且去掉300ms 的点击延迟。 2.利用touch事件自己封装这个事件解决300ms 延迟。原理就是：当我们手指触摸屏幕，记录当前触摸时间当我们手指离开屏幕， 用离开的时间减去触摸的时间如果时间小于150ms，并且没有滑动过屏幕， 那么我们就定义为点击代码如下://封装ta
2021-11-25 14:05:44
150
原创 js原生轮播图
html文件： <div class="main"> <div class="focus"> <!-- 左侧按钮 --> <a href="javascript:;" class="arrow-l"> < </a> <!-- 右侧按钮 --> <a href="javascript:;" class="
2021-11-22 16:33:43
340
原创 mouseenter 和mouseover的区别
mouseenter 和mouseover的区别mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter 只会经过自身盒子触发之所以这样，就是因为mouseenter不会冒泡跟mouseenter搭配鼠标离开 mouseleave 同样不会冒泡 <div class="father"> <div class="son"></div> </div>father为粉色盒子var father
2021-11-21 20:56:01
188
原创 offset client scroll系列属性
1.1. 元素偏移量 offset 系列offset 与 style 区别offsetoffset 可以得到任意样式表中的样式值offset 系列获得的数值是没有单位的offsetWidth 包含padding+border+widthoffsetWidth 等属性是只读属性，只能获取不能赋值所以，我们想要获取元素大小位置，用offset更合适stylestyle 只能得到行内样式表中的样式值style.width 获得的是带有单位的字符串style.width 获得不包含pa
2021-11-21 20:53:50
277
原创 火狐中往返缓存不刷新的问题
下面三种情况都会刷新页面都会触发 load 事件。1.a标签的超链接2.F5或者刷新按钮（强制刷新）3.前进后退按钮火狐中，有个特点，有个“往返缓存”，这个缓存中不仅保存着页面数据，还保存了DOM和JavaScript的状态；实际上是将整个页面都保存在了内存里。所以此时后退按钮不能刷新页面。此时可以使用 pageshow事件来触发。，这个事件在页面显示时触发，无论页面是否来自缓存。在重新加载页面中，pageshow会在load事件触发后触发；根据事件对象中的persiste window.ad
2021-11-21 20:16:22
570
原创 放大镜效果
注意：用event.offsetX是以event.target(事件触发的节点)作为参考系的，这里导致参考系始终是事件触发节点（mask）,会导致页面抖动。解决方法：给mask添加css属性pointer-events: none; 可以让mask层不参与鼠标事件,这样event.target才是this, 参考系才可以变成thispointer-events 具体可以看上一篇文章具体代码css：<style> .preview_wrap { .
2021-11-21 19:29:13
188
原创 pointer-events
补充：pointer-eventspointer-events: none;表示元素不会对mouse/touch相关事件作出响应。1. 不会触发鼠标相关的事件，以及相关的hover效果clicktouchStarttouchMovetouchEndmouseMovemouseOvermouseLeavedrag相关事件2. 不影响事件冒泡、捕获，只是影响事件处理阶段image（ 3、穿透效果）子元素设置css属性pointer-events: none;。点击子元素虽然其不
2021-11-21 17:31:15
552
原创 键盘事件、 BOM和DOM、window、location、navigator、history对象、this指向问题、 JS执行机制（事件循环）
1.1. 常用的键盘事件1.1.1 键盘事件三个事件的执行顺序 keydown – keypress – keyup1.1.2 键盘事件对象使用keyCode属性判断用户按下哪个键注意：触发获得焦点事件，可以使用 元素对象.focus() 同理直接调用按钮点击事件document.querySelector(‘button’).click()1.2. BOM和DOMBOM 比 DOM 更大，它包含 DOM。1.2.4. window对象的常见事件页面（窗口）加载事件（2种
2021-11-21 13:32:02
510
原创 内联onclick事件
阻止表单提交 <form action="http://www.baidu.com" > <input type="submit" value="提交" name="sub" οnclick="tap(event)"> </form>注意：这里不能直接 用tap()，必须带参数function tap(event){ console.log(arguments); event.prev
2021-11-21 00:01:58
451
原创 移动端笔记
移动端调试方法Chrome DevTools（谷歌浏览器）的模拟手机调试搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器使用外网服务器，直接IP或域名访问视口：background-size 属性规定背景图像的尺寸background-size: 背景图片宽度 背景图片高度;单位：长度|百分比|cover|contain;cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
2021-11-20 16:23:02
68
原创 css案例（1）
1、定位动画：思路:1、animation 曲线使用 linear 线性变化在这里更合适，2、定义多个光圈，动画延迟执行3、设置透明度1->0 有扩散效果核心代码：<div class="map"> <div class="city"> <div class="dotted"></div> <div class="pulse1"></div>
2021-11-19 21:59:41
239
原创 :nth-child 与 :nth-of-type 的区别
E:nth-child 与 E:nth-of-type 的区别E:nth-child(n) 匹配父元素的第n个子元素E，也就是说，nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配，也就是说它既要满足是父元素的第n个孩子，同时还要是E元素E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E，也就是说，对父元素里面指定子元素进行排序选择。先去匹配E ，然后再根据E 找第n个孩子，这里只要满足是父元素的第n个e元素。&l
2021-11-19 19:06:57
287
转载 CSS样式重置CSS Reset
CSS Reset，意为重置默认样式。HTML中绝大部分标签元素在网页显示中都有一个默认属性值，通常为了避免重复定义元素样式，需要进行重置默认样式（CSS Reset）。举几个例子：1.淘宝（CSS Reset）：html { overflow-x:auto; overflow-y:scroll;}body, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, p, blockquote, th, td { font-weight:400;
2021-11-19 15:41:31
1146
原创 溢出的文字省略号显示
1 单行文本溢出显示省略号/*1. 先强制一行内显示文本*/ white-space: nowrap; （ 默认 normal 自动换行） /*2. 超出的部分隐藏*/ overflow: hidden; /*3. 文字用省略号替代超出的部分*/ text-overflow: ellipsis;2、多行文本溢出显示省略号（，有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webkit内核）） /*1. 超出的部分隐藏 */overf
2021-11-19 14:26:51
106
使⼩程序中⽀持es7的async语法runtime.js
2021-11-18
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人