游客njxd47hac6d2e_社区达人页

2022年05月

• 05.07 14:52:41
  发表了文章 2022-05-07 14:52:41

  使用vue实现HTML页面生成图片（上）

  随着网络的发展，越来越多的网络平台应运而生。如何获得更多的流量，吸引更多的眼球已经成为网络平台生存、发展的必要条件。现在网络平台最常见的一种宣传方式就是人邀人。

  
• 05.07 14:49:22
  发表了文章 2022-05-07 14:49:22

  总结Vue组件的通信（下）

  全文总结了6种Vue组件间的通信方式，如有误区，欢迎指正！
• 05.07 14:46:33
  发表了文章 2022-05-07 14:46:33

  总结Vue组件的通信（中）

  全文总结了6种Vue组件间的通信方式，如有误区，欢迎指正！

  
• 05.07 14:45:00
  发表了文章 2022-05-07 14:45:00

  总结Vue组件的通信（上）

  全文总结了6种Vue组件间的通信方式，如有误区，欢迎指正！
• 05.07 12:46:05
  发表了文章 2022-05-07 12:46:05

  Taro踩坑实践

  快狗合伙人技术部，在去年使用 Taro开发了两个微信小程序，现在均已上线。开发过程中也遇到了一些大大小小的问题，下面列出几个比较典型的，供在使用或者已经使用但是还没有遇到的同学做个参考。
• 05.07 12:42:17
  发表了文章 2022-05-07 12:42:17

  uni-app踩坑+小改造

  最近团队内部一直在试点用uni-app去做一些小需求，但主要是先在H5上做试点，之后再按计划编译成小程序去发布。这回分享几个遇到的小问题和解决方案。 下面说到的问题主要在用uni-app开发H5平台时才会遇到，非H5平台可忽略。
• 05.07 12:38:56
  发表了文章 2022-05-07 12:38:56

  基于webpack的热重载live reload和热更新HMR（下）

  在前端应用框架中不管是react还是vue，官方都提供了相应的脚手架方便开发者快速入手，当我们在开发时修改某个js或者css文件时，webpack会自动编译我们的文件，我们刷新浏览器就可以看到编译后的文件。为此我们会想，如果我们修改保存之后，文件被编译、浏览器自动刷新、或者浏览器局部刷新(不刷新整个浏览器)，这样的话多好。当然，基于webpack打包工具的相关库已经实现了。下面对此部分流程做简单的分析
• 05.07 12:37:04
  发表了文章 2022-05-07 12:37:04

  基于webpack的热重载live reload和热更新HMR（中）

  在前端应用框架中不管是react还是vue，官方都提供了相应的脚手架方便开发者快速入手，当我们在开发时修改某个js或者css文件时，webpack会自动编译我们的文件，我们刷新浏览器就可以看到编译后的文件。为此我们会想，如果我们修改保存之后，文件被编译、浏览器自动刷新、或者浏览器局部刷新(不刷新整个浏览器)，这样的话多好。当然，基于webpack打包工具的相关库已经实现了。下面对此部分流程做简单的分析

  
• 05.07 12:35:03
  发表了文章 2022-05-07 12:35:03

  基于webpack的热重载live reload和热更新HMR（上）

  在前端应用框架中不管是react还是vue，官方都提供了相应的脚手架方便开发者快速入手，当我们在开发时修改某个js或者css文件时，webpack会自动编译我们的文件，我们刷新浏览器就可以看到编译后的文件。为此我们会想，如果我们修改保存之后，文件被编译、浏览器自动刷新、或者浏览器局部刷新(不刷新整个浏览器)，这样的话多好。当然，基于webpack打包工具的相关库已经实现了。下面对此部分流程做简单的分析
• 05.07 12:30:55
  发表了文章 2022-05-07 12:30:55

  vuex为什么不建议在action中修改state

  在最近的一次需求开发过程中，有再次使用到Vuex，在状态更新这一方面，我始终遵循着官方的“叮嘱”，谨记“一定不要在action中修改state，而是要在mutation中修改”；于是我不禁产生了一个疑问：Vuex为什么要给出这个限制，它是基于什么原因呢？带着这个疑问我查看Vuex的源码，下面请大家跟着我的脚步，来一起揭开这个问题的面纱。
