前端linong_社区达人页

2022年04月

• 04.25 16:40:48
  发表了文章 2022-04-25 16:40:48

  微信中微信授权逻辑

  开篇我先吐槽一下微信开发者的文档，千年不更新。 文档中写的拒绝和允许都会触发回调，然后我测试拒绝的时候就不会触发回调。

  
• 04.25 16:33:39
  发表了文章 2022-04-25 16:33:39

  分享一波前端二维码生成分案

  前端生成二维码我们之前使用的是 QRCode.js，我相信大家首选也都是这个。 然后前两天，来需求了，想要实现二维码中间放 logo 的效果。没办法我就上网调研了一番。 qrcodejs 是不是支持的。 支付宝他们就是生成了一个二维码，然后在中心位置又放了个 logo。dom上看是两层，分离的。 也有一些插件基于 qrcodejs 封装，支持了特殊效果。

  
• 04.25 16:22:46
  发表了文章 2022-04-25 16:22:46

  前端培训-中级阶段(32)-set、map、proxy、symbol、reflect、generator

  前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。

  
• 04.25 15:59:48
  发表了文章 2022-04-25 15:59:48

  JS效果之《获取鼠标所在区域的容器，区域外都遮罩半透明》

  昨天朋友说要实现一个效果，获取鼠标所在区域的容器，区域外都遮罩半透明，起名为专注模式。我们今天来实现一下。

  
• 04.25 15:49:01
  发表了文章 2022-04-25 15:49:01

  前端培训-初级阶段-场景实战（2019-05-09）-聊天框-发送框

  前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。 初级阶段已经完结，之后会针对之前提到过的内容，对实际场景进行分享。正好前段时间我不是一直在加班做聊天的功能嘛。今天我们就来说一说其中遇到的东西。

  
• 04.25 15:32:52
  发表了文章 2022-04-25 15:32:52

  前端培训-中级阶段(17)-数据存储（cookie.session,stroage）

  前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。 这是初级阶段的最后一堂了。之后的内容插入了一些实际场景和review.

  
• 04.25 15:23:22
  发表了文章 2022-04-25 15:23:22

  前端培训-中级阶段(25)-Web Socket网络编程

  前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。 这块内容是我早就想下手的，但是因为之前服务没跑起来。所以文章没写成。今天经过一下午，终于鼓捣好了demo地址

  
• 04.25 15:11:36
  发表了文章 2022-04-25 15:11:36

  前端使用自定义字体方案

  工作中我相信大家都遇到过设计要求使用一些奇奇怪怪字体的需求，然后因为字体文件太大，选择切图。 我这个需求就厉害了，用户发的文章可以选择字体。这文章中可以出现的字就太多了，显然上个方案就不合适了，那我们是这么做的呢？ 废话不多说，先上 demo，别问我 demo 是谁。 接口地址：https://www.lilnong.top/createfont?txt=%E6%B5%8B%E8%AF%95%E6%96%87%E5%AD%97 页面地址： https://www.lilnong.top/static/html/createfont.html

  
• 04.25 15:02:12
  发表了文章 2022-04-25 15:02:12

  你真的知道Cookie?SameSite,Secure,Httponly

  这两天（已经是一个多月前了） SF 上面很多 cookie 的问题，然后还有个 cookie 相关的付费问答。 所以咱们今天来这么一节，废话多说点，先说说大体问题方向。 跨域如何携带 cookie chrome 80 版本加强隐私。SameSite=Lax 为默认值，禁止了一部分场景携带 cookie。

  
• 04.25 14:49:55
  发表了文章 2022-04-25 14:49:55

  前端培训-中级阶段(11,12)-跨域请求原理以及实现

  前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。 JSONP 跨域请求原理以及实现方式jQuery封装的Ajax调用和JSONP数据跨域请求原理和实现 上节我们讲了同源策略，这节我们讲讲如何跨域。这东西就和产品提需求一样，我知道不合理，但是我就想要。

  
• 04.25 14:17:51
  发表了文章 2022-04-25 14:17:51

  前端培训-初级阶段（9-12）

  前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。

  
• 04.25 13:54:45
  发表了文章 2022-04-25 13:54:45

  javascript-leetcode-字符串-题解

  锻炼自己的能力，让自己更加熟悉各个api的使用。 下面是javascript版本的leetcode题目（字符串入门题组）解法。leetCode地址
• 04.25 13:36:14
  发表了文章 2022-04-25 13:36:14

  生成海报（前端|python）

  我最近没有摸鱼，一直都在工作。只不过目前需要爬一点数据 python 做的，之后看机会分享一下。 忙着忙着老大说要生成海报，有个活动要给每个用户来个分享图。
