合集-Web前端入门
摘要：HELLO，这里是大熊学习前端开发的入门笔记。 本系列笔记基于 windows 系统。 在入门之前，是否有这样的疑问： 程序员的英语是否很牛？毕竟程序员的代码像天书一样，比如这样： 答案是否定的。 英语并不是编程的前置条件，不要被看似天书的代码吓到，程序代码都存在一定的语法结构，英语能看懂26个字母
阅读全文
摘要：一个完整的Web项目有哪些角色参与？ 提出需求（这一步可以是甲方，也可以是用户） 需求分析，画出原型图（产品经理） 根据原型图输出 UI 界面及交互图（UI/UX设计师） 根据UI及交互效果画出页面，并与后端联调接口（前端工程师） 根据需求完成后端逻辑开发，并输出接口文档（后端工程师） 前后端联调完
阅读全文
摘要：Web前端开发技术学习路径 基础知识 必备 HTML+CSS+JavaScript ，就目前来看，这三板斧是入门前端开发的门槛，无论如何都是逃不掉了。 进阶知识 必须会一门主流的前端框架，比如：React/Vue/Angular/Svelte，就国内的从业环境来看，Vue占有绝对优势，后续也会写一些
阅读全文
摘要：HTML、CSS、JavaScript 的核心作用 HTML：网页的骨架 功能：定义页面的内容结构（如按钮、表格、图片）。 示例：<button>提交</button> 创建一个可点击的按钮。 类比：如同房屋的钢筋水泥结构。 CSS：网页的视觉设计 功能：控制布局、颜色、动画、响应式适配。 示例：b
阅读全文
摘要：创建一个文件夹，并打开文件夹，在文件夹中创建一个 5.txt 文件，双击打开记事本编辑。 输入 Hello, World! ， Ctrl + s 保存。 修改文件名为 5.html 。 打开浏览器，将 5.html 文件拖到浏览器中打开。 以上步骤完成，也就一脚踹开程序开发的大门，完成了程序入门的经
阅读全文
摘要：HTML的全称为超文本标记语言（HyperText Markup Language），基础语法结构由标签、元素、属性和内容组成，遵循层级嵌套的树形结构。 关键语法规则 标签（Tags） 双标签语法 标签成对出现，由一个开始标签和结束标签组成。如： <div></div> 单标签语法 标签只有开始标签
阅读全文
摘要：HTML 标签语法遵循层级嵌套的树形结构，如果写出来的代码不是树形结构，浏览器会怎么渲染？ 注意：以下截图都来源于 Chrome 浏览器，不同浏览器可能会产生不同的渲染结果。 先看正常代码 <section> <span>span标签</span> <div>div标签</div> <p>我是p1标
阅读全文
摘要：HELLO，这里是大熊学习前端开发的入门笔记。 本系列笔记基于 windows 系统。 先电脑端浏览器打开任何一个网页，比如百度。 再用 ctrl + u 快捷键即可查看源码，瞅瞅第一行代码，是不是都是 <!DOCTYPE xxx> 开头。 是否好奇这这行代码有嘛用？ DOCTYPE 语法规则 声明
阅读全文
摘要：HELLO，这里是大熊学习前端开发的入门笔记。 本系列笔记基于 windows 系统。 HTML 中的元素根据其默认的 显示类型 主要分为三类：块级元素、内联元素 和 内联块元素。 它们的核心区别在于布局行为和样式控制的支持程度。 块级元素 块级元素（Block Elements）是指在 HTML
阅读全文
摘要：HELLO，这里是大熊学习前端开发的入门笔记。 本系列笔记基于 windows 系统。 曾经有一个神奇的 bug 摆在我面前，为什么套娃一样的 HTML 语法，在段落标签 <p> 身上不生效？ 上源码 注意源码中 p 标签分别嵌套了 span 、 p 、 div 标签。 <!DOCTYPE html
阅读全文
摘要：HELLO，这里是大熊学习前端开发的入门笔记。 本系列笔记基于 windows 系统。 截止发文，MDN 收录的 HTML 全量标签有 126 个，有 18 个标记已弃用。 名词解释：MDN MDN Web Docs （ 前身为 Mozilla Developer Network ） 是一个开源的、
阅读全文
摘要：HELLO，这里是大熊学习前端开发的入门笔记。 本系列笔记基于 windows 系统。 HTML 常用属性大约 70 个，是否又头大了？脸上笑嘻嘻，心里嘛...嘿嘿... 温馨提示：属性不用死记硬背，多练多写慢慢就记住了。 全局常用属性 全局属性为 HTML 元素的通用属性，可以在任何元素上使用。
阅读全文
摘要：HELLO，这里是大熊学习前端开发的入门笔记。 本系列笔记基于 windows 系统。 注意：以下截图都来源于 Chrome 浏览器，不同浏览器可能会产生不同的渲染结果。 思考一个问题：英文写法都分大小，HTML 标签和属性的大写和小写是否不一样？ 标签大小写 先看代码 <!DOCTYPE html
阅读全文
摘要：HELLO，这里是大熊学习前端开发的入门笔记。 本系列笔记基于 windows 系统。 语义化：通俗地说，就是让机器可以理解编写出来的 HTML 代码。比如：搜索引擎、屏幕阅读器等。 非语义化写法 网站结构大概这样： <div class="header"></div> <div class="na
阅读全文
摘要：HELLO，这里是大熊学习前端开发的入门笔记。 本系列笔记基于 windows 系统。 HTML的魔法世界，多姿多彩，千变万化。 授人以鱼不如授人以渔，文档阅读是开发者必备的技能，毕竟代码出现 BUG，也要知道为什么会出现 BUG 吧。 就像车辆使用手册一样，多翻翻使用手册，总会发现一些小惊喜的~~
阅读全文
摘要：HELLO，这里是大熊学习前端开发的入门笔记。 本系列笔记基于 windows 系统。 有没有好奇，前面文章中的截图是怎么来的？怎样查看 HTML 的渲染结果？ Web 开发者的照妖镜 曾经火狐（ Firefox ）是 Web 前端开发者最喜爱的浏览器，因为他家有一个神器 firebug 方便调试前
阅读全文
摘要：HELLO，这里是大熊学习前端开发的入门笔记。 本系列笔记基于 windows 系统。 虽然说 Web 前端开发用记事本也能玩，但正常的开发者绝不用记事本玩（大佬除外）。 想想要用记事本扣一个淘宝、京东，那场景可真是美呆了。 一个好的编辑器，绝对可以事半功倍的。 编辑器可以提供哪些功能 语法高亮：
阅读全文
摘要：HELLO，这里是大熊学习前端开发的入门笔记。 本系列笔记基于 windows 系统。 CSS 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。 来源：百度百科 简单
阅读全文
摘要：HELLO，这里是大熊学习前端开发的入门笔记。 本系列笔记基于 windows 系统。 上岸第一剑，先斩...内联样式~ 内联样式弊端 关系的发展都是一步一步的，内联样式最终还是被取代了，原因是它太死脑筋了，不够灵活。 如多个元素的样式都长一样，代码就成这样了： <p style="color: r
阅读全文
摘要：HELLO，这里是大熊学习前端开发的入门笔记。 本系列笔记基于 windows 11 系统。 HTML 页面内容越来越多，势必 CSS 也会跟着膨胀，如果 CSS 还是用内部样式表，那会导致 HTML 页面代码行数将会超长，这时候聪明的人类就会想到把 CSS 抽离出来单独管理，这时候外部样式表就诞生
阅读全文
摘要：HELLO，这里是大熊的前端开发笔记。 先了解一个关键词 FCP (First Contentful Paint): 首次内容绘制，指的是浏览器渲染来自 DOM 的任何内容（包括文本、图像、SVG 等）的时间点。这是用户第一次看到页面上出现的内容，标志着页面开始有内容展示给用户。 使用 开发者工具
阅读全文
摘要：HTML 在语法上并无大小限制，所以其结构可以浩瀚无边，CSS 选择器的作用则是在这些复杂的 HTML 结构中进行元素定位。 示例代码 记住此代码，后面所有的 css 选择器都是基于此代码。 注意：代码中存在两个一样的 id="p1" 元素，仅为了演示效果，正常编码中请保证 id 唯一性。 <!DO
阅读全文
摘要：任何地方都存在阶级，CSS 选择器也不例外，也会讲一个三六九等。 选择器类别 通配符选择器 标签选择器 类选择器 ID选择器 属性选择器 伪类选择器 伪元素选择器 关系选择器 流传已久的阶级划分 选择器 权重 继承父标签的样式、* 通配符选择器 0,0,0,0 标签选择器 0,0,0,1 类选择器、
阅读全文
摘要：单位就是那个形容长度大小的东西。比如身高180cm(厘米)，cm就是单位。 css 也不例外，要描述一个盒子的大小，就必须要用到单位。 css 单位根据其作用分为几大类：绝对单位、相对单位、视口单位、角度单位、时间单位、网格单位、频率单位、分辨率单位。 动态计算单位 认识单位之前，先认识几个动态计算
阅读全文
摘要：曾经，CSS 颜色的写法很专一，就只有十六进制写法（#ff0000）和关键字写法（red）。 现在，它变了，变得花样多了，各种招式眼花缭乱。 以红色（red）为例： 1. 颜色关键字 直接使用预定义的颜色名称： color: red; 解释 直接使用关键词 red。 2. 6位十六进制 使用完整的
阅读全文
摘要：学编码之前，当先学排查问题的能力。 在那个 IE 浏览器 当道的时代，前端开发简直就是刀耕火种一般，一个简单的圆角模块，嘿...不好意思，它不支持，用图片吧。 但凡经历过 IE 的洗礼，就会知道当时哪些 红极一时 的浏览器 bug，特别是 IE 6，它真是一个 老六 啊，悄悄咪咪的挖了好多坑，刚填平
阅读全文
摘要：埋头苦写多年的 CSS，从没注意到 CSS 被浏览器分了类，直到偶然的一次翻阅开发者工具，才发现原来 CSS 属性也被浏览器归类收纳了。 Chrome 下面是 Chrome 的开发者工具中 CSS 的属性归类截图，一般情况都不会注意它，毕竟代码不出问题，谁会关心 CSS 属性是哪一类？ 当我偶然看到
阅读全文
摘要：截止发文， MDN 收录的 CSS 属性大约 135 个（不包括特定浏览器的属性，所有可合并的属性算作一个，比如 margin-left 和 margin-right 都记作一个属性）。 这些 CSS 属性中，老师傅也有见过的，用过的，也有没见过的，甚至都没听过的。 这些属性中有高频使用的，也有基本
阅读全文
摘要：在 Web 网页开发中，盒模型（Box Model） 是 CSS 的核心概念，它决定了每个 HTML 元素在页面中占据的空间和布局方式。 无论是文本、图片还是按钮，浏览器都会将它们视为一个矩形盒子，并通过盒模型的规则计算其尺寸和位置。 Web 网页开发，就是把一个个的盒子摆在正确的位置，堆叠成好看的
阅读全文
摘要：CSS 盒模型是基石，文本和字体则是盒子内容的重要组成部分。毕竟清水房有了，软装也得跟上啊。 字体常用属性 font-family 定义字体类型（如： Arial, "Microsoft YaHei", sans-serif）。 特别说明，字体定义有优先级，比如： font-family: Inte
阅读全文
摘要：background 可设置背景色、渐变、背景图等，本文主要讲解背景图片的用法。 背景顾名思义就是背后的景色，始终居于元素背后，元素永远站在背景的身前。 本文示例中所使用的图片： background 背景 background 此属性是一个简写，其包含的内容有点多： background-clip
阅读全文
摘要：渐变背景在 CSS 里面就是一个颜色到另一个颜色渐渐变化的样子。 本文示例中，盒子基础样式： .box { margin: 20px; padding: 20px; border: 10px dashed rgba(0,255,0,1); width: 250px; height: 180px; }
阅读全文
摘要：background 作为元素外观里的重点功臣介绍完毕，本文再一览其他常用的外观属性。 本文示例中，盒子基础样式： .box { font-size: 20px; margin: 20px; padding: 20px; width: 250px; height: 180px; border: 10
阅读全文
摘要：Web 网页中，所有元素都是盒模型构成的，一个大盒子套一个或者多个小盒子，再用更大的盒子把大盒子给圈起来，这就构成了基本的 HTML 结构，再利用 CSS 把盒子装修得好看一些，最后把它放在正确位置，就是我们所看到的网页。 布局的作用就是要把元素摆放在合适的位置，让网页看起来不显得空闹闹的，也不要显
阅读全文
摘要：flex 作为现代布局方案中最常用的手段，有必要拉出来细说。 flex 相关的 CSS 属性 容器（父元素）相关的 CSS 属性 以下的 CSS 属性，在 flex 布局中需喂给父元素，设置 flex 布局中的盒子相关样式。 display 启用 flex 布局 flex-direction 主轴方
阅读全文
摘要：grid 网格布局与 flex 弹性盒子布局一样，都需要控制 容器 跟 子元素 的样式才能做出想要的效果，部分场景只控制 容器 样式也行。 grid 样式属性 一大堆 属性 来袭~~ 与网格相关的 CSS 属性有一大堆，毕竟要同时控制行和列（行、列也被称为 网格轨道 grid track）。 容器（
阅读全文
摘要：学习本文之前，建议先学习上一篇了解父元素的相关属性。 前文对 grid 网格布局中父元素容器相关的 CSS 属性做了详细介绍，本篇将继续学习子元素相关的 CSS 属性。 网格布局的一大波样式属性，父元素占据了大半江山，子元素嘛相对就少了一些~~ 本文中的中的示例基础代码： <div class="b
阅读全文
摘要：弹性盒子又称为 Flexbox，然而我更喜欢 flex 的叫法。 flex 弹性盒子和 grid 网格布局作为前端开发中两把利器，它们的分界线没那么明显，虽然按照 MDN 的说法 flex 多用于一维布局(行/列)，grid 多用于二维布局(行列网格)，但实际开发中用多个一维布局也能拼凑出一个完整的
阅读全文
摘要：CSS 的定位属性 position 可以把元素从文档流中拧出来，让其显示在其他位置。 但凡元素定位属性加身，元素位置便不再受文档流控制，这时候什么 flex、grid 都不好使了，定位的元素已然跳出三界外，不在五行中，这时候元素的位置由自身的偏移属性决定（top、right、bottom、left
阅读全文
摘要：CSS float 浮动属性最早用于文字环绕图片效果，就像传统报纸上的印刷排版一样。 CSS2 的规范推动了浮动用于其他元素，float 便被大范围应用于布局，当年常说的 div + css 布局，float 绝对占有一席之地，float 用于布局手段便颠覆了再之前的表格布局，如今表格只用于数据展示
阅读全文
摘要：CSS transform 属性中文翻译过来是 变换，始终觉得翻译差那么一点意思。它可以用来改变元素形状，比如旋转、缩放、移动、倾斜等，就是它可以把元素各种拿捏~ transform 特性是在不改变自身尺寸的情况下，对元素进行各种变形，元素自身的文档流位置还是会保留，语言有些空洞，下面看例子。 笛卡
阅读全文
摘要：影响元素位置的 CSS 属性基本介绍完毕（参考前几篇文章），现思考一个最常见的需求： 一个子元素，要摆放在盒子的正中央，使用 CSS 布局手段，究竟有多少种实现方式？ 上下左右（水平方向、垂直方向）要同时居中，在 Web 领域应该算是非常常见的开发需求了，最最常见的地方就是弹窗，比如： 文本居中 先
阅读全文
摘要：CSS3 规范出现之前，要实现一个动画效果那必须借助 JavaScript 的能力才够得着，所以当时的前端开发但凡听到动画交互，那眉头可就成了一个川字儿了~ transition 的出现，改变了实现动画难的困境，也让前端的交互不再生硬，所有的页面元素如同有了灵性一般。 transition 过渡 要
阅读全文
摘要：相关属性 @keyframes 定义动画的关键帧序列 animation-name 指定 @keyframes 动画的名称 animation-duration 动画单次循环的持续时间（必需属性，否则动画不会生效） animation-timing-function 动画速度曲线 animation
阅读全文
摘要：HELLO，这里是大熊的前端开发笔记。 曾经主题切换功能可以作为软件中亮眼的卖点存在，毕竟那时候要实现换肤可不容易，一套主题一套样式，这代码的重复率嗖嗖嗖的就涨上去了~~当然也可以借助 CSS 预编译 语言编译出多套 CSS 样式表。 没有用觉得我们其实并不需要多套样式表实现换肤？我们只是想要一个像
阅读全文
摘要：数学函数可以用来做什么？ 最基础的当然是用来进行四则运算了，再进一步可以用来平方，对数，幂，绝对值，取余等，当然还可以用来计算三角函数。 CSS 中的数学函数 灵活运用 CSS 中的数学函数，可以抛弃很多原本需要 JS 才能实现的布局场景。 calc() 最基础的四则运算函数，对头，就是用来做小学就
阅读全文
摘要：@media 媒体查询的出现解决了什么问题？ 曾经，一个网页要兼容移动端和 PC 端，前端的代码复杂度嗖嗖嗖的飙升，需要使用多套代码对各种屏幕尺寸做适配。 @media 的出现解决了 CSS 中无法适配设备尺寸的问题，让 CSS 拥有了处理简单逻辑的能力。 媒体查询就像进店试穿衣服一样，穿得上，咱就
阅读全文
摘要：什么是瀑布流？ 看一张图，以下图片来源于花瓣网截图： 如上图所示，瀑布流就是让内容按列显示，自动填充空白。 使用 column 实现瀑布流 源码： <div class="masonry"> <div class="item"> </div> <div class="item"> </div> <d
阅读全文
摘要：什么是路径动画？ 随手画一条不规则的线，让元素按照这条不规则的线运动起来，这就是所谓的路径动画。 前面说过的动画都只能针对某一个 CSS 属性，要想实现路径动画可没办法，路径动画必须借助 CSS3 的 offset 相关能力。 offset 相关属性 要实现路径动画，必须用到 offset 的相关属
阅读全文
摘要：溢出：盒模型装不下内容的时候，超出盒子大小的内容就称之为内容溢出，这里的内容又分为盒模型和文本，所以 CSS 在处理溢出时候也分为文本和盒模型两种情况。 正常情况内容溢出应该换行自动撑开盒子大小，但某些情况下我们盒子大小可能是固定的，不允许自动撑开盒子大小，这种情况就需要处理溢出情况。 盒子溢出 盒
阅读全文
摘要：经常查看网页源码的同学应该都有注意到，基本上面向移动端的所有网站都有个 <meta name="viewport" xxx> 这样的HTML元素。 为什么需要 meta 标签？ 在移动端刚起步的时候，默认网页是以 PC 端的宽度渲染，这就导致用户看到的网页过小，需要用户手动缩放才能看到网页内容。 在
阅读全文
摘要：截至目前，您应该对前端的 HTML + CSS 应该有了很清楚的认知，至少实现一个静态网页已经完全不在话下了。 当然，CSS 功能绝不止这些，一些不太常用的 CSS 相关知识，后续将通过案例进行分享。 那么咱们接下来看看 JavaScript 的相关知识，作为前端领域三剑客之一，JavaScript
阅读全文
摘要：任何一门编程语言，在学习之前都应该先弄清楚它的调试方法，毕竟没有不挖坑的人类！ 程序一旦出现问题，第一时间就是找到问题出在哪儿，其次才是拿出解决办法。如果都找不到问题原因，那又何从谈起解决办法呢？ 如何排查编程问题，这就是一门艺术了，同样的问题，也许 A 只需要 10 分钟，B 可能需要 30 分钟
阅读全文
摘要：JS 的代码并没有强制规定放在 HTML 中的某个位置，如果您有使用过开发者工具查看过网页源码，那么您会看到很多 JS 代码都以 .js 文件的形式存放，并且放在了 HTML 文件最后，也就是 </body> 结束标签之前。 但如果仔细观察，在 <head> 标签中，也会找到很多 script 标签
阅读全文
摘要：JavaScript 默认是非严格模式的，可以通过 "use strict"; 启用严格模式。此声明语句可以放在 JS 文件顶部，也可以放在函数内部。 启用严格模式 1、外部脚本在 JS 文件开头声明，内部脚本在 <script> 标签开头声明，声明后所有 JS 代码启用严格模式： "use str
阅读全文
摘要：曾经 var 如帝王一般统治过 JS 的变量声明，直到后来大佬们实在是忍不了 var 那稀烂的声明规则，便引入了 let 和 const 这两大刀斧手，var 被轻轻松松的斩落马下，如今，再难看见 var 的身影。 变量声明 在 JS 中，所有变量都可以用 var、let 和 const 这三个关键
阅读全文
摘要：在程序语言中，数据类型是基础，一切程序都是建立在基础数据之上。 如果说程序如同万丈高楼平地起，那么数据类型就像沙、石、钢筋、水泥等等最基础的原料。一样的高楼，不同的人，用相同的原料，造的方法也会有千般变化。 在 JS 中，数据类型可以分为 原始类型 和 对象类型。 原始类型 直接存储值，不可变（值的
阅读全文
摘要：运算符 JavaScript 运算符是真的多，尤其是 ES6 之后还在不停的加运算符，其他编程语言看 JS 就像怪物一样，各种骚操作不断~~ 运算符分类 1、算术运算符 算术运算符的作用就是用来基础计算，跟小学课本一样，包含：加 +，减 -，乘 *，除 /，取余（也叫做取模） %，指数 **，自增
阅读全文
摘要：条件语句 JS 的条件语句不太多，就 if 和 switch 两个，不过他们的使用方式也可以算是眼花缭乱了。 if 语句 if 字面意思：如果 xxx。程序中的用法也是这样，如果条件为真，则执行执行代码块，反之则不执行。 语法： if (条件) { // 条件为真时执行 } else if (其他条
阅读全文
摘要：数组可以算是程序里面最常用的数据结构了，但凡网页上任何一个列表数据，基本都是以数组的形式存在，像表格、banner图、菜单列表、商品列表，分类列表等等，在前端领域都是以数组处理。 数组的定义 JS 的数组花样很多，不像其他强类型语言中的数组限制颇多。 数组中的元素 JS 数组中的元素可以是任何类型，
阅读全文
摘要：曾经有人说 JS 语言中万物皆对象，虽然这种说法不一定完全准确，但也有一定的道理。原因是 JS 的语法看起来所有的数据类型都像是一个对象，包括原始类型。 const a = 1.234; console.log(a.toString()); console.log(a.valueOf()); con
阅读全文
摘要：HELLO，这里是大熊的前端开发笔记。 循环作为 算法与数据结构 中的基石，JS 与其他编程语言一样，都提供了多种循环结构用于处理数据。 for 循环 事物的开端往往都是从最常用的开始，循环结构咱们从 for 循环说起。 语法： for (初始化; 条件; 增量) { // ... } 示例： //
阅读全文
摘要：神奇的 for 循环代码执行顺序并不是按照代码书写顺序执行，这就导致在看很多程序算法的时候，会有那么一点打脑壳。 for 语法 for 循环的语法很简单，重点是小括号里面的三个部分，这三部分的执行顺序对于不太懂程序的兄弟来说，可以把人晃晕~ for (初始化; 条件; 增量) { // 循环体 }
阅读全文
摘要：函数 作为 JS 的一等公民，随处可见它的身影。 我理解的它最主要作用就是用来提取重复代码，但凡有 JS 代码需要复制粘贴的时候，那么这时候就可以考虑使用函数封装了。 当函数写在对象中的时候，这时候它变了一个名字，称之为 方法。 function 声明 在使用 function 关键字声明函数时，需
阅读全文
摘要：函数参数是什么？ 就是函数内部无法确定的一个东西，需要外部传给函数内部的玩意儿，语法上就是写在函数括号中的东东。比如： function test(a) {} 其中的 a 就是 test 函数的参数，在函数体内部，a 作为一个变量存在，可以修改它。 JS 的函数参数，真的是可以传入任意值，没有任何限
阅读全文
摘要：什么是作用域？ 就像孙悟空给唐僧画个圈圈一样，这个圈圈就可以称之为作用域，这个比喻可能不太形象。 作用域和孙悟空的圈圈还是有点区别，作用域内部可以获得作用域外部的变量，而内部的变量无法逃逸到作用域外面，如果逃逸出去了，那就造成内存泄漏了，程序将会出现崩溃！ 全局作用域 可以理解为就是放在 JS 最外
阅读全文
摘要：此 对象 非彼对象啊，不要理解错了哦~~ 面向对象编程 这个概念在 Java 编程语言中用得比较多，JS 同时支持 面向对象编程 和 函数式编程。 像大名鼎鼎的 React 和 Vue 他们都有两种开发风格，比如： Vue 中的 组合式API 和 选项式API 也是两种编程模式的代表。 React
阅读全文
摘要：JS 是单线程语言。这句话对不对？ 按照目前的情况来看，JS 自从支持了 Web Worker 之后，就不再是单线程语言了，但 Worker 的工作线程与主线程有区别，在 Worker 的工作线程中无法直接操作 DOM、window 对象或大多数浏览器 API（如 localStorage），Wor
阅读全文
摘要：Promise 这个 API 曾在 JS 领域掀起过血雨腥风，以前的大佬们都喜欢手搓一个自己的 Promise 用以理解 Promise 的原理。 Promise 的诞生，应该多少都有受到 jQuery 的异步方法 $.Deferred() 影响。 应用场景 Promise 唯一作用就是在处理异步耗
阅读全文
摘要：虽然目前的开发场景基本都是使用 React/Vue/Angular 等框架，但是对于一些基础的 DOM 操作，还是需要了解学习。 曾经我们讨论过这样一个问题：Vue 这些开发框架，用它们渲染页面，真的就比不用开发框架快吗？ 其实这个问题很好回答的，开发框架只是优化了项目的开发效率，对于浏览器的渲染速
阅读全文
摘要：有一个深有体会的事：发现现在很多前端同学，经常用 Vue 开发项目之后，在某些需求场景要操作 DOM 节点的时，就不知道咋办了~~ 以前接手过其他开发团队的项目，项目被漏洞扫描工具发现了异常，原因是用了一个 vue-video-player 插件用于播放视频，这插件又依赖了低版本的 video.js
阅读全文
摘要：当项目的安全团队找上门告诉您，您开发的项目存在 XSS 安全漏洞，作为一个开发人员，就问您慌不慌？？ HTML 内容写入的时候，如果稍不注意就会触发隐藏 BOSS 漏洞 XSS。 XSS 漏洞原理就是利用了网站上内容输入的地方，比如说常见的评论提交，老六 通过输入评论的地方，提交一些 包含 JS 代
阅读全文
摘要：网页上各种炫酷的交互效果离不开各种 DOM 事件 的支持，在写这篇文章之前，一度以为 JS 的事件绑定/取消方式就我知道的那几种，翻阅文档之后才发现，知识面还是有待提升，多翻翻文档，就像发现新大陆一样~~ 常用事件 鼠标事件： click：鼠标左键单击 dblclick：鼠标左键双击 mousedo
阅读全文
摘要：在讨论冒泡和捕获之前，先看这么一段代码： <style> .bd { border: 1px solid #000; padding: 8px; } </style> <div id="container1" class="bd"> 外层 <div id="container2" class="bd
阅读全文
摘要：如今 Vue 大行其道，大部分开发场景直接使用 @click 就实现了事件绑定，可能都没思索过 JS 中的事件性能优化。 事件委托原理 事件委托 其主要是利用了事件冒泡这个特性。 以点击事件 click 为例：将事件绑定在父元素上，点击子元素会通过冒泡的方式触发父元素的点击事件。这种绑定事件的方式，
阅读全文
摘要：题外话 在考察事件基础的时候，会经常被问及 click、mousedown、mouseup 它们三者执行的先后顺序是怎样的？ 如果平时没太注意，这细节可能就会忽略，毕竟很少会在同一个元素上面同时绑定这三个事件~~ 直接上示例： <div class="c">测试点击事件</div> <script>
阅读全文
摘要：开发中经常会遇这样的需求：点击 A 元素的时候，需要触发 B 元素的事件，比如：点击一个 div 元素，然后触发 input:file 的 click 事件，用来选择文件上传。 click 方法 以上需求可通过元素的 click 方法触发： <style> .test2 { padding: 4px
阅读全文
摘要：在 ES6 之前，JS 的多行字符串一直是开发难题，在处理多行字符串时，各种各样的方案都有~~ 在 JS 中，如果直接这样写多行字符串： const str1 = '第一行 第二行'; 那浏览器转过来就打脸，分分钟报错： Uncaught SyntaxError: Invalid or unexpe
阅读全文
摘要：JS 中异步任务随处可见，比如： 1、用户交互的点击、输入 2、网络请求的 fetch、ajax、WebSocket 3、资源中的图片、脚本加载 4、定时任务 setTimeout、setInterval、动画 5、Web Worker 中的后台任务 以上这些地方都能见到 JS 异步任务使用场景。
阅读全文
摘要：前端开发一直有种错觉，好像异常捕获都是后端的事，毕竟后端开发时如果不处理代码中的异常，有些资源得不到释放，极其容易导致内存泄漏。 前端由于 JS 的垃圾回收机制无需手动释放资源，反而不会怎么使用异常捕获代码中的错误。实际上任何编程语言，要写出一个健壮性的代码，都需要考虑异常处理。 本文分析下哪些地方
阅读全文
摘要：前端的 cookie 读写在 2020 年之前一直不存在一个官方的接口，每次需要使用 cookie 的时候，要么是引入三方插件，要么就需要自己封装一个公用的组件或函数。 npm 的 cookie 插件周下载量 6 千万左右，可以想象一下此功能在前端的应用场景有多么广泛~~ cookie 插件: ht
阅读全文
摘要：面试时候经常会被问及 Cookie 大小限制，但一直没尝试写一些 demo 测试下溢出极限值会怎样~~ 本文就来看看各种极限情况！ 英文 测试代码： (() => { const maxSize = 4 * 1024; // 4KB const name = 'name' // 最大出入的 valu
阅读全文
摘要：本地存储除了 Cookie 外，还有 localStorage 和 sessionStorage，本文一探 localStorage。 localStorage 此 API 存入的数据会 永久 保存在浏览器中，除非用户手动删除。 localStorage 能用于同一浏览器同一域名跨标签页通信。 同一
阅读全文
摘要：sessionStorage 与 localStorage 差不多可以算作一对兄弟，它俩的暴露的 API 方法一模一样。 但两者也有不同点： 1、sessionStorage 存入的数据在页面关闭后，会自动清除。 2、相同 URL 的每个 tab 页签的 sessionStorage 会被隔离，互不
阅读全文
摘要：在前端风风雨雨的混了多年，从没在项目中实际使用过 IndexedDB 这个浏览器端的数据库，所以今天就摸了下 MDN 的后门，写一个简单的入门示例。 页面大概长这样： 源码： 以下代码包含了一个数据库所有的 CRUD （增删改查）操作。 <div> <button id="js_add_btn">添
阅读全文
摘要：最初的 JS 执行代码都是一条线执行到底，当遇到比较耗时的操作时，比如大数组循环运算，就会导致页面卡着，就像假死一样。就像一个人在厨房烧菜一样，需要依次完成切菜、炒菜、装盘这些步骤，此过程中没办法同时做其他事情，必须按顺序执行每一个步骤。 Web Worker 赋予了 JS 分配任务的能力，在遇到复
阅读全文
摘要：setInterval 和 setTimeout 两者都是用于控制 JS 函数延迟执行，但是在执行机制和用途上还是有点儿差异。 虽然说两者功能上有区别，但在使用上却可以相互模拟各自的功能，大胆的猜测下：也许浏览器内核底层都是同一个方法，只是上层封装出的两个语法糖而已。 语法 两者在语法上极其相似，除
阅读全文
摘要：HTML 版本不停的更新迭代，也导致浏览器支持的写法眼花缭乱，就拿 script 标签来说，刚刚入行的那会儿就只知道用来写内联的 js 代码，后来又学到了引入 js 文件，ES 模块规范化之后又知道能用来引入模块化的 js 代码，可这就是它的全部了吗？？ 然而...并不是！！！ 各种用法 看看 sc
阅读全文
浙公网安备 33010602011771号