最近面试的时候,正好遇到了面试官问了一下函数柯里化,只记得是可以接收多个参数然后实现对参数的一个处理,但是具体怎么实现,以及它的作用是什么,当时就懵了,好记性不如烂笔头,所以今天就来总结一下函数柯里化。
什么是函数柯里化函数柯里化(Currying) 是一种将多个参数的函数转换为一系列仅接受一个参数的函数的技术。
简单来说,柯里化将一个接收多个参数的函数,转化为接收单一参数的函数序列。每个函数接收一个参数并返回一个新函数,直到所有的参数都被接收,最终返回原函数的结果。
柯里化的基本形式普通函数:直接接收多个参数并返回结果
123function add(a, b, c) { return a + b + c;}
柯里化函数:返回一系列接收一个参数的函数,最后返回计算结果。每次调用函数时,它接收一个参数并返回一个新函数,直到所有参数都传入为止。柯里化后的函数可以这样调用:
12345678910function curriedAdd(a) { return function(b) { return function(c) ...
前言TailwindCss最近确实是非常火,部门内的多个新增项目已经从开始的css预编译器转换到了TailwindCss或者UnoCss,进行试用。本文先跟我快速上手一下tailwindcss,另外预定下一篇文章主题是UnoCss(这个框架有部分同事觉得非常好用)。其实在我刚开始用的时候,我也会觉得,这怎么写了一坨么,怎么维护,但后来越写越流畅,啊,真香。
TailwindCss简介Tailwind CSS 是一个用于快速构建现代网站和应用程序的实用工具优先的 CSS 框架。它提供了一套丰富的 CSS 类,可以用于快速构建各种 UI 组件。这意味着你可以根据自己的需求,选择使用哪些 CSS 类,而不是被迫使用所有的 CSS 类。这使得 Tailwind CSS 的 CSS 文件非常小,可以快速加载和渲染页面。
Tailwind CSS 自从开源以来,用户社区就非常活跃,社区贡献的组件库也非常丰富,至于有多火,目前为止github上已经有82.5k star了。
快速上手TailwindCss中最大的特性就是,它是一个原子化的css框架。
我们传统的css代码是这样写的
1 ...
前言年中了,最近忙的一批。导致好久没更新博客了。还是忙里偷闲,趁机学了一下next.js。
更多的详细内容大家可以参考官方文档
Next.js是什么Next.js 是一个基于 React 的轻量级框架,旨在为开发人员提供简单高效的工具来构建现代化的 web 应用。它由 Vercel 开发,提供了许多开箱即用的功能,如服务端渲染(Server-Side Rendering, SSR)、静态生成(Static Site Generation, SSG)、API 路由、全局 CSS 支持、以及对 SEO(搜索引擎优化)友好的机制。
与传统的 React 应用不同,Next.js 不仅是前端框架,它结合了前端和后端的功能,为开发者提供了一个完整的全栈开发平台。开发者不仅可以构建前端界面,还可以轻松编写后端 API,而无需额外的后端技术栈。这使得 Next.js 成为构建高性能、可扩展的 web 应用的理想选择。
Next.js的特性和优势服务端渲染 (Server-Side Rendering, SSR)
性能提升:传统的 React 应用是纯客户端渲染,这意味着需要先加载 JavaScrip ...
概述async/await是ES2017引入的特性专门用来简化异步编程。async和await是JavaScript中用于处理异步操作的关键字,它们针对前端异步编程,提供了更清晰、更简洁的语法。本文将详细介绍 async/await 的使用、及个人对其的一些理解。
async/await简介async/await 是 JavaScript 中用于处理异步代码的语法糖, async用于定义一个异步函数,而 await用于暂停异步函数的执行,直到Promise的状态变成resolved或rejected。
async:定义一个异步函数,该函数会返回一个 Promise。即使函数内部没有显式返回 Promise,async函数也会隐式将返回值包装成 Promise。
await:只能在async函数中使用,用于等待Promise返回的状态。它会暂停函数的执行,直到Promise完成,并返回Promise的结果。
1234567//async函数也会隐式将返回值包装成 Promise可以理解为如下代码:async function foo() & ...
前言背了那么多的八股文,都知道Vue2的响应式原理是基于Object.defineProperty实现的,Vue3的响应式原理是基于Proxy实现的,Proxy相比于Object.defineProperty有更好的性能,等等。今天我们用一段简易的代码来进行分析。
什么是Vue的响应式在数据变化时重新render依赖相关函数(组件),从而更新视图。
简单来说就是当我们某一个数据对象的属性发生变化时,能被Vue框架所监测到,比如使用属性的时候会监测到某对象的某属性被读取了,当该属性发生变化时,会监测到该属性被修改了, 再加上一些额外的一些处理逻辑,最终去更新视图。
Object.defineProperty在ES6之前,我们是只能通过Object.defineProperty可以将对象的某个属性设置get 和 set 函数来监测其属性值的变化,以下是简单的示例代码:
12345678910111213141516171819202122const obj = { name: 'VapausQi', age: 18}let value = ...
刚工作那会,因为对开发岗位知识体系认知不足,所以短期内迅速学习补充了大量的资料,一切的目的都是为了让这些知识能支撑我日常的工作,避免写不出代码、亦或是避免别人说到了相应的知识点自己茫茫然的尴尬。
这样速成的缺点就是,自己有些知其然而不知其所以然。
随着时间的推移及对技术上学习的深入,才发现脑海中学过的知识框架逐渐具像化,变得越来越清晰,也真正的形成了学习上的一个闭环。
那么今天就来谈谈最开始学习过的前端模块化。
浅谈前端模块化在讲具体定义之前,先来说一个场景,当你在写代码的时候,比如写一个函数,这个函数内部需要一个方法来判空,这时你想:要将这个判空方法提取到外面封装一下,避免写在业务函数里,所以你将这个判空方法提取到同文件的页面,并完成了你的需求。好,这证明你有很好的解耦思想。
但是,随着你项目的扩大,你会发现,这个判空方法你不仅仅在当前页面需要,在其他页面也需要,这时,你会想着将这个方法提取到一个公共的文件里,然后在需要判空方法的页面都能调用这样就能避免少写一些代码。好,这证明你有很好的模块化思想(这很重要)。而当你对这个方法抽离,在别的文件内引入使用的过程中,其实就是一个模块化的过 ...
前几天分享了开源的Fuse.js开源模糊搜索工具,其中介绍到了其主要的算法是对Bitap算法的修改实现,那今天就来分析下其源码中的实现。
温馨提示文章有点长。
Bitap算法简介bitap算法(也称为shift-or、shift-and或Baeza-Yates-Gonnet算法)是一种近似字符串匹配算法。该算法判断给定文本是否包含与给定模式“近似相等”的子字符串,其中近似相等是根据Levenshtein距离定义的 - 如果子字符串和模式彼此之间的距离在给定的k以内,则算法认为它们相等。该算法首先预先计算一组位掩码,其中包含模式的每个元素的一个位。然后它能够使用速度极快的 按位运算完成大部分工作。
简易注释:近似字符串匹配算法: 在计算机科学中,近似字符串匹配(通常俗称模糊字符串搜索)是 一种查找与模式近似匹配(而非精确匹配)的字符串的技术。近似字符串匹配问题通常分为两个子问题:在给定字符串中查找近似子字符串匹配和查找与模式近似匹配的字典字符串。
Levenshtein距离: 两个字符串之间的Levenshtein距离,是度量它们之间差异的一种字符串度量,也被称为编辑距离。
位掩码: ...
最近逛github的时候发现了一个非常好用的轻量工具库,Fuse.js,支持模糊搜索。感觉还是非常好用的,所以有了此篇博客,这篇文章主要是介绍Fuse的使用,同样,我对这个开源项目的实现也非常感兴趣。后续会出一篇Fuse源码解析的文章来分析其实现原理。
Fuse.js是什么?强大、轻量级的模糊搜索库,没有任何依赖关系。(没错 ,就是这么简单的一个描述)
什么是模糊搜索?一般来说,模糊搜索(更正式的名称是近似字符串匹配)是查找与给定模式近似相等(而不是完全相等)的字符串的技术。
通常我们项目中的的模糊搜索大多数情况下有几种方案可用:
前端工程通过正则表达式或者字符串匹配来实现
调用后端接口去匹配搜索
使用搜索引擎如:ElasticSearch或Algolia等
但是这些方案都有各自的缺陷,比如正则表达式和字符串匹配的效率较低,且无法处理复杂的搜索需求,而调用后端接口和搜索引擎虽然效率高,但是需要额外的服务器资源,且需要维护一套搜索引擎。
所以,Fuse.js的出现就是为了解决这些问题,它是一个轻量级的模糊搜索库,没有依赖关系,支持复杂的搜索需求,且效率高,当然Fuse并不适用于所有场 ...
前言越来越发现最难学的其实是CSS各类样式,这个专题会介绍一些CSS有趣好用的技巧。
奇淫巧技:汉语成语,拼音:qí jì yín qiǎo,意思是指新奇的技艺和作品。出自《书·泰誓下》
光影效果先来看一段要实现的效果:
通常情况下,部分前端同学看到这个效果已经去喊UI同学出图了
但是其实可以使用动画来实现,下面是完整的实现流程供大家参考
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content=& ...
前言在项目的前端工程中,我们通常会做一些异常的容错处理和异常信息收集埋点,以便快速的定位一些工程中在开发中难以预见或因为粗心而产生的一些Bug,或者为了便于优化整体项目以便给用户带来最佳的使用体验。
比如我们代码中常见的 try-catch 或者Promise中的因reject情况下编写的catch逻辑代码,这种防御式编程都是对项目的容错处理,为了避免造成程序上的功能损坏。但通常这种代码都是开发人员可预见性的错误,自然做了相应处理,除此之外,一些难以预见的错误要怎么办? 那么就有了今天的主题,前端工程的全局异常信息处理收集:通过程序报错的堆栈信息去收集异常。
全局异常信息收集方法(Vue工程)window.onerror
window.onerror描述window.onerror 能捕获未被其他 try…catch 块处理的同步 JavaScript 错误。这包括代码中的语法错误、运行时错误,以及外部脚本中的错误等。
参数1、 errorMessage: 错误信息或描述2、 scriptURI: 发生错误的脚本 URL3、 lineNumber: 错误发生的行号4、 column ...