• 05.07 12:28:20
  发表了文章 2022-05-07 12:28:20

  年底了“谈个对象”吧

  今天要谈的对象是Map和WeakMap。先对这两个对象进行一个简单的介绍总结： Map 的 key 可以是任何类型的值，Object 的键值只能是 string 和 symbols。 Map 实例按照插入的顺序存储数据 Map 实例的属性更容易删除 WeakMap 相比 Map 提供了更优的垃圾回收机制 下面进入正题。

  
• 05.07 12:25:39
  发表了文章 2022-05-07 12:25:39

  webpack原理解析（二）实现一个简单的Loader

  webpack中 loader 是一个非常重要的概念，loader 可以简单的理解成一个文件处理器，webpack使用 loader 来处理各类文件，比如 .scss转成成 css文件, 小图片转换成base64图片。
• 05.07 01:02:43
  发表了文章 2022-05-07 01:02:43

  关于微前端你必须了解的三种实现方式（下）

  微前端的概念最早由 thoughtworks 在 2016 年提出。其核心思路是借鉴后端微服务架构理念，将一个单体的庞大的前端应用拆分为多个简单独立的前端工程。每个前端工程可以独立开发、测试、部署。最终再由一个容器应用，将拆分后的微前端工程组合为一个整体，面向用户提供服务。

  
• 05.07 01:01:06
  发表了文章 2022-05-07 01:01:06

  关于微前端你必须了解的三种实现方式（上）

  微前端的概念最早由 thoughtworks 在 2016 年提出。其核心思路是借鉴后端微服务架构理念，将一个单体的庞大的前端应用拆分为多个简单独立的前端工程。每个前端工程可以独立开发、测试、部署。最终再由一个容器应用，将拆分后的微前端工程组合为一个整体，面向用户提供服务。

  
• 05.07 00:59:20
  发表了文章 2022-05-07 00:59:20

  webpack原理解析（一）实现一个简单的webpack

  Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。webpack如此强大，其内部机制到底是怎样的，今天我们来一探究竟。

  
• 05.07 00:56:28
  发表了文章 2022-05-07 00:56:28

  前端程序媛教你美颜年终账单

  从技术人员的角度来说： 年终账单= 页面滑动 + dom动画 + 数据 对前端工作人员来说： 页面滑动和dom动画是最重要。 页面滑动和dom动画分开做，都不难，都很容易实现。 但如何让页面滑动和dom动画配合的天一无缝呢？？

  
• 05.07 00:52:40
  发表了文章 2022-05-07 00:52:40

  【建议收藏】90%的前端都会踩的坑，你中了吗？（下）

  移动开发时代，前端同学刚刚送别了让人头秃的IE浏览器，却发现憧憬已久的移动互联网时代并不是想象中那般美好。各种棘手的系统兼容问题和浏览器兼容问题怎么也让人高兴不起来。作为一名工作不足3年的前端程序媛，始终相信好记性不如烂笔头。每次在项目开发过程中踩到的坑，都习惯性地记录了下来。昨日一瞥竟积少成多，稍感诧异。因此分享出来，希望对大家能有所帮助。
• 05.07 00:48:05
  发表了文章 2022-05-07 00:48:05

  【建议收藏】90%的前端都会踩的坑，你中了吗？（中）

  移动开发时代，前端同学刚刚送别了让人头秃的IE浏览器，却发现憧憬已久的移动互联网时代并不是想象中那般美好。各种棘手的系统兼容问题和浏览器兼容问题怎么也让人高兴不起来。作为一名工作不足3年的前端程序媛，始终相信好记性不如烂笔头。每次在项目开发过程中踩到的坑，都习惯性地记录了下来。昨日一瞥竟积少成多，稍感诧异。因此分享出来，希望对大家能有所帮助。
