自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(319)
  • 资源 (1)
  • 论坛 (1)
  • 收藏
  • 关注

原创 移动端css样式兼容

1、1px边框问题问题:不同的浏览器对于border:1px像素显示的大小不一样解决方案:可以利用元素的伪类,来设置1px边框.parent{ position: relative; height: 100px; width:100px; background: yellow;}.parent:after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; border: 1

2021-07-25 21:51:40 20

原创 在vue项目中使用骨架屏

现在的应用开发,基本上都是前后端分离的,前端主流框架有SPA、MPA等,那么解决页面渲染、白屏时间成为首要关注的点webpack可以按需加载,减小首屏需要加载代码的体积;使用CDN技术、静态代码等缓存技术,可以减小加载渲染的时长问题:但是首页依然存在加载、渲染等待时长的问题。那么如何从视觉效果上减小首屏白屏的时间呢?骨架屏:举个例子:其实就是在模版文件中id=app容器下面写想要展示的效果,在new Vue(option)之后,该id下的内容就被替换了( 这时候,可能Vue编译生成的内容还没

2021-05-18 23:39:21 4234 18

原创 js的一些基本知识点

1、js中的执行机制、event-loop众所周知,js是一门单线程语言,而js中将任务分为同步和异步任务、异步任务;而异步任务又分为宏任务(setTimeout. setInterval等)和异步任务(promise.then process.nextick等),而微任务优先级大于宏任务同步任务会进入主线程、异步任务会根据任务类型分别进入宏任务、微任务队列中。1、当执行主线程的时候,遇到宏任务则将宏任务放进宏任务队列中,遇到微任务则将微任务放进微任务队列中2、当主线程执行完之后,会去遍历.

2021-05-17 22:04:15 126

原创 Array的原型对象上方法实现

1、Array.prototype.includes(findVal, fromIndex):查找某元素是否包含在数组中入参:findVal----要查找的元素,必填fromIndex-----指定开始查找的索引位置,非必填,默认为0返回结果:boolean:true---元素包含在数组中,false-不包含示例:[2,3,45].includes(2)----true [2,3,45].includes(1)----false [2,3,45].includ...

2021-05-16 17:13:46 119

转载 vue中常问面试题

一、vue2.x中响应式原理1)原理采用数据劫持 + 订阅-发布模式的方式,通过Object.defineProperty来劫各个属性的setter getter,数据变化时,发布消息给订阅者,触发响应的回调。即在创建Vue实例的时候,会遍历选项data的属性,用Object.defineProperty,为属性添加getter setter 对数据的读取进行劫持,在内部追踪依赖,在属性被访问或修改时,通知变化;如果属性是Object则会循环递归的处理2)在实现响应式原理中有三大核心实现..

2021-05-09 23:42:16 143

原创 try-catch-finally的执行顺序

下面说下在javascript中try-catch-finally的执行顺序1、不管有没有出现异常,都会执行finally中的代码2、不管try catch中有没有return,都会执行finally中的代码3、若try或者catch中有return,finally中没有return,则一定是执行了try、catch中的语句,接着执行finally中的语句,最后才会执行try、catch中的return4、若try、catch没有return,finally中有return,则一定是执行..

2021-05-09 14:43:54 32

原创 vue2.x源码学习

vue版本基于vue2.6.12版本一、入口文件:vue/src/core/index.js下面是入口文件的一张思维导图vue/src/core/index.js源代码解析:1、初始化全局API:initGlobalAPI(Vue)2、定义实例属性$isServer3、定义实例属性$ssrContext4、定义实例属性FunctionalRenderContext5、定义私有属性Vue.version:定义当前版本号import Vue from './ins...

2021-05-06 23:53:00 141 3

原创 vue3新特性和新用法

下面是关于vue3的一些新特性和新用法的讲解一、新增内置组件:teleport官文解释teleport:Teleport 提供了一种干净的方法,允许我们控制在 DOM 中哪个父节点下呈现 HTML,而不必求助于全局状态或将其拆分为两个组件场景:在组件A中使用alert弹窗,但不希望alert弹窗渲染的DOM结构嵌套在组件A中;而是渲染在我们指定的位置上实现方式: 1)使用<teleport to="#alert">包裹自定义的alert组件,to属性:是有效的查询选择器..

