聊聊数据大屏 “炫酷” 容器边框的实现

最近大屏又开始火了,群里好多人又开始捡起来了数据可视化,我也一样遇到了新得是数据可视化项目,但是这次不是说 ECharts,而是数据大屏上的所谓 “科技感” 容器,比如下图:

数据大屏截图

可以看到很多的边框,虽然说可以直接让 UI 小姐姐 切给我们出来所有不同规格的背景图片来解决问题,但是就需要 UI 一份一份切给我们,就很麻烦,而且占用首屏加载的资源。
我就想是否可以用一些精灵图来完成,或者一些简单的边框可以直接使用一些 CSS 的奇技淫巧来完成。

我从花瓣上找了一些示例,然后通过CSS复现,接下来上实例

阅读全文

JS中的 new 关键字做了什么?

new 运算符 创建 一个用户定义的 对象类型 的实例或 具有构造函数的内置对象 的实例。

完整的了解 new 运算符你可能还需要了解一下 面向对象思想 以及 原型链,可以简单查看这篇笔记 👉 原型链! __proto__ 与 prototype

如果快速的了解 new 关键字按照MDN的文档描述来说就是:

  1. new关键字会创建一个空的简单JavaScript对象(即 {});
  2. 链接该对象(设置该对象的 constructor)到另一个对象 (绑定原型);
  3. 步骤1 新创建的对象作为 this 的上下文 ;
  4. 如果该函数没有返回对象,则返回 this

可以简单理解成 new 关键字帮我们处理了书写构造函数时一些固定的步骤

阅读全文

微信小程序学习日记 L05 获取用户资料

在实际业务场景中,最常接触到的就是拉取微信登陆了,但单纯的一个点击按钮直接微信登录的需要获取多少微信权限呢?

最少的需要使用到1个微信开放接口:wx.login
如果需要获取用户头像和昵称,需要调用 wx.getUserProfile 方法 (wx.getUserInfo 已调整【尾声#1】),并且需要在绑定在按钮上 ,并会唤起授权提示;
如果需要获取用户手机号信息,需要在按钮上绑定 getPhoneNumber 事件。

一般来说非敏感信息可以直接调用,含有敏感信息的接口需要绑定在按钮上,在用户自行操作之后才可以调用。

阅读全文

微信小程序学习日记 L04 网络请求

在小程序中发送网络请求,需要使用微信提供的API,提供了5种:

  • 普通 HTTPS 请求(wx.request
  • 上传文件(wx.uploadFile
  • 下载文件(wx.downloadFile)
  • WebSocket 通信(wx.connectSocket
  • UDP 通信(wx.createUDPSocket

一般项目中使用频率最高的是 wx.requestwx.uploadFile

需要注意的是,小程序只可以跟指定的域名进行网络通信,需要事先设置通讯域名(服务器域名请在 「小程序后台-开发-开发设置-服务器域名」 中进行配置)。

可以查看 配置流程 了解一下具体注意项。

阅读全文

微信小程序学习开发日记 L00

发现我安装小程序开发者工具是18年的事情了,那个时候还没有开始学 vue,算是开始填早几年立的一个 📌Flag 吧。

当时是想给我们的烘焙工作室的公众号做一个配套的营销工具,所以在18年底有去了解,只不过后来只做了一个展示型网站 岁礼气球派对,后来又改版了好几次现在主营是派对布置,好了有点扯远了。

填坑的动力主要是业务驱动,因为现在正好有这个任务安排,在回顾2020也大概提到了。所以今天先开始概括一下没有开发过小程序的前端,对于小程序的一些疑问。

阅读全文

关于情感勒索与关系依存自尊者

最近和女友闹得很僵,情绪很低落,没有什么动力填坑,更别提开新坑了,光把 设计模式学习 补完就折腾的够呛,而且有一些定义很模糊容易混淆,经常就为了区分两个很类似的模式停滞几个小时。

周二的时候知乎推送了一个问题 在恋爱中,女孩子真的会遇到一个满眼都是自己的男孩子吗?, 第一次接触到一个名词 关系依存自尊,确实一直以来都把感情看得很重要,并且已经深刻影响到自己生活的方方面面。

KnowYourself 的回答真的让我一下子明白过来,原来在不经意中我已经情感勒索了很久并不自知,也理解了她口中的压力并不是我以前所想的那样……

阅读全文

JavaScript 中的 this 指向问题

今天在群里看到大家在讨论一个问题,就是 this 的指向,并且牵扯到了 letconst 的变量提升,比如说在全局顶部声明的 let 变量能否挂载到 window 下之类的。
还是老流程,先讨论第一个问题,然后再开始牵扯到后续的展开。

this 指向大概分为两种,普通函数内的 this 和 箭头函数内的 this,箭头函数内的 this 其实挺好理解的,主要是因为各种 call()apply()bind()new 影响下的 this 指向问题。

阅读全文

「 ReactJS 笔记 」 L00 起步

Vue 3.0 Beta版本已经更新很久了,不出意外正式的 Release 应该如约在第三季度发布,然而我还没有开始学习 TypeScript 以及 Composition API,趁着这几天项目还没开始,就抓紧了解了一下 React

阅读全文

「 TypeScript 笔记 」 楔子

这两天同时写 3 个项目,脑子有点乱,每天白天写一个晚上另外写一个,第二天可能就是第三个项目,所以每天上午到公司之后有大概 1 个多小时就处于梦游的状态,就等着群里有谁提问题,然后我解决的时候可以把脑回路给转换过来,但是这段时间可能因为疫情的原因吧,活跃的人越来越少了,还是自己写写 demo 把今年要学的 TS 给学起来吧。

本来是想等到 Vue 更新 3.0 的时候再学的,但是感觉可能等到 3.0 出来了应该要是下半年了,如果上半年就只学习 React,不配合 TS 的就有点太浪费了,好多小伙伴就是用 TS 在开发 React 项目。

阅读全文

使用 webpack 打包时去除注释和控制台日志

开一个坑,今天怎么尝试也都只能在打包的时候去除 console 但是注释还是不会被去除掉。