• 05.07 00:44:05
  发表了文章 2022-05-07 00:44:05

  【建议收藏】90%的前端都会踩的坑，你中了吗？（上）

  移动开发时代，前端同学刚刚送别了让人头秃的IE浏览器，却发现憧憬已久的移动互联网时代并不是想象中那般美好。各种棘手的系统兼容问题和浏览器兼容问题怎么也让人高兴不起来。作为一名工作不足3年的前端程序媛，始终相信好记性不如烂笔头。每次在项目开发过程中踩到的坑，都习惯性地记录了下来。昨日一瞥竟积少成多，稍感诧异。因此分享出来，希望对大家能有所帮助。
• 05.07 00:40:54
  发表了文章 2022-05-07 00:40:54

  左边敲打IDE！右边出现了一个世界!!!

  以转盘组件为例，一起揭开Animation在微信小程序中的神秘面纱。
• 05.07 00:38:49
  发表了文章 2022-05-07 00:38:49

  如何编写一个vue cli插件

  使用 vue 进行开发的同学对vue-cli一定不会陌生，最初 vue-cli@2x的时代，我们使用的时候通常会去修改webpack来满足我们团队的需求，又或者通过自己维护一个脚手架，满足日常开发。 在vue-cli 升级为3x之后提供了插件的选项。cli插件作为vue-cli的部分，为我们提供了便利的开发环境，他使得我们的开发环境插件化，让我们可以针对不同的情况定制不同的插件，例如 vue-cli-plugin-typescript vue-cli-plugin-vant。 那么如何实现这么一个cli插件呢?
• 05.07 00:36:35
  发表了文章 2022-05-07 00:36:35

  uni-app脚手架踩坑记（下）

  最近在做跨平台框架的试点，选择了uni-app，并打算先在h5上开始试点。 由于uni-app提供的基于vue-cli的脚手架与我们内部的脚手架稍有些不同，直接使用稍微有点学习成本，所以fork了一下，稍作修改，做了一个内部版本的脚手架（主要就是将publicPath从manifest.json中拿出来，实现动态配置），目的就是让其用起来和我们自己的脚手架差不多。
• 05.07 00:35:03
  发表了文章 2022-05-07 00:35:03

  uni-app脚手架踩坑记（上）

  最近在做跨平台框架的试点，选择了uni-app，并打算先在h5上开始试点。 由于uni-app提供的基于vue-cli的脚手架与我们内部的脚手架稍有些不同，直接使用稍微有点学习成本，所以fork了一下，稍作修改，做了一个内部版本的脚手架（主要就是将publicPath从manifest.json中拿出来，实现动态配置），目的就是让其用起来和我们自己的脚手架差不多。

  
• 05.07 00:33:18
  发表了文章 2022-05-07 00:33:18

  无处不在的前端矩阵变换（下）

  在前端开发中不论CSS3也好，SVG也好，还是Canvas，无论多复杂的图形，都是由一个个点组成的。一个元素渲染后就可以得到一张位图，然后对这个位图上每一点进行变换，就可以得到新的一张位图，从而产生了视觉上的平移translate、旋转rotate、缩放scale、拉伸skew 等效果。这一切都是变换矩阵的功劳。

  
• 05.07 00:32:04
  发表了文章 2022-05-07 00:32:04

  无处不在的前端矩阵变换（上）

  在前端开发中不论CSS3也好，SVG也好，还是Canvas，无论多复杂的图形，都是由一个个点组成的。一个元素渲染后就可以得到一张位图，然后对这个位图上每一点进行变换，就可以得到新的一张位图，从而产生了视觉上的平移translate、旋转rotate、缩放scale、拉伸skew 等效果。这一切都是变换矩阵的功劳。

  
• 05.07 00:29:58
  发表了文章 2022-05-07 00:29:58

  简约而不简单的通用错误页面

  线上某个项目由于后端 controller 层代码异常, 没有执行到渲染页面模版, 造成前端 Web 页面展示出来是一个空白的页面，俗称白屏。

  
• 05.07 00:09:01
  发表了文章 2022-05-07 00:09:01

  localStorage、sessionStorage、cookie、session几种web数据存储方式对比总结

  localStorage、sessionStorage、cookie、session几种web数据存储方式对比总结
