今天，收到一个很有意思的提问，如何实现类似如下的背景效果图：嗯？核心主体是由多个六边形网格叠加形成。那么我们该如何实现它呢？使用纯 CSS 能够实现吗？当然可以，下面我们就将尝试如何使用 CSS 去实现这样一个背景效果。如何绘制六边形？首先，看到这样一个图形，如果想要使用一个标签完成整个背景，最先想到的肯定是使用背景 background 实现，不过可惜的是，尽管 CSS 中的 background 非常之强大，但是没有特别好的方式让它足以批量生成重复的六边形背景。因此，在这个需求中，我们可能不得不退而求其次，一个六边形实现使用一个标签完成。那么，就拿 1 个 DIV 来说，我们有多少实现六边形的方式呢？这里简单介绍 2 种方式：使用 border 实现六边形使用 clip-path 实现六边形使用 border 或者 clip-path 实现六边形首先，使用 border 实现六边形。这里的核心在于上下两个三角形叠加中间一个矩形。这里，利用元素的两个伪元素实现上下两个三角形，从而让这个元素看起来像一个六边形。思路比较简单，直接上代码：.hexagon { position: relative; width: 200px; height: 100px; background-color: red; } .hexagon:before, .hexagon:after ...继续阅读 (28)

1.数字分隔符为了提高数字的可读性，可以使用下划线作为分隔符。12const largeNumber = 1_000_000_000;console.log(largeNumber); // 10000000002.事件监听器只运行一次如果你想添加一个事件监听器并且只运行一次，你可以使用 once 选项。123element.addEventListener('click', () => console.log('I run only once'), { once: true});3. 检查 Caps Lock 是否打开您可以使用 KeyboardEvent.getModifierState() 来检测 Caps Lock 是否打开。1234567const passwordInput = document.getElementById('password');passwordInput.addEventListener('keyup', function (event) { if (event.getModifierState('CapsLock')) { // CapsLock is open }});4. 从数组中获取最小值/最大值您可以结合扩展运算符使用 Math.min() 或 Math.max() 来查找数组中的最小值或最大值。1234c ...继续阅读 (63)

