Web开发

0

Vue项目打包优化 web

上帝之眼发表了文章 • 621 次浏览 • 2023-05-16 08:47 • 来自相关话题

最近做完了一个项目，但是打包之后发现太大了，记录一下优化方案 Element、Vant 等组件库按需加载静态资源使用cdn进行引入开启gzip压缩路由懒加载 #首先看看啥也没做时打包的大小可以使用 webpack-bundle-analyzer 插... ...查看全部

0

Vue 必备的这些操作技巧 web

上帝之眼发表了文章 • 597 次浏览 • 2023-05-16 08:45 • 来自相关话题

🎈 键盘事件在 js 中我们通常通过绑定一个事件，去获取按键的编码，再通过 event 中的 keyCode 属性去获得编码如果我们需要实现固定的键才能触发事件时就需要不断的判断，其实很麻烦 let button = document.querySel... ...查看全部

0

10个超级实用的Set、Map使用技巧 web

上帝之眼发表了文章 • 559 次浏览 • 2023-05-16 08:42 • 来自相关话题

Set是一种类似于数组的数据结构，但是它的值是唯一的，即Set中的每个值只会出现一次。Set对象的实例可以用于存储任何类型的唯一值，从而使它们非常适用于去重。 Map是一种键值对集合，其中每个键都是唯一的，可以是任何类型，而值则可以是任何类型。Map对象的实例... ...查看全部

0

JS中的高阶函数 web

上帝之眼发表了文章 • 628 次浏览 • 2023-05-15 09:09 • 来自相关话题

JavaScript中的高阶函数是指可以接受其他函数作为参数或者返回一个函数作为结果的函数。这种函数在函数式编程范式中特别常见，允许用一种更抽象、更灵活的方式处理代码。在JavaScript中，函数可以像其他数据类型一样被传递和操作。具体来说，高阶函数可以... ...查看全部

0

函数实现单例模式 web

上帝之眼发表了文章 • 545 次浏览 • 2023-05-15 09:07 • 来自相关话题

