- 博客(290)
- 收藏
- 关注
原创 前端面试其它知识点(一)
微前端是一种软件架构模式,旨在让大型前端应用程序更容易开发、部署和维护。传统上,前端应用程序是作为单个、整体的单体应用程序开发和部署的,但随着应用规模的增长,这种方法可能导致一些问题,比如开发速度变慢、部署困难和难以维护。微前端通过将前端应用程序拆分为更小的、相互独立的子应用程序(微前端应用)来解决这些问题。每个子应用程序都有自己的开发团队、代码库和部署流程。这些子应用程序可以独立开发、测试和部署,然后集成到整体应用程序中。
2024-02-19 10:26:21 42
原创 (05)vite处理静态文件及引入
在vite.config.js中进行配置,通过resolve和alias 完成配置,和webpack那边基本一致。利用node自带的path来解析路径,然后配置别名,方便项目中各种层级的引用。一般打包的配置放到vite.prd.config.js中。配置别名后,引入静态资源时直接使用。
2023-12-21 10:24:54 251
原创 (04)vite 插件 plugins
在插件文档增加一部分关于为什么本插件是一个 Vite 专属插件的详细说明(如,本插件使用了 Vite 特有的插件钩子)。在手写vite插件前,需要了解vite官网提供的一些vite相关的生命周期,以及这些生命周期对应的一些钩子函数。跟webpack的生态相比,vite确实还比不过,如果没有你想要的插件和配置,可能需要自己动手写插件。Vite 插件应该有一个带 vite-plugin- 前缀、语义清晰的名称。vite-plugin-svelte- 前缀作为 Svelte 插件。
2023-12-21 10:19:23 316
原创 前端css面试题(四)
比如,一个 z-index 值为 2 的元素会在层叠上下文中显示在一个 z-index 值为 1 的元素的上方。要注意的是,z-index 只对定位元素(即 position 值不是 static 的元素)有效。堆叠上下文是一个独立的层叠环境,其中的元素独立于文档的其他部分。如果有非浮动元素和浮动元素同时存在,并且非浮动元素在前,则浮动元素不会高于非浮动元素。用于控制元素在堆叠上下文中的层叠顺序,值越高的元素显示在值越低的元素的上方。,但是它是另一个元素的子元素,那么它在该子元素的父级范围内才会覆盖。
2023-12-04 15:29:19 219
原创 (03)vite 处理 css
css开启 devSourcemap 后,能够快速找到每一个样式对应的文件名,但最好只在开发环境中使用,不开启devSourcemap 时,一般是上生产环境,默认情况下也是不开启的。启动服务器之后,发现css module的类名都被替换了,加了hash。componentA index.module.css 配置。vite 天生就支持对css文件的处理,主要的处理流程如下。componentB index.module.css 配置。原本index.css的文件被替换了。创建一个index.css文件。
2023-12-04 10:50:40 534
原创 前端 计算机基础篇 ( 二 )
当客户端发起条件请求(通常是带有 If-Modified-Since 或 If-None-Match 头部的 GET 请求),而服务器判断资源未被修改时,返回 304 状态码,告诉客户端可以使用缓存的版本。如果服务器发现请求中的 If-None-Match 的值与服务器上资源的 ETag 相同,说明客户端的资源仍然是最新的,服务器会返回 304 Not Modified,并告诉客户端可以使用缓存。这样,当其他用户请求相同的资源时,CDN 辐射点可以直接返回缓存的内容,而无需再次访问源服务器。
2023-11-23 15:46:40 340
原创 前端 vue 面试题(二)
各个组件的实例一旦被注入mixin之后,这些mixin就实例化一个个对象,这些对象之间的数据都是独立的,不像vuex那样,共享数据,一个组件改变状态,另外的组件也会自动更新。按照js事件循环,nextTick属于微任务,但微任务却是在更新dom这个宏任务执行后的回调去触发nextTick的执行,每一次一个宏任务执行完,都会立即清空微任务队列。treeshaking的本质是找到代码之间的依赖关系,这样才能判断哪些代码虽然被创建,却没有使用,哪些代码虽然被引入,也未被使用。在Vue中,可以通过调用组件实例的。
2023-11-23 14:44:42 742
原创 (02)vite环境变量配置
需要将不同的环境变量放到不同的文件中。来改变使用的前缀,一般来说不同环境使用的环境变量名称都是相同,不然你就得在不同的环境配置不同名称的环境变量,而且在使用的时候也要用不同的名字,太麻烦了。以上这些举例的变量,都会因为开发周期的变化,用不同的变量值,这个时候,如果这些变量能够根据环境的变化自动变化,就比较完美,减少人工干预,才可能不出错。
2023-11-21 18:51:56 593
原创 (01)vite 从启动服务器开始
Vite(发音为"veet")是一种现代化的前端构建工具,旨在提供快速的开发体验。它由尤雨溪(Vue.js 的创始人)团队开发并维护。Vite主要用于构建基于现代 JavaScript 框架(如Vue.js、React、以及Svelte等)的应用程序。与传统的前端构建工具不同,Vite采用了一种基于ESM(ECMAScript模块)的开发服务器,利用浏览器原生支持的模块导入方式,实现了快速的冷启动和开发服务器启动的速度。
2023-11-21 10:37:36 360
原创 前端 webpack 面试题
处理模块的源代码转换。在中配置。针对不同类型的文件进行处理。执行整个构建过程中的特定任务。在plugins中配置。提供了更广泛的自定义和扩展能力。在实际的Webpack配置中,Loader和Plugin通常一起使用,以满足对不同类型的文件和构建过程的灵活需求。Loader负责处理文件转换,而Plugin负责执行其他构建任务。
2023-11-19 11:18:27 947
原创 前端面试 算法与数据结构篇
设计很明确工作流的时候,可以使用generator来控制每一步的进程,但是很遗憾,generator没有提供明确的api来返回上一步,不能像双向链表一样,所以可能需要开发者从中进行额外的设计或干预。键值对,类似于对象和es6中的Map,对象是无序的,但map是有序的,对象不能使用for of 遍历而Map可以。这个方法的核心在于利用回文串的对称性质。栈的形式就是先进后出,而js本身的设计也处处体现了栈的运用,比如闭包,外层函数总是先执行,而内部函数总是后执行,而外层函数总是得等到内部函数完成后才能完成。
2023-11-17 17:07:50 321
原创 前端 react 面试题 (一)
自定义 Hooks 是一种用于在 React 函数式组件之间共享状态逻辑的机制。创建自定义 Hooks 可以帮助您将可复用的逻辑提取出来,以便在多个组件中共享。自定义 Hook 的命名应以 “use” 开头,这是 React 社区的一种约定,帮助开发者识别其为 Hook。// ...自定义 Hook 可以在一个或多个组件中使用,使得逻辑的重用更加灵活。// ...// ...自定义 Hook 中不应包含与组件生命周期相关的逻辑,例如或。这样的逻辑应该由使用 Hook 的组件自行处理。
2023-11-16 10:00:49 107
原创 前端 vue 面试题 (一)
v-if 和 v-show 是 Vue.js 中用于条件性渲染的两个指令,它们有一些重要的区别。初始化渲染时的差别:v-if:只有在表达式为真时才会,否则中。v-show:元素总是会被渲染,只是通过 CSS 控制其显示或隐藏。性能差别:v-if:当条件为假时,DOM 元素会被销毁,再次为真时重新创建。因此,在条件频繁切换时,可能会有一些性能开销。v-show:无论条件是真还是假,DOM 元素总是保持在 DOM 树中,只是通过 属性来控制显示或隐藏。在条件频繁切换时,相对而言性能开销较小。适用场景:v
2023-11-14 20:23:57 310
原创 前端js面试题 (四)
为了保证深度拷贝的万无一失,需要考虑各种情况,不是简单的JSON就能完成的,即使以上情况都没有,为了确保 JSON.parse() 不会失败,提供的 JSON 字符串应该是有效的、符合规范的,并且不包含不支持的数据类型。这里从建立tcp链接之后开始讲起,之前的过程中,浏览器经历了什么暂时不讨论,如果关心这一部分的同学,可以查阅一下,在浏览器输入url后,浏览器做了。Promise then里面的回调,属于微任务,往微任务队列里放,同步执行完,开始执行异步,微任务队列全部执行,没有,执行一个宏任务。
2023-11-14 10:23:38 130
原创 前端面试题 计算机网络
tcp协议在传输前会建立连接,对传输的数据有确认机制(确认对方是否收到),有丢失重传机制(如果对方未收到,重新传一份),有流量控制机制(防止传输过快而导致对方来不及处理导致丢包)等,确保数据的完整性和顺序性。UDP: 是无连接的协议。4.客服端利用数字认证机构的公钥(浏览器保存在客户端的)解密证书的数字签名,确认服务器公开密钥的真实性(证书的数字签名解密后,必须与服务端的公钥相同)。(证书里面有服务器的公钥,中间人能够拿到服务器的公钥,但他没有认证机构的私钥,无法加密生成数字签名,纂改证书)
2023-11-12 16:02:08 1334
原创 js 变量声明与赋值 笔试踩坑题
别小看变量声明与赋值,在所有的笔试中,基本都会考,这个要多变态就能多变态,但只要掌握基本的规律,我们就能游刃有余,面对一切困难。abc()abc()上面三段代码分别会发生什么?
2023-11-10 18:21:27 262
原创 js运算,笔试踩坑知识点
先乘除后加减,括号里的加减优先于括号外的乘除。先计算,后赋值,计算从左向右,赋值从右向左。符号在前,先计算再运行。符号在后,先运行再计算。
2023-11-10 10:43:56 342
原创 vue3 组件篇 Carousel
Carousel(走马灯)是一种常见的前端组件,通常用于展示多个项目(通常是图片或内容块)的轮播效果。它是网页和应用中的常见UI元素之一,通常用于滚动广告、产品展示、图片轮播、新闻滚动等场景。图片/内容轮播:Carousel能够以水平或垂直的方式,循环地显示多个项目,使用户能够逐个或自动浏览这些项目。自动播放:通常,Carousel支持自动播放功能,允许项目在不需要用户干预的情况下自动切换。导航控件:通常,Carousel提供导航控件,如箭头或小圆点,用户可以点击它们来切换到不同的项目。
2023-11-06 21:52:15 2048 3
原创 vue3 组件篇 Icon
Icon(图标)组件是一种常见的用户界面元素,用于在网页、移动应用和桌面应用中显示图标。这些图标通常用来传达信息、进行导航、增强用户界面或提供视觉元素。
2023-11-06 10:11:12 385
原创 node 版本管理工具(nvs)
前端程序员面对的项目,可能一对多,而这多个项目可能是以前遗留下来的老项目,这些老项目中各有各的依赖,并不是最新版本的node就能兼容所有不同的开发项目。比如一个项目需要用到node v16,另外一个项目必须用node v14才能正常编译运行,因此,单独下载一个node版本,已经不能满足开发需求,我们需要同时开发这两个老项目,让node的版本,在对应的项目中不停切换,这就需要node版本管理工具来实现。
2023-10-26 15:36:58 193
原创 前端js面试题 (一)
10道常考的js面试题,有的经常被面试官问,有的又是笔试题中常见的,有的只是一些基本的概念,真正掌握了才能应对日常的开发。
2023-09-20 17:55:21 255
原创 css前端面试题(三)
一些css面试题讲解,即使没看过第一部分和第二部分也没关系,它们都是独立的。每一道题都有详细的讲解和说明,帮助你更好的理解,希望大家都能面试成功!!
2023-09-15 18:06:41 453
原创 前端css面试题 (一)
一些常见的css面试题,也可以说是一些前端开发人员必备的css知识点,希望大家都能掌握,顺利通过面试,拿到满意的offer
2023-08-23 15:00:16 973
原创 inline的盒子设置transform不生效
最近在开发过程中,因为需要对一个icon进行旋转,而icon本身,是设置span的伪类来进行的,结果我发现无论怎么设置transform都无法使其生效。
2023-08-03 10:35:00 1009
原创 flex盒子 center排布,有滚动条时,拖动滚动条无法完整显示内容
最近在开发项目的过程中,发现了一个有趣的事情,与flex盒子有关,不知道算不算是一个bug,不过对于开发者来说,确实有些不方便,感兴趣的同学不妨也去试试。
2023-07-26 11:14:30 1245 2
原创 构建方便残障人士使用的网站 web enhance the accessibility
网站的构建往往会忽略一群特殊的人群,在某些方便存在障碍的网民,比如帕金森综合征,红绿色盲,视力存在一定问题等。帕金森综合征是无法正常使用鼠标的,所以只能依靠键盘来与网站交互。还有颜色辨识障碍的,可能对哪些可交互,哪些不可交互无法准确识别。视力存在问题就更加麻烦,他们也许需要将字体放大或者完全依靠读屏软件辅助识别网站的类容。目前国内对这些群体在网站上的体验并没有太大关注,因此开发者也并未思考过,如何帮助这特殊人群浏览自己编码的网站。实际上,web有一套标准用来指导开发者,如何在编码的过程中,帮助他们。
2023-06-06 11:24:52 359
原创 web开发 处理多媒体文件
img标签是没有跨域限制的,图片的url在a网站可用,在b网站同样可用,而且图片的加载和整体dom的渲染是异步的,对本项目的影响较小。缺点也很明显,如果图片的url被不怀好意者利用,将会对图片上传的网站构成威胁,维护也不方便,如果图片被上传网站删除或者更改,所有使用图片链接的网站都会收到影响。解析加载快,不需要额外下载,只是会增加代码的体积,但相对于8k以下的图片来说,增加的代码体积会更小,所以比较划算。gif格式的优点也很明显,可以透明的,而且采用无损压缩,尺寸相对较小,支持动图,兼容性很好。
2023-05-15 17:32:24 525 1
原创 vue3 组件篇 Affix
Affix是一种常用于前端界面设计的组件,它可以让网页元素固定在页面中的某个位置,随着用户的滚动而保持不变。通常用于固定导航栏、侧边栏等。通过设置相应的CSS样式和JavaScript代码,我们可以轻松地实现Affix组件的效果。Affix可以增强网页的用户体验,让用户在页面滚动时能够方便地访问重要的导航链接或信息,提高页面的可用性。
2023-04-20 10:52:38 1111
原创 nodejs篇 express(4) express + art-template创建网站基础
为了适用越来越复杂的网站业务和用户交互,前后端分离已经好多年,但在web发展的最初,并没有什么vue、react之类的mvvm的框架,也没有所谓的单一页面响应(SPA),那网页的渲染是如何实现的呢?一个网站所需的资源统一由服务端直接在本地库中读取文件(以index.html为例),然后,根据用户的不同,替换所读取文件index.html中的文本。当然除了html,服务端也会返回所有网站所需的静态资源,css,js,字体图标等等。
2023-04-06 17:33:47 635
国家或地区,中文名称与对应的地理坐标
2023-02-23
常用国家或地区 英文简写与地理坐标
2023-02-23
flexible.js 实现响应式布局
2022-11-01
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人