2021-04-17 16:57:11 975 1

转载 vue2、vue3相关介绍

本文给出了一些不错的面试题文章地址1、结合vue2源码解析常见面试题参考文章链接:https://mp.weixin.qq.com/s/60HI-CM1GhqDG5zeTFSOrw2、Vue3源码解析nextTick方法:https://mp.weixin.qq.com/s/g4Mvt8P4xFOOSfciBtHOkA3、Vue3.0 新特性以及使用变更总结:https://mp.weixin.qq.com/s/OKCxvrUPoPM0hR-z9reESA...

2021-03-21 23:42:17 69

转载 window.performance

window.performance定义:是前端性能监控API,可以检测页面中的性能,W3C性能小组引入进来的一个新的API作用:1)检测到白屏时间:从我们打开网站到有内容渲染出来的时间点2)首屏时间:首屏内容渲染完毕的时间节点3)用户可操作的时间节点:DOMReady触发节点4)页面总下载的时间:window.onload的触发节点5)DNS查询的时间6)TCP链接的时间等详细说明文档:https://mp.weixin.qq.com/s/60HI-CM1GhqDG5zeT

2021-03-21 10:40:14 52

原创 图片在线压缩网站

提供一个在线压缩图片大小的实用网站:https://tinypng.com/

2021-03-20 10:27:04 55

原创 vue中动态引进组件、动态引进js模块文件

本文主要介绍vue内容如下:1、在.vue文件中动态引进组件2、在.vue文件中动态引进js模块文件一、动态引进组件动态引进组件原因:在实际业务中,比如订单详情页面detail.vue,里面包含了多个第三业务的订单详情,但是不同的业务详情页面区别又很大,所以只能根据不同的业务来源,书写不同的详情组件,在根据业务来源展示相应的组件问题:如果详情对接的业务来源越来越多,并且不同的来源对于详情页面定制化需求又高,这样就会增加越来越多的组件,如果在页面都是直接引进组件,那么没用到的组件就会.

2021-03-20 10:23:43 104

原创 React学习笔记三:demo《中》

2、轮播图处理1)基本使用 a)打开antd-mobile的Carousel组件文档Carousel组件 b)选择“基本”,点击“</>”,显示源码 c)拷贝核心代码到Index组件中 d)调整代码,让其跑起来2)获取轮播图数据 a)安装axiosnpm i axios -S b)在Index组件中导入axios c)在state中添加轮播图数据:swipers d)新建方法getSwipers获取轮播图数据,并更新swipe...

2021-03-15 22:33:36 25

原创 react中常见错误收集

1、错误:index.js:3 Uncaught TypeError: Class extends value undefined is not a constructor or null截图如下:错误提示:类继承的值为undefined,不是一个构造器代码如下:将Component写成小写的component,就会出现下面的错误;或者将Component单词写错也会出现下面的提示...

2021-03-13 11:19:56 120

原创 React学习笔记三:demo《上》

使用React做个小demo目标:1)初始化项目2)使用ant-mobile组件库3)完成项目整体布局4)完成首页轮播图5)使用百度地图API完成定位功能6)使用react-virtualized完成城市选择功能项目准备项目整体布局首页模块城市选择模块一、项目准备1)项目介绍核心业务:在线找房(地图、条件搜索)、登录、房源发布技术栈:a)React核心库:react react-dom react-routerrouter-dom...

2021-03-07 22:36:10 56

原创 react学习笔记二:react原理

一、react原理的初步了解:1)setState()的说明2)JSX语法转化3)组件更新机制4)组件性能优化5)虚拟DOM和diff算法1、setState()的说明作用:修改state,更新UI1)setState()异步更新数据this.state = { a: 0}this.setState({ a: this.state.a + 1})console.log(this.state.a)2)多次调用setState(),合并成一次r.

2021-03-07 15:40:19 52