单例模式一般在前端实现单例模式，大多数都会使用类去实现，因为类的实现，看起来比较简单，下面是一个简单的例子。 class Foo { static instance; static init() { if (!this.instance) t... ...查看全部

0

小程序轮播图的高度如何与图片高度保持一致 web

上帝之眼发表了文章 • 585 次浏览 • 2023-05-15 09:04 • 来自相关话题

一、存在现象在原生小程序中，我们从服务器获取轮播图的数据，这些图片的数据都是有一定宽高的，我们需要去适配这些图片在不同手机上显示时的宽高，不然的话，在不同的设备上就会不同的效果，也就出现了所谓的bug，如下案例：这是在iPhone Xr上的显示效果... ...查看全部

0

CSS小技巧之圆形虚线边框 web

上帝之眼发表了文章 • 674 次浏览 • 2023-05-15 09:01 • 来自相关话题

虚线相信大家日常都用的比较多，常见的用法就是使用 border-style 控制不同的样式，比如设置如下边框代码： border-style: dotted dashed solid double; 这将设置顶部的边框样式为点状，右边的边框样式为虚线，底部的... ...查看全部

0

我竟然完美地用js实现默认的文本框粘贴事件 web

上帝之眼发表了文章 • 573 次浏览 • 2023-05-15 09:00 • 来自相关话题

前言：本文实际是用js移动控制光标的位置！解决了网上没有可靠教程的现状废话连篇默认情况对一个文本框粘贴，应该会有这样的功能：粘贴文本后，光标不会回到所有文本的最后位置，而是在粘贴的文本之后将选中的文字替换成粘贴的文本但是由于需求，我们需要拦截粘... ...查看全部

0

不一样的深拷贝 web

上帝之眼发表了文章 • 589 次浏览 • 2023-05-12 08:42 • 来自相关话题

对于深拷贝这个概念在面试中时常被提起，面试官可能让你实现深拷贝需要考虑那些因素，或者直接让你手写封装一个深拷贝，那么今天就和大家探讨一下一个让面试官感到牛逼的深拷贝， 1.思考众所周知普通的数据类型是值存储，而复杂类型是通过开辟内存空间来存储数据的，我们通过... ...查看全部

0

简单理解Vue的data为啥只能是函数 web

上帝之眼发表了文章 • 535 次浏览 • 2023-05-12 08:41 • 来自相关话题

前言在学习vue的时候vue2只有在组件中严格要求data必须是一个函数，而在普通vue实例中，data可以是一个对象，但是在vue3出现后data必须一个函数，当时看着官方文档说的是好像是对象的引用问题，但是内部原理却不是很了解，今天通过一个简单的例子来说... ...查看全部

0

javascript实现动态分页 web

上帝之眼发表了文章 • 513 次浏览 • 2023-05-12 08:39 • 来自相关话题

之前分页都是使用框架给出的分页类来实现分页，当然，体验可能不是那么好。这次在写YII2.0框架的后台管理系统的小例子的时候，我这也尝试了一下前后分离，用ajax来实现分页跳转。那么前端的页码绘制及跳页等其他的样式，都是由JavaScript根据后台返回的数... ...查看全部

0

差两个像素让我很难受，这问题绝不允许留到明年！ web

上帝之眼发表了文章 • 546 次浏览 • 2023-05-12 08:38 • 来自相关话题

2022年8月8日，linxiang07 同学给我们的 Vue DevUI 提了一个 Issue： #1199 Button/Search/Input/Select等支持设置size的组件标准不统一，并且认真梳理了现有支持size属性的组件列表和每个组件大中小... ...查看全部

0

vue单页面应用部署配置 web

上帝之眼发表了文章 • 549 次浏览 • 2023-05-12 08:38 • 来自相关话题

前端 Vue是一款非常流行的JavaScript框架，它提供了一套高效、灵活、易于使用的前端开发工具。在实际开发中，我们通常会使用Vue来构建单页面应用（SPA），并将其部署到服务器上以便用户访问。本篇博客将介绍如何进行Vue单页面应用的部署配置。构建生产版... ...查看全部

0

css卡片悬停 web

上帝之眼发表了文章 • 499 次浏览 • 2023-05-12 08:37 • 来自相关话题

前言今天分享一个简单的卡片鼠标悬停动画，初始显示一张图片，当鼠标移至卡片上方时，显示文字，先来看看预览效果：代码实现页面布局 <div class="view view-first"> <img src="./images... ...查看全部

0

正则什么的，你让我写，我会难受，你让我用，真香！ web

上帝之眼发表了文章 • 528 次浏览 • 2023-05-11 08:55 • 来自相关话题

哈哈，如题所说，对于很多人来说写正则就是”兰德里的折磨“吧。如果不是有需求频繁要用，根本就不会想着学它。(?!^)(?=(\\d{3})+ 这种就跟外星文一样。但你要说是用它，它又真的好用。用来做做校验、做做字符串提取、做做变形啥的，真不错。最好的就是能 ... ...查看全部

0

css实现弧边选项卡 web

上帝之眼发表了文章 • 597 次浏览 • 2023-05-11 08:52 • 来自相关话题

实现效果实现方式主要使用了 radial-gradient transform perspective rotateX transform-origin 等属性思路只需要想清楚如何实现弧形三角即可。这里还是借助了渐变 -- 径向渐变 ... ...查看全部

0

极致舒适的Vue页面保活方案 web

上帝之眼发表了文章 • 525 次浏览 • 2023-05-11 08:51 • 来自相关话题

为了让页面保活更加稳定，你们是怎么做的？我用一行配置实现了 Vue页面保活是指在用户离开当前页面后，可以在返回时恢复上一次浏览页面的状态。这种技术可以让用户享受更加流畅自然的浏览体验，而不会被繁琐的操作打扰。为什么需要页面保活？页面保活可以提高用户... ...查看全部

0

vue 递归组件作用域插槽 web

上帝之眼发表了文章 • 597 次浏览 • 2023-05-11 08:49 • 来自相关话题

开头这里主要是根据 vue 递归组件作用域插槽代码的理解和el-tree是如何写的。代码父组件 <template> <div> <Tree :data="data"> <templa... ...查看全部

0

不用刷新！用户无感升级，解决前端部署最后的问题 web

上帝之眼发表了文章 • 775 次浏览 • 2023-05-11 08:49 • 来自相关话题

前端部署需要用户刷新才能继续使用，一直是一个老大难的用户体验问题。本文将围绕这个问题进行讲解，揭晓问题发生的原因及解决思路。一、背景网站发版过程中，用户可在浏览web页面时，可能会导致页面无法加载对应的资源，导致出现点击无反应的情况，严重影响用户体验。二... ...查看全部

0

VUE中常用的4种高级方法 web

上帝之眼发表了文章 • 537 次浏览 • 2023-05-11 08:48 • 来自相关话题

1. provide/inject provide/inject 是 Vue.js 中用于跨组件传递数据的一种高级技术，它可以将数据注入到一个组件中，然后让它的所有子孙组件都可以访问到这个数据。通常情况下，我们在父组件中使用 provide 来提供数据，然后在... ...查看全部

0

记一次不规范使用key引发的惨案 web

上帝之眼发表了文章 • 566 次浏览 • 2023-05-10 08:54 • 来自相关话题

前言平时在使用v-for的时候，一般会要求传入key，有没有像我一样的小伙伴，为了省心，直接传索引index，貌似也没有遇到过什么问题，直到有一天，我遇到一个这样的需求场景在一个下单界面，我需要去商品列表选商品，然后在下单界面遍历显示所选商品，要求后选的... ...查看全部

0

1.6kB 搞定懒加载、无限滚动、精准曝光 web

上帝之眼发表了文章 • 531 次浏览 • 2023-05-10 08:53 • 来自相关话题

上文提到有很多类库在用 IntersectionObserver 实现懒加载，但更精准的描述是，IntersectionObserver 提供了一种异步观察目标元素与根元素（窗口或指定父元素）的交叉状态的能力，这项能力不仅能用来做懒加载，还可以提供无限滚动，精... ...查看全部

0

字节都在用的代码自动生成 web

上帝之眼发表了文章 • 554 次浏览 • 2023-05-10 08:51 • 来自相关话题

背景如果有一份接口定义，前端和后端都能基于此生成相应端的代码，不仅能降低前后端沟通成本，而且还能提升研发效率。字节内部的 RPC 定义主要基于 thrift 实现，thrift 定义了数据结构和函数，那么是否可以用来作为接口定义提供给前端使用呢？如果可以作... ...查看全部

0

前端怎么样限制用户截图？ web

上帝之眼发表了文章 • 588 次浏览 • 2023-05-10 08:48 • 来自相关话题

做后台系统，或者版权比较重视的项目时，产品经常会提出这样的需求：能不能禁止用户截图？有经验的开发不会直接拒绝产品，而是进行引导。先了解初始需求是什么？是内容数据过于敏感，严禁泄漏。还是内容泄漏后，需要溯源追责。不同的需求需要的方案也不同。来看看就限制用户截图... ...查看全部

0

Vue 实现接口进度条 web

上帝之眼发表了文章 • 573 次浏览 • 2023-05-10 08:41 • 来自相关话题

前端在向后端请求信息时，常常需要等待一定的时间才能得到返回结果。为了提高用户体验，可以通过实现一个接口进度条函数来增加页面的交互性和视觉效果。接口响应快 - 效果接口响应慢 - 效果实现思路首先定义一个进度条组件来渲染页面展示效果，组件包含进度条背... ...查看全部

0

Js中异步代码挂起怎么解决？ web

上帝之眼发表了文章 • 528 次浏览 • 2023-05-10 08:40 • 来自相关话题

从下面代码引入问题 function a() { console.log('aa'); } function b() { setTimeout(() => { //异步代码 console.log('bb'); ... ...查看全部

0

JS令人头疼的类型转换 web

上帝之眼发表了文章 • 585 次浏览 • 2023-05-09 09:25 • 来自相关话题

前言 JS中的类型转换常常被人诟病，因为javascript属于弱类型语言，它对于类型的语言没有强制的限定，这对于我们来说是头疼的。不同的类型之间的运算需要先对数据的类型进行转换，在日常开发中我们经常会用到。数据类型基本数据类型 Number（数字） S... ...查看全部

0

节流你会手写吗？ web

上帝之眼发表了文章 • 558 次浏览 • 2023-05-09 09:25 • 来自相关话题

节流在各大面试题中，频繁出现的老油条，节流。啥叫节流呢？节流（throttle）：每次触发定时器后，直到这个定时器结束之前无法再次触发。一般用于可预知的用户行为的优化，比如为scroll事件的回调函数添加定时器。在间隔一段时间执行一次回调的场景有： 1... ...查看全部

0

上传的图片怎么满足我们的审美的呢？开始玩弄css的一些特别属性 object-fit web

上帝之眼发表了文章 • 642 次浏览 • 2023-05-09 09:24 • 来自相关话题

今天开始玩弄css的一些比较冷门但是可能比较实用的属性 object-fit。首先让我们先看看一张效果图这两张自拍，你个人觉得哪张比较好看,不用想都知道第一张好看啦，我们肯定希望我们上传的图片都是以第一种图片当头像啊，而不是第二种扁扁的。那么这样的效果是怎... ...查看全部

0

这些数组reduce的妙用，你都会吗？ web

上帝之眼发表了文章 • 577 次浏览 • 2023-05-09 09:23 • 来自相关话题

reduce 是 JavaScript 数组对象上的一个高阶函数，它可以用来迭代数组中的所有元素，并返回一个单一的值。其常用的语法为： array.reduce(callback[, initialValue]) 其中，callback 是一个回调函数，它接... ...查看全部

0

都这么多年了，作为一个前端的你是不是连Symbol都不会用 web

上帝之眼发表了文章 • 567 次浏览 • 2023-05-09 09:23 • 来自相关话题

Symbol是JavaScript中的原始数据类型之一，它表示一个唯一的、不可变的值，通常用作对象属性的键值。由于Symbol值是唯一的，因此可以防止对象属性被意外地覆盖或修改。以下是Symbol的方法和属性整理：属性 Symbol.length Symbo... ...查看全部

0

实现tabs圆角及反圆角效果 web

上帝之眼发表了文章 • 905 次浏览 • 2023-05-09 09:22 • 来自相关话题

直接上最终效果基本页面结构 <div class="tab-list"> <div v-for="tab in tabList" :key="tab.id" ... ...查看全部

0

被问了无数次的函数防抖与函数节流，这次你应该学会了吧 web

上帝之眼发表了文章 • 540 次浏览 • 2023-05-08 08:55 • 来自相关话题

前言本篇文章内容，或许早已是烂大街的解读文章。不过参加几场面试下来发现，不少伙伴们还是似懂非懂地栽倒在（～面试官～）深意的笑容之下，权当温故知新吧。文章从防抖、节流的原理说起再结合实际开发的场景，分别逐步实现完整的防抖和节流函数。函数防抖原理：当持续... ...查看全部

0

跳舞的小人，鼠标跟随事件 web

上帝之眼发表了文章 • 596 次浏览 • 2023-05-08 08:51 • 来自相关话题

鼠标跟随事件在这里，我本来想弄一个灰太狼抓羊的动画效果，就是将我们的鼠标logo替换成一只羊的照片，然后后面跟随着一只狼，设置了cursor: url('./01.gif'), auto这个属性，但是好像没有成功，好像是兼容问题。于是找了一张给会动的gif。... ...查看全部

0

React 你是真的骚啊，一个组件就有这么多个设计模式🙄🙄🙄 web

上帝之眼发表了文章 • 555 次浏览 • 2023-05-08 08:49 • 来自相关话题

React 真的是太灵活了,写它就感觉像是在写原生 JavaScript 一样,一个功能你可以有多种实现方式,例如你要实现动态样式,只要你愿意去做,你会有很多种解决方案,这可能也就是 React 会比 Vue 相对来说比较难一点的原因,这或许也就是这么喜欢 R... ...查看全部

0

别再删到手抽筋！JS中删除数组元素指南 web

上帝之眼发表了文章 • 585 次浏览 • 2023-05-08 08:49 • 来自相关话题

作为一名前端开发工程师，我们经常需要在 JavaScript 中操作数组，其中比较常见的操作便是对数组进行元素的添加、删除和修改。在这篇文章中，我会详细介绍JS中所有删除数组元素的方法。删除数组元素之splice() splice()方法可以向数组任意位置插... ...查看全部

0

移动端旅行网站页面 web

上帝之眼发表了文章 • 625 次浏览 • 2023-05-06 08:51 • 来自相关话题

一、布局 1、首页（1）头部 iconfont的使用和代码优化 iconfont.css中修改路径引入iconfont.css import text-align: center（文字水平居中）优化：变量复用：src/assets/styles/... ...查看全部

0

快看一看，你是不是这样使用的vscode web

上帝之眼发表了文章 • 604 次浏览 • 2023-05-06 08:49 • 来自相关话题

俗话说：“工欲善其事，必先利其器”。想要高效的编写代码，自然要先熟练的使用一款工具。 vscode设置简体中文使用国外的工具，头等大事自然是必不可少的汉化。按快捷键 ‘ctrl+shift+p’，在顶部出现的输入框输入‘configure language... ...查看全部

0

手写一个类似博客的个人主页 css动画效果多 web

上帝之眼发表了文章 • 542 次浏览 • 2023-05-06 08:48 • 来自相关话题

手写一个好看的个人主页效果图文字，图片加上各种动画显示，使页面更加美观。然后给头像也加上了一个动画，使头像实现一个一直在上下浮动的效果。媒体组件logo，添加事件hover,置顶会变颜色。按钮添加active激活样式。最好打开码上掘金看效果图，更明显，... ...查看全部

0

css水滴登录界面 web

上帝之眼发表了文章 • 588 次浏览 • 2023-05-06 08:44 • 来自相关话题

前言今天我们来分享一款非常有趣的登录界面，它使用HTML和CSS制作，具有动态的水波纹效果，让用户在登录时感受到了一股清凉之感。基本html框架 <!DOCTYPE html> <html lang="en"> <head&... ...查看全部

0

可视化大屏：vue-autofit 一行搞定自适应 web

上帝之眼发表了文章 • 832 次浏览 • 2023-05-05 08:47 • 来自相关话题

可视化大屏适配/自适应现状可视化大屏的适配是一个老生常谈的话题了，现在其实不乏一些大佬开源的自适应插件、工具但是我为什么还要重复造轮子呢？因为目前市面上适配工具每一个都无法做到完美的效果，做出来的东西都差不多，最终实现效果都逃不出白边的手掌心，可以解决白边问... ...查看全部

0

上手 Vue 新的状态管理 Pinia，一篇文章就够了 web

上帝之眼发表了文章 • 647 次浏览 • 2023-05-05 08:46 • 来自相关话题

Vuex 作为一个老牌 Vue 状态管理库，大家都很熟悉了 Pinia 是 Vue.js 团队成员专门为 Vue 开发的一个全新的状态管理库，并且已经被纳入官方 github 为什么有 Vuex 了还要再开发一个 Pinia ？先来一张图，看下当时对于 Vu... ...查看全部

0

怎么实现微信扫码登录 web

上帝之眼发表了文章 • 667 次浏览 • 2023-05-04 08:38 • 来自相关话题

最近在给企业健康管理系统做一个微信扫码登录的功能，借此机会总结下微信登录这个技术点。网站应用微信登录是基于 OAuth2.0 协议标准构建的。OAuth 协议规范了五种授权模式，Authorization Code、PKCE、Client CreDentia... ...查看全部

0

微信小程序背景音频开发 web

上帝之眼发表了文章 • 636 次浏览 • 2023-05-04 08:29 • 来自相关话题

最近又新开发了一款听书类的小程序，现在一阶段已基本完工。代码已开源，链接在文章结尾。欢迎star。本期给大家讲解一下关于背景音频开发的一些基本业务场景和踩坑。 1.需求拆解先来看一张图：从图中可以看到，基本的业务包含以下几个部分播放暂停切换上一... ...查看全部

0

从解决一个页面请求太多的问题开始的 web

上帝之眼发表了文章 • 533 次浏览 • 2023-04-28 08:59 • 来自相关话题

一、写在前面上周测试同事给我提了个bug。他说在公司运营系统某个编辑页面中，一个post请求调用太多次了，想让我看看怎么回事。我刚听他讲这个事情时心里有点不屑一顾，觉得能有多少次啊，大惊小怪的。然而当我在测试环境中打开那个页面一看，直呼好家伙！这个页面... ...查看全部

0

简述 js 的代码整洁之道 web

上帝之眼发表了文章 • 532 次浏览 • 2023-04-28 08:57 • 来自相关话题

前言为什么代码要整洁？代码质量与整洁度成正比。有的团队在赶工期的时候，不注重代码的整洁，代码写的越来越糟糕，项目越来越混乱，生产力也跟着下降，那就必须找更多人来提高生产力，开发成本越来越高。整洁的代码是怎样的？清晰表达意图、消除重复、简单抽象、能通过测... ...查看全部

0

ES6 Class类，就是构造函数语法糖？ web

上帝之眼发表了文章 • 521 次浏览 • 2023-04-28 08:56 • 来自相关话题

一、Class 类可以看作是构造函数的语法糖 ES6引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。constructor()方法，这就是构造方法，而this关键字则代表实例对象。类的所有方法都定义在类的prototype... ...查看全部

0

深拷贝的终极实现 web

上帝之眼发表了文章 • 572 次浏览 • 2023-04-28 08:56 • 来自相关话题

引子通过本文可以学习到深拷贝的三种写法的实现思路与性能差异首先，我们要理解什么是深拷贝，以及为什么要实现深拷贝深拷贝是什么通俗来讲，深拷贝就是深层的拷贝一个变量值；为什么要实现深拷贝因为在拷贝引用值时，由于复制一个变量只是将其指向要复制变量的引... ...查看全部

0

关于前端实现上传文件这个功能，我只能说so easy！ web

上帝之眼发表了文章 • 595 次浏览 • 2023-04-28 08:52 • 来自相关话题

前言在web前端开发中，文件上传属于很常见的功能，不论是图片、还是文档等等资源，或多或少会有上传的需求。一般都是从添加文件开始，然后读取文件信息，再通过一定的方式将文件上传到服务器上，以供后续展示或下载使用。下面简单介绍几种上传的方法简单文件上传文件上... ...查看全部

0

十个高阶Javascript知识及用法 web

上帝之眼发表了文章 • 549 次浏览 • 2023-04-27 08:52 • 来自相关话题

hi，今天给大家整理了十个Javascript的高级知识，希望对你有所帮助 1. 高阶函数高阶函数是指接受一个或多个函数作为参数，并/或者返回一个函数的函数。这种技巧可以用于将函数组合起来，实现函数的复用。 // 高阶函数示例：将一个数组中的所有元素相加 ... ...查看全部

通知设置 新通知

热门话题

通知设置新通知