禅あ思之前端空间
文章平均质量分 80
前端的自我修炼
禅思院
靡不有初,鲜克有终
展开
-
vscode护眼色
最近写代码太累,眼睛疲劳,修改写主题配色最近这边文章本人投诉侵权啦,也无所谓啦,反正这篇文章该更新啦,现在我的vscode 配置基本大变化啦!配置开发插件提高工作效率插件安装参考文章大前端插件集合tips: 为了减少系统盘的大小或者后期重装系统造成的一些插件丢失,告诉大家一个好方案,因为vscode 可以解压的方式运行,下载下来,把目录弄到非系统盘,我的在E:\install_path\V...原创 2024-02-21 20:00:00 · 1189 阅读 · 0 评论 -
VUE3-响应式
Vue 3引入了新的响应式系统。这个新的响应式系统使用了 ES6 的 Proxy 和 Reflect 的新特性,相对于 Vue 2.x 使用的 Observer 和 Watcher,提供了更加简洁、高效的实现。Vue3 响应式系统的核心是依赖收集器(Deprecator)。依赖收集器可以追踪一个对象上的所有依赖关系,并在对象发生变化时触发更新。原创 2024-01-04 18:15:00 · 531 阅读 · 0 评论 -
ES7 至 ES12 实用的新语法
es2016之后有很多很实用的新特性,其中有很多也已经用上了,本次分享想做一个新特性的汇总,希望能对大家有一定的帮助。以下的特性顺序并不是按照时间顺序来的,为了方便记忆,按照数据类型和语法类型做了归类。每个新特性会按照概念,语法和示例几个方面来介绍。原创 2023-12-22 13:16:29 · 1518 阅读 · 0 评论 -
OxLint 发布了,Eslint 何去何从?
由于最近的rust在前端领域的崛起,基于rust的前端生态链遭到rust底层重构,最近又爆出`OxLint`,是一款基于Rust的linter工具Oxlint在国外前端圈引起热烈讨论,很多大佬给出了高度评价;你或许不知道`OxLint`,相比`ESLint`大家都陌生,你可以认为他们是一样的功能。原创 2023-12-15 10:56:01 · 1942 阅读 · 0 评论 -
温故而知新篇十一
HTTP缓存前言HTTP缓存强制缓存协商缓存对比优缺点前言当客户端向服务器请求资源时,会先抵达浏览器缓存,如果浏览器有“要请求资源”的副本,就可以直接从浏览器缓存中提取而不是从原始服务器中提取。常见的http缓存只能缓存get请求响应的资源,对于其他类型的响应则无能为力。http缓存都是从第二次请求开始的。第一次请求资源时,服务器返回资源,并在respone header头中回传资源的缓存参数;第二次请求时,浏览器判断这些请求参数,命中强缓存就直接200,否则就把请求参数加到reques原创 2022-03-22 23:45:00 · 290 阅读 · 0 评论 -
你所不知道的文件上传更安全的类型判断
你所不知道的文件上传更安全的类型判断前言在项目的实现过程中,大多数的前端在文件上传的的业务需求的实现过程中,就是简单的文件上传,也就是在表面上判断文件的后缀名来实现,例如:图片的校验,只需要判断后缀名为.jpeg、.jpg、.png等等,或者通过原生的html标签限制,如<input type="file" accept="image/*" />或者第三方的UI组件也是这个原理;其实我们都知道,这样的逻辑判断是没有什么问题,也没有任何逻辑问题,这只是在常规的情况下,如果一个黑客,当然不会用原创 2022-01-18 19:45:00 · 1518 阅读 · 0 评论 -
温故而知新篇十
JavaScript的原型和原型链什么是原型原型对象、实例、构造函数的关系proto和prototype构造函数Object和Function原型链原型链的终点什么是原型原型是一种对象属性,允许对象在彼此之间继承通用功能。 所有JavaScript对象都可以从Object.prototype继承属性和方法。 甚至原型本身也具有继承更多属性的能力,即另一个原型,也称为prototype chaining可以让所有的对象实例共享它所包含的属性和方法。原型对象、实例、构造函数的关系每个构造函数原创 2022-01-17 06:30:00 · 255 阅读 · 0 评论 -
页面加载的那点事
页面加载的那点事一、加载原理二、模态与非模态三、加载规则四、加载策略一、加载原理加载出现的原因动态与静态资源加载处理当清楚加载形成的原因,接下来要做的就是在需要加载的地方对其进行处理。二、模态与非模态模态加载模态加载会中断用户其余操作,用户在这个期间只能等待加载而不能进行其他操作(可提供取消按钮)。非模态加载非模态加载通常只会出现在需要加载的部分,不会中断用户其他操作。三、加载规则页面拆解由于浏览器渲染顺序一般会根据代码的顺序进行渲染原创 2022-01-10 04:15:00 · 446 阅读 · 0 评论 -
温故而知新篇九
广度/深度原创 2021-12-14 10:38:27 · 244 阅读 · 2 评论 -
温故而知新篇八
高级APIMutationObserverAPIdemoIntersectionObserverAPIIntersectionObserver场景demo 图片懒加载getComputedStyleAPIgetBoundingClientRectrequestAnimationFrameMutationObserverMutationObserver 是一个可以监听 DOM 结构变化的接口。当 DOM 对象树发生任何变动时MutationObserver 会得到通知。异步触发APIMutati原创 2021-12-14 10:20:21 · 1390 阅读 · 0 评论 -
温故而知新篇七
认识TypeScript什么是TypeScript?为什么选TypeScript?安装TypeScript Hello TypeScriptHello TypeScript什么是TypeScript?首先,我对TypeScript 的理解如下:TypeScript 是JavaScript 的一个超集,主要提供了类型系 统和对ES6 的支持,它由Microsoft 开发,代码开源于GitHub 上其次引用官网的定义:TypeScript is a typed superset of JavaSc原创 2021-12-01 23:45:00 · 96 阅读 · 0 评论 -
温故而知新篇六
Express框架实战Express简介如何搭建一个服务中间件介绍路由&过滤器模板引擎实际业务场景Express简介Node(正式名称 Node.js)是一个开源的、跨平台的运行时环境,有了它,开发人员可以使用 JavaScript 创建各种服务器端工具和应用程序。此运行时主要用于浏览器上下文之外(即可以直接运行于计算机或服务器操作系统上)。据此,该环境省略了一些浏览器专用的 JavaScript API,同时添加了对更传统的 OS API(比如 HTTP 库和文件系统库)的支持。nod原创 2021-11-26 21:48:10 · 1028 阅读 · 0 评论 -
温故而知新篇五
你可能不知道的CSS写在前面的话只是团队的一种分享模式,不在于技术的高低,只在于这次分享的意义,也是大家坐在一起创聊的一种方式,在于活跃气氛,不外乎工作之余的一种娱乐方式tips文本缩进,块级用text-indent,内联用margin-left文本缩进,块级用text-indent,内联用margin-leftCSS 计数器CSS 计数器通过一个变量来设置,根据规则递增变量。使用计数器自动编号:counter-reset: 创建或者重置计数器counter-increme原创 2021-11-07 22:00:00 · 167 阅读 · 0 评论 -
温故而知新篇四
设计原理之 心智模型三大模型万事万物的认知常识,通过经验或是习惯已经告知了用户认为产品是怎样工作的形成路径运作原理特征运用总结三大模型心智模型万事万物的认知常识,通过经验或是习惯已经告知了用户认为产品是怎样工作的形成路径心智模型的形成运作原理特征运用总结设计的目的是最大程度地满足用户需求,在以“用户为中心的设计”理念下,通过对用户心智模型的研究来理解产品的用户,设计出更加适宜用户使用的产品。最终将用户心智模型应用于产品设计中的理论与方法,旨在有效提升企业产品开发与创新原创 2021-11-02 22:00:00 · 100 阅读 · 0 评论 -
温故而知新篇三
团队分享之CSS 动画CSS动画的优缺点CSS3 @keyframes 规则CSS3 动画animation(动画)属性兼容性优化惯性:透视节奏跟随更多动画DemoCSS动画的优缺点优点:简单、高效声明式的不依赖于主线程,采用硬件加速(GPU)简单的控制keyframe animation播放和暂停缺点:不能动态修改或定义动画内容不同的动画无法实现同步多个动画彼此无法堆叠CSS3 @keyframes 规则指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式原创 2021-10-22 19:33:25 · 459 阅读 · 12 评论 -
温故而知新篇二
团队分享之VUE模板编译原理VUE模板构建版本Vue提供了几个构建版本vue.js :完整版本,包含了模板编译的能力vue.runtime.js: 运行时版本,不提供模板编译能力,需要通过vue-loader 进行提前编译。简单来说,就是如果你用了 vue-loader ,就可以使用 vue.runtime.min.js,将模板编译的过程交过 vue-loader,如果你是在浏览器中直接通过 script 标签引入 Vue,需要使用 vue.min.js,运行的时候编译模板。编原创 2021-10-25 22:00:00 · 136 阅读 · 0 评论 -
温故而知新篇一
团队分享之设计模式[认知]写在前面的话单例模式工厂模式策略模式代理模式观察者模式模块模式构造函数模式混合模式总结写在前面的话在面向对象软件设计过程中,针对特定问题的简洁而优雅的解决方案。在不同的编程语言中,对设计模式的实现其实是可能会有区别的。(23种)单例模式是保证一个类只有一个实例,并且提供一个访问它的全局访问点。适用场景需要频繁实例化然后销毁的对象创建对象时耗时过多或者耗资源过多,但又经常用到的对象有状态的工具类对象频繁访问数据库或文件的对象资源共享的情况下,避免原创 2021-10-19 22:02:58 · 737 阅读 · 8 评论 -
在前端里,谁的位置不可少!怎么提高中标率?
在前端里,谁的位置不可少!怎么提高中标率?前言最近一直在公司的事情,因为我们组的2个人请的长期假期,造成前端的资源一度紧张,又是临近年终,公司各个产线忙各种招标的事情,而招标的事情是要开发一个针对招标需求的一个系统,说白拉就是开发一个不需要后端的支持的一个前端系统,包括数据尽量真实,前端业务尽量完美!哎,压力山大…,默默吐糟产品经理…其实在我没来这家公司之前,我都会遇到一个场景,就是项目经理,总是追着前端问,开发的怎么样拉?今天做多少拉?能看吗?等等…,项目经理的各种炮弹,轰炸而来!这时,作为前原创 2020-11-23 19:56:17 · 283 阅读 · 0 评论 -
Vue组件通信,总有找到适合你的
Vue组件常用的几种通信方式前言我们都知道vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层。具有组件化的特点。所以我们项目开发中经常抽离出组件进行开发,所以我们经常遇到组件之间的通信,根据不同场景,来描述的通信的方式。不足之后,请谅解!props子组件使用props 接收父组件传递的值,子组件通过 $...原创 2019-11-21 20:07:05 · 2577 阅读 · 0 评论 -
基于 TypeScript + Rollup 构建类库和发布npm
基于 TypeScript + Rollup 构建类库和发布npm建立项目工程$ mkdir virtual-list$ cd virtual-list$ npm init -y$ mkdir src$ cd src$ type nul>index.ts$ cat <<EOF >.gitignore > node_modules > EOF安装和配置 typescript安装依赖$ cd virtual-list$ npm inst原创 2020-08-14 15:51:47 · 6546 阅读 · 5 评论 -
前端性能篇--------函数节流和去抖动
写在前面的话我们前端在开发过程经常用到 scroll 、resize等高频的事件,特别在监测浏览器变化以及在下拉加载大数据的过程中,当这些高频的事件发生时,这些高频的事件触发的频次非常高,也非常大的多,间隔的时间也很短。如果这些高频的事件中要及到大量的位置计算、DOM 操作、UI重绘等等业务,但是偏偏业务计算和操作无法在下一个 高频的事件触发之前前完成,往往会造成严重的结果,这个节结果叫浏览器掉...原创 2019-03-04 18:50:34 · 3358 阅读 · 0 评论 -
前端项目使用svg的icon的制作流程
我们都知道任何一个项目到上线经过一段时间的UI设计,开发,测试等流程,为了统一管理项目中所使用的icon,也是为了后期的更改,更为了多人开发的使用,这样统一引用,给开发带来很好的收益以及减少开发时间,也为了后期更好的维护,下面我把阿里云上步骤弄到博客中.svg的icon的制作制作规则闭合: 将会带来全新的写作体验。合并: 如果有两个以上图形,或者有布尔关系的图形,请对图形合并并且扩展。...原创 2019-01-29 16:04:35 · 5582 阅读 · 4 评论 -
第三届 SEE Conf 2020 视频回放 && PPT
第三届 SEE Conf 2020 视频回放 && PPT会议介绍SEE Conf 是蚂蚁金服体验科技大会,是一个“看见者的大会”,希望技术能看见设计的价值,希望设计能看见技术的力量,彼此看见中互相融合成长,一起让世界更美好。官网https://seeconf.antfin.com/资料参与知乎互动,https://www.zhihu.com/que...转载 2020-01-15 17:23:20 · 1475 阅读 · 2 评论 -
认识Web Workers
前言在一个html文件中,我们通常会看到三种模块[html·css·js],一个好的页面,一般都这样的规则,css放在head中,js放在最下面,为啥要这样做呢?其实我们都知道页面在加载过程中从上到下的过程,如果js在加载的过程中,如果报错,一个页面的加载过程就会终止掉,有可能看不到页面,影响体验。从上面我们不能看出,页面在加载的过程中js和UI页面会共用一个线程,而js在执行时会阻塞浏览器...原创 2019-05-23 13:39:37 · 2864 阅读 · 0 评论 -
前端进阶之路之webpack
今天给公司做个培训,顺便做个ptt。本次项目DEMO欢迎进入个人公众号 ,一起学习啊!原创 2019-03-01 17:19:43 · 2923 阅读 · 1 评论 -
Commander.js中文文档
前言Commander: node.js命令行界面的完整解决方案是Ruby中Commander在node.js中的实现.为commandline程序提供强大的参数解析能力.是TJ所写的一个工具包,其作用是让node命令行程序的制作更加简单。commander.js使用安装$ npm install commander --saveOption解析使用该.option()方法定义带有...翻译 2019-02-12 16:22:30 · 1398 阅读 · 0 评论 -
webpack4.x 入门一篇足矣
前言:webpack4出了以后,一些插件变化很大,和之前的版本使用方式不一样,新手入坑,本篇将介绍如何从一开始配置webpack4的开发版本,对css,js进行编译打包合并生成md5,CSS中的图片处理,js自动注入html页,删除指定文件,提取公共文件,热更新等等。安装 //全局安装 npm install -g webpack webpack-cli 创...转载 2019-01-29 15:18:52 · 231 阅读 · 2 评论