赏花赏景赏时光-CSDN博客

当元素设置了负数，则该元素会处于z-index=0的元素下面，同时会处于其他普通元素下面（没有堆叠的元素position:static和z-index：auto）如果不设置z-index，则z-index默认值就是auto，则该元素不处于堆叠上下文中，其子元素不会从父元素继承优先级，可以和任意元素比较z-idnex的值；当父元素没有设置z-index时候，即父元素的z-index：auto，则子元素的层级可以和任意元素比较；1）z-index的作用：设置堆叠上下文，即设置元素堆叠顺序。...

2022-08-15 22:53:21 299

原创 js上一些兼容性问题

问题：后台返回日期的格式为：date=“2020-01-01”，然后在js中利用该数据得到Date对象，即d = new Date(2020-01-01)，这种格式初始化在安卓手上是正常的，但是ios上不支持这种格式。解决方式：在调用new Date()方法之前，统一处理好入参的格式，即“2020-01-01” .replace(/-/g, '/')，将“2020-01-01”格式转化为“2020/01/01”形式。比如：0.1这种转化为二进制码是有误差的，尾数是一个不断循环的数，明显会有误差。...

2022-08-14 17:54:08 828

原创 nrm、node-sass安装问题、nvm

nvm是node的版本管理工具，可以操作node版本的切换、安装、查看等。不同项目中的依赖可能需要node的版本不一样，这样我们再切换到具体项目时候，可能就要切换node的不同版本，以便于进一步开发。...

2022-08-14 17:10:36 423

原创浅析Web Worker及实践

web worker

2022-07-10 15:31:48 2103 1

原创 webpack的一些基础知识

本文是对webpack实践做的一些简单笔记，用于个人查缺补漏用的1、webpack中的 process.env.NODE_ENV是什么node环境下有个全局变量process（进程），该变量包括的属性如下图所示，发现并没有NODE_ENV属性，而有env属性，env表示该进程下的环境变量。NODE_ENV变量值常用于区分开发、测试、生产环境，于是在项目配置和脚本运行命令行中，通常会在env对象下设置NODE_ENV属性。$ node process.jsprocess { title:

2021-11-28 17:36:50 756

原创微前端-乾坤

本文将按照下面的顺序逐一讲解：1）什么是微前端以及为什么使用微前端2）乾坤框架介绍3）基于乾坤框架实例一、什么是微前端微前端的核心思想就是将按照不同功能或不同维度拆分的独立子应用，通过主应用来加载这些子应用，达到子项目可以独立开发、独立部署、不受技术栈影响效果。二、乾坤框架介绍下面的地址是乾坤文档地址，详细介绍了微前端的概念、乾坤的核心设计思想介绍https://qiankun.umijs.org/zh/guide三、乾坤框架实例说明：例子基于三个独立项目，项

2021-10-17 15:06:18 7768 1

原创 npm系列：cli command

1、npm access：设置已发布包的访问级别npm access public [<package>]：公开npm access restricted [<package>]：受限添加或删除用户或team对于包的只读/读写权限：npm access grant <read-only|read-write> <scope:team> [<package>]npm access revoke <scope:team> [

2021-09-23 23:41:06 1399

原创 npm系列：package.json

1、关于packag.json的基础知识https://mp.weixin.qq.com/s/B3oppFdPYi6KD1zJhdv3XQ2、npm发包流程https://zhuanlan.zhihu.com/p/1366039513、sh: vue-cli-service: command not foundhttps://blog.csdn.net/Eva3288/article/details/106380896/一、在开发npm包，或者库的时候，package.j...

2021-09-12 21:52:10 3580

转载 js中的链表

1、单链表的基本实现https://www.cnblogs.com/jaxu/p/11277732.html-------链表的实现和运用2、单链表反转，至少使用两个节点：前一个节点和下一个节点https://blog.csdn.net/desperado0726/article/details/113360971-------链表反转的三种方法参考文章：https://www.cnblogs.com/jaxu/p/11277732.html-------链表的实

2021-08-29 10:16:28 183

原创 vue router实现原理

vue router即通过改变url，在不重新请求页面的情况下，更新页面视图vue router 方式有三种，通过mode去定义使用具体的路由模式，mode的值如下：hash|history|abstract一、实现方式：hash模式早期的前端路由跳转就是利用location.hash来实现的，像下面的链接，#及后面的内容一起组成hash的值https://www.baidu.com.cn/index.html/#/content?id=1234hash指示了加载页面的路径位

2021-08-15 18:06:03 825

原创项目中遇到的问题

1、微信环境下、app环境下、谷歌浏览器下等内核实现原理不一致，引发vue中的钩子执行时序不一致，导致在vue中产生一些奇怪bug1）在微信环境下，在beforeRouteEnter钩子中的next里面调用$nextTick钩子不执行基本代码如下： beforeRouteEnter(to, from, next) { next(vm => { // do something // ..... console.log(1) vm.$

2021-08-07 17:59:55 251

原创移动端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 3726

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

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

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

原创 js的一些基本知识点

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

2021-05-17 22:04:15 297

原创 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 436

转载 vue中常问面试题

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

2021-05-09 23:42:16 588

原创 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 2260

原创 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 1433 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 5093 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 205

转载 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 2354

原创图片在线压缩网站

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

2021-03-20 10:27:04 206

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

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

2021-03-20 10:23:43 7476 1

原创 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 119

原创 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 2736 1

原创 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 355

原创 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 208

原创 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 216 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 224

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

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

2021-01-23 12:07:40 425

原创 mac笔记本上，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 14875 1

原创 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 674

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

获取日期的时间戳问题、前端倒计时不准问题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 1922 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 345

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

空空如也