• 04.25 13:30:47
  发表了文章 2022-04-25 13:30:47

  前端培训-初级阶段（13,18）

  前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。 先来说一下为什么这节课跳课了，不是说中间的我们不讲了，而且上节课主讲人讲了 18，没办法我这节课补一下。 收集上几周的反馈，普遍觉得内容多的超乎想象，所以之后的培训计划会根据内容适当调整。

  
• 04.25 13:12:14
  发表了文章 2022-04-25 13:12:14

  封装axios实现自动重试

  因为之前写的一个 Node 程序有点小问题，使用的 axios 通过代理请求数据，代理服务器（阿布云）时不时抽风（407、413、503）。 因为第一次写的时候当做一个 DEMO 去实现的，写的挺简陋，只能说大体功能对，但是没有容错机制。 这里我们先算一笔帐啊，一次请求等于 1+100 次，因为我内部还会请求好多数据。 如果只是第一次失败了，那么无关紧要，大不了重发一次。 但是如果是后面 100 次中有极个别暴雷了，那么就会导致整个101次请求全部作废。 好了，为什么实现这个功能说了，那么我们要我们要开始实现了。

  
• 04.25 12:55:44
  发表了文章 2022-04-25 12:55:44

  前端培训-中级阶段(14)-HTTP首部字段和状态码

  前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。
• 04.25 12:34:06
  发表了文章 2022-04-25 12:34:06

  前端培训-中级阶段(2)-事件（event）事件冒泡，捕获

  前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。 前面我们已经基本掌握常规的语法语义，以及基本的使用方法。接下来我们讲深入进去了解其中内在的原理。

  
• 04.25 10:40:15
  发表了文章 2022-04-25 10:40:15

  Web页面优化专项>Lighthouse>性能分数优化

  Web页面优化专项>Lighthouse>性能分数优化

  
• 04.25 10:13:40
  发表了文章 2022-04-25 10:13:40

  前端培训-初级阶段-场景实战（2019-6-13）-Nginx代理正确食用方式

  前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。 截止到 2019-05-30 期，所有成员都进行了一次分享。内部对课程进行了一些调整，之后会针对项目开始 review 。我这边预期准备进入中级阶段，中间还是会穿插一些实战。
• 04.25 10:01:31
  发表了文章 2022-04-25 10:01:31

  前端培训-初级阶段-场景实战（2019-5-23）-移动端适配bug

  前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。 场景实战这块内容每个人的内容都不一样。所以最近的更新基本都是我遇到并解决掉的问题。后期会把他们的内容贴地址。
• 04.25 09:50:41
  发表了文章 2022-04-25 09:50:41

  前端答疑-对象引用-Vue共享数据源的三种方式

  事情发生在上周团队技术分享的时候。 起因在于一个问题：vue 中多个组件如何使用同一个变量，我们叫这个变量为 baseConfig 吧。 说实话我没想到那么多人不理解其中的知识。今天我整理一下发出来。

  
• 04.25 09:32:58
  发表了文章 2022-04-25 09:32:58

  Vue实现选中效果

  好久没有写Vue了，略有生疏，这个东西还是得多用。 下午看到一个需求，选择相册图片作为轮播图显示。接口返回相册列表，用户选一下再扔回去。 直到我看到e.target.className我就知道这个事情不简单。。
• 04.25 09:25:59
  发表了文章 2022-04-25 09:25:59

  前端文件上传-javascript-ajax

  书写是为了更好的记忆。
• 04.25 09:14:26
  发表了文章 2022-04-25 09:14:26

  H5页面二次分享

  对于H5页面来说二次分享还是蛮重要的，毕竟qq还是微信发出去之后习惯性的使用自带的分享功能。和PC端不同，PC直接复制地址了。前两天在做请柬，踩了不少的雷，个人开发和公司开发还是不一样，各种问题，其他问题放在一个请柬的后记里面说吧。我们开始正题。

  
• 04.25 09:07:18
  发表了文章 2022-04-25 09:07:18

  前端bug录-移动端下载图片

  前天，快下班的时候，一朋友发来一个战绩图。 这是要约我上分？（这兄弟一手 C 位吊打亲友）。我果断拒绝三连。 结果，小韭菜问我，右边那个图怎么做？那好了，事情从这里开始

  
• 04.25 08:55:38
  发表了文章 2022-04-25 08:55:38

  Vue实现弹幕效果

  这两天又看到有人问 Vue 如何做弹幕效果。 正好我过年的时候做了个活动，其中用户可以摇签，然后 C 位飘屏展示。 Vue 版本效果地址：https://www.lilnong.top/static/html/vue-bullet-biubiubiu.html 网上原生版本：https://www.lilnong.top/stati...

  
