前端
文章平均质量分 56
前端开发过程中的经验和知识点
kaiyuanheshang
好奇世界,探索未知,热爱并享受生活
展开
-
前端实现动画的几种方式简介
描边动画的核心是 SVG 的两个显示属性,分别是和。用于创建虚线。它的值是一个序列,可以传入多个值,分别指定虚线中线段和间隔的长度。描述相对于起始点的偏移。它的值是一个数值 X,X>0 时,相当于往左移动了 X 个长度单位;X原创 2023-12-22 20:37:43 · 818 阅读 · 0 评论 -
前端录屏屏幕 Demo
代码实现了如下功能:录制-保存、录制-回放、直播(边录边回放)原创 2023-07-08 12:49:19 · 420 阅读 · 0 评论 -
前端奇淫巧技
上面的代码可以用来检查浏览器是否兼容自己使用的 API,当不兼容时跳转到升级页面,引导用户下载新版浏览器或者其他操作。可以防止当前线程的崩溃,体验更好。原创 2023-06-01 10:07:00 · 199 阅读 · 0 评论 -
关于函数中参数使用 options 的一点想法
这时,如果需要对参数进行判断,函数实现会很复杂,且并不能保证判断结果是调用者或作者的真实意图,这时 bug 就会不经意出现。options 中的参数,即使用户不设置,函数内部也有可用的默认值。这些参数用于修正函数的行为,但不是必须项。那么,到底哪些参数可以放到 options 中呢?上面的函数可不可以把。在日常开发或使用三方库的过程中,常常会出现这样的函数设计。options 的来源是因为架构设计中的一条原则。原创 2023-05-19 19:48:42 · 259 阅读 · 0 评论 -
什么是企业级开发
从实战角度我做了如下总结,加入了下面几点能力的项目可以称为符合企业级应用要求的项目,开发过程就叫企业级开发。当学习前端或者后端开发的时候常常听到一个词“企业级”。那么什么是企业级,当谈论“企业级”时具体是在说什么?原创 2023-03-04 09:22:49 · 934 阅读 · 0 评论 -
SASS 学习的几点心得
本文不做 SASS 系统的讲解,仅解释几个知识点和如何系统的使用 SASS 进行开发。推荐一个不错的学习资料。原创 2023-01-09 11:29:05 · 381 阅读 · 0 评论 -
nodejs 拾遗(知识点集合,随时补充)
如果使用 callback,则需要指定第一个参数为 Error,后续参数为正常调用后返回的结果。因此,nodejs 中更多的是使用 callback 或者 Promise 来返回调用结果。里面代码时,老的调用栈已经回收,新的调用栈异常不会命中老调用栈中的函数。,原因是 nodejs 中每个事件循环都是一个单独的调用栈,执行到。原创 2022-10-10 15:08:09 · 158 阅读 · 0 评论 -
nodejs 多环境配置
分别介绍了使用 js 和 ts 时如何进行多环境管理,并自动选择对应的环境参数(开发环境、测试环境、正式环境等)原创 2022-10-09 18:14:28 · 673 阅读 · 0 评论 -
nodejs && 前端 常用库
【代码】nodejs 常用库。原创 2022-08-20 15:16:20 · 634 阅读 · 0 评论 -
浏览器上传文件夹的两种实现方式(demo)
实现文件夹上传有两种:一种是通过将文件夹拖拽到浏览器,实现上传;标签,用户选择文件夹实现上传。否则拖拽文件夹不会触发。,只会触发浏览器默认行为。注意:有浏览器版本限制。原创 2022-08-13 13:44:54 · 2208 阅读 · 0 评论 -
Browser API 简要梳理
浏览器 API 简要分类汇总原创 2022-07-12 14:18:04 · 227 阅读 · 0 评论 -
使用 jQuery 提取网页内容
最近在找一些老书的时候发现了 https://archive.org 的妙用。archive 除了会存储互联网网站的历史快照外,还有一个图书馆计划。参加这个计划的机构可以把一些书籍等存储到 archive,并允许所有人免费下载。在使用的过程中,有些关键词会对应许多图书,需要一个一个下载。作为一个程序员就想了一个可以批量获取下载连接的方法。具体逻辑如下:......原创 2022-06-29 14:54:54 · 830 阅读 · 0 评论 -
SVG path 标签相关参数及含义
文章目录直线命令曲线命令贝塞尔曲线弧形path 元素的形状是通过属性 d 定义的,属性 d 的值是一个“命令+参数”的序列,我们将讲解这些可用的命令,并且展示一些示例。每一个命令都用一个关键字母来表示,比如,字母 M 表示的是 “Move to” 命令,当解析器读到这个命令时,它就知道你是打算移动到某个点。跟在命令字母后面的,是你需要移动到的那个点的 x 和 y 轴坐标。比如移动到 (10,10) 这个点的命令,应该写成 M 10 10。这一段字符结束后,解析器就会去读下一段命令。每一个命令都有两种表示转载 2022-05-21 13:58:37 · 1813 阅读 · 1 评论 -
如何修改 node_modules 中项目依赖的源代码实现
此处使用 yarn 讲解,使用 npm 也是相同的原理要想修改依赖包的源代码,第一想法是直接在 node_modules 中找到包位置,直接修改这里的代码,然后编译。这种方式是不会生效的。原因在于 yarn 安装依赖包时,除了从仓库拉取对应文件外,还会根据 pakcage.json 进行编译。这就会导致修改后的代码无法发挥作用。如果你想修改后调用 yarn install,之前修改的代码就会被从仓库拉去的代码覆盖。好在 yarn 提供了对应的指令 link。该指令有两个作用,一个是将指定的 npm .原创 2022-05-19 13:05:14 · 929 阅读 · 0 评论 -
javascript 神奇的位运算
引子留几个 demo 放在前面,大家先计算下结果然后对照。这几个 demo 会出现在我们讲解和探索的过程中。let a = ~0b01111111111111111111111111111111111111111111111111111111;console.log(a);let b = ~0b0111111111111111111111111111111111111111111111111111;console.log(b);let c = 2 >> 1;let d = 2原创 2022-05-10 14:11:39 · 171 阅读 · 0 评论 -
javascript 作用域和 this 绑定
首先需要说明的是,在 javascript 中,作用域和 this 绑定是两件事。作用域javascript 中的作用域是词法作用域(语法作用域、静态作用域)。词法作用域是在编译阶段就产生的,一整套函数内标识符的访问规则。也就是说,函数书写时在哪个作用域,使用时就能访问那个作用域的变量(直接通过变量名访问,而不是通过 this.identifierName 的方式访问)。需要注意的是,箭头函数不会改变上述作用域规则,箭头函数会影响 this 的绑定规则。验证代码如下:let aa = 10;f原创 2022-05-09 17:33:52 · 389 阅读 · 0 评论 -
Html meta 标签简述
参考资料<meta>:文档级元数据元素HTML之<meta>标签全解前端应该知道的:开放图谱协议(The Open Graph protocol)全局属性itemprop脑图原创 2022-04-27 15:31:43 · 72 阅读 · 0 评论 -
前端测试框架简述
基础框架为:mocha 和 ava。这两个基础框架没有断言。需要配合断言库一起使用,常用的断言库有:chai should.js expect better-assert开箱即用的集成框架有:Jasmine Jest原创 2022-04-14 10:33:02 · 2753 阅读 · 0 评论 -
webpack 构建配置管理
将 webpack 构建配置统一管理,既方便团队协同也能提升开发效率。多个配置文件通过多个配置文件管理不同的构建环境,使用 webpack --config 来选择不同的构建文件。或者使用 webpack-merge 将多个不同配置文件合并为一个建议的组成形式如下:基础配置:webpack.base.js开发配置:webpack.dev.js生产环境:webpack.prod.jsSSR 环境:webpack.ssr.js单独 npm 包将构建配置设计成一个库。例如:hjs-webpa原创 2022-04-13 15:58:35 · 611 阅读 · 0 评论 -
JS 代码分割
对于大型应用来说,将代码分割成不同块,按照业务需求分批加载,可以加快页面加载速度,提升用户体验思路抽离相同代码到公共模块脚本懒加载方案脚本懒加载有两种方式。一种是使用 CommonJS 的 require.ensure;另一种是使用 ES6 的 动态 import。第二种方式需要依赖 babel 转换(plugin-babel-dynamic-import),因为原生还没有支持。因为 webpack 中的许多优化项依赖于 ES6 语法,所以推荐使用第二种方式来实现懒加载。// test.原创 2022-04-12 13:17:03 · 702 阅读 · 0 评论 -
Webpack SourceMap 参数含义
名词说明名称含义eval使用 eval 包裹模块代码source map产生 .map 文件cheap不包含列信息inline将 .map 作为 DataURI 嵌入,不单独生成 .map 文件module包含 loader 的 source map列表devtool首次构建二次构建是否适合生产环境可以定位的代码(none)++++++yes最终输出的代码eval++++++nowebpack 生原创 2022-04-12 09:39:22 · 99 阅读 · 0 评论 -
Webpack 常用 loader 和 plugin 汇总
Loader名称描述babel-loaderpostcss-loaderstyle-loadercss-loaderless-loaderfile-loaderurl-loader和 file-loader 类似。可以将小图片等资源以 base64 方式引用px2rem-loaderPlugin名称描述clean-webpack-pluginautoprefixer自动补全兼容前缀。配合 p原创 2022-04-11 17:52:48 · 1415 阅读 · 0 评论 -
命令行执行 node_modules 下命令的三种方式
npm 支持在 package.json 中添加 bin 字段,实现类似命令行命令的效果,这样就可以在命令行中像 shell 命令一样调用三方依赖的能力。下面以 webpack 为例介绍三种调用方式。前提条件:npm i -D webpack webpack-cli# 方式01./node_modules/.bin/webpack# 方式02npm i -g npxnpx webpack# 方式03# 在 package.json 添加如下信息:# scripts: {# bui原创 2022-04-11 15:32:20 · 1760 阅读 · 0 评论