• 05.06 23:56:06
  发表了文章 2022-05-06 23:56:06

  如何实现微信小程序图像剪切？代码拿去用，不谢！

  我在早先发布的文章《如何实现微信小程序换头像？三步帮你搞定！》中，提到实现微信小程序换头像需要三步： 获取用户头像 图片模板 图片合成 前文已经就获取用户头像和图片模板两个步骤进行了讲解，本文就来详细说说如何合成图片。图片合成的过程中非常重要的一块功能对图片进行剪切。该功能点很固定，大都是对图片进行拖拽、缩放后，在一定区域内剪切出一个固定长宽的图片。这类功能在app端和H5中都有很多成熟的插件供使用，接下来就来看看我在海豚趣图小程序中的头像剪切插件是如何实现的，欢迎大家提意见。

  
• 05.06 23:39:29
  发表了文章 2022-05-06 23:39:29

  配饭短文：离线Web应用入门

  无网络时，前端真的什么都做不了吗？本文滚动条以及直觉告诉你，那一定不是的。 联想到几个月前写的一篇无人问津的文章：《Service Worker从入门到出门》（这是广告，方便的话请去点赞，对您没什么好处，但我会高兴），笔者意识到，如果不计代价的话，借助Service Worker，那个bug里要求的效果，其实也不是不可能实现。 本文决定，不纠结于那个bug，而针对无网络的极限场景，用尽量少的代码，实现一个demo级别的离线Web应用。

  
• 05.06 23:37:37
  发表了文章 2022-05-06 23:37:37

  如何实现微信小程序换头像？三步帮你搞定！

  背景 2019年10月1日在祖国70周年大庆之际，微信朋友圈被大家纷纷@微信官方要国旗的景象给刷屏了，在为祖国庆生的同时，玩的不亦乐乎。 在9月25日，我心血来潮决定在国庆前开发一个换头像的微信小程序为祖国70周年献礼！最终在国庆前夕上线发布了制作头像的小程序-【海豚趣图】，帮助10000多名小伙伴成功换上了国旗头像。 小程序虽然已经上线，但在【海豚趣图】这个小程序开发过程中的一些有意思的技术点我希望能总结一下和大家进行分享。

  
• 05.06 23:32:35
  发表了文章 2022-05-06 23:32:35

  你期待的微信小程序表格组件来啦

  背景： 在做H5开发中表格table是最常见的标签，如此好用的标签在微信小程序中却没有
• 05.06 23:29:43
  发表了文章 2022-05-06 23:29:43

  聊一聊几种常用web图片格式：gif、jpg、png、webp

  在大多数的web页面中，图片占到了页面大小的60%-70%。因此在web开发中，不同的场景使用合适的图片格式对web页面的性能和体验是很重要的。图片格式种类非常多，本文仅针对几种web应用中常用的图片格式：gif、png、jpg、webp进行一个基本的总结。

  
• 05.06 21:23:41
  发表了文章 2022-05-06 21:23:41

  Flutter Widget and Bald（下）

  Flutter Widget and Bald

  
• 05.06 21:21:57
  发表了文章 2022-05-06 21:21:57

  Flutter Widget and Bald（上）

  Flutter Widget and Bald

  
• 05.06 21:18:38
  发表了文章 2022-05-06 21:18:38

  秀发去无踪之你不得不知道的Dart（下）

  最近flutter发展的如火如荼，而Dart作为flutter的开发语言，了解一下
• 05.06 21:15:41
  发表了文章 2022-05-06 21:15:41

  秀发去无踪之你不得不知道的Dart（上）

  最近flutter发展的如火如荼，而Dart作为flutter的开发语言，了解一下
• 05.06 21:11:45
  发表了文章 2022-05-06 21:11:45

  人人都会Vim

  Vim 通常是在服务器上操作/修改配置文件的时候使用。类似的编辑器当然还有 vi, emacs。同样作为编辑器与IDE最大的区别是不使用鼠标进行操作，完全使用键盘，具有系统资源占用小，打开较大文件速度快的特点。相对应的进行操作都是通过键盘敲命令操作，所以要记住比较多的命令，学习起来还是比较枯燥的，这里整理了一些常用的命令，以备大家在用的时候作为一个参考。

  