• 04.25 08:47:25
  发表了文章 2022-04-25 08:47:25

  前端预览PDF文件（使用PDFJS）

  我准备出一篇文章来介绍一下如何使用 PDFJS 。

  
• 04.24 19:58:35
  发表了文章 2022-04-24 19:58:35

  简单的前后端交互流程（AJAX）

  今天呢，我想要说的主题是：工作中的前后端交互。

  
• 04.24 19:42:57
  发表了文章 2022-04-24 19:42:57

  蹭热点，请给我一面国旗@微信官方

  今天下午微信朋友圈炸了，所有人都在要国旗。迎国庆换新颜活动 | 腾讯新闻的合成服务 微信中打开。 我们呢，也来蹭蹭热度，聊聊其中的技术。

  
• 04.24 19:18:09
  发表了文章 2022-04-24 19:18:09

  前端培训-初级阶段（1-4）

  本着提升技术水平，打牢基础知识的中心思想。前端内部开始小课堂啦（本人凭借身高优势，人群中多看了我一眼，稳稳拿到第一课）。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。 好了，不闲扯，接下来进入我们的正题。

  
• 04.24 19:09:12
  发表了文章 2022-04-24 19:09:12

  面试题：JS获取某月的天数

  获取某个月的天数，这个题一般都是在学 switch(){} 一章的案例。 我们一直解题的方案是根据一个顺口溜：一三五七八十腊，31天永不差，四六九十一，每月30天，惟有二月二十八，闰年要把日加一。（我搜的，具体怎么背我忘了） 这里面还有个闰年的计算规则：四年一闰，百年不闰，四百年再闰。可以被4整除，但是不能被100整除，除非可以被400整除。

  
• 04.24 18:49:30
  发表了文章 2022-04-24 18:49:30

  前端答疑-chrome开发者工具正确食用-调试代码

  之前写过前端答疑-chrome开发者工具正确食用-看网页源码，其中涉及到了 Sources 和 Network 两个标签。 不曾想现在的世界越来越看不懂了 昨天吧，一个朋友突然联系我了（应该是校友吧，不过我没见过本人，大我十届？我也是奔三的人了，突然好难过）。 问我360 浏览器如何调试 js。这个时候应该配图了[黑人问号脸]。调试应该是每个开发必会的技能吧，即使不会，难道没有网络吗？网上连教程都没有吗？ 那么好了，基于上面的吐槽，我们开始今天内容。

  
• 04.24 17:12:30
  发表了文章 2022-04-24 17:12:30

  前端培训-初级阶段-场景实战（2019-06-06）-下载文件&下载速度

  前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。

  
• 04.24 16:29:25
  发表了文章 2022-04-24 16:29:25

  前端培训-初级阶段（5-8）

  前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。

  
• 04.24 16:06:23
  发表了文章 2022-04-24 16:06:23

  刮刮卡效果实现

  公司国庆搞了个集卡、抽奖小活动。抽奖需要刮刮卡的效果，感觉 css 是实现不了。看我使用 canvas 如何实现刮刮卡效果。 废话不多说，线上效果 jsrun-测试地址 、 lilnong.top-测试地址
• 04.24 15:14:16
  发表了文章 2022-04-24 15:14:16

  前端上传前预览文件image,text,json,video,audio

  前天有个需求，上传前需要校验视频长度，然后让我出个 Demo。 预览文件 demo 其实预览功能实现上都差不多，所以今天我们都来实现一下咯。

  
• 04.24 15:02:49
  发表了文章 2022-04-24 15:02:49

  Array数组对象的forEach，map，filter，reduce

  刚才某人问了我一个问题。map怎么遍历，我刷刷刷就是一顿写。遍历么，forEach么，妥妥的。
• 04.24 14:09:23
  发表了文章 2022-04-24 14:09:23

  AJAX的进阶使用（Blob,ArrayBuffer,FormData,Document,JSON,Text）

  Ajax 即 Asynchronous Javascript And XML （异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。在无需重新加载整个网页的情况下，能够更新部分网页的技术。一般我们使用 XMLHTTPRequest、Fetch API、ActiveXObject（低版本 IE） ，来现实 AJAX 功能。
• 04.24 13:29:52
  发表了文章 2022-04-24 13:29:52

  36*N个工作中常用的JavaScript函数片段

  最近在思否看到一个文章36个工作中常用的JavaScript函数片段。 身为坑爹面试官（▄█▀█●），怎么能只有一个答案呢？

  
• 04.24 12:52:22
  发表了文章 2022-04-24 12:52:22

  前端答疑-chrome开发者工具正确食用-看网页源码

  写这个文章，是因为在今天早上，有两个兄弟找我要源码。有图有真相。 我震惊于都 9102年了，身为了一个正（xie）经（xin）前端er，还不会看控制台？