- 博客(42)
- 收藏
- 关注
RSS订阅
原创 UnoCSS给了我一个不用tailwindcss的理由
原子化CSS的理念早已不是新鲜事物了，UnoCSS这类解决方案把这个理念有了一个很好的实践和实现，可以真正的提升开发者体验和编码效率，都是很值得一学的技术。
2023-06-15 19:33:46
3422
原创 前端数据缓存技术选型及应用技巧
前端缓存的选型需要贴合业务场景来选择，大家也可以交流分享下自己遇到过的经典场景，看使用哪种方案、如何设计比较好。
2023-06-14 15:34:45
1030
原创 前端开发的基础生产力素养（后期不定期更新）
nodejs版本管理工具nvm在win、*nix系统上的安装、更新、使用 npm、yarn、pnpm包管理工具的使用，换源及还原，ni工具的使用
2022-02-05 17:24:57
555
原创 Nuxt中关于window or document is not defined的问题总结
关于这类问题一般有两种场景引用第三方组价时，比如引用vue-awesome-swiper这种的第三方组件时，因为源组件代码中包含有操作window对象，所以这一类的window is not defined按照官方的使用插件的方法引入就可以解决// 这里就以vue-awesome-swiper这个组件为例import Vue from 'vue'import VueAwesomeSwi...
2019-05-29 11:18:40
12073
5
原创 如何在老电脑上跳过TPM2.0安装Win11并激活
首先应该去下载一个最新的win11系统镜像：官方 MSDN msdn 可以自行注册然后下载镜像这里默认认为你知道如何知道安装系统，那么我们在开始安装镜像的时候在不支持TPM2.0的机器上会提示这台电脑无法运行Windows 11，这个时候我们需要来操作了：在上一步安装步骤全部完成之后，我们应该就可以进入到系统之中了，这时候我们需要到传统激活环节了，这时候给大家推荐一个神器：云萌，需要注意的是我们需要关闭windows自带的病毒检测工具，不然会被杀毒干掉大家可以安装上述步骤在老电脑上轻松安装并激活win11
2023-04-10 09:58:29
1304
原创 The Last Naruto,兼容IE11的vue脚手架
the-last-naruto是一个基于Vue@2.7和Vite@3的一个项目模板(支持IE11浏览器)，灵感来源自antfu大佬的vitesse-lite。旨在给项目上还需要支持IE11浏览器的一些同学提供近似Vue3生态的开发体验。
2022-07-19 17:54:56
564
原创 住手，你们不要再打了啦，Native和Web应该和平相处啊
Native是如何给Web页面提供可供Web调用的原生方法的,Web在执行完Native提供的方法之后如何知道结果,回调数据怎么传给Web Web端如何优雅的使用Native提供的方法
2022-03-12 21:48:13
3926
原创 给我一个你不用tailwindcss的理由
tailwindcss的最佳实践？比scss、less、stylus等预处理器更好的样式方案？如何用tailwindcss来做移动端适配？给你答案！
2022-02-23 17:54:27
3333
1
原创 记一次在老掉牙的Vue2项目中引入TypeScript和组合式Api和vueuse来改善大家伙的开发体验的艰辛历程
有一个项目2年前创建的，随着时间流逝，代码量已经暴增到了将近上万个文件，但是工程化已经慢慢到了不可维护的状态，想给他来一次大换血，但是侵入式代码配置太多了，最终以一种妥协的方式引入了TS和组合式API
2022-01-13 11:42:59
885
原创 各位frontend developer们，时机已经成熟，让我们开始用上pnpm吧
pnpm是啥？全称performant npm(高性能的npm)，见名知意，就是一个npm的替代品，至于为什么高性能，用怎样的方式解决了依赖包体积趋近于黑洞的问题，比这yarn有什么改进，corepack怎么启用，进来一探究竟
2021-12-04 12:01:56
7247
原创 一文让你彻底会用对象存储OSS的前端直传，不懂就再看一遍（bushi）
原由在项目里有时候会碰到比如上传文件相关的，一般都是后端提供个接口，然后我们上传的时候后端再传到阿里OSS或者其他服务商的对象存储，然后把最终的url拿到存起来或者返回给前端，这种方式其实在上传图片的频率不高的业务场景中可能并无大碍，但是如果你的项目是相册类的，资源提供类的，总之就是有很频繁的上传文件的场景，可能服务器的带宽就有点扛不住了，那么有没有更好的解决方案呢？服务端签名，客户端直传其实像阿里、腾讯、七牛等云服务厂商都提供的有类似阿里的STS(Security Token Service)临时访
2021-11-20 21:03:44
5402
1
原创 WSL中通过fs.stat获取文件的birthtime不正确的原因
原由起初是在WSL中开发一个静态博客项目，想要偷个懒，想直接通过fs.stat()获取文件的创建时间来生成文章的时间线排序，包括更新时间不对劲当我更改了一个md文件的内容时，我发现时间线发生变化了，我是通过(await fs.stat(filePath)).birthtimeMs获取文件创建时间的，但是我发现这个值竟然在我改动过文件后变化了，变成了我改变文件的时间戳，白丝不の七姐（bushi）找原因各种让我一通找之后，发现是WSL下的文件系统的问题，具体可以查看github上别人19年的时候提的一
2021-11-08 21:11:13
934
原创 删除列表元素的时候有必要通知父组件吗？——uni-app#vue3的一个特性引发的思考
这是个什么bug声明我是为了尝鲜,初始化uni-app项目的时候指定的vue3版本，这个vue3版本的官方还没有加入到正式版，大家项目中还是用vue2的赖。如果有同学也想学习一下可以按照官方的使用cli来创建项目vue create -p dcloudio/uni-preset-vue#vue3 your-project-name有一个列表页面，大概长下面这样：列表中是一个组件通过v-for循环渲染的数据像下面这样：<div v-if="list.length > 0" class
2021-08-17 16:33:15
151
原创 改造driver.js, 打造业务通用的新手引导插件
改造driver.js, 增加自己想要的样式，动态更改每一步的操作按钮的文案，并提供下一步、跳过、完成操作之后的回调能力！原由关于driver.js, 大家可以了解一下，是一个还算不错的做引导的插件, 但是在生产实践中有一些缺点：库没有提供改变引导面板样式的方法，只有设置元素显隐和遮罩背景的透明度没有提供动态改变引导面板操作按钮显隐及更新按钮文案的能力，只能在初始化时定义好介于以上两个痛点，基于driver.js简单改造一下这个库首先我们看下这个库是怎么使用安装使用使用方法还是比.
2021-05-08 15:59:46
1134
原创 基于puppeteer生成你想要的PDF
整体架构方案原理我们先通过URL传参的方式传给一个容器型页面，在这个页面中通过截取URL参数去请求特定的接口去渲染我们想要的页面内容，在这里我就以百度搜索作为容器型案例（平时在业务开发中，这个容器型页面应该我们自己开发，并将样式调整好），并设定我们的PDF为A4纸张大小。Node服务这里我们选择用Nestjs框架作为我们的服务框架（本教程核心内容与Node框架无关，各位可以根据业务同理自行调整为eggjs或其他框架）首先根据官网的教程搭建我们的框架 Nodejs(>= 10.13.
2020-12-27 15:04:06
917
2
原创 快给你的Vue项目添加一个编辑图片组件吧
快给你的Vue项目添加一个编辑图片组件吧给大家推荐一款功能极其强大的图片编辑插件 tui.image-editor快速体验首选在你的前端项目中安装：npm i tui-image-editor// oryarn add tui-image-editor现在你就去新建一个.vue文件，复制进去下面这段代码：<template> <div id="tui-image-editor"></div></template><scr
2020-11-22 22:24:13
8622
58
原创 uni-app小程序录音上传解决方案（后续更新Taro版)
能力依赖RecorderManager 全局唯一的录音管理器录音功能的要求与限制与当前页面其他音频播放/录音功能互斥是否在录音中状态显示结束/不需要录音时，回收RecorderManager对象材料可以/结束 录音录音中Codeing（结果代码直接看最后）构造一个简单的DOM结构<image @click="recordAction" :src="recordImg" class="record"/>先实现小程序的录音功能import iconRecord f
2020-09-16 19:42:36
2847
3
原创 uni-app（vue）基于InnerAudioContext封装一个基本的音频组件
原由同样的是因为小程序官方不维护audio组件了音频组件的要求与限制点击播放或者暂停显示播放进度及总时长通过图标变化显示当前音频所处状态（暂停/播放/加载中）页面音频更新时刷新组件状态全局有且只有一个音频处于播放状态离开页面之后要自动停止播放并销毁音频实例材料/属性/方法让我们开始吧????uni-app Vue同样的先构造DOM结构<view class="custom-audio"> <image v-if="audioSrc !== undefi
2020-09-16 18:24:38
1878
3
原创 OSS is not defined? 检查检查你依赖的core-js吧
事情是这样的第一天小李是一家互联网公司的前端，有一天他闲来无事看到项目的vue-cli依赖版本还是3.0.0-rc，一股升级依赖的使命感涌上心头他看了看官网的升级文档，这么简单，是时候表演真正的技术了最后发现提示没有core-js，然后就随手npm i core-js -S了，部署上线，搞定下班回家第二天凌晨2点Oh，yeah，今天好运气，老狼请吃鸡，你打电话我不接，你打他有啥用啊~小李猛然惊醒，这是他为产品专设的铃声，一看时间，马萨卡。接到电话：“线上上传不了图片了，你干啥了，昨天
2020-09-11 21:57:08
1649
6
原创 web页面（小程序）列表滑动事件穿透解决方案
缘由昨天测试给我的小程序提了一个bug，说：‘我怎么滑动弹出后的这个列表后面的列表也会跟着滑动啊，这很奇快诶’，我：‘我修复一下’。造成问题的场景是一个数据列表页，通过触底上滑加载数据所以我把页面最外层的view加了一个min-height: '100vh'让这个列表可以自动增加高度进行扩容这个列表页有很多筛选条件或者说是筛选项，我做了一个有背景遮罩层的弹出组件，把这些筛选项塞进去，最外层的view给了一个max-height: 85vh; overflow: scroll；让它也可以在数据很多的
2020-08-06 17:10:46
478
原创 Taro（React+TS）基于InnerAudioContext封装一个基本的音频组件（uni-app（vue）后续更新）
为什么要封装一个音频组件主要因为微信小程序官方的audio不维护了，并且在很多iOS真机上确实也存在点击无法播放，总时长不显示等问题.音频组件的要求与限制点击播放或者暂停显示播放进度及总时长通过图标变化显示当前音频所处状态（暂停/播放/加载中）页面音频更新时刷新组件状态全局有且只有一个音频处于播放状态离开页面之后要自动停止播放并销毁音频实例材料：icon_loading.gificon_playing.pngicon_paused.pngInnerAudioContext提供
2020-07-25 19:18:53
881
原创 关于ES6中Array.fill方法的使用细节
Array.fill的具体定义请看这里这个方法在平时的开发中有事提供了很大的遍历，但是有一个细节容易被忽略，造成貌似看起来很诡异的bug比如你生成了10个内容为{hasMore: false}let states = Array.fill({hasmore: false})你想去动态改变其中某一项的值，你会发现整个数组里面的值全都变化了，这是因为你忽略了这个方法的一个注意事项：如果填充的类型为对象，那么被赋值的是同一个内存地址的对象，而不是深拷贝对象。所以尽量的不要填充对象类型，因为生成的
2020-05-09 17:45:02
542
1
原创 关于使用gsap到项目中报 cannot assign to read only property 'y' of object '#<htmlimageelement>' 的错误的解决办法
环境：Nuxt + gasp 最终打包成静态文件的方式报错具体情况：官方给的案例中是这样引入的import { TimelineLite } from 'gsap'，如果你是用Nuxt在npm run start 或 npm run dev的方式的话 不会有任何问题，但是如果你编译为静态文件也就是npm run generate,这里就会报 cannot assign to read onl...
2020-04-02 12:11:42
539
1
原创 让你重新认识background的威力！ 百倍空间的节省！
首先我们观察一下这张背景图，如果你是一名合格的前端工程师 你回怎么优化呢？初级前端：当然是拖入 tinypng或者ImageOptin 啦，如果你连这两个都不知道，换份工作啦。高级亿 一点的前端：麻烦给我这两者图我并排放搞基 高级工程师：麻烦切我两张这样的图，水顺便给我说下背景颜色（扶眼镜） width 100vw height 100vh background url('1.p...
2020-03-31 14:31:38
167
原创 关于JavaScript中的值传递和引用传递的解释
两大类基本类型原始类型NullUndefinedBooleanNumberStringSymbolBigInt(ES10 Chrome已支持)对象类型Object首先明确一点，ECMAScript中所有的函数的参数都是按值传递的。三个例子带你搞懂为什么都是按值传递的let foo = 'foo';function update(foo) { foo = '...
2019-09-12 11:08:35
152
原创 JavaScript中的this ——《你不知道的JavaScript上》
this到底是什么this是在运行时进行绑定的，不是在编写时绑定，它的上下文取决于函数调用时的各种条件。this的绑定和函数声明位置没有任何关系，只取决于函数的调用方式。当一个函数被调用时，会创建一个活动记录（执行上下文），这个记录会包含函数在哪里被调用（调用栈）、函数的调用方法、传入的参数等信息。this就是记录的其中一个属性，会在函数执行的过程中用到。调用位置寻找函数的调用位置最重要的...
2019-08-06 16:55:58
157
翻译 关于JavaScript中变量提升的细节
函数声明和变量声明都会被提升，但是一个值得注意的细节（这个细节可以出现在有多个“重复”声明的代码中）是函数会首先被提升，然后才是变量foo(); // 1 var foo;function foo() { console.log( 1 );}foo = function() { console.log( 2 );};会输出 1 而不是 2 ！这个代码片段会被引擎理解为如下形...
2019-07-28 21:32:08
127
原创 Object.assign is not a function
Webview页面不显示1、原因分析Uncaught TypeError: Object.assign is not a function报错的原因，我们可以归为，该语法在浏览器中无法识别。Object.assign是ES6的新语法之一。2、解决思路使用babel-polyfill插件解析。3、具体使用(1)安装依赖包npm i -D babel-polyfill(2)webpac...
2019-05-15 11:12:22
3467
原创 Android移动端使用fullPage时input元素的优雅处理方式
// ios上fullPage中的input不会有异常表现，所以只针对Android进行处理// 由于Android上弹出键盘会触发window的resize事件，所以可以通过这个思路解决问题const isAndroid = navigator.userAgent.indexOf('Android') > -1; //android终端 if (isAndroid == tru...
2019-02-19 18:26:50
315
原创 通过JavaScript改变节点样式在不同浏览器平台不同表现（safari）
在safari上，有时会出现例如document.getElementById('id').style = "display: none";这种写法有时会不生效，所以大家最好改为这种写法：document.getElementById('id').style.display = "none";关于一些特殊的属性只需改为camel命名法就好了：font-size fontS...
2018-09-13 15:44:39
227
转载 CSS实现强制不换行、自动换行、强制换行的css代码
CSS实现强制不换行、自动换行、强制换行的css代码 转载：https://www.jb51.net/css/43741.html CSS实现强制不换行、自动换行、强制换行的css代码，需要的朋友可以参考下 强制不换行 p { white-space:nowrap; } 自动换行 p { word-wrap:break-word; word-break:normal; } 强...
2018-08-02 17:40:01
908
原创 MUI批量绑定事件的实际应用场景
简单介绍一下需求获取到多选表单中选中的项，然后将选项生成各个按钮，点击各个按钮弹出不同的模板子页面，编辑子页面的表单内容。这里我选择了5项，所以生成了5个按钮： 具体需求是：生成的几个按钮需要点击对应的按钮弹出对应的子页面填充子页面数据。这时候MUI的批量绑定事件就派上用场了：//模板URL集合var urls = { "植株高度": "../templat...
2018-05-17 18:44:00
1552
2
原创 Node中require，module，exports怎么玩
NodeJs中的模块系统绝对模块：Node通过在其内部node_modules查找到或者Node内置的fs这样的模块。比如你安装你一个pug模块，路径就成了./node_modules/pug,这种情况下就可以直接通过名字require这个模块require('pug') 相对模块：将require指向一个想对工作目录中的JavaScript文件。 暴露API让模块暴露出一个API...
2018-04-09 16:46:32
479
原创 JSON在JavaScript中的进阶用法
JSON在JavaScript中的进阶用法大家在工作中可能用JavaScript处理JSON格式的数据的时候肯定离不开JSON.parse()和JSON.stringify()这两个方法，说一下这两个方法的强大之处总结自《JavaScript 高级程序设计》序列化为JSON字符串var book = { title:"JSON JavaScript", ...
2018-04-06 17:19:18
225
转载 Git添加为远程仓库
转载自https://blog.csdn.net/itguangit/article/details/68615626添加为远程仓库问题描述: 我们在自己的电脑上见了一个项目,比如javaweb项目,当项目比较复杂,便想把它托管到github上,那怎么做呢,别着急本篇文章就是叫你怎样这样做的!!!准备 1.安装git 2.有一个github账号...
2018-04-05 11:12:29
1982
原创 理解JavaScript中的原型对象（二）
组合使用构造函数模式和原型模式的好处构造函数用于定义实例属性，原型用于定义方法和共享的属性，这样的好处就是每个实例都有自己的一份实例属性的副本；同时又共享着对方法的引用；节省了内存；支持向构造函数传递参数。`function Student(name, age, job){ this.name = name; this.age = age; this.job = job; ...
2018-02-13 18:13:17
213
原创 理解JavaScript中的原型对象（一）
每个函数都有一个prototype属性，这个prototype就是通过构造函数创建的对象实例的原型对象。使用原型的好处就是可以让所有对象实例共享它所包含的属性和方法。不用在构造函数中定义对象实例的信息，而是可以将这些信息直接添加到原型对象中。原型对象的性质只要创建了新函数，就会为该函数创建一个prototype属性，这个属性指向函数的原型对象。默认所有原型对象都会有一个...
2018-02-11 22:33:41
260
原创 MUI关于父子页面交互之，子页面调用父页面的方法实现一些功能
业务场景是这样的需要在子页面回到父页面后触发父页面的自定义事件我这里是需要实现一个重新打开这个子页面这里是父页面初始化操作之后定义的自定义事件 window.addEventListener('reTest',function(){ var baseul = document.getElementById('guaceBtn');
2018-01-24 18:20:50
6411
3
原创 Ajax 异步的理解
校验异步是否完成的代码一定要到正确的位置不然会导致主线程执行完了就开始校验异步操作，这种情况往往会出问题。ajax('.....',{ data:{ ... }, datatype:'..', success:function(...){ //这里是异步操作 ...... //校验异步是否完
2018-01-21 12:06:35
306
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人