- 博客(37)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 antd的Modal组件confirm state 未更新解决方案
记录一下使用antd的Modal组件遇到的坑正常使用Modalimport { FC, useState } from "react";import { SaveOutlined } from '@ant-design/icons';import { Modal } from 'antd';import { ExclamationCircleFilled } from '@ant-design/icons';import globalStore from '@store/store'; imp
2022-03-08 19:02:52
3262
1
原创 js判断手机是否安装了某一款app，有则打开，没有去下载
function openApp() { if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) { letloadDateTime = new Date(); window.setTimeout(function() { let timeOutDateTime = new Date(); if (timeOutDateTime
2021-11-19 16:42:05
1356
原创 图片懒加载处理
// 图片懒加载let imgList = [...document.querySelectorAll("img")];let length = imgList.length;const imgLazyLoad = (function() { let count = 0; return function() { let deleteIndexList = []; imgList.forEach((img, index) => {
2021-10-28 10:43:04
168
原创 HTML引用js文件且js文件互调
bbb.js文件引用aaa.js文件，html文件再引用bbb.js文件刚开始用了es6模块化和commonJs来实现，失败了；换了document.write("<script src='./aaa.js'></script>")这种写法后实现了；简单记一下。// aaa.jslet a = 2function num () { console.log(a) setTimeout(() => { console.log("修改值"); a+
2021-10-27 15:17:00
531
原创 ES5与ES6的继承
ES5 的继承ES5 的继承是通过构造函数和原型来实现的1、利用call修改this指向来继承父构造函数的属性方法// 1. 父构造函数 function Father(uname, age) { // 父构造函数内的this指向父构造函数的对象实例 this.uname = uname; this.age = age; } // 2 .子构造函数 function Son(uname, age, score) { /
2021-10-10 15:53:53
385
原创 边框0.5px实现方法
方案1：伪元素+scale (兼容性好，推荐)实现方式：给容器设置伪元素，设置绝对定位，宽高都是200%，边框是1px，然后使用transform:scale(0.5) 让伪元素缩小原来的一半，此时伪元素的边框和容器的边缘重合。 <div class="box box1"></div> .box { width: 360px; height: 50px; border-radius: 5px; mar
2021-09-27 15:01:17
2395
原创 vue路由传参的三种基本方式
vue路由传参的三种基本方式方法一this.$router.push({ path:`/home/${id}`,})路由配置{ path:"/home/:id", name:"Home", component:Home}在Home组件中获取参数值this.$route.params.id方法二通过name来匹配路由，通过param来传递参数this.$router.push({ name:'Home', params:{
2021-09-18 10:59:46
136
原创 前端性能优化总结
针对HTML，如何优化性能？对于资源加载，按需加载和异步加载预加载图片，将样式表放在顶部，将脚本放在底部，加上时间戳首次加载的资源不超过1024KB，即越小越好。压缩HTML、CSS、 JavaScript文件。减少DOM节点。避免空src（src属性为空，会重新加载当前页面，影响速度和效率）。尽量避免在HTML标签中写 style属性避免在页面的主体布局中使用表，表要在其中的内容完全下载之后才会显示出来，显示的速度比DIV+CSS布局慢。不滥用Web字体，Web字体需要下载、解析、重绘
2021-08-31 16:13:18
226
原创 前端需要了解的网络通信及浏览器知识
从输入 URL 到页面加载完成，发生了什么？首先我们需要通过 DNS（域名解析系统）将 URL 解析为对应的 IP 地址，然后与这个 IP 地址确定的那台服务器建立起 TCP 网络连接，随后我们向服务端抛出我们的 HTTP 请求，服务端处理完我们的请求之后，把目标数据放在 HTTP 响应里返回给客户端，拿到响应数据的浏览器就可以开始走一个渲染的流程。渲染完毕，页面便呈现给了用户将这个过程切分为如下的过程片段：DNS 解析TCP 连接HTTP 请求抛出服务端处理请求，HTTP 响应返回浏览器
2021-08-11 17:53:29
300
原创 三种常用深拷贝及其特点
1、JSON与字符串的互转（俗称丐版）newObj = JSON.parse(JSON.stringify(oldObj)优点：简单，方便；应付比较正常的数据。缺点：性能问题，stringify再解析其实需要耗费较多时间，特别是数据量大的时候；一些类型无法拷贝，例如函数(不输出)，正则(输出空对象)，时间对象(输出时间字符串)，Undefiend(不输出)等等问题。2、Object.assignvar obj = {};var o1 = { a: 1 };var o2
2021-08-06 15:55:01
457
原创 JS中构造函数与原型
JS中原型相关知识什么是原型？用处修改原型prototype：1、单个增加某属性or方法：构造函数.prototype.属性名or方法名 = 需要添加的属性内容or方法；var friend = new Person();Person.prototype.sayHi = function(){ alert("hi");};friend.sayHi(); //"hi"（成功执行！）2、重写整个原型对象：function Person(){}var friend =
2021-08-03 15:20:03
469
原创 自定义组件及其使用（全局、局部）
（1）自定义组件.vue// noData.vue <template> <div> <p>noData...</p> </div> </template> <script></script> <style></style>（2）封装、导出 // index.js i
2021-06-23 16:47:22
229
原创 vue注册组件语法糖
注册组件语法糖作用：省去了调用Vue.extend()的步骤，直接使用一个对象来代替，简化代码。注册全局组件未使用语法糖// 注册全局组件未使用语法糖const myComponent = Vue.extend({ template: ` <div> <p>注册全局组件</p> </div> `})Vue.component('my-cpn',myComponent )注册全局组件的语法糖// 注册全局组件的语法糖
2021-06-23 16:12:43
364
原创 Git的常用操作
Git 的介绍Git是目前世界上最先进的分布式版本控制系统。Workspace：工作区Index / Stage：暂存区Repository：仓库区（或本地仓库）Remote：远程仓库Git 的操作Git初始化操作git config -global user.name "name" #设置提交者名字git config -global user.email <email> #设置提交者邮箱git config -global core.editor <edito
2020-12-22 10:39:08
128
原创 数据可视化工具库汇总
1：d3官网：https://d3js.org/GitHub地址：https://github.com/mbostock/d3d3 一个基于数据操作文档的js数据可视化框架，最流行的数据可视化库之一2：Chart.js中文网：http://chartjs.cn/GitHub地址：https://github.com/nnnick/Chart.jsChart.js是一套简单、干净并且有吸引力的基于 html5 技术的 JavaScript 图表工具。Chart.js为你提供了完整的易于集成到你的
2020-12-14 14:15:50
388
原创 登录后用sessionStorage储存token值并添加及退出登录后的清除
举个登录的例子login () { this.$refs.loginFormRef.validate(async (valid) => { if (!valid) return // // login是请求的地址；this.loginForm是请求的参数，是一个对象。 const { data: res } = await this.$http.post('login', this.loginForm) if (res.me
2020-12-11 10:58:53
2673
原创 Element UI的表头与表格体竖线对不齐问题
el-table的表头与表格竖线对不齐的情况：给样式加上body .el-table th.gutter{display: table-cell!important;}body .el-table colgroup.gutter{display: table-cell!important;即可。否则会有一个display：none；的属性被加在了样式里。...
2020-12-07 17:58:26
1219
原创 为什么在vue的组件中，data要用return返回对象？
官方：当一个组件被定义， data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data函数，从而返回初始数据的一个全新副本数据对象。类比与引用数据类型。如果不用function return 每个组件的data都是内存的同一个地址，那一个数据改变其他也改变了，这当然就不是我们想要的。用function return 其实就相当于申明了.
2020-11-27 17:13:52
2734
原创 vue.js刷新页面出现闪烁问题的解决方案
在使用vue时会出现加载渲染页面时闪烁，一般有以下两个情况：1.使用了{{}},解决方案使用v-bind2.使用v-if，出现原先要隐藏的元素先出现然后在隐藏从而造成了闪烁的问题。以上两个问题都可以使用以下的方案来解决。在css中定义[v-cloak] {display:none;}在标签中加上v-cloak即可解决.<div v-cloak> {{ message }} </div>...
2020-09-14 00:07:10
1417
原创 Web前端开发规范手册
Web前端开发规范手册一、规范目的1.1 概述 … 1二、文件规范2.1 文件命名规则…12.2 文件存放位置…22.3 css 书写规范…32.4 html书写规范…72.5 JavaScript书写规范…112.6 图片规范…122.7 注释规范…132.8 css 浏览器兼容…13一、规范目的1.1 概述为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发.
2020-08-26 15:06:54
387
原创 前端学习流程
学习流程HTMLCSSHTML5 + CSS3 新特性移动开发 流式布局 flex布局 rem布局 响应式布局JavaScript基础语法Web APIjQueryJavaScript高级 + ES6前后端交互 Node + Gulp MongoDB + Express Ajax GitVue注意点1.了解JavaScript你需要了解 JavaScript 与 ECMAScript 之间的关系，以及 DOM 和 B
2020-08-26 14:33:05
242
原创 移动WEB开发之流式布局（百分比布局）
所谓的流式布局就是我们常说的百分比布局，页面中盒子的宽度常常是通过百分比值来设置的。流式布局的特征：a、宽度自适应，高度写死，并不是百分百还原设计图b、图标都是固定死大小的，包括字体等也是固定死的。并不是所有的东西都是自适应的。c、一些大的图片，设置宽度为百分比自适应即可，随着屏幕大小进行变化经典的流式布局左侧固定，右侧自适应右侧固定，左侧自适应两侧固定，中间自适应（圣杯布局，双飞翼布局）等分布局流式布局的缺点虽然可以让各种屏幕都适配，但是显示效果不是非常的友好，因为只有几个.
2020-08-24 15:42:47
394
转载 前端常用设计模式
前端常见的设计模式主要有以下几种：1. 单例模式2. 工厂模式3. 策略模式4. 代理模式5. 观察者模式6. 模块模式7. 构造函数模式8. 混合模式单例模式这种设计模式的思想是确保一个类只有唯一实例，一般用于全局缓存，比如全局window，唯一登录浮窗等。采用闭包的方式实现如下：var single = (function(){ let instance; function getInstance(){ // 如果该实例存在，则直接返回，否则就对其实例化
2020-08-24 13:17:35
634
原创 Vue的一些知识点
什么是vue中的实例？类似于创建一个对象,里面包含钩子函数,data,methods.components等vue实例的对象data 主要是用来存放数据的 Vue框架会检测data的数据变化,自动更新到html上计算属性computed 主要是用来一些比较复杂的逻辑计算 虽然{{}}是非常便利的但是它只能进行哪些比较简单的运算,而且只能够支持单个表达式,多个就会报错methods 可以通过vm实例访问这些方法,主要是用来存放函数方法的 watchvue提供的一种更通用的方式观察和响应Vue实例
2020-08-24 11:09:53
160
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人