Web开发

0

❤️谈谈grid布局(细读必有收获) CSS3 性能优化

马师傅发表了文章 • 1322 次浏览 • 2021-10-10 23:31 • 来自相关话题

grid布局的理念是把网页划分成一个一个网格组合成不同样式的布局，再通过对网格进行内容填充，组成一个网页。通过一下这个案例了解grid的基本概念👇👇 经典九宫格布局： 🚨关键点🚨: 容器：需通过display：grid设置为grid容器,容器中包含所有i... ...查看全部

0

构建大型前端业务项目的一点经验 Javascript 性能优化

马师傅发表了文章 • 985 次浏览 • 2021-10-10 23:18 • 来自相关话题

目前工作中接手的几个项目都是 B端 PC 项目，业务逻辑都比较复杂，并且代码历史较久，在日常的维护中经常会遇到想摊手的技术问题，发现问题、解决问题、避免再次出现同样的问题，既是项目可持续维护的因素之一，也是个人工作经验积累的一个过程本文可当做接手前端新项... ...查看全部

0

npm install之后发生了什么前端面试 性能优化

马师傅发表了文章 • 1365 次浏览 • 2021-10-09 23:41 • 来自相关话题

下载项目后，执行的第一个命令行一般都是 npm install 。在这个过程中可能一帆风顺，也可能遇到大大小小的报错，有时候花点时间各种搜索能解决，可下次遇到还是一头雾水的上网找各种方案尝试解决报错。那么，你清楚当你输入 npm instal ，按下... ...查看全部

0

进来聊聊！Vue 和 React 大杂烩！ vue react

马师傅发表了文章 • 907 次浏览 • 2021-10-09 23:38 • 来自相关话题

相信应用层面的知识，大家都比较熟悉了，实际 React 用来实现业务对于熟悉 Vue 的开发人员来说也不是难事，今天我们简单的了解一下 React 和 Vue 。（瞎聊聊）先来两张源码编译图对比一下：由于每个步骤能涉及的东西太多，所以本篇就简单聊一下他... ...查看全部

0

前端必学的flip动画思想前端面试 CSS3

马师傅发表了文章 • 1520 次浏览 • 2021-10-09 23:34 • 来自相关话题

前言相信大家在用Vue的时候，一定用过他的transition-group组件。在该组件下方可以看到这么一句话这个看起来很神奇，内部的实现，Vue 使用了一个叫 FLIP 简单的动画队列，使用 transforms 将元素从之前的位置... ...查看全部

0

什么是 Promise.allSettled() ！新手老手都要会？前端面试 Javascript

马师傅发表了文章 • 859 次浏览 • 2021-10-09 23:31 • 来自相关话题

Promise.allSettled() 方法返回一个在所有给定的 promise 都已经 fulfilled 或 rejected 后的 promise，并带有一个对象数组，每个对象表示对应的 promise 结果。接着，我们来看看 Promise.all... ...查看全部

0

说一说Web端侧AI 前端面试 Javascript

马师傅发表了文章 • 964 次浏览 • 2021-10-09 23:25 • 来自相关话题

前言 AI 正在不断拓展前端的技术边界，算法的加持也为前端研发注入了全新的力量。本文为大家介绍什么是端智能，端智能的应用场景以及 Web 端侧实现 AI 的基本原理概念。什么是端智能首先，回顾一个AI应用的开发流程，具体步骤包括了数据的采集与预处理模型的... ...查看全部

0

可恶，又学到了一点 CSS Javascript CSS3

马师傅发表了文章 • 778 次浏览 • 2021-10-08 22:57 • 来自相关话题

昨天在做笔记整理的时候，看到一个面试题，如何实现水平垂直居中，虽然心里有一点点数，但是看到好几种答案，还是决定亲自动手验证一番，这验证一开始就出现了小问题，接着就像捅了个马蜂窝一样，各种疑惑扑面而来，而我又想弄清楚，折腾大半天，终于把问题锁定到了 line-h... ...查看全部

0

Vue中前端实现生成 PDF 并下载 Javascript vue

