获得徽章 0
@supports 是 CSS 中的一个条件规则,用于检测当前浏览器是否支持某些 CSS 属性和值。它的语法如下:
@supports (条件) {
/* 支持情况下应用的 CSS 规则 */
}
@supports not (条件) {
/* 不支持情况下应用的 CSS 规则 */
}
其中,条件部分可以是任何合法的 CSS 属性或属性值,浏览器会根据是否支持这些属性或值来决定应用哪一部分的 CSS 规则。
/* 如果浏览器支持 display: grid 则应用下面的规则 */
@supports (display: grid) {
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
}
/* 如果浏览器不支持 backdrop-filter 则应用下面的规则 */
@supports not (backdrop-filter: blur(10px)) {
.modal {
background-color: rgba(0, 0, 0, 0.5);
}
}
@supports (条件) {
/* 支持情况下应用的 CSS 规则 */
}
@supports not (条件) {
/* 不支持情况下应用的 CSS 规则 */
}
其中,条件部分可以是任何合法的 CSS 属性或属性值,浏览器会根据是否支持这些属性或值来决定应用哪一部分的 CSS 规则。
/* 如果浏览器支持 display: grid 则应用下面的规则 */
@supports (display: grid) {
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
}
/* 如果浏览器不支持 backdrop-filter 则应用下面的规则 */
@supports not (backdrop-filter: blur(10px)) {
.modal {
background-color: rgba(0, 0, 0, 0.5);
}
}
展开
评论
点赞
赞了这篇文章
## 事件委托机制
事件委托是 JavaScript 中常用的事件处理机制，它利用了事件冒泡的特性。事件委托的基本思想是将事件处理程序绑定到一个父元素，而不是在每个子元素上都绑定事件处理程序。
当事件发生时，事件首先在触发事件的元素上被处理，然后逐级向上冒泡至根元素，通过判断事件的目标（event.target）来确定是哪个子元素触发了事件。
优点：
性能提升： 在大量元素上绑定事件处理程序可能会影响性能，而事件委托可以减少事件处理程序的数量，从而提高性能。
动态元素： 对于动态生成的元素，事件委托是一种更方便的方式，不需要为新元素单独绑定事件处理程序。
示例：
html
<ul id="parentList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
// 使用事件委托将点击事件处理程序绑定到父元素
document.getElementById('parentList').addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
// 只处理 li 元素的点击事件
console.log('Item clicked: ' + event.target.textContent);
}
});
</script>
点击 <ul> 元素的任何 <li> 元素都会触发点击事件，但只有点击 <li> 元素时才会执行事件处理程序。这样就减少了需要绑定事件处理程序的元素数量，提高了性能。
事件委托是 JavaScript 中常用的事件处理机制，它利用了事件冒泡的特性。事件委托的基本思想是将事件处理程序绑定到一个父元素，而不是在每个子元素上都绑定事件处理程序。
当事件发生时，事件首先在触发事件的元素上被处理，然后逐级向上冒泡至根元素，通过判断事件的目标（event.target）来确定是哪个子元素触发了事件。
优点：
性能提升： 在大量元素上绑定事件处理程序可能会影响性能，而事件委托可以减少事件处理程序的数量，从而提高性能。
动态元素： 对于动态生成的元素，事件委托是一种更方便的方式，不需要为新元素单独绑定事件处理程序。
示例：
html
<ul id="parentList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
// 使用事件委托将点击事件处理程序绑定到父元素
document.getElementById('parentList').addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
// 只处理 li 元素的点击事件
console.log('Item clicked: ' + event.target.textContent);
}
});
</script>
点击 <ul> 元素的任何 <li> 元素都会触发点击事件，但只有点击 <li> 元素时才会执行事件处理程序。这样就减少了需要绑定事件处理程序的元素数量，提高了性能。
展开
评论
3
赞了这篇文章
赞了这篇文章
赞了这篇文章
#每天一个知识点#
## SPA (Single Page Application 单页面应用)
SPA 的主要目标是提供无缝的用户体验，通过在单个 HTML 页面中加载所有必要的资源和数据，实现快速的页面切换和减少页面刷新的需求。
SPA 和传统 Web 页面的区别：
页面加载方式:
SPA：在 SPA 中，初始页面加载后，所有或大部分内容都通过接口动态获取，不需要完全重新加载整个页面。
传统 Web 页面：传统 Web 页面在每个页面之间进行完整的页面刷新，导致页面重新加载。
前端路由:
SPA：SPA 使用前端路由，允许在单个页面上模拟多个页面，通过 URL 中的不同路径来切换内容。
传统 Web 页面：传统 Web 页面的导航和路由通常由服务器控制，需要加载不同的 HTML 页面。
用户体验:
SPA：SPA 提供更快的用户体验，因为它可以在不重新加载整个页面的情况下加载内容，还可以通过缓存等方式，从而减少等待时间。
传统 Web 页面：传统 Web 页面可能需要更长的加载时间，因为它们需要完全加载新页面。
## PWA (Progressive Web App 渐进式 Web 应用):
目标:
PWA 的主要目标是将 web 应用提升到与原生应用相媲美的水平，包括可离线访问、推送通知、安装到设备等功能，以提供更好的用户体验。
特点:
PWA 使用一系列的 Web 技术（包括 Service Workers）来实现离线支持、推送通知、缓存策略等功能。
具备逐步增强的特性，可以在支持的设备上提供额外的功能。
可以通过浏览器添加到主屏幕，使用户可以像原生应用一样启动应用。
即使在没有网络连接的情况下，它们也可以被访问到。
共同点:
SPA 和 PWA 都侧重于提供更好的用户体验。
两者都使用前端技术构建，包括 HTML、CSS 和 JavaScript。
它们都采用现代的前端开发方法，如组件化和前端框架。
## SPA (Single Page Application 单页面应用)
SPA 的主要目标是提供无缝的用户体验，通过在单个 HTML 页面中加载所有必要的资源和数据，实现快速的页面切换和减少页面刷新的需求。
SPA 和传统 Web 页面的区别：
页面加载方式:
SPA：在 SPA 中，初始页面加载后，所有或大部分内容都通过接口动态获取，不需要完全重新加载整个页面。
传统 Web 页面：传统 Web 页面在每个页面之间进行完整的页面刷新，导致页面重新加载。
前端路由:
SPA：SPA 使用前端路由，允许在单个页面上模拟多个页面，通过 URL 中的不同路径来切换内容。
传统 Web 页面：传统 Web 页面的导航和路由通常由服务器控制，需要加载不同的 HTML 页面。
用户体验:
SPA：SPA 提供更快的用户体验，因为它可以在不重新加载整个页面的情况下加载内容，还可以通过缓存等方式，从而减少等待时间。
传统 Web 页面：传统 Web 页面可能需要更长的加载时间，因为它们需要完全加载新页面。
## PWA (Progressive Web App 渐进式 Web 应用):
目标:
PWA 的主要目标是将 web 应用提升到与原生应用相媲美的水平，包括可离线访问、推送通知、安装到设备等功能，以提供更好的用户体验。
特点:
PWA 使用一系列的 Web 技术（包括 Service Workers）来实现离线支持、推送通知、缓存策略等功能。
具备逐步增强的特性，可以在支持的设备上提供额外的功能。
可以通过浏览器添加到主屏幕，使用户可以像原生应用一样启动应用。
即使在没有网络连接的情况下，它们也可以被访问到。
共同点:
SPA 和 PWA 都侧重于提供更好的用户体验。
两者都使用前端技术构建，包括 HTML、CSS 和 JavaScript。
它们都采用现代的前端开发方法，如组件化和前端框架。
展开
1
6
#每天一个知识点#
## 面试技巧
团队有hc了，不得不说现在只会写业务，在过程中没有自己的思考和实践的真的没有多大优势了，面了几个大厂的也不尽人意。
能过筛的其实基础都挺好，搁以前一面肯定是能过的，那大家基础都挺好，面试题都背的滚瓜烂熟怎么办？所以肯定要有新指标的，就是软素质，就是我之前一篇文章里提到的程序猿素养部分，包括沟通能力、独立解决问题能力、学习能力、分享和输出能力、 变革推新 、基础建设，总之，就是除了写业务需求之外还能够为团队做贡献的能力，但是真的很少，目前大概面5个人里能有一个有亮点的。
所以我觉得大家也不必花太多精力去卷面试题，背出花来你没有一些具体的应用实践能力又能怎么样。
提个建议，明确一下自己目前的定位，是不是只会写需求？有没有需求之外的贡献？即使只是写需求的话在开发时有没有一些自己的思考，提高维护性、扩展性、性能等，还是连写需求都敷衍了事？
现在确实是卷，没有办法，但是也希望大家能够卷对方向。
## 面试技巧
团队有hc了，不得不说现在只会写业务，在过程中没有自己的思考和实践的真的没有多大优势了，面了几个大厂的也不尽人意。
能过筛的其实基础都挺好，搁以前一面肯定是能过的，那大家基础都挺好，面试题都背的滚瓜烂熟怎么办？所以肯定要有新指标的，就是软素质，就是我之前一篇文章里提到的程序猿素养部分，包括沟通能力、独立解决问题能力、学习能力、分享和输出能力、 变革推新 、基础建设，总之，就是除了写业务需求之外还能够为团队做贡献的能力，但是真的很少，目前大概面5个人里能有一个有亮点的。
所以我觉得大家也不必花太多精力去卷面试题，背出花来你没有一些具体的应用实践能力又能怎么样。
提个建议，明确一下自己目前的定位，是不是只会写需求？有没有需求之外的贡献？即使只是写需求的话在开发时有没有一些自己的思考，提高维护性、扩展性、性能等，还是连写需求都敷衍了事？
现在确实是卷，没有办法，但是也希望大家能够卷对方向。
展开
1
4
赞了这篇文章
#每天一个知识点#
## ~/.bashrc 和 ~/.bash_profile 的区别
~/.bashrc：
用途：~/.bashrc 通常包含适用于每个Bash终端会话的配置设置。这些设置可能包括自定义别名、环境变量、提示符设置等。
加载时机：~/.bashrc 在每次新打开终端窗口或启动新的Bash终端会话时都会被加载。这意味着它包含的配置会对每个终端会话生效。
~/.bash_profile：
用途：~/.bash_profile 主要用于用户登录时的一次性设置。这些设置通常包括添加环境变量、执行一次性任务等。它在用户登录时执行，所以适合放置一些需要在整个会话期间保持不变的设置。
加载时机：~/.bash_profile 只在用户登录时执行一次，而不是每次新打开终端窗口。这使它适用于在用户登录时设置全局配置。
## ~/.bashrc 和 ~/.bash_profile 的区别
~/.bashrc：
用途：~/.bashrc 通常包含适用于每个Bash终端会话的配置设置。这些设置可能包括自定义别名、环境变量、提示符设置等。
加载时机：~/.bashrc 在每次新打开终端窗口或启动新的Bash终端会话时都会被加载。这意味着它包含的配置会对每个终端会话生效。
~/.bash_profile：
用途：~/.bash_profile 主要用于用户登录时的一次性设置。这些设置通常包括添加环境变量、执行一次性任务等。它在用户登录时执行，所以适合放置一些需要在整个会话期间保持不变的设置。
加载时机：~/.bash_profile 只在用户登录时执行一次，而不是每次新打开终端窗口。这使它适用于在用户登录时设置全局配置。
展开
评论
4
赞了这篇文章