前端基础
文章平均质量分 90
js
琢鸣
记录工作学习中的方法,技巧,bug。
展开
-
基于postCSS手写postcss-px-to-vewiport插件实现移动端适配
目前前端实现移动端适配方案千千万,眼花缭乱各有有缺,但目前来说postcss-px-to-vewiport是一种非常合适的实现方案,是一个基于postCss开发的插件,其原理就是将项目中的px单位转换为vw(视口宽度)。原创 2024-04-22 17:33:11 · 1221 阅读 · 0 评论 -
postCss基本介绍
我个人的理解postCss就是css界的babel,它提供一个过程,而在这个过程中,去干什么就是你自己的事情,所以很多人写插件,去做代码转换,或者兼容等等。babel 提供过程 @babel/preset-env es6-es5AST ->-> generate(生成)postCss提供过程`css`AST -> transform -> generate(生成)两者都是提供一个过程,只是一个是处理javaScript,一个是处理css。这个过程中AST。原创 2024-04-22 16:09:11 · 880 阅读 · 0 评论 -
浏览器自动播放音视频-前端实现方案
在开发中可能有遇到这样的需求,当用户打开页面后,需要自动播放视频或音频,按理说那就打开页面时play()一下不就搞定了吗,但实际情况很明显不是,不然也没得这篇文章喽,要实现这个需求,我们得先了解一下浏览器自动播放策略。再给出相应解决方案。原创 2023-11-06 17:49:03 · 6131 阅读 · 11 评论 -
VSCode安装使用(含插件保姆级教程)
点击查看更多实用技巧及对于我们每一位软件工程师来说,都要有自己顺手的 IDE 开发工具,它就是我们的武器。一个好用的 IDE 不仅能提升我们的开发效率,还能让我们保持愉悦的心情,这样才是非常 Nice 的状态!技术。原创 2023-10-24 10:35:58 · 9434 阅读 · 14 评论 -
Canvas--》使用Canvas完成基本绘图
Canvas是一个可以使用脚本 (通常为) 来绘制图形的元素。例如,它可以用于绘制图表、制作图片构图或者制作简单的动画。如上面效果示例就是使用 来实现示例,后续将一步步实现上面效果。Canvas 的默认大小为 300 像素 ×150 像素(宽 × 高,像素的单位是 px)。但是,可以使用 HTML 的高度和宽度属性来自定义 Canvas 的尺寸。原创 2023-10-06 16:54:26 · 655 阅读 · 15 评论 -
项目上线部署--》服务器部署流程(二)安装Nginx、Node.js、MySQL
远程服务器安装Nginx、Node.js、MySQL详细操作教学原创 2023-09-18 06:30:00 · 717 阅读 · 17 评论 -
项目上线部署--》服务器部署流程(一)
项目上线部署全流程详解原创 2023-09-16 21:42:00 · 725 阅读 · 7 评论 -
项目上线部署--》网站运行机制
域名俗称网址,是由一串用点分隔的名字组成,用于标识互联网上的计算机。原本用于标识互联网上计算机使用的是 IP 地址,但是由于 IP 地址不便于记忆,所以人们便设计出来比较容易记忆的域名,然后通过 DNS 将域名和 IP 地址关联,这样人们便可以通过记忆域名直接访问到对应的计算机。原创 2023-09-11 19:34:20 · 447 阅读 · 7 评论 -
包管理工具--》其他包管理器之cnpm、pnpm、nvm
其他包管理工具之cnpm、pnpm、nvm原创 2023-09-08 22:39:11 · 673 阅读 · 2 评论 -
包管理工具--》发布一个自己的npm包
1.使用官方镜像源查看当前配置的镜像源:如果是使用的其他源,请改回官方源2.到npm官网注册一个账号,并完成邮箱认证官网可视化注册:命令行注册使用命令依次输入Username、Password、Email完成注册3.本地使用 npm cli 进行登录使用命令npm login登录使用命令npm whoami查看当前登录的账号使用命令npm logout注销4.创建工程根目录根文件夹名一般就用包名,命名的话先去npm官网搜一下,搜不到的话就可以用来命名自己的包。原创 2023-09-08 22:35:11 · 877 阅读 · 10 评论 -
包管理工具--》yarn的配置及使用
yarn 是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具,它仍然使用 npm 的registry,不过提供了全新 CLI 来对包进行管理过去,yarn 的出现极大的抢夺了 npm 的市场,甚至有人戏言,npm 只剩下一个 registry 了。依赖目录嵌套层次深:过去,npm 的依赖是嵌套的,这在 windows 系统上是一个极大的问题,由于众所周知的原因,windows 系统无法支持太深的目录下载速度慢。原创 2023-09-06 19:39:22 · 535 阅读 · 13 评论 -
包管理工具--》npm的配置及使用(二)
global有一个属性是process,该属性是一个对象,包含了当前运行node程序的计算机的很多信息,其中有一个信息是env,是一个对象,包含了计算机中所有的系统变量。如果允许版本增加,可以让依赖包的bug得以修复(补丁版本号),可以带来一些意外的惊喜(次版本号),但同样可能带来不确定的风险(新的bug)有的时候,我们希望:安装我的依赖包的时候,次版本号和补丁版本号是可以有提升的,但是主版本号不能变化。有的时候,我们又希望:安装我的依赖包的时候,只有补丁版本号可以提升,其他都不能提升。原创 2023-09-05 18:57:13 · 1330 阅读 · 9 评论 -
包管理工具--》npm的配置及使用(一)
npm 的出现,弥补了 node 没有包管理器的缺陷,于是很快,node 在安装文件中内置了 npm,当开发者安装好 node 之后,就自动安装了 npm,不仅如此,node 环境还专门为 npm 提供了良好的支持,使用 npm 下载的包更加方便了。node 和 npm 是互相成就的,node 的出现让 npm 火了,npm 的火爆带动了大量的第三方库的发展,很多优秀的第三方库打包上传到了 npm,这些第三方库又为 node 带来了大量的用户。这些库使用 CommonJS 标准书写而成,非常容易使用。原创 2023-09-05 07:45:00 · 1664 阅读 · 7 评论 -
【JS案例】滚动效果实现及简单动画函数抽离
实现效果可以看到到滚动到最后一条时,会重新返回第一条循环播放,这个时候其实就是scrollTop从某一个值变为0,会有个瞬间变化的效果,为了优化这一点,在初始化时,我们可以将第一个元素克隆到列表最后一个。实现滚动函数,每次的滚动区间比如从0到30,我们可以定义一个总的时间,及变化间隔,变化间隔越下,动画就越丝滑,也就是频繁但很小的改变scrollTop 的值。接下来就是让元素动起来,在这过程中为了让效果更加丝滑,需要用上动画,动画可以用CSS3写也可以用JS,我这里是选择用JS,动画的本质就是。原创 2023-08-27 15:17:35 · 702 阅读 · 0 评论 -
一篇文章带你彻底搞懂事件循环
事件循环可谓是考验前端基础功的必问题,在面试中也是频繁出现。不管是html,css还是js,其实都是在浏览器上运行,所以要说清楚事件循环,那浏览器是必不可少,接下来就从浏览器开始,一起谈谈事件循环吧。原创 2023-04-03 08:45:00 · 781 阅读 · 27 评论 -
WebSocket之socket.io的基本使用
使用WebSocket可以实现非常多有趣又实用的功能,后面再写一个在线聊天室巩固一下知识。推荐阅读【微信小程序&uniapp系列文章】【Vue实用插件及技巧系列文章】原创 2023-03-19 15:39:29 · 4556 阅读 · 4 评论 -
js浏览器操作工具函数及方法说明(滚动到底部顶部指定元素,打开及退出全屏,获取可视窗口宽高)
js滚动到页面底部顶部及指定元素区域,打开及退出全屏,获取可视窗口宽高原创 2023-01-08 20:41:41 · 1816 阅读 · 0 评论