原创 react学习笔记一:基础知识

react开发辅助工具chrome扩展包1、React Devtools:检视React组件树形结构:https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi2、Redux Devtools:检视Redux数据流:https://chrome.google. com/webstore/detail/redux-devtools/lmhkpmbekcpmknkli

2021-02-28 15:53:09 66 1

翻译 webpack简易配置

webpack基础配置文章查考1、https://blog.csdn.net/fengmin_w/article/details/819845142、https://mp.weixin.qq.com/s/0qbefXeRuzlqTk4LySiUNw webpack4和vue3结合的基本配置搭建以下是整合多篇文章的基于webpack4和vue3的0搭建输出基础项目,便于查缺补漏配置webpack环境1、创建项目,并进入目录中生成package.json文件mkdir t...

2021-01-30 23:20:31 33

原创 webpack简单配置及其用法二

一、编写可维护的webpack构建配置栗子:构建配置包设计构建配置抽离成npm包的意义通过性:业务开发者无需关注构建配置;统一团队构建脚本可维护性:构建配置合理的拆分;reademe,changelog文档质量:冒烟测试,单元测试,测试覆盖率;持续继承构建配置管理的可选方案1)通过多个配置文件管理不同环境的构建,webpack --config参数进行控制使用的配置文件,如基础配置:webpack.base.js;开发环境:webpack.dev.js;生产环境:web.

2021-01-23 12:07:40 67

原创 charles安装与使用

mac笔记本上的抓包工具charles的安装与使用方法总结一、charles的安装与基本使用1、首先在mac笔记本上安装软件charles,官网地址:https://www.charlesproxy.com/latest-release/download.do2、打开app Charles,改一下代理的配置: 1)点击proxy => access control settings,设置所有的机器可以访问:0.0.0.0/0 ::/0 2) 点击proxy =...

2020-12-12 22:35:46 230

原创 webpack简单配置及其用法一

本文章只是用于记录学习webpack的一些基础知识webpack版本是4以上版本一、初识webpack1、webpack的配置文件名称默认配置文件名称:webpack.config.js修改默认配置文件名称:webpack --config 指定名称2、在项目中安装webpack,并且初始化1)在项目的根目录下,运行npm init -y,生成package.json文件2)在项目根目录下,安装webpack webpack-cli:npm i webpack webpa..

2020-12-06 23:04:25 204

原创 获取日期的时间戳问题、前端倒计时不准问题

获取日期的时间戳问题、前端倒计时不准问题1、获取日期的时间戳问题:new Date(date).getTime(),用该方法来获取时间戳,在ios中返回NaN,安卓机正常原因:date = ’2020-09-09 12:00‘,在ios中,时间不能用‘-’分割,应该用/,即应该用“2020/09/09 12:00”,否则会报下 面的错误:Cannot assign to read only property 'exports' of object '#<Object>'因此在调用new

2020-11-29 15:39:12 602 1

原创 dns-prefetch、serviceWorker、webworker、提高网页性能

1、dns-prefetch ---预解析,提高网页加载速度,使用方法如下,参考文档https://blog.csdn.net/qq_35432904/article/details/83988726<link rel="dns-prefetch" href="https://restapi.amap.com"/> <link rel="dns-prefetch" href="https://webapi.amap.com"/> <link rel="dns-pr

2020-11-29 15:13:31 65

转载 点击页面的“回到顶部”按钮,页面滚动到顶部的几种方法,以及设置 scrollTop问题

点击页面的“回到顶部”按钮,页面滚动到顶部的几种方法一、使用锚点1)使用默认链接锚点,设置a链接的href属性值为"#top"即可实现 <div><a href=" ">返回顶部</a ></div>2)href指向特定的id<div id=“element1”>元素1</div><a href=“#element1”>回到元素1</a >二、scrollTop属性:元素未滚动时,sc..

2020-11-28 22:40:01 912

原创 物理返回键事件处理

