前端入门到入土?(四)

简介: 前端入门到入土?

前言

hello world欢迎来到前端的新世界


😜当前文章系列专栏:前端面试

🐱‍👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果出现错误,感谢大家指出)🌹

💖感谢大家支持!您的观看就是作者创作的动力

什么是柯里化函数?

柯里化(Currying)是一种将接受多个参数的函数转换成一系列接受单个参数的函数的过程。这种转换过程使得原始函数能够部分应用(Partial Application)和复用,从而提供更大的灵活性和可读性。


在柯里化中,原始函数的每个参数都被逐个传递给一系列新函数,每个新函数只接受一个参数,并返回一个新的函数,用于接收下一个参数。这个过程可以持续到所有参数都被传递完毕,最后返回原始函数的结果。


function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    } else {
      return function (...nextArgs) {
        return curried.apply(this, args.concat(nextArgs));
      };
    }
  };
}


使用该柯里化函数,可以将一个接受多个参数的函数转换为逐个接收参数的函数序列。如下所示:


function add(a, b, c) {
  return a + b + c;
}
const curriedAdd = curry(add);
const result = curriedAdd(1)(2)(3); // 输出 6


在上述示例中,curry函数接受一个函数作为参数,并返回一个柯里化的版本。通过调用curriedAdd并逐个传递参数,可以逐步应用函数的参数并最终得到结果。


柯里化函数的优势在于它能够通过部分应用参数来创建新的函数,从而提供更大的灵活性和可复用性。它可以帮助我们更容易地构建函数组合、实现高阶函数和创建数据转换管道等功能。并且,柯里化也有助于代码的可读性和简洁性。

Web Worker 是什么?

Web Worker 是 HTML5 标准中提供的一项技术,它可以让 JavaScript 脚本在后台线程运行,从而避免阻塞 UI 线程。Web Worker 可以创建一个独立的线程来执行脚本,从而使得主线程可以专注于用户交互和响应。


特点


  • 独立线程:Web Worker 可以在独立的线程中运行 JavaScript 代码,从而避免了在主线程中运行耗时任务的风险。
  • 沙箱环境:Web Worker 运行的 JavaScript 代码在一个受限的沙箱环境中,不能访问与主线程共享的 DOM、全局变量等资源,从而保证了数据安全性和代码稳定性。
  • 事件通信:Web Worker 可以通过事件来与主线程进行通信,从而实现线程间的数据传递和同步操作。


应用场景


  • 大量计算密集型任务:任何需要进行大量计算的任务都可能会阻塞主线程,导致应用变得不流畅或无响应。通过将这些计算密集型任务放在 Web Worker 中执行,可以确保主线程的响应性,并提供更好的用户体验。
  • 图像处理:对图像进行处理、裁剪、缩放等操作通常需要大量的计算资源和时间。将这些操作放在 Web Worker 中,可以在后台进行处理,同时保持主线程的即时响应。
  • 数据解析和转换:当需要解析大型数据文件(如 CSV、JSON、XML 等)或执行复杂的数据转换时,这些操作可能会导致主线程的阻塞。通过在 Web Worker 中进行解析和转换,可以避免阻塞主线程,同时提高应用的性能和响应能力。
  • 后台网络请求:如果需要进行大量的后台网络请求、数据获取或数据处理,可以考虑将这些任务放在 Web Worker 中执行。这样可以避免阻塞主线程,并允许应用保持响应,同时还可以提高网络请求的并发性能。


使用方式以及api


  • 创建 Web Worker:
    可以通过 new Worker() 构造函数创建一个 Web Worker 对象。例如,以下代码创建了一个 worker.js 文件来执行后台任务


var worker = new Worker('worker.js');


  • 发送消息和接收消息:
    Web Worker 与主线程之间的通信是通过消息传递实现的。在 Web Worker 中使用 postMessage() 方法向主线程发送消息,主线程可以通过 onmessage 事件监听这些消息。例如,在 Web Worker 中发送消息:


postMessage('Hello, main thread!');


在主线程中监听消息:


worker.onmessage = function(e) {
  console.log('Received message: ' + e.data);
};


  • 关闭 Web Worker:
    当不再需要 Web Worker 时,可以使用 terminate() 方法关闭它。例如,以下代码在 Web Worker 中调用 close() 方法关闭自身:


self.close();


  • 异常处理:
    Web Worker 运行时可能会出现异常,可以通过 onerror 事件处理这些异常。例如,在 Web Worker 中抛出一个异常:


throw new Error('An error occurred in the worker!');


在主线程中监听异常:


worker.onerror = function(e) {
  console.error('Error in worker: ' + e.message);
};


需要注意的是,Web Worker 不能直接访问 DOM 元素,它们与主线程之间通过消息传递进行通信。因此,在 Web Worker 中不能使用 alert()、prompt() 等方法,也不能操作 DOM 元素。

ransition和animation的区别?

