Menu

前端

前端开发相关笔记,包括一些开发经验和代码。

Nodejs 模块规范 CJS 与 ESM 及其衍生后缀 .cjs 和 .mjs 文件

自 13.2.0 版本开始,Nodejs 在保留了 CommonJS(CJS)语法的前提下,新增了对 ES Modules(ESM)语法的支持。 天下苦 CJS 久已,Node 逐渐拥抱新标准的规划当然值得称赞,我们也会展望未来 Node 不再需要借助工具,就能打破两种模块化语法的壁垒…… 但实际上,一切没有想象中的那么美好。 一、并不完美的 ESM 支持 1.1 ...

React 基础及核心总结/一

1. 元素属性及props 1)组件可以接受任意 props,包括基本数据类型,React 元素以及函数。 2)组件接到父组件传来的props是只读的,绝不能够被修改的。这也叫做单向数据流。 3)组件中的标签元素与原生的dom元素不同,其会被转义为对象(虚拟dom)。组件元素的属性与事件与原生的也不尽相同。比如class 在 JSX 中被写作 ...

Pinia是Vuex的良好替代品吗?

Pinia 是 Vue.js 的轻量级状态管理库,最近很受欢迎。它使用 Vue 3 中的新反应系统来构建一个直观且完全类型化的状态管理库。

近期个人练手项目

想到一些有意思的小项目,业余时间可以搞一搞。目前在搞的是一个轻量级的NodeJs微服务脚手架。 1.NodeJs轻量级微服务脚手架 目前在搞,半成品。(2022-8:初步完成,基本功能已实现,顺便还搞了几个npm包。后期若使用时有BUG再完善) 2.简洁的浏览器主页 带分类导航、搜索、注册登录、后管系统等。(计划年前搞一搞吧,...

细说Javascript中的ESM及其与CommonJS区别

esm是什么 esm 是将 javascript 程序拆分成多个单独模块,并能按需导入的标准。和webpack,babel不同的是,esm 是 javascript 的标准功能,在浏览器端和 nodejs 中都已得到实现。使用 esm 的好处是浏览器可以最优化加载模块,比使用库更有效率 esm 标准通过import, export语法实现模块变量的导入和导出 esm 模块的特点 ...

什么是pnpm以及pnpm的安装与使用

pnpm是 Node.js 的替代包管理器。它是 npm 的直接替代品,但速度更快、效率更高。当您安装软件包时,我们会将其保存在您机器上的全局存储中,然后我们会从中创建一个硬链接,而不是进行复制。对于模块的每个版本,磁盘上只保留一个副本。

Typescript 中的 interface 和 type 区别

interface 和 type在官方规范中所描述的区别: An interface can be named in an extends or implements clause, but a type alias for an object type literal cannot. An interface can have multiple merged declarations, but a type alias for an object type literal cannot. 翻译如下: 接口可以在extends或im...

js经典易错合集(一)

1.函数的this指向 var length = 10 function fn(){ console.log(this.length) } fn() //10 //函数的this指向调用者,这里调用者为window //var声明的变量会挂载到window上 var obj={ length:2, show:function(f){ this.length=5 f() arguments[0]() }, show2:(f)=>{ this...

一文吃透浏览器渲染基本原理

大多数设备的刷新频率是60Hz,也就说是浏览器对每一帧画面的渲染工作要在16ms内完成,超出这个时间,页面的渲染就会出现卡顿现象,影响用户体验。前端的用户体验给了前端直观的印象,因此对B/S架构的开发人员来说,熟悉浏览器的内部执行原理显得尤为重要…

网站动态换肤

各位如果为自己的网站动态的换肤是怎么操作的? 一般动态更新<style>标签内的样式字符串,使用CSS变量实现全局控制。<style>标签中只传入变量,在具体的样式中使用var(--aaa)引入。 今天看到一个挺好的方法,到时可以试试。 这个方法是借助rel属性的alternate值(候补属性)实现。 <link href="reset.cs...