马师傅发表了文章 • 935 次浏览 • 2021-10-08 22:53 • 来自相关话题

思路：通过 html2canvas 将 HTML 页面转换成图片，然后再通过 jspdf 将图片的 base64 生成为 pdf 文件。 1. 安装及引入 // 将页面 html 转换成图片 npm install html2canvas --save ... ...查看全部

0

你还在为pc端适配而烦恼吗？相信我，看了之后就不烦恼了 Javascript CSS3

马师傅发表了文章 • 2147 次浏览 • 2021-10-08 22:48 • 来自相关话题

作为一名前端开发者，你有没有遇到过这种头痛的事情。每次开发pc端的网页时，不管是官网还是管理后台，UI设计师都是按照1920*1080（16:9）的比例来给你提供设计稿的，导致你画页面的时候。会出现两种情况。第一种按照设计师提供的设计稿比例画页面的话，导致在不... ...查看全部

0

你会用ES6，那倒是用啊！ Javascript

马师傅发表了文章 • 823 次浏览 • 2021-10-08 22:43 • 来自相关话题

不是标题党，这是一位leader在一次代码评审会对小组成员发出的“怒吼”，原因是在代码评审中发现很多地方还是采用ES5的写法，也不是说用ES5写法不行，会有BUG，只是造成代码量增多，可读性变差而已。恰好，这位leader有代码洁癖，面对3~5年经验的成员，... ...查看全部

0

国庆假期，整整七天，我使用Flutter终于做出了即时通信！！!? Flutter

马师傅发表了文章 • 1064 次浏览 • 2021-10-08 22:36 • 来自相关话题

前言：在这个假期，我完成了一个小Demo，Flutter 与 Springboot 进行websocket的通讯，为啥想要去做这个Demo呢，主要是在各大平台以及google搜索后发现，没有一个详细的例子来教大家进行一对一、一对多的通讯，大多数都是教你怎么连接... ...查看全部

0

设计模式-工厂方法模式前端面试 Javascript

马师傅发表了文章 • 847 次浏览 • 2021-10-07 21:29 • 来自相关话题