• 05.06 21:08:34
  发表了文章 2022-05-06 21:08:34

  Hi gays, 你造Content-Disposition吗？

  今天要和大家聊的就是导致这起线上问题的 Content-disposition 到底是何方神圣。

  
• 05.06 21:05:39
  发表了文章 2022-05-06 21:05:39

  人人都看得懂的JS运行机制（下）

  本文是以作者自己理解的思路拆分的JS运行机制，见解有限难免疏漏，欢迎留言勘误、交流。

  
• 05.06 21:03:17
  发表了文章 2022-05-06 21:03:17

  人人都看得懂的JS运行机制（中）

  本文是以作者自己理解的思路拆分的JS运行机制，见解有限难免疏漏，欢迎留言勘误、交流。

  
• 05.06 21:01:03
  发表了文章 2022-05-06 21:01:03

  人人都看得懂的JS运行机制（上）

  本文是以作者自己理解的思路拆分的JS运行机制，见解有限难免疏漏，欢迎留言勘误、交流。

  
• 05.06 20:58:45
  发表了文章 2022-05-06 20:58:45

  【前端基础】Web与Native交互之The JSBridge FAQ（下）

  今天我们来简单聊一下JSBridge
• 05.06 20:56:40
  发表了文章 2022-05-06 20:56:40

  【前端基础】Web与Native交互之The JSBridge FAQ（上）

  今天我们来简单聊一下JSBridge

  
• 05.06 20:53:43
  发表了文章 2022-05-06 20:53:43

  【动画】想怎么动就怎么动，在我的地盘你得听我的

  transition、animation是CSS3中制作DOM元素动画的重要属性，但其仅仅只能应对一些常规的需求，针对非DOM元素的属性过渡时就显得无能为力了，所以接下来通过js简单实现其动画原理（说白了也就是通过JavaScript间接操作目标过渡属性值，每隔一段时间更新一次）让动画变得更加灵活可控，而不是对可恶的pm说这效果有啥用、砍掉这类的话，当然还得看需求使用场景

  
• 05.06 20:50:43
  发表了文章 2022-05-06 20:50:43

  [Grid布局] - 快到格子里来(下)

  CSS的网格布局模块提供了一个基于网格的布局系统，能够以行和列来进行布局，使其更容易设计网页，而不必使用浮标和定位。 只要给块级元素设置display:grid 或者给内联元素设置display:inline-grid， Grid布局就可以创建

  
• 05.06 20:48:37
  发表了文章 2022-05-06 20:48:37

  [Grid布局] - 快到格子里来(中)

  CSS的网格布局模块提供了一个基于网格的布局系统，能够以行和列来进行布局，使其更容易设计网页，而不必使用浮标和定位。 只要给块级元素设置display:grid 或者给内联元素设置display:inline-grid， Grid布局就可以创建

  
• 05.06 20:44:15
  发表了文章 2022-05-06 20:44:15

  [Grid布局] - 快到格子里来(上)

  CSS的网格布局模块提供了一个基于网格的布局系统，能够以行和列来进行布局，使其更容易设计网页，而不必使用浮标和定位。 只要给块级元素设置display:grid 或者给内联元素设置display:inline-grid， Grid布局就可以创建

  
• 05.06 20:16:54
  发表了文章 2022-05-06 20:16:54

  Service Worker 从入门到出门

  正常的开场本应该是“什么是Service Worker”，但Service Worker往往会和PWA被一同提起。无论屏幕前的你是有丰富PWA开发经验的大佬，还是从没有听过这个概念的小佬，本文都有义务讲清楚Service Worker和PWA的关系，在此假设大家仅仅是一个对Service Worker感兴趣的前端工程师，并没有丰富的相关经验。

  
• 05.06 20:13:07
  发表了文章 2022-05-06 20:13:07

  你掌握了吗?——js数据类型隐式转换（下）

  众所周知javascript是一种弱类型语言。强类型和弱类型主要是站在变量类型处理的角度进行分类的。强类型是一旦指定数据类型，如果不经过强制转换，那么将永远是指定的这个类型。js中无法声明数据类型，变量类型是根据实际值决定的，由编译器自动调用转换函数进行转换，这种方式称之为隐式转换，今天我们就来谈谈数据类型是如何隐式转换的。