物理返回键1)app内:在app1上,H5和app约定好在window对象上定义一个全局的方法,比如window.back方法,H5会在路由定义位置,定义该方法。当触发物理返回键的时候,app会监听双方定义好的方法back,如果有定义该方法,则执行方法2)非app内,比如浏览器,微信等环境,使用popstate方法监听这里处理的时候,需要区分是路由触发的还是物理触发的,路由触发popostate()方法,则不执行物理事件处理(由于router.replace()和router.push()方法.

2020-11-28 22:23:45 135

原创 npm包开发时,就可以时时看到效果

我们在开发npm包组件的时候,想在开发过程时,就可以看到效果,通过npm link就可以实现该目的1)关联依赖包,在这里,我们有两个项目npm-link-module,是我们要开发的npm模块npm-link-example,是我们要运行npm模块的项目首先,进入我们的npm-link-module项目,执行npm link然后,进入npm-link-example项目,执行 npm link npm-link-module通过以上两步就可以达到时时看到效果的目的了。注意以上的步骤顺序不

2020-11-28 22:20:36 92

原创 开发中遇到的问题以及解决思路

1、控制台报can not resolve相应的包名问题解决思路:1)在node_modules文件夹下查找是否有该包,如果没有就安装该插件,在运行下项目是否报错2)如果确定node_modules下有安装该插件,看下是否使用了包的别名,在配置里面有在alias属性下配置别名2、页面加了height:固定值,overflow:scroll,但是当内容超出设定的height值,不能滚动一般给一个容器设置了height固定值,overflow:scroll当内容高度超过设定值时,会出现.

2020-11-28 22:04:08 214

转载 路径上有/**/、/*/的含义

1、路径上有/**/、/*/的含义'/node_modules/@pa_hcz/umc-ui-editor/src/components/**/package.json'/** 匹配任意多级路径如/aa/bb/cc/* 仅可匹配一级路径如/aa/? 仅可匹配一级路径且最多只有一个字符 如/a , /2、路径中“./”、“../”、“/”代表的含义,参考文档https://blog.csdn.net/baidu_41878679/article/details/82770461...

2020-11-28 18:29:26 227

转载 package.json.   package-lock.json文件的区别

package.json的作用package.json缺陷这时候package-lock.json出现,用于解决什么问题作用:package.json文件定义了项目所需要的各种模块,以及项目的配置信息`npm install` 命令根据这个配置文件,自动下载所需的模块缺陷package.json 文件只能锁定大版本,也就是版本号的第一位,并不能锁定后面的小版本,`npm install` 都是拉取的该大版本下的最新的版本,为了稳定性考虑我们几乎是不敢随意升级依赖包的,这将导致多出来很

2020-11-28 18:23:18 32

原创 设置数组的length=0和直接设置数组为空数组的区别

设置数组的length=0和直接设置数组为空数组的区别比如:aa = [1,2]bb = [3,4]cc = aadd = bbaa = [] / / aa重新指向另一个内存地址,而cc指向的aa初始化时的地址没变bb.length = 0 // bb 还是指向初始化时内存地址console.log(aa, bb, cc, dd)[],[],[3,4],[]...

2020-11-28 18:19:01 312

原创 高德地图定位问题

记录下使用高德、百度地图遇到的一些问题1、从定位中拿城市名,一般情况下高德地图返回的字段名是city,但是直辖市返回的是字段provinceconst addressComponent = positionResult.regeocode.addressComponentcity: addressComponent.city || addressComponent.province || this.$store.state.user.city如果以上方式还是拿不到城市名,就用app上的定位去

2020-11-28 18:09:03 337

原创 css中的一些问题

1、每个内联元素都会有一个strut(支柱)比如,下面的img<div class="parent"> <img class="child" src="./assets/logo.png"></div>.parent{ background:gray;}.child{ line-height: 0; border: 1px solid red;}可以看到黄色圈出来的地方,会多了几像素的高度,这是内联元素会存在的空白节点导致的

2020-11-24 21:36:26 45

原创 css设置元素居中的方法