transition(过渡):


  • 应用方式:transition属性用于在状态改变时平滑地过渡元素的样式。它通常是通过定义初始状态和结束状态之间的差异来实现。
  • 控制方式:使用transition属性,你可以指定哪些属性应用过渡效果(如color、width等),以及过渡的持续时间、延迟时间、过渡效果的速度曲线等。
  • 适用场景:transition适合于简单的状态改变,比如当鼠标悬停在一个元素上时改变其颜色或宽度。它也适用于一些简单的元素交互效果,如展开折叠菜单、切换选项卡等。


animation(动画):


  • 应用方式:animation属性允许你创建复杂的动画效果,通过定义一系列关键帧(@keyframes)来描述元素在不同时间点的样式。每个关键帧定义了元素在动画序列中的某个特定状态。
  • 控制方式:使用animation属性,你可以定义动画的名称、持续时间、延迟时间、播放次数、动画速度曲线以及是否反向播放等。
  • 适用场景:animation适用于复杂的动态效果,例如元素的旋转、缩放、移动等复杂变换。通过使用关键帧,你可以控制元素在动画过程中的每个详细状态,从而实现更多样化和复杂的动画效果。


总结


  • transition适用于简单的状态改变和过渡效果,适合用于创建简单的交互效果。
  • animation适用于创建复杂的动画效果,更灵活且能够实现更多样化的动态效果。


后言

创作不易,要是本文章对广大读者有那么一点点帮助 不妨三连支持一下,您的鼓励就是博主创作的动力


目录
相关文章
|
1月前
|
前端开发 机器人 API
前端大模型入门(一):用 js+langchain 构建基于 LLM 的应用
本文介绍了大语言模型(LLM)的HTTP API流式调用机制及其在前端的实现方法。通过流式调用,服务器可以逐步发送生成的文本内容,前端则实时处理并展示这些数据块,从而提升用户体验和实时性。文章详细讲解了如何使用`fetch`发起流式请求、处理响应流数据、逐步更新界面、处理中断和错误,以及优化用户交互。流式调用特别适用于聊天机器人、搜索建议等应用场景,能够显著减少用户的等待时间,增强交互性。
252 2
|
2月前
|
前端开发
【前端web入门第四天】02 CSS三大特性+背景图
本文详细介绍了CSS的三大特性:继承性、层叠性和优先级,并深入讲解了背景图的相关属性,包括背景属性、背景图的平铺方式、位置设定、缩放、固定以及复合属性。其中,继承性指子元素自动继承父元素的文字控制属性;层叠性指相同属性后定义覆盖前定义,不同属性可叠加;优先级涉及选择器权重,包括行内样式、ID选择器等。背景图部分则通过具体示例展示了如何设置背景图像的位置、大小及固定方式等。
256 91
|
7天前
|
编解码 前端开发 JavaScript
从入门到精通:揭秘前端开发中那些不为人知的优化秘籍!
前端开发是充满无限可能的领域,从初学者到资深专家,每个人都追求更快、更稳定、更用户体验友好的网页。本文介绍了四大优化秘籍:1. HTML的精简与语义化;2. CSS的优雅与高效;3. JavaScript的精简与异步加载;4. 图片与资源的优化。通过这些方法,可以显著提升网页性能和用户体验。
14 3
|
12天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
12天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
20 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
2月前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
1月前
|
自然语言处理 资源调度 前端开发
前端大模型入门(四):不同文本分割器对比和效果展示-教你如何根据场景选择合适的长文本分割方式
本文详细介绍了五种Langchain文本分割器:`CharacterTextSplitter`、`RecursiveCharacterTextSplitter`、`TokenTextSplitter`、`MarkdownTextSplitter` 和 `LatexTextSplitter`,从原理、优缺点及适用场景等方面进行了对比分析,旨在帮助开发者选择最适合当前需求的文本分割工具,提高大模型应用的处理效率和效果。
|
1月前
|
机器学习/深度学习 人工智能 自然语言处理
前端大模型入门(三):编码(Tokenizer)和嵌入(Embedding)解析 - llm的输入
本文介绍了大规模语言模型(LLM)中的两个核心概念:Tokenizer和Embedding。Tokenizer将文本转换为模型可处理的数字ID,而Embedding则将这些ID转化为能捕捉语义关系的稠密向量。文章通过具体示例和代码展示了两者的实现方法,帮助读者理解其基本原理和应用场景。
192 1
|
1月前
|
人工智能 前端开发 JavaScript
前端大模型入门(二):掌握langchain的核心Runnable接口
Langchain.js 是 Langchain 框架的 JavaScript 版本,专为前端和后端 JavaScript 环境设计。最新 v0.3 版本引入了强大的 Runnable 接口,支持灵活的执行方式和异步操作,方便与不同模型和逻辑集成。本文将详细介绍 Runnable 接口,并通过实现自定义 Runnable 来帮助前端人员快速上手。
|
1月前
|
存储 JavaScript 前端开发
前端开发:Vue.js入门与实战
【10月更文挑战第9天】前端开发:Vue.js入门与实战