- 博客(104)
- 收藏
- 关注
RSS订阅原创 Vue页面假死点不动现象Cannot read properties of undefined(reading ‘_wrapper‘)报错
Vue页面报错，点不动问题定位
2024-11-08 10:49:46
404
原创 pc电脑屏幕分辨率尺寸
PC端有时候需要做一下页面适配不同屏幕分辨率，一般我们可能通过百分比、flex、rem等布局实现。对于系统一开始就没有使用rem的情况，我们一般都是用px布局高度不限制百分比\flex就够了，但有时需要做一个全屏完整展示页面，可能内容较多，会发生溢出滚动条等现象，需要适配各种PC电脑分辨率时候。那么我们想到使用响应式适配调整元素间距、高度等方式，但是具体适配哪些，我们不得而知。因设备、屏幕尺寸和用户设置的不同而有所差异。
2024-10-30 11:41:07
1494
原创 【常用动画方式】transition\animation\定时器setInterval+setTimeout\requestAnimationFrame
前端常用动画属性和方法
2024-10-30 11:00:57
389
原创 建议使用requestAnimationFrame替代定时器setInterval、setTimeout完成页面动画
requestAnimationFrame替代定时器动画更优
2024-10-21 11:19:07
486
原创 定时器轮询接口推荐setInterval+setTimeout替代setInterval
定时器轮询接口使用setInterval结合setTimeout替代setInterval
2024-10-21 11:06:53
1131
原创 Echarts 折线图y轴标签值太长时显示不全的解决办法
所有的数据都是从后台取的，也就是说动态变化的，一开始的时候数据量不大不会出现问题，后面y轴的值越来越大的时候就出现了这个显示不全的情况。这里就只列出修改了的部分了，比原来添加了 grid.left 和 yAxis.axisLabel。我们要看的是配置项的部分：http://echarts.baidu.com/option.html#title。刻度标签与轴线之间的距离。不过本来的值已经很小了，这个没多大作用。刻度标签的内容格式器，支持字符串模板和回调函数两种形式。比如可以设置太长了换行之类的。
2024-07-24 17:27:22
659
原创 前端循环依赖
ES6模块使用 export 关键字来导出值，并且默认情况下，这些值是被引用的，而不是被复制的。但是，有一种情况下，ES6模块会创建一个值的拷贝，那就是当你使用 export 导出一个函数或者类的时候。最终的依赖关系变为 store.ts => authSlice.ts => login.ts => http.ts => store.ts，最终居然形成了循环依赖！在ES6模块中，模块的加载顺序是由它们在代码中的出现顺序决定的。CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
2024-07-23 19:57:36
578
原创 windows下git提交修改文件名大小写提交无效问题
windows系统不区分大小写，以及git提交忽略大小写，git仓库已存在文件A.js，本地修改a.js一般是没有提交记录的，需要手动copy一份出来A.js，再删除A.js文件提交仓库删除后，再提交修改后的a.js文件。看似打开git区分大小写开关，实则修改原文件名时，是新增方式提交远端仓库，将存在2份文件！禁止以下目录下git配置操作：将是灾难。
2024-04-24 11:14:09
671
原创 less几个关键技巧
less 中比较实在的功能点:一、变量声明变量@img: "~@src/img"; // 作为url，可以配合路径别名一起使用，这里可以把图片路径进行声明，减少后期使用时的路径冗余@link-color: #428bca; // 作为属性值@i: 1; // 作为选择器@ml: margin-left; // 作为属性名在less中使用的变量有两种形式：作为属性值a.link { color: @link-color;}作为选择器、属性名、url时，插入变量与普通作为属性值
2022-01-24 16:24:05
963
原创 html使用include引入其他页面文件
HTML从来没有任何方法可以在代码中包含其他HTML文件。例如包含所有页面的页眉和页脚：<body> <include src="./header.html"></include> Content <include src="./footer.html"></include></body><!-- html没有这样的include标签 -->方式：1、使用PHP<body>
2022-01-18 17:22:20
5866
原创 H5唤起app
mes = “alipayqr://platformapi/startapp?saId=10000003”;手机充值mes = “alipayqr://platformapi/startapp?saId=10000007”;扫一扫mes = “alipayqr://platformapi/startapp?saId=10000009”;爱心捐赠mes = “alipayqr://platformapi/startapp?saId=100000011”;彩票首页mes = “alipayqr://pl
2021-11-29 14:47:36
2319
原创 js语法ES6、ES7、ES8、ES9、ES10、ES11、ES12的新特性
ES6（2015）1、let和const let name = 'john'; const arr = [];2、类(Class)class Man { constructor (name) { this.name = name; } console() { console.log(this.name); }}const man = new Man('john');man.console(); // john3、箭头函数(Arrow)const
2021-03-18 17:09:08
2660
原创 web项目生成webapp__借助Hbuilder
前期准备一个移动端网站，例如：https://www.cbizunion.top/Hbuilder官网：http://www.dcloud.io/步骤一 下载HbuilderX极客开发者工具打开Hbuilder官网http://www.dcloud.io/，点击HbuilderX图标进入下载页面点击右上角下载根据你的电脑系统选择下载标准版下载内容为一个压缩包软件界面如图所示步骤二 环境配置点击菜单栏 工具 -> 插件安装 找到App真机运行，点击安装，安装后如图回到Hb
2020-11-17 10:49:39
584
原创 web项目生成webapp__借助第三方服务平台
前言不收费，也不需要下载任何工具，web项目就能打包成APP，支持在线和离线，APP名称、LOGO、横竖屏、启动页、引导页等都可以自己设置，非常灵活，并且可以上架到应用市场。操作指南1、创建应用注册中控易动平台账号（https://www.yd-mobile.cn/），点击右上角 “控制台”，进入控制台之后点击 “我的应用”，找到创建应用按钮。2.填写应用信息设置app名称、logo，选择app类型（在线或者离线），在线直接输入网址即可，如下图提示：如果是离线的话，需要上传离线资源包，就可
2020-11-17 09:56:57
1151
原创 英语常用口语1000句
I see． 我明白了。I quit! 我不干了!Let go! 放手!Me too． 我也是。My god! 天哪!No way! 不行!Come on． 来吧(赶快)Hold on． 等一等。I agree。 我同意。Not bad． 还不错。Not yet． 还没。See you． 再见。Shut up! 闭嘴!So long． 再见。Why not? 好呀! (为什么不呢?)Allow me． 让我来。..
2020-10-30 16:59:04
1651
1
原创 什么是中台
项目下沉整合业务和技术，将重复造轮子的部分统一去做，实现有新项目需求时的快速上线。什么公司项目适合中台：从0到1，没必要中台，必要的是快速上线一个项目从1到N, 公司有一定规模，适合搭建，且目前项目复杂度不高，可以项目下沉，使项目活得更好从N到N+1，公司各个项目复杂度高，需要及时整合捋清各个资源，以调整架构长期发展...
2020-06-28 09:21:19
242
原创 webpack的sideEffects到底该怎么用？
https://segmentfault.com/a/1190000015689240tree-shaking仍然对一些引用包做不到移除，比如console.log了一个包引用，而给包添加了side-effects之后会彻底将包移除
2020-06-24 15:10:43
944
原创 如何发布第一个属于自己的npm包
什么是NPM？NPM是随同NodeJS一起安装的javascript包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：1、允许用户从NPM服务器下载别人编写的第三方包到本地使用。2、允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。3、允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。发布前的准备1、注册一个npm账号，前往NPM官网进行注册2、创建一个简单的包，在本地创建一个项目文件夹sugars_demo (名字自己取，不要和NPM上
2020-06-23 14:45:35
269
原创 JavaScript的同步异步
单线程的概念java是一门多线程语言，多线程处理各种各样的事，比如说文件上传，下载等JavaScript是一门单线程的语言，同一个时间只能做一件事，同个时间有多个任务的话，这些任务就需要进行排队，前一个任务执行完，才会执行下一个任务，主要用来实现与用户的交互如果JavaScript是多线程的话，一个线程在一个DOM节点增加内容，另一个线程要删除这个DOM节点，那么这个DOM节点究竟是要增加内容还是删除？这会带来很复杂的同步问题JavaScript的同步异步同步任务：主线程上排队执行的任务，只有
2020-06-23 10:03:16
267
原创 技术小问题解决tips笔记
1、解决 webpack-dev-server 不能使用 IP 访问(如mac下虚拟中通过ip访问, 通过host可以访问mac下ip, 但webpack启动到dev server的ip, windows访问不到)解决:第一种方法：webpack.dev.conf.jsconst HOST = '192.168.x.xx:8080第二种方法：package.json“dev”: ...
2020-06-16 17:13:51
2780
原创 React轻量状态管理库
跨组件通信解决方案：react本身的Context;redux：结合react-redux, 非为react设计的，对于小型应用比较重;mobx：结合mobx-react, 非为react设计的，对于小型应用比较重;dva;其他状态管理方案：react hooks状态管理轮子很多，都囿于redux，unstated-next思想;1、unstated-next:unstated-next：https://www.jianshu.com/p/f5d0d777b523unstated-ne
2020-06-15 09:51:21
962
原创 webpack配置中常用的CommonsChunkPlugin
CommonsChunkPlugin主要是用来提取第三方库和公共模块，避免首屏加载的bundle文件或者按需加载的bundle文件体积过大，从而导致加载时间过长，是一把优化项目的利器。CommonsChunkPlugin作用：一、不分离出第三方和自定义模块项目初始结构，后面打包后会生成dist目录：src目录下各个文件内容都很简洁的，如下：webpack.config.js:接着在命令行运行npm run build，此时项目中多了dist目录：再来看一下命令行中webpack的打包信
2020-06-01 17:07:55
2502
原创 Vue—router-view组件使用方法
开发的时候有时候会遇到一种情况，比如 ：点击这个链接跳转到其他组件的情况，通常会跳转到新的页面，但是，我们不想跳转到新页面，只在当前页面切换着显示，那么就要涉及到路由的嵌套了，也可以说是子路由的使用。router-view可以嵌入一个组件，组件内部又可以写router-view嵌入组件，因此可以通过router-view实现组件嵌组件；以饿了么订餐的情景来说吧，在同个页面，切换显示不同组件的相应内容，同时地址栏的地址是会变的怎么实现它呢？首先 我们在导航组件navbar.vue中写了三个导航链接
2020-06-01 14:43:15
8526
1
原创 微宏任务执行顺序比较，promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
先举一个比较典型的例子：setImmediate(function(){ console.log(1);},0);setTimeout(function(){ console.log(2);},0);new Promise(function(resolve){ console.log(3); resolve(); console.log(4);}).then(function(){ console.log(5);});console.log(6);process.n
2020-05-29 17:43:20
2158
5
原创 JS浏览器事件循环机制
进程、线程进程是系统分配的独立资源，是 CPU 资源分配的基本单位，进程是由一个或者多个线程组成的。线程是进程的执行流，是CPU调度和分派的基本单位，同个进程之中的多个线程之间是共享该进程的资源的。浏览器内核浏览器是多进程的，浏览器每一个 tab 标签都代表一个独立的进程（也不一定，因为多个空白 tab 标签会合并成一个进程），浏览器内核（浏览器渲染进程）属于浏览器多进程中的一种。浏览器内核有多种线程在工作。GUI 渲染线程:负责渲染页面，解析 HTML，CSS 构成 DOM 树等，当页面重绘
2020-05-29 17:16:22
2298
1
转载 Vue 解决Loading chunk (\d)+ failed问题
import Vue from 'vue';import Router from 'vue-router';// 两种页面引入方式// 方式1，将所有页面import进来，会打包成一个巨大的js,首页加载慢，后续页面加载快，不推荐// import Page404 from '@/pages/Page404';// import Indexfrom '@/pages/index';// 方式2，路由懒加载，所有页面按需加载，推荐，但"Loading chunk {n} failed"出现几
2020-05-21 11:02:01
2537
原创 页面底部显示不全问题且挖掘出的打包问题分析解决
现象：1）内容多的页面，页面底部内容显示不全；2）本地环境刷新两下变正常，测试环境怎么刷都还是显示不全；分析：下意识对比开发和测试环境表现差异的css, 发现本地刷新min-height, 会没有然后页面正常，后来找到min-height仅在登录页的style=less下，其他页面只要刷新就没了，因为每个模块只会加载自己模块下css。解决：1、导致页面显示不全问题（min-height...
2020-04-18 22:33:23
986
2
原创 app端前端框架对比 - Mui与ionic、Cordova 、Weex、React Native对比
1.1.1.介绍： mui是最接近原生App体验的前端框架。极小：100k的js文件，60k的css文件。原生编写，不依赖任何三方框架极强：xcode和Android studio里所有原生控件都具备高性能：精练的代码、适时的5+原生动画调用，达到原生应用的体验多端发布：编写一套代码，iOS、Android、浏览器、微信App、百度直达号、流应用全覆盖1.1.2.Mui能力？ HTML5...
2020-04-07 12:39:27
3985
原创 GraphQL小tips
前端通过安装包形式引入graphQL（在已有graphQL server端情况下，前端graphQL可直接通过api方法查询接口对应参数数据而过滤不必要的数据字段返回）, webpack编译gql文件，GraphQL 不足：写后台接口,要注意的是它并非用来提升接口性能，相反反而会降低接口性能。比如你一个完整响应有 10 个字段，你只要返回两个字段，后台不会只查询那两个字段，而是先查询出完整...
2020-04-07 11:44:27
168
原创 关于骨架屏的一些点
吸引更多的注意力，内容还在加载中，相比于之前的Loading动画，骨架屏页面更容易让用户产生一种错觉，页面快加载完了。骨架屏实现原理很简单，就是通过占位线框元素，渐进式加载数据。不足：增加程序运行负担，无法根本解决页面加载性能问题。开发工作量大，对特定页面数据额外绘制动画效果。总结：骨架屏适用一些固定位置元素，不适用于一些动态位置元素。（比如：列表渲染数据） 建议采用Loading动画+懒...
2020-04-07 09:12:08
498
原创 escape和encodeURI和encodeURIComponent使用场景和区别
函数出现时间： escape() javascript 1.0 encodeURI() javascript 1.5 encodeURIComponent() javascript 1.5函数功能介绍： escape...
2020-03-13 12:49:34
377
转载 vue中的$on, $emit, $once, $off源码实现
这几种模式是基于订阅观察者模式的，维护一个事件中心，on的时候将事件按名称存在事件中心里，称之为订阅者，然后emit将对应的事件进行发布，去执行事件中心里的对应的监听器。第一步就是创建一个构造构造，维护一个事件中心eventsfunction EventEmiter(){ this.events = {}}$on // event可以是事件名数组 EventEmiter.prot...
2020-03-06 12:35:22
1451
原创 flex兼容布局
display:flex和display:box都可用于弹性布局，在实际的测试中display:flex不能完全的替代display:box；display:flex的存在浏览器兼容性，兼容写法：.container{display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ /display: -moz-box; / F...
2020-03-05 12:10:46
272
原创 针对网上的某富文本编辑的bug解决
由于项目中使用了网上某富文本编辑器所带来的一系列bug困惑我许久, 特别花时间来解决它, 下面是关于的解决方案:html内容做文本限制长度超出截断处理后还原html处理:var str = 'abc d 222rftggdb dnn dhdhdhdhh1222 &n...
2019-12-23 15:45:47
533
原创 小数与经纬度的换算
1°（度）＝60′（分），1′（分）＝60"（秒）用小数依次乘以60即可，如21.251°是21°,0.251X60＝15.06′，0.06X60＝3.6"所以21.251°＝21°15′3.6"
2019-12-18 17:45:32
16205
空空如也
echarts传入series data，首次渲染formatter输出多5个0
2024-11-06
【Echarts动态排序图，series使用背景色更新动画，背景底色不同步跟随柱子动画】
2024-10-17
TA创建的收藏夹 TA关注的收藏夹
TA关注的人