工厂方法模式(Factory Method)又称为多态性工厂模式，其核心不再像简单工厂模式那样负责所有的子类的创建，而是将具体的创建工作交给子类去完成在前文已经介绍简单工厂模式时，写了如下代码： /** * type：角色类型 - 管理员、员工 * n... ...查看全部

0

设计模式-适配器模式 Javascript

马师傅发表了文章 • 842 次浏览 • 2021-10-07 21:19 • 来自相关话题

适配器模式又称为包装器模式，将一个类的接口转化为用户需要的另外一个接口，主要是为了解决对象之间接口不兼容的问题，比如随着业务迭代升级出现了旧的接口与心的接口不兼容，这个时候不可能强制使用旧接口的用户去升级，而是在中间加一个适配器进行转换，让旧接口的使用者无感使... ...查看全部

0

两个 Node.js 进程如何通信？ node.js

马师傅发表了文章 • 823 次浏览 • 2021-10-07 21:14 • 来自相关话题

两个 Node.js 进程之间如何进行通信呢？这里要分两种场景：不同电脑上的两个 Node.js 进程间通信同一台电脑上两个 Node.js 进程间通信对于第一种场景，通常使用 TCP 或 HTTP 进行通信，而对于第二种场景，又分为两种子场景： ... ...查看全部

0

还在为后端提供接口慢而发愁？试试这个，自己动手丰衣足食性能优化

马师傅发表了文章 • 904 次浏览 • 2021-10-07 21:09 • 来自相关话题

介绍本期给大家介绍一个可以随机模拟数据的库——mock.js，它是一个模拟数据生成器，帮助前端开发和原型与后端进程分离，减少一些开发时联调测试成本。它支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等数据的模拟。而且不需要修改既有代码，就可以拦... ...查看全部

0

?十分钟学会打字动画前端面试 CSS3

马师傅发表了文章 • 815 次浏览 • 2021-10-07 21:05 • 来自相关话题

前言背景知识：基本的CSS动画，逐帧动画，闪烁效果有些时候，我们希望一段文本中的字符逐个显现，模拟出一种打字的效果。这个效果在技术类网站中尤为流行，用等宽字体可以营造出一种终端命令行的感觉。如果使用得当，它确实可以让整个网页的设计感提升一个档次。这篇... ...查看全部

0

当面试官问Webpack的时候他想知道什么前端面试 webpack

马师傅发表了文章 • 821 次浏览 • 2021-09-28 22:24 • 来自相关话题

前言在前端工程化日趋复杂的今天，模块打包工具在我们的开发中起到了越来越重要的作用，其中webpack就是最热门的打包工具之一。说到webpack，可能很多小伙伴会觉得既熟悉又陌生，熟悉是因为几乎在每一个项目中我们都会用上它，又因为webpack复杂的配置和... ...查看全部

0

面试官，我实现了一个 Chrome Devtools 前端面试

马师傅发表了文章 • 845 次浏览 • 2021-09-28 22:22 • 来自相关话题

网页会加载资源、运行 JS、渲染界面、存储数据等，我们开发时怎么看到执行的状态呢？用调试工具 chrome devtools。它支持 dom 调试、JS debugger、本地存储的展示、运行时间的 profile 等。 Node.js 也是同样，不过它只支... ...查看全部

0

10分钟教你自动化部署前端项目前端面试 Javascript

马师傅发表了文章 • 889 次浏览 • 2021-09-28 22:20 • 来自相关话题

背景前几年，作为小白的我，只需要安安心心写前端代码就行，前端代码部署的事情直接交给运维人员去部署，部署到哪台服务器，这些都不需要我们关心。突然，运维人员离职了，没办法，业务需要又起了一个项目，没有运维人员的我们只能每次本地编译完毕，然后手动同步到服务器目录... ...查看全部

0

让小脚本帮你做哪些枯燥无味的git提交吧前端面试 Git

马师傅发表了文章 • 884 次浏览 • 2021-09-28 22:18 • 来自相关话题

睡前小故事在某次开会的时候，组长说每次做完一个小需求和修改一个bug都要提交一个commit，下班前要将本地分支推送到远程仓库。没commit的，没push的都扣当月的绩效...,虽然觉得这样很烦躁，但是谁让自己是打工崽呢，又不敢说什么，只能照着做了，还能... ...查看全部

0

关于compute你不知道的骚操作 vue Javascript

马师傅发表了文章 • 1008 次浏览 • 2021-09-28 22:14 • 来自相关话题

compute的的用法首先你要知道computed的用法，在官网中只是简单的介绍了它的缓存作用，根据双向绑定的数据通过计算返回值，当被依赖的值发生改变的时候就会触发重新计算很多人就只知道这个只能用来计算值并不能作为其他的用法，其实根据它依赖双向绑定的数... ...查看全部

0

别再用generator模拟async啦，它还有很酷的用法 Javascript

马师傅发表了文章 • 842 次浏览 • 2021-09-28 22:12 • 来自相关话题

前一阵在某个技术群里发现有人在讨论JavaScript的generator，不少人一提generator就会把它跟异步联系在一起，我认为这是一个很深的误解。 generator 究竟跟异步是什么关系？以co为代表的一批早期框架用它来模拟async/await，... ...查看全部

1

能做成关注系统不 uniapp

贡献

smysmy 回复了问题 • 2 人关注 • 937 次浏览 • 2021-09-28 18:23 • 来自相关话题

0

JavaScript 中有了Object 为什么还需要 Map 呢 Javascript

马师傅发表了文章 • 906 次浏览 • 2021-09-27 00:16 • 来自相关话题

众所周知，Map 是用于存储键值对的，而 JavaScript 中对象也是由键值对组成的，那么 Map 存在的意义是什么呢？别把对象当 Map 1、可能通过原型链访问到未定义的属性假设现有场景，开发一个网站，需要提供日语、汉语、韩语三种语言，我们可以定义一... ...查看全部

0

CSS实现瀑布流的两种方式 CSS3

马师傅发表了文章 • 910 次浏览 • 2021-09-27 00:13 • 来自相关话题

瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式。在手机端进行多图片展示时会经常用到。即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。那么瀑布流式布局有哪些实现方式呢？ c... ...查看全部

0

学透CSS-:focus-within 仿掘金登录小人动画 CSS3

马师傅发表了文章 • 1161 次浏览 • 2021-09-27 00:11 • 来自相关话题

兼容性作为:focus的好兄弟，在兼容性上也还是不错的。主流的浏览器基本都已经支持这个属性。 :focus-within 和 :focus 的区 :focus-within 表示一个元素自身获取焦点，以及子元素获取焦点后的效果。 :focus 表... ...查看全部

0

给女友写的，每日自动推送暖心消息 Javascript

马师傅发表了文章 • 1442 次浏览 • 2021-09-27 00:08 • 来自相关话题

起因是因为刷到一则给女友发的每日提醒消息的沸点，每天自动定时发送消息，感觉很有趣，刚好最近在学习egg，里面有用到定时任务，于是决定尝试一把 egg 实现环境准备操作系统：支持 macOS，Linux，Windows 运行环境：建议选择 node LTS ... ...查看全部

0

如何小程序上绘制树状图微信小程序

马师傅发表了文章 • 1697 次浏览 • 2021-09-27 00:03 • 来自相关话题

前言现有的移动端图可视化技术有Antv旗下的F2、F6。F2主要专注于数据分析的统计图，而F6专注与各种场景的关系图。两者各有侧重。F6 是一个简单、易用、完备的移动端图可视化引擎，它在高定制能力的基础上，提供了一系列设计优雅、便于使用的图可视化解决方案。能... ...查看全部

0

[JS基础回顾] 闭包又双叒叕来~~~ Javascript

马师傅发表了文章 • 808 次浏览 • 2021-09-25 23:24 • 来自相关话题

闭包是基于词法作用域书写代码时所产生的自然结果，你甚至不需要为了利用它们而有意识地创建闭包 MDN的解释闭包是函数和声明该函数的词法环境的组合。 Tips: 词法作用域和词法环境 1,此时函数还没被执行,所以使用的是词法作用域即静态作用域.2, 此时函... ...查看全部

0

JS箭头函数什么时候用，什么时候不能用，我总结出了4点 Javascript

马师傅发表了文章 • 1045 次浏览 • 2021-09-25 23:18 • 来自相关话题

箭头函数的定义箭头函数定义包括一个参数列表（零个或多个参数，如果参数个数不是一个的话要用 ( .. ) 包围起来），然后是标识 =>，函数体放在最后。箭头函数与普通函数的区别箭头函数 let arrowSum = (a, b) => { ... ...查看全部

0

?Map和Set巧解力扣算法问题 Javascript

马师傅发表了文章 • 802 次浏览 • 2021-09-25 23:15 • 来自相关话题

问题一：什么是Map和Set？ ES6以前，在JavaScript中实现“键/值”式存储可以使用Object来方便高效的完成，也就是使用对象属性作为键，再使用属性来引用值，像下面这样 let student = { name: '啊呜', se... ...查看全部

0

深入理解 redux 数据流和异步过程管理 react

马师傅发表了文章 • 806 次浏览 • 2021-09-25 23:12 • 来自相关话题

前端框架的数据流前端框架实现了数据驱动视图变化的功能，我们用 template 或者 jsx 描述好了数据和视图的绑定关系，然后就只需要关心数据的管理了。数据在组件和组件之间、组件和全局 store 之间传递，叫做前端框架的数据流。一般来说，除了某部分状... ...查看全部

0

【JavaScript】async await 更优雅的错误处理 Javascript

马师傅发表了文章 • 967 次浏览 • 2021-09-25 23:08 • 来自相关话题

背景团队来了新的小伙伴，发现我们的团队代码规范中，要给 async await 添加 try...catch。他感觉很疑惑，假如有很多个(不集中)，那不是要加很多个地方？那不是很不优雅？为什么要错误处理 JavaScript 是一个单线程的语言，假如不加... ...查看全部

0

你知道如何批量创建一批邮箱吗？ Javascript

马师傅发表了文章 • 1201 次浏览 • 2021-09-23 19:02 • 来自相关话题

1.前期准备搭建邮件服务器需要一些“基础建设”，包括如下一台服务器推荐centos 一个域名 1.1 配置细节邮件服务器是通过SMTP协议进行通信，为了让服务器能够成功接收邮件，我们需要打开25这个端口，并允许访问25端口。同时如果你需要使用像类似... ...查看全部

0

JavaScript深浅拷贝的实现 Javascript

马师傅发表了文章 • 816 次浏览 • 2021-09-23 18:57 • 来自相关话题

前置知识对象类型在赋值的过程中其实是复制了地址，从而会导致改变了一方其他也都被改变的情况 let a = { age: 1 } let b = a a.age = 2 console.log(b.a... ...查看全部

0

为什么 Vue2 this 能够直接获取到 data 和 methods ? 源码揭秘！ vue 前端面试

马师傅发表了文章 • 905 次浏览 • 2021-09-23 18:53 • 来自相关话题

1. 前言写相对很难的源码，耗费了自己的时间和精力，也没收获多少阅读点赞，其实是一件挺受打击的事情。从阅读量和读者受益方面来看，不能促进作者持续输出文章。所以转变思路，写一些相对通俗易懂的文章。其实源码也不是想象的那么难，至少有很多看得懂。歌德曾说：读一... ...查看全部

0

webpack-dev-server 从入门到实战前端面试 webpack

马师傅发表了文章 • 1007 次浏览 • 2021-09-23 18:49 • 来自相关话题

古有云：“工欲善其事，必先利其器”。作为一个前端开发，搭建一个便捷的开发环境，将会为我们的开发工作带来极大的效率提升。而Webpack作为如今前端工程打包必不可少的工具，很多人却不知道从Webpack 4开始提供的DevServer功能。让我们一起来学习下吧... ...查看全部

0

JavaScript实现2048小游戏，我终于赢了一把 Javascript

马师傅发表了文章 • 815 次浏览 • 2021-09-22 23:07 • 来自相关话题

效果图实现思路编写页面和画布代码。绘制背景。绘制好全部卡片。随机生成一个卡片（2或者4）。键盘事件监听（上、下、左、右键监听）。根据键盘的方向，处理数字的移动合并。加入成功、失败判定。处理其他收尾工作。代码实现编写页面代码 <... ...查看全部

0

js 实现以鼠标位置为中心滚轮缩放图片前端面试 Javascript

马师傅发表了文章 • 2359 次浏览 • 2021-09-22 23:03 • 来自相关话题

前言不知道各位前端小伙伴蓝湖使用的多不多，反正我是经常在用，ui将原型图设计好后上传至蓝湖，前端开发人人员就可以开始静态页面的的编写了。对于页面细节看的不是很清楚可以使用滚轮缩放后再拖拽查看，还是很方便的。于是就花了点时间研究了一下。今天分享给大家。实现 ... ...查看全部

0

深入浅出虚拟 DOM 和 Diff 算法，及 Vue2 与 Vue3 中的区别 vue

马师傅发表了文章 • 1394 次浏览 • 2021-09-22 23:01 • 来自相关话题

因为 Diff 算法，计算的就是虚拟 DOM 的差异，所以先铺垫一点点虚拟 DOM，了解一下其结构，再来一层层揭开 Diff 算法的面纱，深入浅出，助你彻底弄懂 Diff 算法原理认识虚拟 DOM 虚拟 DOM 简单说就是用JS对象来模拟 DOM 结构那... ...查看全部

0

Vue首屏加载优化之使用CND资源 vue 性能优化

马师傅发表了文章 • 1190 次浏览 • 2021-09-22 22:58 • 来自相关话题

背景 vue项目线上首屏加载速度非常慢，查看网络中加载的资源文件发现main.js文件大小为3.6MB，加载速度也是高达6.5s，已经严重影响了用户的体验效果。经过查看发现项目本地打包后main.js大小也是高达三十多兆，为了减少main.js文件打包后的大... ...查看全部

0

3~5年前端开发面经前端面试

马师傅发表了文章 • 851 次浏览 • 2021-09-22 22:56 • 来自相关话题

前言终于要从宁波去杭州了，经过从8月份结束面试到现在，中秋过完之后就要入职了。提完离职之后，差不多闲了1个月。今天难得地放下游戏，回忆下面试题，希望能帮助到大家。杭州的大厂几乎面了个遍，阿里，蚂蚁，网易，字节，华为，有赞，只能按照记忆整理下面试题。面试内... ...查看全部

0

用 VSCode 调试网页的 JS 代码有多香 Javascript 性能优化

马师傅发表了文章 • 1000 次浏览 • 2021-09-22 22:54 • 来自相关话题

相比纯看代码来说，我更推荐结合 debugger 来看，它可以让我们看到代码实际的执行路线，每一个变量的变化。可以大段大段代码跳着看，也可以对某段逻辑一步步的执行来看。 Javascript 代码主要有两个运行环境，一个是 Node.js ，一个是浏览器。一般... ...查看全部

0

从最简单的角度走上读源码前端面试

马师傅发表了文章 • 937 次浏览 • 2021-09-21 22:58 • 来自相关话题

1.前言很早前就想多看一些源码，也看过不少源码的分析，自己简单的去浏览过，但等到想静下心来自己去分析一些的时候，却一直没有时间被搁置，其实可能也是因为自己对相关操作比较陌生，潜意识里又一点抵触。最近想开始行动又在想如何开始，从哪个源码，从什么部分去入手的时候... ...查看全部

0

巧用CSS counter属性 CSS3

马师傅发表了文章 • 833 次浏览 • 2021-09-21 22:56 • 来自相关话题

前言你一定遇到过这样的排版，如实现步骤条、给文章编号等。如果写固定的编号，增删步骤或者章节时，后续的编号都需要手动更改。这样会很麻烦。 CSS 提供了计数器功能，可以动态设置编号。 CSS计数器要实现CSS计数器的，先了解CSS计数器的属性和方法 co... ...查看全部

0

rgb和hex相互转换前端面试

马师傅发表了文章 • 1012 次浏览 • 2021-09-21 22:54 • 来自相关话题

前言这里使用了一些位运算进行计算，如果对位运算不了解的，可以了解一下，位运算 hex(16进制)：#FFF,#ffffff等等16进制颜色 rgb：rgb(255,255,255),rgb(123,125,241)等等笔者第一次遇到颜色转换时，懵了，没有思... ...查看全部

0

React 的 Fiber 树是什么？ react

马师傅发表了文章 • 1138 次浏览 • 2021-09-21 22:52 • 来自相关话题

我发现，如果不搞清楚 React 的更新流程，就无法理解 useEffect 的原理，于是分享 React 更新流程的文章就来了。其实我本想把整个更新流程放到一篇文章里去的，但是昨天查了一天资料后，发现这太不现实了，要是写在一篇里，中秋假期仅剩的一个下午也没... ...查看全部

0

让你用最简单的方式使用Vue2 + Web Worker + js-xlsx 解析excel数据 vue

马师傅发表了文章 • 1914 次浏览 • 2021-09-21 22:49 • 来自相关话题

最简单的应该就是 C V 大法了吧！！！说明本文重点在于实现功能，没有过多去关注其他。就想使用的话直接cv到自己的项目即可，想深入学习下边也有官方网址自行查看咯🍺 由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel... ...查看全部

0

react-native拆包&热更体系搭建-代码拆包跨平台开发 reactnative

马师傅发表了文章 • 1118 次浏览 • 2021-09-21 22:47 • 来自相关话题

一、前言触过react-native的小伙伴都知道热更是rn最大的特点之一，掌握了热更就可以随时上线新的迭代、线上bug hotfix，这样一来发版也更有底气了从此告别跑路的担忧，code-push（以下简称cp）是大多数人接触的第一款热更库,功能很强大但是... ...查看全部

通知设置 新通知

热门话题

通知设置新通知