1、水平居中1) text-align:设置块级元素(父级元素)里面的内容水平居中<div class="parent"> <span>hao </span></div>.parent{ text-align: center;width: 0.5rem;background: gray;color: yellow;}2) width: fit-content————父级元素的宽度设为该值,由子元素内容撑开父元素...

2020-11-22 16:19:07 79

原创 window.onpopstate、window.history.pushState、window.history.replaceState、window.onpageshow

window.onpopstate、window.history.pushState、window.history.replaceState API的区分window.onpageshow控制浏览器历史记录的api——window.onpopstate(),每当处于激活状态的历史记录条目发生变化时,popstate事件就会在对应window对象上触发window.history.pushState(). window.histoey.replaceState()添加和修改历史记录条目,与..

2020-11-14 22:00:37 99

转载 js的防抖和节流

写这篇文章主要用于自己以后查漏防抖和节流的共同点:限制函数的执行频率,以优化函数触发频率过高而导致响应速度跟不上触发频率,出现延迟、假死、卡顿现象1、防抖:对于短时间内连续触发的事件(scroll,resize,click,,,,,),在某个时间期限内,事件处理函数只执行一次 场景:在第一次触发事件(比如click)时,不立即执行处理函数handler,而是给出一个期限delay,然后 1)在delay内,没有在触发事件click,那么就执行处理函数handler ...

2020-10-25 21:26:59 76

原创 vscode编辑器使用

vscode编辑器使用1、vscode安装了代码提示插件IntelliSense for CSS class names in HTML,在编辑的时候还是没有提示全代码,可以参考这篇文章:https://www.jianshu.com/p/179f16d43026

2020-10-24 22:53:37 78

原创 mac 下快捷键的使用

系统命令1、Mac显示隐藏文件命令的快捷键:command + shift + .2、在控制面板显示文件内容:在当前目录下的文件直接用cat命令:cat .ssh,或者直接写全路径:cat ~/.ssh3、显示当前路径下的所有文件夹和文件名:ls4、打开文件夹命令:打开当前路径下的文件夹:open . ; 打开当前文件夹下指定的文件夹: open folderName: open img; 打开当前文件下的文件: open filename.后缀5、在当前文件下创建文件夹命令: ...

2020-10-24 18:56:23 52

转载 项目首次初始化并将项目提交到GitHub上

这篇博客,主要是自己用于防止下次遇到类似问题,能快速定位解决问题1)项目初始化后,需要将代码提交到github上的步骤:https://blog.csdn.net/wyjares/article/details/819788162)如果本地项目和远程项目建立联系之后,执行命令git push origin master -u报下面的错误:git@github.com: Permission denied (publickey). Could not read from remote repos

2020-10-19 22:13:34 113

翻译 单页应用与多页应用的区别

多页面网站的定义:每一次页面跳转的时候,后台服务器都会返回一个新的html文件,这种类型的网站就称为多页面网站(多页面应用)优点:首屏时间快---整个页面展现出来所需要的时间 SEO效果好首屏时间快的原因:当访问一个页面的时候,服务器返回一个html,然后这个html展现出来,这个过程只经历一个http请求的过程,所以页面展现快,请求回来了,页面就展现出来了SEO效果好的...

2019-03-29 17:14:13 1218

原创 Vue中需要注意的事项

1、在子component中的data不能是一个对象,必须是一个函数,然后该函数返回一个对象data(){ retrun { swiperOption:{} }}2、vue中,如果每个组件发生一个ajax请求,就会造成很大的性能损耗,如何操作可以降低性能损耗问题:在vue中,一个页面被拆分成多个component,如果每一个component都发生一个ajax请求,...

2019-03-29 10:00:15 443

在线剪切图片:cropbx.js插件的源代码

在线剪切图片插件:cropbx.js插件的源代码。cropbox.js 是一个实现了图像在线剪裁的 jQuery 、YUI 插件和 JavaScript 库。上传的图片可以使用滚轮放大与缩小当前选择的图片,也可以点击按钮“+”、“”-“实现放大缩小,”后点击“裁切”后显示裁减的图片

2017-11-17

tangxiujiang的留言板

发表于 2020-01-02 最后回复 2020-01-02

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除