前言现在不少应用都是采用了混合开发模式，不论是原生加RN,或是原生加Flutter,或是原生加H5。原生实现主业务线，其他部分可以借助跨平台方案开发，提高开发效率，或者实现热更新，调高业务迭代效率。下面简单介绍一下Android原生集成最新RN版本的过程。添加package.json文件首先在一个正常编译运行的原生APP根目录下执行yarn init命令，按提示填写基本信息后会在项目根目录下，创建一个package.json文件。添加JavaScript依赖,生成node_modules然后，使用如下命令添加React和React Native运行环境的支持脚本。yarn add react react-native命令执行完成后，所有JavaScript依赖模块都会被安装到项目根目录下的node_modules/目录中。注意：node_modules这个目录我们原则上不复制、不移动、不修改、不上传，随用随装，同时把node_modules/目录记录到.gitignore文件中（即不上传到版本控制系统，只保留在本地）。接下来，在package.json文件中配置启动RN Metro服务的脚本，即script脚本，文件全部内容如下。项目根目录package.json文件{ "name": "AndroidDemo", "version": "1.0.0", "main": ...继续阅读 (26)

欢迎关注我的公众号：前端侦探很多时候，在使用 Canvas 绘制圆角矩形都是一件比较麻烦的事，因为之前并没有直接的方法，只能通过直线和圆弧间接组合而成，下面是一个常规绘制方式ctx.beginPath(); ctx.moveTo(x + r, y); ctx.arcTo(x + w, y, x + w, y + h, r); ctx.arcTo(x + w, y + h, x, y + h, r); ctx.arcTo(x, y + h, x, y, r); ctx.arcTo(x, y, x + w, y, r); ctx.closePath();这里x、y、w、h、r分别代表x坐标、y坐标、宽度、高度、圆角。这段代码应该是最精简的了，虽然不是特别复杂，但是应该很少有人能直接手写，主要是不够语义化，比较繁琐。而圆角矩形又是一个非常常见的功能需求，为此，Canvas 在Chrome 99悄悄推出了一个新的方法：roundRect()，花一分钟了解一下一、roundRect 语法roundRect，顾名思义，就是圆角矩形，和rect用法一致，只是参数上多了一个圆角radii这里x、y、w、h就不介绍了，重点介绍一下这个圆角radii。圆角radii有以下几种取值all-corners，只有 1 一个值的时候，表示所有 4 个圆角[all-corners]，也可以是数组，当只有 1 一 ...继续阅读 (40)

假设，我们有这样一张 Gif 图：利用 CSS，我们尝试来搞一些事情。图片的 Glitch Art 风在这篇文章中 --CSS 故障艺术，我们介绍了利用混合模式制作一种晕眩感觉的视觉效果。有点类似于抖音的 LOGO。像是这样：假设，我们有这样一张图：只需要一个标签即可给两张同样的图片，叠加上 青色#0ff和 红色#f00，并且错开一定的距离，两张图都要加上background-blend-mode: lighten，其中一张再加上mix-blend-mode: darken：.mix { width: 400px; height: 400px; background: url($img), #0ff; background-blend-mode: lighten; &::after { content: ''; position: absolute; margin-left: 10px; width: 400px; height: 400px; background: url($img), #f00; background-blend-mode: lighten; mix-blend-mode: darken; } }得到如下效果：简单解释下：因为图片本身不是红色和青色的，所以 ...继续阅读 (30)

本文是 CSS Houdini 之 CSS Painting API 系列第四篇。现代 CSS 之高阶图片渐隐消失术现代 CSS 高阶技巧，像 Canvas 一样自由绘图构建样式！现代 CSS 高阶技巧，完美的波浪进度条效果！在上三篇中，我们详细介绍了 CSS Painting API 是如何一步一步，实现自定义图案甚至实现动画效果的！在这一篇中，我们将继续探索，尝试使用 CSS Painting API，去实现过往 CSS 中非常难以实现的一个点，那就是如何绘制不规则图形的边框。CSS Painting API再简单快速的过一下，什么是 CSS Painting API。CSS Painting API 是 CSS Houdini 的一部分。而 Houdini 是一组底层 API，它们公开了 CSS 引擎的各个部分，从而使开发人员能够通过加入浏览器渲染引擎的样式和布局过程来扩展 CSS。Houdini 是一组 API，它们使开发人员可以直接访问CSS 对象模型（CSSOM），使开发人员可以编写浏览器可以解析为 CSS 的代码，从而创建新的 CSS 功能，而无需等待它们在浏览器中本地实现。CSS Paint API 目前的版本是CSS Painting API Level 1。它也被称为 CSS Custom Paint 或者 Houdini's Paint Worklet。我们可 ...继续阅读 (27)

这里记录每周值得分享的科技内容，周五发布。封面图12月9日下午，"捷龙三号"火箭在船上发射成功。这是中国首次在海面船只上点火"热发射"火箭。（via）本周话题：青年失业率与选择创业现在的青年失业率非常高。官方统计，今年7月份的16岁～24岁青年失业率达到了19.9%。前景也不乐观。明年的高校毕业生创新高，超过1000万人加入求职大军。而且，市场上还有很多大龄失业者，也在找工作。这样严峻的就业形势意味着，最终有相当一部分人会考虑创业。我以前一直赞成创业，但是这几年想法有变化，认为创业有三个条件，只有满足条件，才适合创业。我最近读过一篇文章，作者是美国最大的创业孵化器Y Combinator的创始人之一杰西卡·利文斯顿（Jessica Livingston）。她是四个创始人里面唯一的女性。她回忆了自己为什么创业，文章的最后一段，她这样说："你是一块特殊形状的拼图。你可以改变自己的形状，适应公司现有的空缺。那是传统的方案。但是，还有另一种对你和世界通常都更好的方案：围绕你自己的形状，发展出一幅新的拼图。这就是我所做的，我是一个非常奇怪的形状。"她的意思是，你为别人打工，就必须变成别人要求的样子。但这并不是你内心想要的，如果你想顺应自己的内心和天赋，就应该创业。这话没错，但是有一个前提才能成立：你已经定型了，很难被外界塑造了。这个时候，你走自己的路，内心满意度会高一些。我觉得这是创业的第一 ...继续阅读 (104)

本文为稀土掘金技术社区首发签约文章，14 天内禁止转载，14 天后未获授权禁止转载，侵权必究！我的新的专栏 --现代 CSS 与 Web 动画解决方案。将专注于实现复杂布局，兼容设备差异，制作酷炫动画，制作复杂交互，提升可访问性及构建奇思妙想效果等方面的内容。在兼顾基础概述的同时，注重对技巧的挖掘，结合实际进行运用，欢迎大家关注。正文从这里开始。本文是 CSS Houdini 之 CSS Painting API 系列第三篇。现代 CSS 之高阶图片渐隐消失术现代 CSS 高阶技巧，像 Canvas 一样自由绘图构建样式！在上两篇中，我们详细介绍了 CSS Painting API 是如何一步一步，实现自定义图案甚至实现动画效果的！在这一篇中，我们将继续探索，尝试使用 CSS Painting API，去实现一些过往纯 CSS 无法实现的效果。CSS Painting API再简单快速的过一下，什么是 CSS Painting API。CSS Painting API 是 CSS Houdini 的一部分。而 Houdini 是一组底层 API，它们公开了 CSS 引擎的各个部分，从而使开发人员能够通过加入浏览器渲染引擎的样式和布局过程来扩展 CSS。Houdini 是一组 API，它们使开发人员可以直接访问CSS 对象模型（CSSOM），使开发人员可以编写浏览器可以解析为 CSS ...继续阅读 (23)

本期技术周刊一起了解 Javascript，欢迎大家阅读 ～文章推荐手写一个同步服务端时间的小工具// jump__jump在前端开发的过程中，开发者经常会用到 new Date() 来获取当前时间，但是 new Date() 是获取的当前操作系统的时间，由于用户可以修改当前电脑时间，所以它是不准确的。大部分情况下，用户修改当前电脑时间都没有什么问题，但是当我们需要根据服务端传递的数据时间与当前时间进行计算时，前端展示就会出错。同时，需要过期时间的数据（时间）存入前端缓存（ localStorage, IndexedDB ）中也是会出现问题。这时候我们考虑使用服务器提供的时间，而不是前端时间。服务器每次进行数据交互时都会在响应头提供时间数据。我们可以通过该数据修正前端时间。JavaScript 进阶之路 --- 《手写“回调地狱”》// FFF方我相信有很多学习前端的小伙伴百分百遇到过这样的面试题：---“为什么我们要用 Promise 去代替传统的回调函数？”我相信有很多人都可以随口回答出：“为了避免回调地狱，因为回调地狱会带来xxx的后果....”ok，那么现在我问你，假设现在面试官让你实现一个 “回调地狱”。你脑子里的代码会是怎样的呢？我建议你停下来思考三分钟🤔...不要问为什么有这么令人无语的问题，因为这就是我实实在在的面试题之一。起初我觉得面试官在刁难我，然而当我真正理解 ...继续阅读 (24)

Context本篇我们讲 Context，Context 可以实现跨组件传递数据，大部分的时候并无需要，但有的时候，比如用户设置 了 UI 主题、地区偏好，如果从顶层一层层往下传反而有些麻烦，不如直接借助 Context 实现数据传递。老的 Context API基础示例在讲最新的 API 前，我们先回顾下老的 Context API：class Child extends React.Component { render() { // 4. 这里使用 this.context.value 获取 return{this.context.value}} } // 3. 子组件添加 contextTypes 静态属性 Child.contextTypes = { value: PropTypes.string }; class Parent extends React.Component { state = { value: 'foo' } // 1. 当 state 或者 props 改变的时候，getChildContext 函数就会被调用 getChildContext() { return {value: this.state.value} } render() { return () } } ...继续阅读 (29)

在上一篇文章中 --现代 CSS 之高阶图片渐隐消失术，我们借助了 CSS @Property 及 CSS Mask 属性，成功的实现了这样一种图片渐变消失的效果：CodePen Demo -- 基于 @property 和 mask 的文本渐隐消失术但是，这个效果的缺陷也非常明显，虽然借助了 SCSS 简化了非常多的代码，但是，如果我们查看编译后的 CSS 文件，会发现，在利用 SCSS 只有 80 的代码的情况下，编译后的 CSS 文件行数高达 2400+ 行，实在是太夸张了。究其原因在于，我们利用原生的 CSS 去控制 400 个小块的过渡动画，控制了 400 个 CSS 变量！代码量因而变得如此之大。CSS Houdini 之 CSS Paint API那么，如何有效的降低代码量呢？又或者说，在今天，是否 CSS 还存在着更进一步的功能，能够实现更为强大的效果？没错，是可以的，这也就引出了今天的主角，CSS Houdini 之 CSS Paint API。首先，什么是 CSS Houdini？Houdini 是一组底层 API，它们公开了 CSS 引擎的各个部分，从而使开发人员能够通过加入浏览器渲染引擎的样式和布局过程来扩展 CSS。Houdini 是一组 API，它们使开发人员可以直接访问CSS 对象模型（CSSOM），使开发人员可以编写浏览器可以解析为 CSS 的代码， ...继续阅读 (36)

When I try to use npm install and work with proxy, I always get the network errors as belowThe common solution that need to set the proxy with npm as belownpm config set proxy http://ip:port npm config set proxy https-proxy http://ip:portBut that’s not working for me, and finally I found that need to add one more as belownpm config set registry http://registry.npmjs.org/ npm set strict-ssl falseAfter that it working 4 total views, 4 views todayThe postnpm works with proxyappeared first onCoder Blog. ...继续阅读 (83)

When I try to use npm install and work with proxy, I always get the network errors as belowThe common solution that need to set the proxy with npm as belownpm config set proxy http://ip:port npm config set proxy https-proxy http://ip:portBut that’s not working for me, and finally I found that need to add one more as belownpm config set registry http://registry.npmjs.org/ npm set strict-ssl falseAfter that it workingThe postnpm works with proxyfirst appeared onCoder Blog. ...继续阅读 (81)

在过往，我们想要实现一个图片的渐隐消失。最常见的莫过于整体透明度的变化，像是这样：div { width: 300px; height: 300px; background: url(image.jpg); transition: .4s; } .img:hover { opacity: 0; }但是，CSS 的功能如此强大的今天。我们可以利用 CSS 实现的渐隐效果已经不再是如此的简单。想想看，下面这样一个效果，是 CSS 能够实现的么？答案是肯定的！本文就将一步一步，从零开始，仅仅使用一个标签，实现上述的图片渐隐效果。这里，有两个核心的点：如何将一张图片切割的这么细，切割成这么多块？基于上述 （1）的基础上，又该如何分别控制这些小块的独立隐藏和展示呢？莫慌，让我们一步一步来解决他们。强大的 Mask首先，我们需要用到 Mask。在 CSS 中，mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。语法最基本，使用 mask 的方式是借助图片，类似这样：{ /* Image values */ mask: url(mask.png); /* 使用位图来做遮罩 */ mask: url(masks.svg#star); ...继续阅读 (27)

之前学习函数式编程语言的过程中，有 3 比较重要的特性：函数是一等公民数据不可变惰性求值JavaScript 虽然具有函数式语言的特性，但是很可惜，它还是没有具备不可变数据这一大优势。在开发复杂系统的情况下，不可变性具有两个非常重要的特性：不可修改 (减少错误的发生) 以及结构共享(节省空间)。不可修改也意味着数据容易回溯，易于观察。当前端开发谈到不可变性数据时候，第一个一定会想到Immer库，Immer 利用ES6 的 proxy，几乎以最小的成本实现了 js 的不可变数据结构。React 也通过不可变数据结构结合提升性能。不过 Immer还是有一定侵入性。那么有没有较好且没有侵入的解决方案呢？本文将介绍另一个工具immutability-helper，该库也在React 性能优化有所描述。浅拷贝实现不可变数据最简单的不可变数据结构就是深拷贝了。const newUser = JSON.parse(JSON.stringify(user)); newUser[key] = value;但这对于大部分的场景来说是无法接受的，它大量消耗了时间与空间，会让复杂的系统变得不可用。事实上，开发中完全可以利用浅拷贝来实现不可变数据结构的，这也是 immutability-helper 所使用的方案。我们先来构造以下数据：const user = { name: "wsafight", ...继续阅读 (29)

前言这天突然收到了UI修改设计稿的消息通知："xxx 已修改 xxx 项目并 @ 了你，请及时查看变更内容"，一条、两条、三条 ......，修改消息铺天盖地而来，然后就什么都看不到了（因为我选择开启消息免打扰）!，但没多久产品就非常贴心的询问是否已经收到了对应的消息，自然免不了还要介绍一下本次修改的内容和原因（消息免打扰失效）。于是，我（心甘情愿的）打开了设计稿正打算好好欣赏欣赏，不曾想一道光芒一闪而过（是谁拉开了窗帘），看到了这样的内容：而这个显示方式之前使用的是Steps 步骤条的方式展示的，类似于：意味着要从一个Steps 步骤条改变成一个progress-step 流程节点的形式，这很难实现吗？不难！很容易实现吗？倒也未必！【扩展】假设现在有个面试官就用这个progress-step组件作为场景题，想想你该如何描述对这个组件的设计思路！！！组件设计基本原则撸起袖子一把梭？千万先别急着撸起袖子开干，咱们先来聊聊组件设计的基本原则，往往一把梭哈的代码容易形成一个糅杂着各种逻辑的组件，因为这样的设计是脆弱的，很容易带来副作用和难以预知的结果，需求不变更还好，需求要是频繁变更，那么主要问题就会出现，可能因为一个原因去改变组件，就会破坏其他的职责（行为），于是你不得不在多处都进行修改。怎么知道一个组件复不复杂，这就要看组件内部到底维护了多少和自身状态相关的数据，即非props传入的 ...继续阅读 (27)

从问题出发我被问过这样一个问题：想要实现一个useTitle方法，具体使用示例如下：function Header() { const [Title, changeTitle] = useTitle(); return (changeTitle('new title')}>) }但在编写useTitle代码的时候却出了问题：function TitleComponent({title}) { return{title}} function useTitle() { const [title, changeTitle] = useState('default title'); const Element = React.createElement(TitleComponent, {title}); return [Element.type, changeTitle]; }这段代码直接报错，连渲染都渲染不出来，如果是你，该如何修改这段代码呢？元素与组件其实这就是一个很典型的元素与组件如何区分和使用的问题。元素我们先看 React官方文档中对 React 元素的介绍：Babel 会把 JSX 转译成一个名为React.createElement()函数调用。以下两种示例代码完全等效：const element =Hello, world ...继续阅读 (27)

在开发 web 应用程序时，性能都是必不可少的话题。同时通用 web 应用程序离不开数据的增删改查，虽然用户大部分操作都是在查询，但是我们也不可以忽略更改数据对于系统的影响。于是个人写了一个业务数据比对库diff-helper。方便开发者在前端提交数据到服务端时候去除不必要的信息，优化网络传输和服务端性能。项目演进任何项目都不是一触而就的，下面是关于 diff-helper 库的编写思路。希望能对大家有一些帮助。简单对象比对前端提交 JSON 对象数据时，很多情况下都是对象一层数据比对。在不考虑对象中还有复杂数据（嵌套对象和数组）的情况下，编写如下代码// newVal 表示新数据，oldVal 表示老数据 const simpleObjDiff = ({ newVal, oldVal, }): Record=> { // 当前比对的结果 const diffResult: Record= {}; // 已经检查过的数据项，可以优化遍历性能 const checkedKeys: Set= new Set(); // 遍历最新的对象属性 Object.keys(newVal).forEach((key: string) => { // 将新数据的 key 记录一下 checkedKeys.add(key); // 如果当前 ...继续阅读 (27)

大家好，我卡颂。22年11月14日，Deno发布了v1.28，距离他第一个稳定版本v1.0.0发布（2020年5月13日）已过去2年。作为Node.js的竞争者，Deno似乎并没有达到取代前者的目标。甚至，他在前端社区的声量也越来越小。那么，这两年Deno都经历了什么，未来他会取代Node.js么？欢迎加入人类高质量前端框架群，带飞与Node.js的不同同为js运行时环境，Deno与Node有什么不同呢？抛开各种细枝末节，他们最大的不同在于 ——Deno将开放放在很重的地位。什么平台是最开放的呢？答案是web。所以，在Deno设计的方方面面都能看到web的影子。比如：原生支持很多web API（比如fetch、URLSearchParams、Web Workers...）全局变量是与浏览器一样的window对象原生支持浏览器标准的ESM规范那么，这些API、标准与开放有什么关系呢？这里讲个小故事。Deno的作者Ryan Dahl同时也是Node的作者。在实现Node之初，他将工作重心放在事件驱动模型的实现上。这时，有个项目中引入的模块该如何解析的问题亟待解决。他接受了NPM提出的package.json建议。简单的说，Node中的require方法会去package.json中寻求如何解析模块（dependencies、devDependencies等字段）。后来，NPM逐渐成为N ...继续阅读 (22)

背景背景是这样的，我们使用vue2开发一个在线客服使用的IM应用，基本布局是左边是访客列表，右边是访客对话，为了让对话加载更友好，我们将对话的路由使用缓存起来。但是如果将所有对话都缓存，未必会造成缓存过多卡顿的问题。自然，就使用上了提供的max属性，设置一个缓存对话内容组件上限，按照LRU算法，会销毁最旧访问的组件，保留最近使用的组件。本以为美好如期而至，直到上线后翻大车了，真实对话量大了，内存飙升卡顿。后来具体分析内存增长点，通过vue的devtool查看组件树，发现对话内容组件一直是递增，并非维持在max设置的数量上限！各位看官稍安勿躁，下面就具体分析造成这个「大坑」的原理，已经解决它的方案。情景模拟为了方便模拟背景案例，这里就用vue2简单的写一个demo。对话列表组件APP.vue，点击列表中的某个访客，加载与访客对话内容。{{ user.name }}import ChatContent from './views/ChatContent.vue'; export default { components: { ChatContent }, data() { return { active: -1, currentUser: {}, userList: [{ id: 1, name: "张三" }, ...继续阅读 (36)

在前端导出PDF，解决中文乱码一直是一个头疼的问题。要解决这个问题，需要将ttf等字体文件内容注册到页面PDF生成器中。但是之前网页是没有权限直接获取客户机器字体文件，这时就需要从服务器下载字体文件或者提示用户选择字体文件上传到页面。对于动辄数十兆（M）的中文字体文件，网络不好时并不是一个好的解决方案。Chrome 103提高页面性能的一种方法是对当前的使用资源经行提示。例如，预加载文件或连接到不同的服务器。但是在服务器发送页面内容之前，浏览器是无法对提示采取行动。服务器需要几百毫秒才能生成一个请求页面，在浏览器开始接收页面内容之前，服务器是不进行任何处理的。但是在这个等待的过程中，服务器是需要一些固定子资源，例如 CSS 文件、JavaScript 和图像内容，这个时候服务器可以立即响应新的 HTTP 103 Early Hints 状态代码，并询问浏览器预加载那些子资源，以提供高座效率。一旦服务器生成了页面，它就可以用正常的 HTTP 200 响应发送它。当页面进入时，浏览器已经开始加载所需的资源。作为一个新 HTTP 状态代码，所以它需要更新我们服务器。本地字体访问Web 上的字体一直是一个挑战，尤其是允许用户创建自己的图形和设计的应用程序就是一个难点。现在应用程序只能使用网络字体，但无法获得用户在其计算机上安装的字体列表；而且，无法访问完整的字体表数据，如果我们需要实现自己 ...继续阅读 (21)

前言【同事 A】：你知道Element UI的Upload组件怎么实现批量拖拽上传吗？现有的二次封装的Upload组件只能做到批量点击上传。【我】：Show me your code ！！！【同事 A】：代码地址是https://git.i-have-no-idea.com/what-the-hell【我】：就冲这个地址，就算是天天CRUD的我，也高低给你整一篇水文 ~~同事 A接到的大致需求是这样的：当用户同时选择单个文件时，该文件会经过识别后需要生成一个对应待填写的信息项，并将识别的内容进行自动填充和供用户手动编辑当用户同时选择多个文件时，这多个文件会被作为同一个待填写的信息项的内容进行显示接口设计的内容大致如下：前端每调用一次该识别接口，就会返回一个新的待填写的信息项数据，其中会包含本次上传的单个或多个文件信息意味着生成待填写的信息项应该只调用一次上传接口，多次调用则会得到多个待填写的信息项下面就基于Element UI的Upload组件进行二次封装，一边封装一边复现上述问题，然后在解决问题，主要内容包含批量点击上传和批量拖拽上传两种方式。自定义上传方式该项目涉及核心技术为：vue@2.6.10 + vue-property-decorator@8.3.0 + element-ui@2.15.1，下面省略创建测试项目的过程 ~ ~默认上传方式熟悉Element UI的都知道U ...继续阅读 (29)

有个前端项目，需要用到配置文件。这个配置文件实在是太大了，就想拆成多个小的，然后一一引入，组合成一个完整的配置文件。如果是vue代码，这种情况根本是手到擒来，不费吹灰之力，而该前端项目是个普通的js程序。但其实，在编写VUE代码过程中，我们所熟知的import，export，并不是VUE的语法，而是js es6（？）的语法。所以，虽然不是VUE项目，现在一般的浏览器都能支持js代码中使用import和export。思路是这样的：1）将配置文件拆成一个主配置文件，以及多个小的js文件。 ...继续阅读 (78)

对 Chrome 扩展功能熟悉的小伙伴，可能都有用过 Chrome 的 3D 展示页面层级关系这个功能。可以通过控制台 --> 右边的三个小点 --> More Tools --> Layers打开。即可以看到页面的一个 3D 层级关系，像是这样：这个功能有几个不错的作用：页面层级概览快速厘清页面 z-index 层级之间的关系用于排查一些重绘过程（滚动过程）页面卡顿当然，也会存在一些问题，譬如当页面的 DOM 数量太多的时候，这个插件有的时候就会卡到无法交互了。同时，虽然可以快速厘清页面 z-index 层级之间的关系，但是有的时候没法很好的快速看清整个页面嵌套关系。同时，它只能看整个页面的概览，无法选取部分节点进行观察。本文，就将介绍一种，快速通过 CSS，构建页面深度关系的 3D 视图，快速清晰的厘清页面 DOM 层级及深度之间的关系。并且可以运用在不同的节点单独进行观察。当然，总体而言，是基于：CSS 选择器CSS 3D 属性的一次大规模综合应用，整体看完，相信你能学到不少东西。使用 CSS 构建 3D 可视化 DOM 结构视图假设，我们首先随时实现一段 DOM 结构，其简单的代码如下：This is HeaderLorem LOremLorem LOremThis is Footer部分 CSS 代码：.g-wrap { margin: auto; wid ...继续阅读 (27)

设计模式设计模式总共有23种，但在前端领域其实没必要全部都去学习，毕竟大部分的设计模式是在JavaScript中占的比重并不是那么大，本文会列举出一些JavaScript常见的、容易被忽视的设计模式，不过还是有必要先简单了解一下设计模式相关的概念.设计模式是什么？先举个形象的例子，比如现在正在考试而且恰好在考数学，实际上每道数学题目都对应着一种或多种解决公式（如和三角形相关的勾股定理），而这些解决公式是经过数学家研究、推导、总结好的，我们只需要把题目和已有公式对应上就很容易解决问题，而设计模式也是如此，只不过是它是相对于软件设计领域而言的.设计模式（Design pattern）是一套被反复使用、经过分类、代码设计经验的总结，简单来说设计模式就是为了解决软件设计领域不同场景下相应问题的解决方案.设计原则（SOLID）SOLID实际上指的是五个基本原则，但在前端领域涉及到最多的是仍然是前面两条：单一功能原则（Single Responsibility Principle）开放封闭原则（Opened Closed Principle）里式替换原则（Liskov Substitution Principle）接口隔离原则（Interface Segregation Principle）依赖反转原则（Dependency Inversion Principle）设计模式的类型主要分为三个类 ...继续阅读 (32)

看到个骚操作，玩了一下，写了个 bookmarkletnavigator.mediaDevices.getDisplayMedia({video:true}).then(function(stream){ const mr=new MediaRecorder(stream,{mimeType:"video/webm;codecs=h264,opus"}); mr.ondataavailable=function(ev){ const a=document.createElement('a');a.href=URL.createObjectURL(ev.data); a.download ='screen_capture.webm';a.click(); }; // will be called when .stop() with ev.data as a Blob mr.start(); })这段代码也是很多WebRTC共享白板的实现原理。看起来也很简单，而且不需要额外的权限确认。如果不需要另存为一个名字，则可以直接location.assign()又节约几个字。不知道还有没有办法继续节约代码量？有点很好奇为啥chrome不支持 .mp4 封装。偏袒自家的 webm ？ ...继续阅读 (90)

前言【负责人 A】：现在报表部分基于接口的Excel的导入和导出功能有点慢，前端这边能不能实现一下这个功能，然后我们在比对看看效果！【切图仔 B】：接口这边不能优化一下吗？比如排查下慢的原因什么的。【负责人 A】：现在后端开发任务比较重，处理的核心任务也多还会涉及一些架构上的调整，所以想着前端这边可以处理一下，然后看看整体效果。【切图仔 B】：OK，试试 就 ~ Shi Shi ~下面就基于xlsx这个第三方库封装一个组件实现表格导入，以及json数据导出Excel功能的json2Excel()工具方法。选择xlsx的原因如下图所示：Excel 解析为 JSON基本内容组件效果和结构组件内容是很简单的结构和视图，直接查看如下的页面效果和代码即可：解析数据：{{ excelData }}import { reactive, ref } from 'vue' import * as XLSX from 'xlsx' interface Props { accept: string } const props = withDefaults(defineProps(), { accept: '.csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.sprea ...继续阅读 (23)

最近在进一步学习 Javascript，发现之前对生成器这一块都不是特别熟悉，然后看到 redux-stage 对于异步 action 的写法是基于生成器。而且之前也只知道 async 和 await 是语法糖，但不知道究竟是代糖还是蔗糖呢。 ...继续阅读 (29)

类比法是一种学习方法，它是通过将新知识与已知知识进行比较，从而加深对新知识的理解。在学习 Go 语言的过程中，我发现，通过类比已有的前端知识，可以更好地理解 Go 语言的特性。语法对比import 包方式Go 语言的包导入方式与前端的模块导入方式类似，都是通过 import 关键字导入，但是 Go 语言的导入方式更加简洁，只需要写包名即可，不需要写路径。// js import a from "a"; import b from "b" // go import ( "a" "b" )变量声明// js var a = "a"; let b = "b"; const c = "c"; // go var x string = "x"; x := "x" // 自动把变量类型、声明和赋值都搞定了条件// js if (a === "js") { } else { } // go if a == "go" { } else { }循环// js for(let i = 0; i < 100; i++) { } // go for i := 0; i < 100; i++ { }函数// js function helloJS() { console.log("hello js"); learnJS(); } function le ...继续阅读 (17)

关于thisthis在JavaScript中很常用，关于this，要弄懂this， 首先就要知道this是什么？为什么要用this？this是什么当一个函数被调用时，会创建一个活动记录（有时候也称为执行上下文）。这个记录会包含函数在哪里被调用（调用栈）、函数的调用方法、传入的参数等信息。this就是记录的其中一个属性，会在函数执行的过程中用到。this是在运行时进行绑定的，并不是在编写时绑定，它的上下文取决于函数调用的各种条件。this的绑定和函数声明的位置没有任何关系，只取决于函数的调用方式。为什么要用thisthis提供一种更优雅的方式来隐式“传递”一个对象的引用，因此可以将API设计得更加简洁且易复用。如果没有提供this，当然我们可以通过传递上下文方式实现。function sayHi(context) { var greeting = `hi, I'm ${sayName(context)}` console.log(greeting) } function sayName(context) { return context.name.toLowerCase() } var me = { name: 'Winfar' } sayHi(me) // hi, I'm winfar这样未尝不可，但是随着使用模式越来越复杂，显示传递上下文对象会让代码变得越来越混乱 ...继续阅读 (30)